s4y-ui 5.3.1 → 5.3.2
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 +1649 -190
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +4 -3
- package/lib/components/collapse/collapse-panel.component.d.ts +65 -0
- package/lib/components/collapse/collapse.component.d.ts +47 -0
- package/lib/components/collapse/collapse.module.d.ts +25 -0
- package/lib/components/collapse/index.d.ts +3 -0
- package/lib/components/confirmation/confirmation.component.d.ts +23 -0
- package/lib/components/confirmation/confirmation.service.d.ts +34 -0
- package/lib/components/dynamic-dialog/dynamic-dialog.component.d.ts +4 -2
- package/lib/components/dynamic-dialog/dynamic-dialog.ref.d.ts +6 -1
- package/lib/components/dynamic-dialog/dynamic-dialog.service.d.ts +7 -6
- package/lib/components/dynamic-dialog/dynamic-dialog.tokens.d.ts +1 -1
- package/lib/components/dynamic-loading-global/dynamic-loading-global.component.d.ts +6 -0
- package/lib/components/dynamic-loading-global/dynamic-loading-global.service.d.ts +13 -0
- package/lib/components/dynamic-loading-global/index.d.ts +1 -0
- package/lib/components/dynamic-tooltip/dynamic-tooltip.component.d.ts +6 -0
- package/lib/components/dynamic-tooltip/dynamic-tooltip.directive.d.ts +26 -0
- package/lib/components/image/components/image-preview/image-preview.component.d.ts +22 -0
- package/lib/components/image/image.component.d.ts +31 -0
- package/lib/components/image/image.service.d.ts +12 -0
- package/lib/components/image/index.d.ts +2 -0
- package/lib/components/modal/modal.component.d.ts +3 -1
- package/lib/components/rating/rating.component.d.ts +40 -0
- package/lib/components/search-bar/search-bar.component.d.ts +6 -1
- package/lib/components/summary-card/summary-card.component.d.ts +22 -0
- package/lib/components/tag/tag.component.d.ts +28 -0
- package/package.json +1 -1
- package/public-api.d.ts +8 -0
- package/src/assets/icons/fullscreen-exit-line.svg +1 -0
- package/src/assets/icons/fullscreen-line.svg +1 -0
- package/src/assets/icons/refresh-line.svg +1 -0
- package/src/assets/icons/zoom-in-line.svg +1 -0
- package/src/assets/icons/zoom-out-line.svg +1 -0
- package/src/scss/styles.scss +255 -2
- package/src/scss/styles.scss.map +1 -1
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, InjectionToken, Injector } from '@angular/core';
|
|
2
|
+
import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender, SecurityContext, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/platform-browser';
|
|
@@ -7,23 +7,24 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|
|
7
7
|
import * as i1$2 from '@angular/router';
|
|
8
8
|
import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
|
|
9
9
|
import { catchError, map, filter } from 'rxjs/operators';
|
|
10
|
-
import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take } from 'rxjs';
|
|
10
|
+
import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take, finalize, catchError as catchError$1, of } from 'rxjs';
|
|
11
11
|
import * as i1$3 from '@angular/cdk/scrolling';
|
|
12
12
|
import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
|
|
13
13
|
import * as i2 from '@angular/forms';
|
|
14
14
|
import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
|
|
15
15
|
import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
|
|
16
16
|
import { Overlay } from '@angular/cdk/overlay';
|
|
17
|
-
import { TemplatePortal,
|
|
17
|
+
import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
18
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
18
19
|
|
|
19
20
|
class DashboardLayoutComponent {
|
|
20
21
|
asideTemplate;
|
|
21
22
|
navTemplate;
|
|
22
23
|
rightPanel;
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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"] }] });
|
|
25
26
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardLayoutComponent, decorators: [{
|
|
27
28
|
type: Component,
|
|
28
29
|
args: [{ selector: 's4y-dashboard-layout', standalone: false, template: "<div class=\"s4y-dashboard-layout\">\r\n @if (asideTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"asideTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-aside\"></ng-content>\r\n }\r\n <div class=\"s4y-dashboard-layout__content\">\r\n @if (navTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"navTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-navbar\"></ng-content>\r\n }\r\n <ng-content select=\"s4y-dashboard-routes\"></ng-content>\r\n </div>\r\n @if (rightPanel) {\r\n <ng-container [ngTemplateOutlet]=\"rightPanel\"></ng-container>\r\n }\r\n</div>\r\n", styles: [".s4y-dashboard-layout{height:100dvh;width:100dvw;display:flex;overflow:hidden}.s4y-dashboard-layout__content{flex-grow:1;position:relative}\n"] }]
|
|
29
30
|
}], propDecorators: { asideTemplate: [{
|
|
@@ -66,10 +67,10 @@ class AsideService {
|
|
|
66
67
|
window.removeEventListener('resize', this.resizeHandler);
|
|
67
68
|
}
|
|
68
69
|
}
|
|
69
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
70
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
71
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AsideService, providedIn: 'root' });
|
|
71
72
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AsideService, decorators: [{
|
|
73
74
|
type: Injectable,
|
|
74
75
|
args: [{
|
|
75
76
|
providedIn: 'root',
|
|
@@ -79,10 +80,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
79
80
|
class NavbarComponent {
|
|
80
81
|
_asideService = inject(AsideService);
|
|
81
82
|
actionsTemplate;
|
|
82
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
83
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] }] });
|
|
84
85
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
86
87
|
type: Component,
|
|
87
88
|
args: [{ selector: 's4y-navbar', standalone: false, template: "<nav class=\"s4y-navbar-container\">\r\n <button\r\n (click)=\"_asideService.onToggle()\"\r\n class=\"s4y-navbar-container__btn\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"menuIcon\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-navbar-container__actions\">\r\n <ng-container *ngIf=\"actionsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</nav>\r\n\r\n\r\n<ng-template #menuIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block;display:flex;align-items:center;justify-content:center}.s4y-navbar-container{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-bottom:1px solid var(--gray-300);min-height:5.8rem;height:var(--nav-height);width:100%;padding:1.4rem}.s4y-navbar-container__actions{display:flex;gap:1.6rem}.s4y-navbar-container__btn{height:4.2rem;width:4.2rem;border-radius:100%;background-color:var(--gray-200);display:flex;align-items:center;justify-content:center}.s4y-navbar-container__btn svg{width:2.2rem;height:2.2rem}\n"] }]
|
|
88
89
|
}], propDecorators: { actionsTemplate: [{
|
|
@@ -130,12 +131,12 @@ class AvatarComponent {
|
|
|
130
131
|
onError() {
|
|
131
132
|
this.imageError.set(true);
|
|
132
133
|
}
|
|
133
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
134
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AvatarComponent, isStandalone: true, selector: "s4y-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n <svg\r\n viewBox=\"0 0 128 128\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"display:block\"\r\n >\r\n <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n <path\r\n fill=\"#A9AEB3\"\r\n d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n />\r\n </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
135
136
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
137
138
|
type: Component,
|
|
138
|
-
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\"
|
|
139
|
+
args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n <svg\r\n viewBox=\"0 0 128 128\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"display:block\"\r\n >\r\n <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n <path\r\n fill=\"#A9AEB3\"\r\n d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n />\r\n </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"] }]
|
|
139
140
|
}], propDecorators: { hostClasses: [{
|
|
140
141
|
type: HostBinding,
|
|
141
142
|
args: ['class']
|
|
@@ -160,10 +161,10 @@ class SvgService {
|
|
|
160
161
|
return throwError(() => error);
|
|
161
162
|
}));
|
|
162
163
|
}
|
|
163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
164
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
164
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SvgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
165
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SvgService, providedIn: 'root' });
|
|
165
166
|
}
|
|
166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SvgService, decorators: [{
|
|
167
168
|
type: Injectable,
|
|
168
169
|
args: [{
|
|
169
170
|
providedIn: 'root',
|
|
@@ -220,10 +221,10 @@ class SvgComponent {
|
|
|
220
221
|
.getSvgContent(src)
|
|
221
222
|
.pipe(map((content) => this.sanitizer.bypassSecurityTrustHtml(content)));
|
|
222
223
|
}
|
|
223
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SvgComponent, deps: [{ token: i1$1.DomSanitizer }, { token: SvgService }], target: i0.ɵɵFactoryTarget.Component });
|
|
225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SvgComponent, isStandalone: true, selector: "s4y-svg", inputs: { src: "src", color: "color", size: "size" }, host: { properties: { "style.color": "this.color", "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, ngImport: i0, template: "<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\" ></div>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;--icon-font-size: 1em;font-size:var(--icon-font-size);width:1em;height:1em;color:currentColor;contain:content;box-sizing:content-box!important}.icon-inner{display:contents}:host ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}:host ::ng-deep svg [fill]:not([fill=none]){fill:currentColor}:host ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
225
226
|
}
|
|
226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SvgComponent, decorators: [{
|
|
227
228
|
type: Component,
|
|
228
229
|
args: [{ selector: 's4y-svg', imports: [AsyncPipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\" ></div>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;--icon-font-size: 1em;font-size:var(--icon-font-size);width:1em;height:1em;color:currentColor;contain:content;box-sizing:content-box!important}.icon-inner{display:contents}:host ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}:host ::ng-deep svg [fill]:not([fill=none]){fill:currentColor}:host ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"] }]
|
|
229
230
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: SvgService }], propDecorators: { src: [{
|
|
@@ -283,10 +284,10 @@ class AsideComponent {
|
|
|
283
284
|
closeByOverlay() {
|
|
284
285
|
this.asideService.onToggle();
|
|
285
286
|
}
|
|
286
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AsideComponent, isStandalone: false, selector: "s4y-aside", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, companyTitle: { classPropertyName: "companyTitle", publicName: "companyTitle", isSignal: true, isRequired: false, transformFunction: null }, companyDescription: { classPropertyName: "companyDescription", publicName: "companyDescription", isSignal: true, isRequired: false, transformFunction: null }, userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-opened": "isOpened()" } }, queries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n <div class=\"s4y-aside-header__container\">\r\n @if (headerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-aside-header\">\r\n <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n <div class=\"s4y-aside-header__infor\">\r\n <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-aside-body__container\">\r\n <!-- Body Abaixo -->\r\n <div class=\"s4y-aside-body-section\">\r\n @for (menu of menus(); track $index) {\r\n <div class=\"s4y-aside-body-section__item\">\r\n <div\r\n class=\"s4y-aside-body-section-item__infor\"\r\n [class.active]=\"menu.isOpen\"\r\n (click)=\"onToggle(menu)\"\r\n >\r\n <div\r\n class=\"s4y-aside-body-section-item-title\"\r\n [class.closed]=\"!isOpened\"\r\n >\r\n @if (menuTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n ></ng-container>\r\n } @else\r\n { @if (menu.iconUri) {\r\n <s4y-svg size=\"default\" color=\"#fff\" [src]=\"menu.iconUri\"> </s4y-svg>\r\n }\r\n <p>{{ menu.title }}</p>\r\n }\r\n </div>\r\n\r\n @if (menu.children?.length) {\r\n <!-- -->\r\n @if (menu.isOpen) {\r\n <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n }\r\n <!-- -->\r\n }\r\n </div>\r\n <div class=\"s4y-aside-body-section-item__children\" [class.is-opened]=\"menu.isOpen\">\r\n @for (children of menu.children; track $index) {\r\n <div class=\"s4y-aside-body-section-item-children__item\">\r\n <a role=\"link\" routerLinkActive=\"children-active\" [routerLinkActiveOptions]=\"{exact: true}\" [routerLink]=\"children.link\">{{ children.title }}</a>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n </div>\r\n <!-- Body Acima -->\r\n <div class=\"s4y-aside-body__user\" [class.s4y-aside-body__user_divider]=\"footerTemplate || (userImage() && userName() && userEmail())\">\r\n @if (footerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n } @else {\r\n @if (userImage()) {\r\n <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n }\r\n <div class=\"s4y-aside-body-user__infor\">\r\n <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;padding-left:4.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100);max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:.3s ease}.s4y-aside-body-section-item__children a{cursor:pointer;font-size:1.3rem}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__children.is-opened{margin-top:.6rem;max-height:50rem;overflow:visible;pointer-events:all;visibility:visible;transition:.5s ease}.s4y-aside-body-section-item__children .children-active{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item-children__item{white-space:nowrap}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease;white-space:nowrap}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem;white-space:nowrap}.s4y-aside-body__user.s4y-aside-body__user_divider{border-top:1px solid var(--gray-200)}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}@media screen and (min-width: 1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "s4y-avatar", inputs: ["src", "alt", "size", "rounded", "border"] }, { kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
|
|
287
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AsideComponent, isStandalone: false, selector: "s4y-aside", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, companyTitle: { classPropertyName: "companyTitle", publicName: "companyTitle", isSignal: true, isRequired: false, transformFunction: null }, companyDescription: { classPropertyName: "companyDescription", publicName: "companyDescription", isSignal: true, isRequired: false, transformFunction: null }, userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-opened": "isOpened()" } }, queries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n <div class=\"s4y-aside-header__container\">\r\n @if (headerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n } @else {\r\n <div class=\"s4y-aside-header\">\r\n <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n <div class=\"s4y-aside-header__infor\">\r\n <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"s4y-aside-body__container\">\r\n <!-- Body Abaixo -->\r\n <div class=\"s4y-aside-body-section\">\r\n @for (menu of menus(); track $index) {\r\n <div class=\"s4y-aside-body-section__item\">\r\n <div\r\n class=\"s4y-aside-body-section-item__infor\"\r\n [class.active]=\"menu.isOpen\"\r\n (click)=\"onToggle(menu)\"\r\n >\r\n <div\r\n class=\"s4y-aside-body-section-item-title\"\r\n [class.closed]=\"!isOpened\"\r\n >\r\n @if (menuTemplate) {\r\n <ng-container\r\n *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n ></ng-container>\r\n } @else\r\n { @if (menu.iconUri) {\r\n <s4y-svg size=\"default\" color=\"#fff\" [src]=\"menu.iconUri\"> </s4y-svg>\r\n }\r\n <p>{{ menu.title }}</p>\r\n }\r\n </div>\r\n\r\n @if (menu.children?.length) {\r\n <!-- -->\r\n @if (menu.isOpen) {\r\n <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n }\r\n <!-- -->\r\n }\r\n </div>\r\n <div class=\"s4y-aside-body-section-item__children\" [class.is-opened]=\"menu.isOpen\">\r\n @for (children of menu.children; track $index) {\r\n <div class=\"s4y-aside-body-section-item-children__item\">\r\n <a role=\"link\" routerLinkActive=\"children-active\" [routerLinkActiveOptions]=\"{exact: true}\" [routerLink]=\"children.link\">{{ children.title }}</a>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n </div>\r\n <!-- Body Acima -->\r\n <div class=\"s4y-aside-body__user\" [class.s4y-aside-body__user_divider]=\"footerTemplate || (userImage() && userName() && userEmail())\">\r\n @if (footerTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n } @else {\r\n @if (userImage()) {\r\n <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n }\r\n <div class=\"s4y-aside-body-user__infor\">\r\n <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n <span class=\"s4y-aside-arrow\">\r\n <svg\r\n width=\"1.8rem\"\r\n height=\"1.8rem\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;padding-left:4.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100);max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:.3s ease}.s4y-aside-body-section-item__children a{cursor:pointer;font-size:1.3rem}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__children.is-opened{margin-top:.6rem;max-height:50rem;overflow:visible;pointer-events:all;visibility:visible;transition:.5s ease}.s4y-aside-body-section-item__children .children-active{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item-children__item{white-space:nowrap}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease;white-space:nowrap}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem;white-space:nowrap}.s4y-aside-body__user.s4y-aside-body__user_divider{border-top:1px solid var(--gray-200)}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}@media screen and (min-width: 1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:27rem}}\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "s4y-avatar", inputs: ["src", "alt", "size", "rounded", "border"] }, { kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
|
|
288
289
|
}
|
|
289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AsideComponent, decorators: [{
|
|
290
291
|
type: Component,
|
|
291
292
|
args: [{ selector: 's4y-aside', standalone: false, host: {
|
|
292
293
|
'[attr.data-opened]': 'isOpened()',
|
|
@@ -303,21 +304,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
303
304
|
}] } });
|
|
304
305
|
|
|
305
306
|
class DashboardRoutesComponent {
|
|
306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DashboardRoutesComponent, isStandalone: false, selector: "s4y-dashboard-routes", ngImport: i0, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
|
|
308
309
|
}
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardRoutesComponent, decorators: [{
|
|
310
311
|
type: Component,
|
|
311
312
|
args: [{ selector: 's4y-dashboard-routes', standalone: false, host: {}, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] }]
|
|
312
313
|
}] });
|
|
313
314
|
|
|
314
315
|
class DashboardContainerComponent {
|
|
315
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
316
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
316
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] });
|
|
317
318
|
}
|
|
318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardContainerComponent, decorators: [{
|
|
319
320
|
type: Component,
|
|
320
|
-
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"] }]
|
|
321
|
+
args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] }]
|
|
321
322
|
}] });
|
|
322
323
|
|
|
323
324
|
const COMPONENTS$1 = [
|
|
@@ -328,8 +329,8 @@ const COMPONENTS$1 = [
|
|
|
328
329
|
DashboardContainerComponent,
|
|
329
330
|
];
|
|
330
331
|
class DashboardModule {
|
|
331
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
332
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
333
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DashboardModule, declarations: [DashboardLayoutComponent,
|
|
333
334
|
AsideComponent,
|
|
334
335
|
NavbarComponent,
|
|
335
336
|
DashboardRoutesComponent,
|
|
@@ -342,12 +343,12 @@ class DashboardModule {
|
|
|
342
343
|
NavbarComponent,
|
|
343
344
|
DashboardRoutesComponent,
|
|
344
345
|
DashboardContainerComponent] });
|
|
345
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
346
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardModule, imports: [RouterModule,
|
|
346
347
|
CommonModule,
|
|
347
348
|
AvatarComponent,
|
|
348
349
|
CdkScrollableModule] });
|
|
349
350
|
}
|
|
350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardModule, decorators: [{
|
|
351
352
|
type: NgModule,
|
|
352
353
|
args: [{
|
|
353
354
|
declarations: [COMPONENTS$1],
|
|
@@ -369,6 +370,7 @@ class ButtonComponent {
|
|
|
369
370
|
outlined = input(false, { transform: booleanAttribute });
|
|
370
371
|
loading = input(false);
|
|
371
372
|
size = input('medium');
|
|
373
|
+
roundend = input(true);
|
|
372
374
|
variant = input('primary');
|
|
373
375
|
fullWidth = input(false);
|
|
374
376
|
iconAligned = input(true);
|
|
@@ -394,16 +396,16 @@ class ButtonComponent {
|
|
|
394
396
|
return 'btn-primary';
|
|
395
397
|
}
|
|
396
398
|
});
|
|
397
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, roundend: { classPropertyName: "roundend", publicName: "roundend", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconAligned: { classPropertyName: "iconAligned", publicName: "iconAligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-default": "true", "class.loading": "loading()", "attr.size": "size()", "attr.variant": "variant()", "style.width": "fullWidth() ? \"100%\" : null", "class.outlined": "outlined()", "class.disabled": "disabled()", "class": "variantClass()", "class.icon-centered": "iconAligned()", "class.rounded": "roundend()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
|
|
399
401
|
@if (loading()) {
|
|
400
402
|
<div class="loader"></div>
|
|
401
403
|
} @else {
|
|
402
404
|
<ng-content></ng-content>
|
|
403
405
|
}
|
|
404
|
-
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;
|
|
406
|
+
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] });
|
|
405
407
|
}
|
|
406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
407
409
|
type: Component,
|
|
408
410
|
args: [{ selector: 'button[s4yButton], a[s4yButton]', imports: [], template: `
|
|
409
411
|
@if (loading()) {
|
|
@@ -421,71 +423,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
421
423
|
'[class.disabled]': 'disabled()',
|
|
422
424
|
'[class]': 'variantClass()',
|
|
423
425
|
'[class.icon-centered]': 'iconAligned()',
|
|
424
|
-
|
|
426
|
+
'[class.rounded]': 'roundend()',
|
|
427
|
+
}, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] }]
|
|
425
428
|
}], propDecorators: { isDisabled: [{
|
|
426
429
|
type: HostBinding,
|
|
427
430
|
args: ['disabled']
|
|
428
431
|
}] } });
|
|
429
432
|
|
|
430
433
|
class FormFieldComponent {
|
|
431
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
434
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
433
436
|
}
|
|
434
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
435
438
|
type: Component,
|
|
436
439
|
args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".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"] }]
|
|
437
440
|
}] });
|
|
438
441
|
|
|
439
442
|
class InputComponent {
|
|
440
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
443
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
442
445
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputComponent, decorators: [{
|
|
444
447
|
type: Component,
|
|
445
448
|
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"] }]
|
|
446
449
|
}] });
|
|
447
450
|
|
|
448
451
|
class LabelComponent {
|
|
449
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
452
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
453
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
451
454
|
}
|
|
452
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LabelComponent, decorators: [{
|
|
453
456
|
type: Component,
|
|
454
457
|
args: [{ selector: 's4y-label', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.4rem;max-width:max-content}\n"] }]
|
|
455
458
|
}] });
|
|
456
459
|
|
|
457
460
|
class HintComponent {
|
|
458
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
461
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
462
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
460
463
|
}
|
|
461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HintComponent, decorators: [{
|
|
462
465
|
type: Component,
|
|
463
466
|
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"] }]
|
|
464
467
|
}] });
|
|
465
468
|
|
|
466
469
|
class ErrorMessageComponent {
|
|
467
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
468
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
470
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
469
472
|
}
|
|
470
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ErrorMessageComponent, decorators: [{
|
|
471
474
|
type: Component,
|
|
472
475
|
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"] }]
|
|
473
476
|
}] });
|
|
474
477
|
|
|
475
478
|
class InputPrefixComponent {
|
|
476
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
479
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
478
481
|
}
|
|
479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputPrefixComponent, decorators: [{
|
|
480
483
|
type: Component,
|
|
481
484
|
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"] }]
|
|
482
485
|
}] });
|
|
483
486
|
|
|
484
487
|
class InputSufixComponent {
|
|
485
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
486
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
488
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputSufixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
487
490
|
}
|
|
488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputSufixComponent, decorators: [{
|
|
489
492
|
type: Component,
|
|
490
493
|
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"] }]
|
|
491
494
|
}] });
|
|
@@ -521,8 +524,8 @@ class FormFieldPasswordComponent {
|
|
|
521
524
|
setDisabledState(isDisabled) {
|
|
522
525
|
this.disabled = isDisabled;
|
|
523
526
|
}
|
|
524
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormFieldPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: [
|
|
526
529
|
{
|
|
527
530
|
multi: true,
|
|
528
531
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -530,7 +533,7 @@ class FormFieldPasswordComponent {
|
|
|
530
533
|
},
|
|
531
534
|
], 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" }] });
|
|
532
535
|
}
|
|
533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormFieldPasswordComponent, decorators: [{
|
|
534
537
|
type: Component,
|
|
535
538
|
args: [{ selector: 's4y-form-field-password', standalone: false, providers: [
|
|
536
539
|
{
|
|
@@ -552,8 +555,8 @@ const COMPONENTS = [
|
|
|
552
555
|
FormFieldPasswordComponent,
|
|
553
556
|
];
|
|
554
557
|
class FormsKitModule {
|
|
555
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
556
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
558
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormsKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
559
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: FormsKitModule, declarations: [FormFieldComponent,
|
|
557
560
|
InputComponent,
|
|
558
561
|
LabelComponent,
|
|
559
562
|
HintComponent,
|
|
@@ -568,9 +571,9 @@ class FormsKitModule {
|
|
|
568
571
|
InputPrefixComponent,
|
|
569
572
|
InputSufixComponent,
|
|
570
573
|
FormFieldPasswordComponent] });
|
|
571
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
574
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormsKitModule, imports: [CommonModule] });
|
|
572
575
|
}
|
|
573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormsKitModule, decorators: [{
|
|
574
577
|
type: NgModule,
|
|
575
578
|
args: [{
|
|
576
579
|
declarations: COMPONENTS,
|
|
@@ -763,10 +766,10 @@ class MaskDirective {
|
|
|
763
766
|
const nextPos = this._getCursorPosition(template, digits.length);
|
|
764
767
|
setTimeout(() => input.setSelectionRange(nextPos, nextPos));
|
|
765
768
|
}
|
|
766
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
767
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
769
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
770
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", 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 });
|
|
768
771
|
}
|
|
769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskDirective, decorators: [{
|
|
770
773
|
type: Directive,
|
|
771
774
|
args: [{
|
|
772
775
|
selector: '[s4yMask]',
|
|
@@ -796,10 +799,10 @@ class ClickOutsideDirective {
|
|
|
796
799
|
this.clickOutside.emit();
|
|
797
800
|
}
|
|
798
801
|
}
|
|
799
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
800
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
802
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
803
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: ClickOutsideDirective, isStandalone: true, selector: "[s4yClickOutside]", inputs: { isVisible: "isVisible" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "handleClick($event.target)" } }, ngImport: i0 });
|
|
801
804
|
}
|
|
802
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
805
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
803
806
|
type: Directive,
|
|
804
807
|
args: [{
|
|
805
808
|
selector: '[s4yClickOutside]',
|
|
@@ -867,10 +870,10 @@ class ToastService {
|
|
|
867
870
|
return v.toString(16);
|
|
868
871
|
});
|
|
869
872
|
}
|
|
870
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
871
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
873
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
874
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
872
875
|
}
|
|
873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastService, decorators: [{
|
|
874
877
|
type: Injectable,
|
|
875
878
|
args: [{
|
|
876
879
|
providedIn: 'root',
|
|
@@ -885,12 +888,12 @@ class ToastComponent {
|
|
|
885
888
|
}
|
|
886
889
|
toasts = computed(() => this._toastService.toasts());
|
|
887
890
|
isBottomPosition = computed(() => this.position().startsWith('bottom'));
|
|
888
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
889
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
891
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
892
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ToastComponent, isStandalone: true, selector: "s4y-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ToastAnimation] });
|
|
890
893
|
}
|
|
891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastComponent, decorators: [{
|
|
892
895
|
type: Component,
|
|
893
|
-
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(--
|
|
896
|
+
args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"] }]
|
|
894
897
|
}], ctorParameters: () => [{ type: ToastService }] });
|
|
895
898
|
|
|
896
899
|
const drawerAnimation = trigger('drawerAnimation', [
|
|
@@ -1015,10 +1018,10 @@ class DrawerComponent {
|
|
|
1015
1018
|
this.isOpen.set(false);
|
|
1016
1019
|
}
|
|
1017
1020
|
}
|
|
1018
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1019
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1021
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1022
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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] });
|
|
1020
1023
|
}
|
|
1021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1024
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
1022
1025
|
type: Component,
|
|
1023
1026
|
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"] }]
|
|
1024
1027
|
}], ctorParameters: () => [], propDecorators: { headerTemplate: [{
|
|
@@ -1040,10 +1043,10 @@ class SpinnerComponent {
|
|
|
1040
1043
|
color = input('primary');
|
|
1041
1044
|
constructor() { }
|
|
1042
1045
|
ngOnInit() { }
|
|
1043
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1044
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1046
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1047
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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"] });
|
|
1045
1048
|
}
|
|
1046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
1047
1050
|
type: Component,
|
|
1048
1051
|
args: [{ selector: 's4y-spinner', host: {
|
|
1049
1052
|
'[attr.size]': 'size()',
|
|
@@ -1102,10 +1105,10 @@ class TableComponent {
|
|
|
1102
1105
|
sortBy = signal(undefined);
|
|
1103
1106
|
constructor() { }
|
|
1104
1107
|
ngAfterViewInit() { }
|
|
1105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction" }, 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()\" cdkScrollable>\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;width:100%;container-type:inline-size}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table 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"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1107
1110
|
}
|
|
1108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, decorators: [{
|
|
1109
1112
|
type: Component,
|
|
1110
1113
|
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, CdkScrollableModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\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;width:100%;container-type:inline-size}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table 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"] }]
|
|
1111
1114
|
}], ctorParameters: () => [], propDecorators: { rowTemplate: [{
|
|
@@ -1331,10 +1334,10 @@ class TableSortDirective {
|
|
|
1331
1334
|
get descIcon() {
|
|
1332
1335
|
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="M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z"></path></svg>';
|
|
1333
1336
|
}
|
|
1334
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1335
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1337
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableSortDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TableComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1338
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TableSortDirective, isStandalone: true, selector: "[s4ySortableColumnName]", inputs: { s4ySortableColumnName: { classPropertyName: "s4ySortableColumnName", publicName: "s4ySortableColumnName", isSignal: true, isRequired: false, transformFunction: null }, s4ySortable: { classPropertyName: "s4ySortable", publicName: "s4ySortable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "emitSortableColumnName()", "mouseenter": "mouseOver()", "mouseleave": "mouseLeave()" } }, ngImport: i0 });
|
|
1336
1339
|
}
|
|
1337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableSortDirective, decorators: [{
|
|
1338
1341
|
type: Directive,
|
|
1339
1342
|
args: [{
|
|
1340
1343
|
selector: '[s4ySortableColumnName]',
|
|
@@ -1394,6 +1397,8 @@ class ModalComponent {
|
|
|
1394
1397
|
withHeader = input(true);
|
|
1395
1398
|
closeOnBackdrop = input(true);
|
|
1396
1399
|
closeOnEsc = input(true);
|
|
1400
|
+
interceptBackdropClick = input(false);
|
|
1401
|
+
onBackdrop = output();
|
|
1397
1402
|
constructor(renderer, document) {
|
|
1398
1403
|
this.renderer = renderer;
|
|
1399
1404
|
this.document = document;
|
|
@@ -1416,9 +1421,13 @@ class ModalComponent {
|
|
|
1416
1421
|
}
|
|
1417
1422
|
ngAfterViewInit() { }
|
|
1418
1423
|
onBackdropClick(evt) {
|
|
1419
|
-
if (!this.closeOnBackdrop)
|
|
1424
|
+
if (!this.closeOnBackdrop())
|
|
1420
1425
|
return;
|
|
1421
1426
|
if (evt.target === evt.currentTarget) {
|
|
1427
|
+
if (this.interceptBackdropClick()) {
|
|
1428
|
+
this.onBackdrop.emit();
|
|
1429
|
+
return;
|
|
1430
|
+
}
|
|
1422
1431
|
this.onClose();
|
|
1423
1432
|
}
|
|
1424
1433
|
}
|
|
@@ -1430,10 +1439,10 @@ class ModalComponent {
|
|
|
1430
1439
|
ngOnDestroy() {
|
|
1431
1440
|
window.removeEventListener('keydown', this.escListener);
|
|
1432
1441
|
}
|
|
1433
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1442
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, interceptBackdropClick: { classPropertyName: "interceptBackdropClick", publicName: "interceptBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose", onBackdrop: "onBackdrop" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @modalFadeCombined\r\n cdkScrollable\r\n (click)=\"onBackdropClick($event)\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n cdkScrollable\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [modalFadeCombined] });
|
|
1435
1444
|
}
|
|
1436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1437
1446
|
type: Component,
|
|
1438
1447
|
args: [{ selector: 's4y-modal', imports: [CommonModule, CdkScrollable], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @modalFadeCombined\r\n cdkScrollable\r\n (click)=\"onBackdropClick($event)\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n cdkScrollable\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"] }]
|
|
1439
1448
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
@@ -1470,10 +1479,10 @@ class ModalConfirmationService {
|
|
|
1470
1479
|
close() {
|
|
1471
1480
|
this._visible.set(false);
|
|
1472
1481
|
}
|
|
1473
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1474
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1483
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalConfirmationService });
|
|
1475
1484
|
}
|
|
1476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalConfirmationService, decorators: [{
|
|
1477
1486
|
type: Injectable
|
|
1478
1487
|
}] });
|
|
1479
1488
|
|
|
@@ -1500,10 +1509,10 @@ class ModalConfirmationComponent {
|
|
|
1500
1509
|
onClose() {
|
|
1501
1510
|
this.modalConfirmationService.close();
|
|
1502
1511
|
}
|
|
1503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1512
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1513
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }], animations: [modalFadeCombined] });
|
|
1505
1514
|
}
|
|
1506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
|
|
1507
1516
|
type: Component,
|
|
1508
1517
|
args: [{ selector: 's4y-modal-confirmation', imports: [CommonModule, ButtonComponent], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"] }]
|
|
1509
1518
|
}], propDecorators: { iconTemplate: [{
|
|
@@ -1512,12 +1521,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1512
1521
|
}] } });
|
|
1513
1522
|
|
|
1514
1523
|
class SearchBarComponent {
|
|
1515
|
-
|
|
1516
|
-
|
|
1524
|
+
size = input('md');
|
|
1525
|
+
iconPosition = input('left');
|
|
1526
|
+
showIcon = input(true);
|
|
1527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SearchBarComponent, isStandalone: true, selector: "s4y-search-bar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\r\n [attr.data-size]=\"size()\"\r\n class=\"s4y-search-bar-container\"\r\n [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n @if (showIcon()) {\r\n <ng-container>\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n <span class=\"s4y-search-bar__icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1517
1529
|
}
|
|
1518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
1519
1531
|
type: Component,
|
|
1520
|
-
args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label
|
|
1532
|
+
args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label\r\n [attr.data-size]=\"size()\"\r\n class=\"s4y-search-bar-container\"\r\n [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n @if (showIcon()) {\r\n <ng-container>\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n <span class=\"s4y-search-bar__icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"] }]
|
|
1521
1533
|
}] });
|
|
1522
1534
|
|
|
1523
1535
|
class ToggleComponent {
|
|
@@ -1546,8 +1558,8 @@ class ToggleComponent {
|
|
|
1546
1558
|
this.onTouched();
|
|
1547
1559
|
this.onChange(this.model());
|
|
1548
1560
|
}
|
|
1549
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1550
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1561
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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: [
|
|
1551
1563
|
{
|
|
1552
1564
|
provide: NG_VALUE_ACCESSOR,
|
|
1553
1565
|
useExisting: ToggleComponent,
|
|
@@ -1555,7 +1567,7 @@ class ToggleComponent {
|
|
|
1555
1567
|
},
|
|
1556
1568
|
], 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 }] });
|
|
1557
1569
|
}
|
|
1558
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1559
1571
|
type: Component,
|
|
1560
1572
|
args: [{ selector: 's4y-toggle', imports: [FormsModule], providers: [
|
|
1561
1573
|
{
|
|
@@ -1677,8 +1689,8 @@ class SelectComponent {
|
|
|
1677
1689
|
? opt1.id === opt2.id
|
|
1678
1690
|
: JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
|
|
1679
1691
|
}
|
|
1680
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1681
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1692
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: [
|
|
1682
1694
|
{
|
|
1683
1695
|
multi: true,
|
|
1684
1696
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1686,7 +1698,7 @@ class SelectComponent {
|
|
|
1686
1698
|
},
|
|
1687
1699
|
], 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 <ng-content select=\"s4y-error-message\"></ng-content>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__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-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:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;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] });
|
|
1688
1700
|
}
|
|
1689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1690
1702
|
type: Component,
|
|
1691
1703
|
args: [{ selector: 's4y-select', imports: [NgIf, CommonModule, SpinnerComponent, ClickOutsideDirective, FormsModule], animations: [selectAnimation], providers: [
|
|
1692
1704
|
{
|
|
@@ -1782,10 +1794,10 @@ class PaginationComponent {
|
|
|
1782
1794
|
rowsPerPage: this.rowsPerPage(),
|
|
1783
1795
|
});
|
|
1784
1796
|
}
|
|
1785
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1786
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1797
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1798
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PaginationComponent, isStandalone: true, selector: "s4y-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalResults: { classPropertyName: "totalResults", publicName: "totalResults", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", rowsPerPage: "rowsPerPageChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\" [selected]=\"rowsPerPageOption === rowsPerPage()\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n\r\n <ng-container [ngTemplateOutlet]=\"arrow\"></ng-container>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n @if (totalResults() > 0) {\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n <div class=\"flex justify-between align-center\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrow>\r\n <svg\r\n class=\"s4y-pagination-arrow-view\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view{position:relative;min-width:58px;display:inline-block}.s4y-pagination-wrapper-view select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;padding:1.2rem 2.8rem 1.2rem 1.2rem;display:block;font-size:1.4rem;width:100%}.s4y-pagination-wrapper-view .s4y-pagination-arrow-view{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);pointer-events:none;font-size:1.2rem;color:#333;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
1787
1799
|
}
|
|
1788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1789
1801
|
type: Component,
|
|
1790
1802
|
args: [{ selector: 's4y-pagination', imports: [
|
|
1791
1803
|
NgTemplateOutlet,
|
|
@@ -1825,8 +1837,8 @@ class SliderComponent {
|
|
|
1825
1837
|
this.value = typeof value === 'number' ? value : Number(value);
|
|
1826
1838
|
this.onChange(value);
|
|
1827
1839
|
}
|
|
1828
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1829
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1840
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1841
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: [
|
|
1830
1842
|
{
|
|
1831
1843
|
provide: NG_VALUE_ACCESSOR,
|
|
1832
1844
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -1834,7 +1846,7 @@ class SliderComponent {
|
|
|
1834
1846
|
},
|
|
1835
1847
|
], 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"] }] });
|
|
1836
1848
|
}
|
|
1837
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponent, decorators: [{
|
|
1838
1850
|
type: Component,
|
|
1839
1851
|
args: [{ selector: 's4y-slider', imports: [NgStyle], providers: [
|
|
1840
1852
|
{
|
|
@@ -1872,8 +1884,8 @@ class RadioComponent {
|
|
|
1872
1884
|
this.onChange(value);
|
|
1873
1885
|
this.onTouched();
|
|
1874
1886
|
}
|
|
1875
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1876
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1887
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: [
|
|
1877
1889
|
{
|
|
1878
1890
|
provide: NG_VALUE_ACCESSOR,
|
|
1879
1891
|
useExisting: forwardRef(() => RadioComponent),
|
|
@@ -1881,7 +1893,7 @@ class RadioComponent {
|
|
|
1881
1893
|
},
|
|
1882
1894
|
], 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"] });
|
|
1883
1895
|
}
|
|
1884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1885
1897
|
type: Component,
|
|
1886
1898
|
args: [{ selector: 's4y-radio', imports: [], providers: [
|
|
1887
1899
|
{
|
|
@@ -1910,10 +1922,10 @@ class TooltipComponent {
|
|
|
1910
1922
|
visible = false;
|
|
1911
1923
|
constructor() { }
|
|
1912
1924
|
ngOnInit() { }
|
|
1913
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1925
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1926
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
1915
1927
|
}
|
|
1916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1928
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1917
1929
|
type: Component,
|
|
1918
1930
|
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"] }]
|
|
1919
1931
|
}], ctorParameters: () => [] });
|
|
@@ -2024,10 +2036,10 @@ class TooltipDirective {
|
|
|
2024
2036
|
this.componentRef = null;
|
|
2025
2037
|
}
|
|
2026
2038
|
}
|
|
2027
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2028
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2039
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2040
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", 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 });
|
|
2029
2041
|
}
|
|
2030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
2031
2043
|
type: Directive,
|
|
2032
2044
|
args: [{
|
|
2033
2045
|
selector: '[s4yTooltip]',
|
|
@@ -2061,11 +2073,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2061
2073
|
}] } });
|
|
2062
2074
|
|
|
2063
2075
|
class TooltipModule {
|
|
2064
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2065
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
2066
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
2076
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2077
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent, TooltipDirective], imports: [CommonModule, NgClass], exports: [TooltipDirective] });
|
|
2078
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
|
|
2067
2079
|
}
|
|
2068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2080
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, decorators: [{
|
|
2069
2081
|
type: NgModule,
|
|
2070
2082
|
args: [{
|
|
2071
2083
|
declarations: [TooltipComponent, TooltipDirective],
|
|
@@ -2080,10 +2092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2080
2092
|
* Usage: refer to the demo - app.component.html
|
|
2081
2093
|
*/
|
|
2082
2094
|
class BreadcrumbItemDirective {
|
|
2083
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2084
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2095
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2096
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: BreadcrumbItemDirective, isStandalone: true, selector: "[s4yBreadcrumbItem]", ngImport: i0 });
|
|
2085
2097
|
}
|
|
2086
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
|
|
2087
2099
|
type: Directive,
|
|
2088
2100
|
args: [{
|
|
2089
2101
|
selector: '[s4yBreadcrumbItem]',
|
|
@@ -2408,10 +2420,10 @@ class BreadcrumbService {
|
|
|
2408
2420
|
}
|
|
2409
2421
|
return config || {};
|
|
2410
2422
|
}
|
|
2411
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2412
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2424
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
|
|
2413
2425
|
}
|
|
2414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
2415
2427
|
type: Injectable,
|
|
2416
2428
|
args: [{
|
|
2417
2429
|
providedIn: 'root',
|
|
@@ -2511,10 +2523,10 @@ class BreadcrumbComponent {
|
|
|
2511
2523
|
});
|
|
2512
2524
|
}));
|
|
2513
2525
|
}
|
|
2514
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
2527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 });
|
|
2516
2528
|
}
|
|
2517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2518
2530
|
type: Component,
|
|
2519
2531
|
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"] }]
|
|
2520
2532
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.ActivatedRoute }], propDecorators: { itemTemplate: [{
|
|
@@ -2550,10 +2562,10 @@ class StepComponent {
|
|
|
2550
2562
|
this.stepClicked.emit(this.value);
|
|
2551
2563
|
}
|
|
2552
2564
|
}
|
|
2553
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2565
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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"] }] });
|
|
2555
2567
|
}
|
|
2556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepComponent, decorators: [{
|
|
2557
2569
|
type: Component,
|
|
2558
2570
|
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"] }]
|
|
2559
2571
|
}], propDecorators: { root: [{
|
|
@@ -2598,10 +2610,10 @@ class StepPanelComponent {
|
|
|
2598
2610
|
canNavigateTo(value) {
|
|
2599
2611
|
this.stepperComponent.setSelected(value);
|
|
2600
2612
|
}
|
|
2601
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2613
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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] });
|
|
2603
2615
|
}
|
|
2604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepPanelComponent, decorators: [{
|
|
2605
2617
|
type: Component,
|
|
2606
2618
|
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" }]
|
|
2607
2619
|
}], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
|
|
@@ -2683,10 +2695,10 @@ class StepperComponent {
|
|
|
2683
2695
|
this.onDestroy$.next();
|
|
2684
2696
|
this.onDestroy$.complete();
|
|
2685
2697
|
}
|
|
2686
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2698
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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 }] });
|
|
2688
2700
|
}
|
|
2689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2690
2702
|
type: Component,
|
|
2691
2703
|
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"] }]
|
|
2692
2704
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
@@ -2710,10 +2722,10 @@ class LoadingModalService {
|
|
|
2710
2722
|
hiddenLoading() {
|
|
2711
2723
|
this._isLoading.set(false);
|
|
2712
2724
|
}
|
|
2713
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2714
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2725
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2726
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalService });
|
|
2715
2727
|
}
|
|
2716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2728
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalService, decorators: [{
|
|
2717
2729
|
type: Injectable
|
|
2718
2730
|
}] });
|
|
2719
2731
|
|
|
@@ -2753,19 +2765,19 @@ class LoadingModalComponent {
|
|
|
2753
2765
|
clearInterval(this.intervalId);
|
|
2754
2766
|
}
|
|
2755
2767
|
}
|
|
2756
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2757
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2768
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LoadingModalComponent, isStandalone: true, selector: "s4y-loading-modal", inputs: { messageInfor: { classPropertyName: "messageInfor", publicName: "messageInfor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loadingModalService.isLoading()) {\r\n <div class=\"s4y-loading-modal-wrapper\" @loadingAnimation>\r\n <div class=\"s4y-loading-modal-item\"></div>\r\n <p class=\"s4y-loading-modal-item-infor\">\r\n {{ messageInfor() }} <span>{{ dots }}</span>\r\n </p>\r\n </div>\r\n}\r\n", styles: [".s4y-loading-modal-wrapper{background-color:#000000b3;position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:var(--z-index-loader);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column}.s4y-loading-modal-wrapper .s4y-loading-modal-item-infor{color:var(--gray-100);margin-top:2rem;max-width:60rem;text-align:center}.s4y-loading-modal-wrapper .s4y-loading-modal-item{width:48px;height:48px;border-radius:50%;position:relative;animation:rotate 1s linear infinite}.s4y-loading-modal-wrapper .s4y-loading-modal-item:before{content:\"\";box-sizing:border-box;position:absolute;inset:0;border-radius:50%;border:5px solid #fff;animation:prixClipFix 2s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}\n"], animations: [loadingAnimation], encapsulation: i0.ViewEncapsulation.None });
|
|
2758
2770
|
}
|
|
2759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalComponent, decorators: [{
|
|
2760
2772
|
type: Component,
|
|
2761
2773
|
args: [{ selector: 's4y-loading-modal', imports: [], encapsulation: ViewEncapsulation.None, animations: [loadingAnimation], template: "@if (loadingModalService.isLoading()) {\r\n <div class=\"s4y-loading-modal-wrapper\" @loadingAnimation>\r\n <div class=\"s4y-loading-modal-item\"></div>\r\n <p class=\"s4y-loading-modal-item-infor\">\r\n {{ messageInfor() }} <span>{{ dots }}</span>\r\n </p>\r\n </div>\r\n}\r\n", styles: [".s4y-loading-modal-wrapper{background-color:#000000b3;position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:var(--z-index-loader);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column}.s4y-loading-modal-wrapper .s4y-loading-modal-item-infor{color:var(--gray-100);margin-top:2rem;max-width:60rem;text-align:center}.s4y-loading-modal-wrapper .s4y-loading-modal-item{width:48px;height:48px;border-radius:50%;position:relative;animation:rotate 1s linear infinite}.s4y-loading-modal-wrapper .s4y-loading-modal-item:before{content:\"\";box-sizing:border-box;position:absolute;inset:0;border-radius:50%;border:5px solid #fff;animation:prixClipFix 2s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}\n"] }]
|
|
2762
2774
|
}] });
|
|
2763
2775
|
|
|
2764
2776
|
class CheckboxComponent {
|
|
2765
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2766
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2777
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2778
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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"] });
|
|
2767
2779
|
}
|
|
2768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2780
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2769
2781
|
type: Component,
|
|
2770
2782
|
args: [{ selector: 'input[s4yCheckbox][type="checkbox"]', imports: [], host: {
|
|
2771
2783
|
'[attr.aria-checked]': 'checked',
|
|
@@ -2831,10 +2843,10 @@ class SidebarRightService {
|
|
|
2831
2843
|
window.removeEventListener('resize', this.resizeHandler);
|
|
2832
2844
|
}
|
|
2833
2845
|
}
|
|
2834
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2835
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2846
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2847
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightService, providedIn: 'root' });
|
|
2836
2848
|
}
|
|
2837
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightService, decorators: [{
|
|
2838
2850
|
type: Injectable,
|
|
2839
2851
|
args: [{
|
|
2840
2852
|
providedIn: 'root',
|
|
@@ -2856,10 +2868,10 @@ class SidebarRightComponent {
|
|
|
2856
2868
|
closeByOverlay() {
|
|
2857
2869
|
this.sidebarRightService.toggleSidebar();
|
|
2858
2870
|
}
|
|
2859
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2860
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2871
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2872
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SidebarRightComponent, isStandalone: true, selector: "s4y-sidebar-right", inputs: { width: "width" }, host: { properties: { "attr.data-opened": "isOpened()" } }, ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeByOverlay()\"></div>\r\n\r\n<div class=\"s4y-sidebar-right-container\" [attr.data-opened]=\"isOpened()\" *ngIf=\"isOpened()\" [@sidebarRightAnimation]=\"animationParams\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-sidebar-right-container{height:100dvh;width:28rem;overflow-y:auto;overflow-x:hidden;padding:1.4rem;border-left:1px solid var(--gray-300);box-shadow:var(--shadow-default);background-color:#fff;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-sidebar-right-container{position:fixed;top:0;right:0;z-index:var(--z-index-emergency)}}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none;transition:.5s ease}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none;transition:.5s ease}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;transition:.5s ease;pointer-events:none}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-sidebar-right-container{transform:translate(100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;transition:.5s ease;pointer-events:none}:host[data-opened=true] .s4y-sidebar-right-container{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [sidebarRightAnimation] });
|
|
2861
2873
|
}
|
|
2862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightComponent, decorators: [{
|
|
2863
2875
|
type: Component,
|
|
2864
2876
|
args: [{ selector: 's4y-sidebar-right', imports: [CommonModule], animations: [sidebarRightAnimation], host: {
|
|
2865
2877
|
'[attr.data-opened]': 'isOpened()',
|
|
@@ -2869,10 +2881,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2869
2881
|
}] } });
|
|
2870
2882
|
|
|
2871
2883
|
class PopoverPanelComponent {
|
|
2872
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2873
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: PopoverPanelComponent, isStandalone: true, selector: "s4y-popover-panel", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{z-index:5;padding:1.4rem;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-300);top:2.9rem;right:0;min-width:14rem;background:#fff;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] });
|
|
2874
2886
|
}
|
|
2875
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverPanelComponent, decorators: [{
|
|
2876
2888
|
type: Component,
|
|
2877
2889
|
args: [{ selector: 's4y-popover-panel', imports: [], template: `<ng-content />`, styles: [":host{z-index:5;padding:1.4rem;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-300);top:2.9rem;right:0;min-width:14rem;background:#fff;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] }]
|
|
2878
2890
|
}] });
|
|
@@ -3101,10 +3113,10 @@ class PopoverTriggerDirective {
|
|
|
3101
3113
|
this.subs.unsubscribe();
|
|
3102
3114
|
this.overlayRef?.dispose();
|
|
3103
3115
|
}
|
|
3104
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3105
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
3116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3117
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: PopoverTriggerDirective, isStandalone: true, selector: "[s4yPopoverTrigger]", inputs: { menuTrigger: { classPropertyName: "menuTrigger", publicName: "s4yPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuContext: { classPropertyName: "menuContext", publicName: "s4yPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "s4yPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverOffsetX: { classPropertyName: "popoverOffsetX", publicName: "s4yPopoverOffsetX", isSignal: true, isRequired: false, transformFunction: null }, popoverOffsetY: { classPropertyName: "popoverOffsetY", publicName: "s4yPopoverOffsetY", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "s4yPopoverFade", isSignal: true, isRequired: false, transformFunction: null }, fadeDuration: { classPropertyName: "fadeDuration", publicName: "s4yPopoverFadeDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
|
|
3106
3118
|
}
|
|
3107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
|
|
3108
3120
|
type: Directive,
|
|
3109
3121
|
args: [{
|
|
3110
3122
|
selector: '[s4yPopoverTrigger]',
|
|
@@ -3116,10 +3128,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3116
3128
|
}] } });
|
|
3117
3129
|
|
|
3118
3130
|
class MenuComponent {
|
|
3119
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3131
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MenuComponent, isStandalone: true, selector: "s4y-menu", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{z-index:5;padding:1.4rem;background-color:#fff;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);top:2.9rem;right:0;min-width:14rem;max-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] });
|
|
3121
3133
|
}
|
|
3122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3123
3135
|
type: Component,
|
|
3124
3136
|
args: [{ selector: 's4y-menu', imports: [], template: '<ng-content/>', styles: [":host{z-index:5;padding:1.4rem;background-color:#fff;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);top:2.9rem;right:0;min-width:14rem;max-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] }]
|
|
3125
3137
|
}] });
|
|
@@ -3127,8 +3139,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3127
3139
|
class MenuItemComponent {
|
|
3128
3140
|
iconUri = input();
|
|
3129
3141
|
imageUri = input();
|
|
3130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3142
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3143
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MenuItemComponent, isStandalone: true, selector: "button[s4yMenuItem], a[s4yMenuItem]", inputs: { iconUri: { classPropertyName: "iconUri", publicName: "iconUri", isSignal: true, isRequired: false, transformFunction: null }, imageUri: { classPropertyName: "imageUri", publicName: "imageUri", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-label": "Mais informa\u00E7\u00F5es" } }, ngImport: i0, template: `
|
|
3132
3144
|
@if (iconUri()) {
|
|
3133
3145
|
<s4y-svg [size]="18" [src]="iconUri()"></s4y-svg>
|
|
3134
3146
|
}
|
|
@@ -3139,7 +3151,7 @@ class MenuItemComponent {
|
|
|
3139
3151
|
<ng-content></ng-content>
|
|
3140
3152
|
`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;padding:0 .4rem;min-height:4rem;width:100%;&:hover{text-decoration:underline}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
|
|
3141
3153
|
}
|
|
3142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
3143
3155
|
type: Component,
|
|
3144
3156
|
args: [{ selector: 'button[s4yMenuItem], a[s4yMenuItem]', standalone: true, imports: [SvgComponent], template: `
|
|
3145
3157
|
@if (iconUri()) {
|
|
@@ -3155,6 +3167,406 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3155
3167
|
}, styles: [":host{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;padding:0 .4rem;min-height:4rem;width:100%;&:hover{text-decoration:underline}}\n"] }]
|
|
3156
3168
|
}] });
|
|
3157
3169
|
|
|
3170
|
+
class ImagePreviewComponent {
|
|
3171
|
+
imgEl = viewChild('imgEl');
|
|
3172
|
+
src = '';
|
|
3173
|
+
name;
|
|
3174
|
+
overlayRef;
|
|
3175
|
+
zoom = signal(1);
|
|
3176
|
+
MIN_ZOOM = 0.5;
|
|
3177
|
+
MAX_ZOOM = 3;
|
|
3178
|
+
ZOOM_STEP = 0.25;
|
|
3179
|
+
fullScreenImage = signal(false);
|
|
3180
|
+
toggleFullscreen() {
|
|
3181
|
+
this.fullScreenImage.update((value) => !value);
|
|
3182
|
+
}
|
|
3183
|
+
zoomOut() {
|
|
3184
|
+
const currentZoom = this.zoom();
|
|
3185
|
+
const newZoom = Math.max(this.MIN_ZOOM, currentZoom - this.ZOOM_STEP);
|
|
3186
|
+
this.zoom.set(newZoom);
|
|
3187
|
+
this.applyZoom();
|
|
3188
|
+
}
|
|
3189
|
+
zoomIn() {
|
|
3190
|
+
const currentZoom = this.zoom();
|
|
3191
|
+
const newZoom = Math.min(this.MAX_ZOOM, currentZoom + this.ZOOM_STEP);
|
|
3192
|
+
this.zoom.set(newZoom);
|
|
3193
|
+
this.applyZoom();
|
|
3194
|
+
}
|
|
3195
|
+
resetZoom() {
|
|
3196
|
+
this.zoom.set(1);
|
|
3197
|
+
this.applyZoom();
|
|
3198
|
+
}
|
|
3199
|
+
applyZoom() {
|
|
3200
|
+
const img = this.imgEl()?.nativeElement;
|
|
3201
|
+
if (img) {
|
|
3202
|
+
img.style.transform = `scale(${this.zoom()})`;
|
|
3203
|
+
}
|
|
3204
|
+
}
|
|
3205
|
+
close() {
|
|
3206
|
+
if (!this.overlayRef)
|
|
3207
|
+
return;
|
|
3208
|
+
this.overlayRef.dispose();
|
|
3209
|
+
}
|
|
3210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ImagePreviewComponent, isStandalone: true, selector: "s4y-image-preview", viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3212
|
+
}
|
|
3213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
3214
|
+
type: Component,
|
|
3215
|
+
args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"] }]
|
|
3216
|
+
}] });
|
|
3217
|
+
|
|
3218
|
+
class ImageService {
|
|
3219
|
+
_overlay = inject(Overlay);
|
|
3220
|
+
_overlayRef;
|
|
3221
|
+
open(fileSrc, fileName) {
|
|
3222
|
+
const portal = this.createPortal();
|
|
3223
|
+
this._overlayRef = this.createOverlay();
|
|
3224
|
+
const componentRef = this._overlayRef.attach(portal);
|
|
3225
|
+
componentRef.instance.src = fileSrc;
|
|
3226
|
+
componentRef.instance.name = fileName;
|
|
3227
|
+
componentRef.instance.overlayRef = this._overlayRef;
|
|
3228
|
+
let sub = this._overlayRef.backdropClick().subscribe((_) => {
|
|
3229
|
+
sub.unsubscribe();
|
|
3230
|
+
this.close();
|
|
3231
|
+
});
|
|
3232
|
+
let sub2 = this._overlayRef
|
|
3233
|
+
.keydownEvents()
|
|
3234
|
+
.pipe(filter$1((key) => key.code === 'Escape'))
|
|
3235
|
+
.subscribe((_) => {
|
|
3236
|
+
sub2.unsubscribe();
|
|
3237
|
+
this.close();
|
|
3238
|
+
});
|
|
3239
|
+
return this._overlayRef;
|
|
3240
|
+
}
|
|
3241
|
+
close() {
|
|
3242
|
+
this._overlayRef.dispose();
|
|
3243
|
+
}
|
|
3244
|
+
createOverlay() {
|
|
3245
|
+
const overlay = this._overlay.create({
|
|
3246
|
+
hasBackdrop: true,
|
|
3247
|
+
backdropClass: ['s4y-overlay-bg'],
|
|
3248
|
+
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
3249
|
+
panelClass: ['s4y-preview-pane'],
|
|
3250
|
+
disposeOnNavigation: true,
|
|
3251
|
+
});
|
|
3252
|
+
overlay.backdropClick().subscribe(() => overlay.dispose());
|
|
3253
|
+
return overlay;
|
|
3254
|
+
}
|
|
3255
|
+
createPortal() {
|
|
3256
|
+
return new ComponentPortal(ImagePreviewComponent);
|
|
3257
|
+
}
|
|
3258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3259
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageService, providedIn: 'root' });
|
|
3260
|
+
}
|
|
3261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageService, decorators: [{
|
|
3262
|
+
type: Injectable,
|
|
3263
|
+
args: [{
|
|
3264
|
+
providedIn: 'root',
|
|
3265
|
+
}]
|
|
3266
|
+
}] });
|
|
3267
|
+
|
|
3268
|
+
class ImageComponent {
|
|
3269
|
+
imageService = inject(ImageService);
|
|
3270
|
+
elRef = inject(ElementRef);
|
|
3271
|
+
renderer = inject(Renderer2);
|
|
3272
|
+
destroy = inject(DestroyRef);
|
|
3273
|
+
constructor() { }
|
|
3274
|
+
src = input('', {
|
|
3275
|
+
alias: 's4ySrc',
|
|
3276
|
+
});
|
|
3277
|
+
innerTpl = input();
|
|
3278
|
+
fileName = input();
|
|
3279
|
+
disablePreview = input(false);
|
|
3280
|
+
withOverlay = input(false);
|
|
3281
|
+
wrapper;
|
|
3282
|
+
overlayEl;
|
|
3283
|
+
ngOnInit() {
|
|
3284
|
+
this.configureWrapperElement();
|
|
3285
|
+
this.configureOverlay();
|
|
3286
|
+
this.configureEyeSvg();
|
|
3287
|
+
this.configureImageSrc();
|
|
3288
|
+
}
|
|
3289
|
+
ngAfterViewInit() {
|
|
3290
|
+
this.onShowOverlay();
|
|
3291
|
+
}
|
|
3292
|
+
configureWrapperElement() {
|
|
3293
|
+
const img = this.ImageEl;
|
|
3294
|
+
if (!img)
|
|
3295
|
+
return;
|
|
3296
|
+
const parent = img.parentNode;
|
|
3297
|
+
this.wrapper = this.createElement('span');
|
|
3298
|
+
this.addClass(this.wrapper, 's4y-img-wrapper');
|
|
3299
|
+
this.renderer.setStyle(this.wrapper, 'position', 'relative');
|
|
3300
|
+
this.renderer.setStyle(this.wrapper, 'display', 'inline-block');
|
|
3301
|
+
this.renderer.insertBefore(parent, this.wrapper, img);
|
|
3302
|
+
this.renderer.removeChild(parent, img);
|
|
3303
|
+
this.renderer.appendChild(this.wrapper, img);
|
|
3304
|
+
const click$ = fromEvent(this.wrapper, 'click');
|
|
3305
|
+
click$.pipe(takeUntilDestroyed(this.destroy)).subscribe(() => {
|
|
3306
|
+
this.showPreview();
|
|
3307
|
+
});
|
|
3308
|
+
}
|
|
3309
|
+
configureOverlay() {
|
|
3310
|
+
if (this.withOverlay()) {
|
|
3311
|
+
this.overlayEl = this.createElement('div');
|
|
3312
|
+
this.renderer.addClass(this.overlayEl, 's4y-img-overlay');
|
|
3313
|
+
this.renderer.appendChild(this.wrapper, this.overlayEl);
|
|
3314
|
+
}
|
|
3315
|
+
}
|
|
3316
|
+
configureEyeSvg() {
|
|
3317
|
+
const overlay = this.overlayEl;
|
|
3318
|
+
if (!overlay)
|
|
3319
|
+
return;
|
|
3320
|
+
const svgContainer = this.createElement('span');
|
|
3321
|
+
svgContainer.innerHTML = this.eyeSvg;
|
|
3322
|
+
this.renderer.appendChild(overlay, svgContainer);
|
|
3323
|
+
}
|
|
3324
|
+
configureImageSrc() {
|
|
3325
|
+
const imgEl = this.ImageEl;
|
|
3326
|
+
const src = this.src();
|
|
3327
|
+
if (!imgEl || !src)
|
|
3328
|
+
return;
|
|
3329
|
+
this.renderer.setAttribute(imgEl, 'src', src);
|
|
3330
|
+
}
|
|
3331
|
+
onShowOverlay() {
|
|
3332
|
+
const wrapper = this.wrapper;
|
|
3333
|
+
const overlay = this.overlayEl;
|
|
3334
|
+
if (!wrapper || !this.withOverlay() || !overlay)
|
|
3335
|
+
return;
|
|
3336
|
+
const wrapperMouseOver$ = fromEvent(this.wrapper, 'mouseover');
|
|
3337
|
+
const wrapperMouseLeave$ = fromEvent(this.wrapper, 'mouseleave');
|
|
3338
|
+
wrapperMouseOver$.pipe(takeUntilDestroyed(this.destroy)).subscribe((x) => {
|
|
3339
|
+
this.addClass(overlay, 'active');
|
|
3340
|
+
});
|
|
3341
|
+
wrapperMouseLeave$.pipe(takeUntilDestroyed(this.destroy)).subscribe((x) => {
|
|
3342
|
+
this.removeClass(overlay, 'active');
|
|
3343
|
+
});
|
|
3344
|
+
}
|
|
3345
|
+
createElement(element) {
|
|
3346
|
+
return this.renderer.createElement(element);
|
|
3347
|
+
}
|
|
3348
|
+
addClass(el, className) {
|
|
3349
|
+
return this.renderer.addClass(el, className);
|
|
3350
|
+
}
|
|
3351
|
+
removeClass(el, className) {
|
|
3352
|
+
return this.renderer.removeClass(el, className);
|
|
3353
|
+
}
|
|
3354
|
+
showPreview() {
|
|
3355
|
+
this.imageService.open(this.src(), this.fileName());
|
|
3356
|
+
}
|
|
3357
|
+
get eyeSvg() {
|
|
3358
|
+
return `<svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path 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"></path></svg>`;
|
|
3359
|
+
}
|
|
3360
|
+
get ImageEl() {
|
|
3361
|
+
return this.elRef.nativeElement;
|
|
3362
|
+
}
|
|
3363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: ImageComponent, isStandalone: true, selector: "img[s4yImage]", inputs: { src: { classPropertyName: "src", publicName: "s4ySrc", isSignal: true, isRequired: false, transformFunction: null }, innerTpl: { classPropertyName: "innerTpl", publicName: "innerTpl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, withOverlay: { classPropertyName: "withOverlay", publicName: "withOverlay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
3365
|
+
}
|
|
3366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3367
|
+
type: Component,
|
|
3368
|
+
args: [{ selector: 'img[s4yImage]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
3369
|
+
}], ctorParameters: () => [] });
|
|
3370
|
+
|
|
3371
|
+
class DynamicTooltipComponent {
|
|
3372
|
+
text = "";
|
|
3373
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DynamicTooltipComponent, isStandalone: true, selector: "s4y-dynamic-tooltip", ngImport: i0, template: "<div class=\"s4y-tooltip-container\">\r\n <p>\r\n {{ text }}\r\n </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] });
|
|
3375
|
+
}
|
|
3376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipComponent, decorators: [{
|
|
3377
|
+
type: Component,
|
|
3378
|
+
args: [{ selector: 's4y-dynamic-tooltip', imports: [], template: "<div class=\"s4y-tooltip-container\">\r\n <p>\r\n {{ text }}\r\n </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] }]
|
|
3379
|
+
}] });
|
|
3380
|
+
|
|
3381
|
+
class DynamicTooltipDirective {
|
|
3382
|
+
overlay = inject(Overlay);
|
|
3383
|
+
elRef = inject((ElementRef));
|
|
3384
|
+
overlayRef;
|
|
3385
|
+
tooltipContent = input.required({
|
|
3386
|
+
alias: 's4yDynamicTooltip',
|
|
3387
|
+
});
|
|
3388
|
+
placement = input('top');
|
|
3389
|
+
tooltipPortal = new ComponentPortal(DynamicTooltipComponent);
|
|
3390
|
+
onOverlayEnter;
|
|
3391
|
+
onOverlayLeave;
|
|
3392
|
+
constructor() {
|
|
3393
|
+
console.log(this.host);
|
|
3394
|
+
}
|
|
3395
|
+
get host() {
|
|
3396
|
+
return this.elRef.nativeElement;
|
|
3397
|
+
}
|
|
3398
|
+
shown() {
|
|
3399
|
+
this.overlayRef?.dispose();
|
|
3400
|
+
this.overlayRef = this.createOverlay();
|
|
3401
|
+
const compRef = this.overlayRef.attach(this.tooltipPortal);
|
|
3402
|
+
compRef.instance.text = this.tooltipContent();
|
|
3403
|
+
this.overlayRef.updatePosition();
|
|
3404
|
+
this.bindOverlayHoverGuards();
|
|
3405
|
+
}
|
|
3406
|
+
hide(e) {
|
|
3407
|
+
// Se o mouse saiu do host indo PARA o overlay, não fecha
|
|
3408
|
+
const next = e.relatedTarget;
|
|
3409
|
+
if (next && this.overlayRef?.overlayElement.contains(next))
|
|
3410
|
+
return;
|
|
3411
|
+
this.dispose();
|
|
3412
|
+
}
|
|
3413
|
+
bindOverlayHoverGuards() {
|
|
3414
|
+
if (!this.overlayRef)
|
|
3415
|
+
return;
|
|
3416
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
3417
|
+
// remove listeners antigos (se existirem)
|
|
3418
|
+
this.unbindOverlayHoverGuards();
|
|
3419
|
+
this.onOverlayEnter = () => {
|
|
3420
|
+
// não faz nada, apenas impede fechamento “por acidente”
|
|
3421
|
+
};
|
|
3422
|
+
this.onOverlayLeave = (e) => {
|
|
3423
|
+
// Se saiu do overlay indo PARA o host, não fecha
|
|
3424
|
+
const next = e.relatedTarget;
|
|
3425
|
+
if (next && this.elRef.nativeElement.contains(next))
|
|
3426
|
+
return;
|
|
3427
|
+
this.dispose();
|
|
3428
|
+
};
|
|
3429
|
+
overlayEl.addEventListener('mouseenter', this.onOverlayEnter);
|
|
3430
|
+
overlayEl.addEventListener('mouseleave', this.onOverlayLeave);
|
|
3431
|
+
}
|
|
3432
|
+
unbindOverlayHoverGuards() {
|
|
3433
|
+
if (!this.overlayRef)
|
|
3434
|
+
return;
|
|
3435
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
3436
|
+
if (this.onOverlayEnter)
|
|
3437
|
+
overlayEl.removeEventListener('mouseenter', this.onOverlayEnter);
|
|
3438
|
+
if (this.onOverlayLeave)
|
|
3439
|
+
overlayEl.removeEventListener('mouseleave', this.onOverlayLeave);
|
|
3440
|
+
this.onOverlayEnter = undefined;
|
|
3441
|
+
this.onOverlayLeave = undefined;
|
|
3442
|
+
}
|
|
3443
|
+
createOverlay() {
|
|
3444
|
+
const positionStrategy = this.overlay
|
|
3445
|
+
.position()
|
|
3446
|
+
.flexibleConnectedTo(this.elRef)
|
|
3447
|
+
.withFlexibleDimensions(false)
|
|
3448
|
+
.withPush(true)
|
|
3449
|
+
.withViewportMargin(8)
|
|
3450
|
+
.withPositions(this.getPositionsByPlacement(this.placement()));
|
|
3451
|
+
return this.overlay.create({
|
|
3452
|
+
hasBackdrop: false,
|
|
3453
|
+
disposeOnNavigation: true,
|
|
3454
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
3455
|
+
positionStrategy,
|
|
3456
|
+
panelClass: 's4y-tooltip-panel',
|
|
3457
|
+
});
|
|
3458
|
+
}
|
|
3459
|
+
getPositionsByPlacement(p) {
|
|
3460
|
+
const gap = 8;
|
|
3461
|
+
const map = {
|
|
3462
|
+
top: [
|
|
3463
|
+
{
|
|
3464
|
+
originX: 'center',
|
|
3465
|
+
originY: 'top',
|
|
3466
|
+
overlayX: 'center',
|
|
3467
|
+
overlayY: 'bottom',
|
|
3468
|
+
offsetY: -gap,
|
|
3469
|
+
},
|
|
3470
|
+
{
|
|
3471
|
+
originX: 'center',
|
|
3472
|
+
originY: 'bottom',
|
|
3473
|
+
overlayX: 'center',
|
|
3474
|
+
overlayY: 'top',
|
|
3475
|
+
offsetY: gap,
|
|
3476
|
+
},
|
|
3477
|
+
],
|
|
3478
|
+
bottom: [
|
|
3479
|
+
{
|
|
3480
|
+
originX: 'center',
|
|
3481
|
+
originY: 'bottom',
|
|
3482
|
+
overlayX: 'center',
|
|
3483
|
+
overlayY: 'top',
|
|
3484
|
+
offsetY: gap,
|
|
3485
|
+
},
|
|
3486
|
+
{
|
|
3487
|
+
originX: 'center',
|
|
3488
|
+
originY: 'top',
|
|
3489
|
+
overlayX: 'center',
|
|
3490
|
+
overlayY: 'bottom',
|
|
3491
|
+
offsetY: -gap,
|
|
3492
|
+
},
|
|
3493
|
+
],
|
|
3494
|
+
left: [
|
|
3495
|
+
{
|
|
3496
|
+
originX: 'start',
|
|
3497
|
+
originY: 'center',
|
|
3498
|
+
overlayX: 'end',
|
|
3499
|
+
overlayY: 'center',
|
|
3500
|
+
offsetX: -gap,
|
|
3501
|
+
},
|
|
3502
|
+
{
|
|
3503
|
+
originX: 'end',
|
|
3504
|
+
originY: 'center',
|
|
3505
|
+
overlayX: 'start',
|
|
3506
|
+
overlayY: 'center',
|
|
3507
|
+
offsetX: gap,
|
|
3508
|
+
},
|
|
3509
|
+
],
|
|
3510
|
+
right: [
|
|
3511
|
+
{
|
|
3512
|
+
originX: 'end',
|
|
3513
|
+
originY: 'center',
|
|
3514
|
+
overlayX: 'start',
|
|
3515
|
+
overlayY: 'center',
|
|
3516
|
+
offsetX: gap,
|
|
3517
|
+
},
|
|
3518
|
+
{
|
|
3519
|
+
originX: 'start',
|
|
3520
|
+
originY: 'center',
|
|
3521
|
+
overlayX: 'end',
|
|
3522
|
+
overlayY: 'center',
|
|
3523
|
+
offsetX: -gap,
|
|
3524
|
+
},
|
|
3525
|
+
],
|
|
3526
|
+
};
|
|
3527
|
+
return map[p];
|
|
3528
|
+
}
|
|
3529
|
+
dispose() {
|
|
3530
|
+
this.unbindOverlayHoverGuards();
|
|
3531
|
+
this.overlayRef?.dispose();
|
|
3532
|
+
this.overlayRef = undefined;
|
|
3533
|
+
}
|
|
3534
|
+
ngOnDestroy() {
|
|
3535
|
+
this.dispose();
|
|
3536
|
+
}
|
|
3537
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3538
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: DynamicTooltipDirective, isStandalone: true, selector: "[s4yDynamicTooltip]", inputs: { tooltipContent: { classPropertyName: "tooltipContent", publicName: "s4yDynamicTooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "shown()", "mouseleave": "hide($event)" } }, ngImport: i0 });
|
|
3539
|
+
}
|
|
3540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipDirective, decorators: [{
|
|
3541
|
+
type: Directive,
|
|
3542
|
+
args: [{
|
|
3543
|
+
selector: '[s4yDynamicTooltip]',
|
|
3544
|
+
}]
|
|
3545
|
+
}], ctorParameters: () => [], propDecorators: { shown: [{
|
|
3546
|
+
type: HostListener,
|
|
3547
|
+
args: ['mouseenter']
|
|
3548
|
+
}], hide: [{
|
|
3549
|
+
type: HostListener,
|
|
3550
|
+
args: ['mouseleave', ['$event']]
|
|
3551
|
+
}] } });
|
|
3552
|
+
|
|
3553
|
+
class SummaryCardComponent {
|
|
3554
|
+
props = input({
|
|
3555
|
+
withFooter: false,
|
|
3556
|
+
withIcon: false,
|
|
3557
|
+
withTooltip: false,
|
|
3558
|
+
iconSize: 18,
|
|
3559
|
+
iconBackgroundColor: '#4b5563',
|
|
3560
|
+
});
|
|
3561
|
+
footerTpl = contentChild('footerTpl');
|
|
3562
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SummaryCardComponent, isStandalone: true, selector: "s4y-summary-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n <div class=\"s4y-summary-card-header__content\">\r\n <p class=\"small-text-regular gray-7\">\r\n {{ summaryProps.label }}\r\n </p>\r\n\r\n @if (summaryProps.withTooltip) {\r\n <svg\r\n [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"14\"\r\n height=\"14\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n @if (showIcon) {\r\n <div\r\n class=\"s4y-summary-card-icon\"\r\n [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n >\r\n <s4y-svg\r\n [size]=\"summaryProps.iconSize ?? 18\"\r\n [color]=\"summaryProps.iconColor || '#fff'\"\r\n [src]=\"summaryProps.iconUri\"\r\n ></s4y-svg>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n <p class=\"medium-text-bold gray-9\">\r\n {{ summaryProps.value }}\r\n </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n <div class=\"s4y-summary-card-footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTooltipDirective, selector: "[s4yDynamicTooltip]", inputs: ["s4yDynamicTooltip", "placement"] }] });
|
|
3564
|
+
}
|
|
3565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SummaryCardComponent, decorators: [{
|
|
3566
|
+
type: Component,
|
|
3567
|
+
args: [{ selector: 's4y-summary-card', imports: [SvgComponent, NgTemplateOutlet, DynamicTooltipDirective], template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n <div class=\"s4y-summary-card-header__content\">\r\n <p class=\"small-text-regular gray-7\">\r\n {{ summaryProps.label }}\r\n </p>\r\n\r\n @if (summaryProps.withTooltip) {\r\n <svg\r\n [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"14\"\r\n height=\"14\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n @if (showIcon) {\r\n <div\r\n class=\"s4y-summary-card-icon\"\r\n [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n >\r\n <s4y-svg\r\n [size]=\"summaryProps.iconSize ?? 18\"\r\n [color]=\"summaryProps.iconColor || '#fff'\"\r\n [src]=\"summaryProps.iconUri\"\r\n ></s4y-svg>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n <p class=\"medium-text-bold gray-9\">\r\n {{ summaryProps.value }}\r\n </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n <div class=\"s4y-summary-card-footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"] }]
|
|
3568
|
+
}] });
|
|
3569
|
+
|
|
3158
3570
|
const selectMultiAnim = trigger('selectMultiAnim', [
|
|
3159
3571
|
// entra
|
|
3160
3572
|
transition(':enter', [
|
|
@@ -3301,8 +3713,8 @@ class SelectMultiComponent {
|
|
|
3301
3713
|
this._onChange(stillValid);
|
|
3302
3714
|
}
|
|
3303
3715
|
});
|
|
3304
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3716
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectMultiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3717
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectMultiComponent, isStandalone: true, selector: "s4y-select-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, withCheckAll: { classPropertyName: "withCheckAll", publicName: "withCheckAll", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, preserveSelectionOnFilter: { classPropertyName: "preserveSelectionOnFilter", publicName: "preserveSelectionOnFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", search: "searchChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" }, properties: { "style.maxWidth": "maxScreen() ? \"100%\" : \"32rem\"", "attr.tabindex": "0", "class.disabled": "disabled()", "attr.aria-disabled": "disabled()", "attr.role": "\"combobox\"", "attr.aria-expanded": "opened()", "attr.aria-haspopup": "\"listbox\"" } }, providers: [
|
|
3306
3718
|
{
|
|
3307
3719
|
provide: NG_VALUE_ACCESSOR,
|
|
3308
3720
|
multi: true,
|
|
@@ -3310,7 +3722,7 @@ class SelectMultiComponent {
|
|
|
3310
3722
|
},
|
|
3311
3723
|
], ngImport: i0, template: "<label class=\"s4y-select-label\">\r\n {{ label() }}\r\n</label>\r\n\r\n<div class=\"s4y-select\">\r\n <!-- Campo principal -->\r\n <button\r\n type=\"button\"\r\n class=\"s4y-select-field\"\r\n [attr.aria-expanded]=\"opened()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <ng-container *ngIf=\"value().length; else placeholderTpl\">\r\n <div class=\"chips\">\r\n <span class=\"chip\" *ngFor=\"let v of value()\">\r\n {{ displayWith()(v) }}\r\n <button\r\n type=\"button\"\r\n class=\"chip-remove\"\r\n (click)=\"$event.stopPropagation(); removeChip(v)\"\r\n [disabled]=\"disabled()\"\r\n aria-label=\"Remover\"\r\n >\r\n \u00D7\r\n </button>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <ng-template #placeholderTpl>\r\n <span>{{ placeholder() }}</span>\r\n </ng-template>\r\n <div class=\"arrow\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"opened() ? arrowUp : arrowDown\"\r\n ></ng-container>\r\n </div>\r\n </button>\r\n\r\n <div class=\"s4y-select-dropdown-container\">\r\n <div\r\n @selectMultiAnim\r\n class=\"s4y-select-dropdown\"\r\n [class.gap-1]=\"filteredOptions().length\"\r\n *ngIf=\"opened()\"\r\n >\r\n <div class=\"dropdown-actions\">\r\n @if (withSearch()) {\r\n <label class=\"s4y-dropdown-search\">\r\n <input\r\n type=\"text\"\r\n class=\"search\"\r\n [placeholder]=\"'Buscar...'\"\r\n [value]=\"search()\"\r\n (input)=\"onSearch($event)\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </label>\r\n }\r\n\r\n @if (withCheckAll()) {\r\n <label class=\"check-all\">\r\n <input\r\n s4yCheckbox\r\n type=\"checkbox\"\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (change)=\"toggleSelectAll()\"\r\n />\r\n Marcar todos\r\n </label>\r\n }\r\n </div>\r\n\r\n @if (loading()) {\r\n <div class=\"s4y-loading flex align-center justify-center\">\r\n <s4y-spinner size=\"mini\"></s4y-spinner>\r\n </div>\r\n } @else {\r\n <div class=\"options\">\r\n <button\r\n type=\"button\"\r\n class=\"option\"\r\n *ngFor=\"let opt of filteredOptions()\"\r\n (click)=\"toggleOption(opt)\"\r\n [class.selected]=\"isSelected(opt)\"\r\n >\r\n <input\r\n s4yCheckbox\r\n type=\"checkbox\"\r\n [checked]=\"isSelected(opt)\"\r\n tabindex=\"-1\"\r\n />\r\n <span class=\"text-small\">{{ displayWith()(opt) }}</span>\r\n </button>\r\n\r\n <div class=\"no-results\" *ngIf=\"!filteredOptions().length\">\r\n {{ emptyMessage() }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <ng-content select=\"s4y-error-message\"></ng-content>\r\n\r\n <!-- Dropdown -->\r\n</div>\r\n\r\n<!-- Arros -->\r\n\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}:host.disabled{pointer-events:none;opacity:.7;cursor:not-allowed;-webkit-user-select:none;user-select:none}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-field,:host.ng-invalid.ng-dirty .s4y-select-field{border:1px solid var(--danger-color);background-color:#fff6f5}.s4y-select-label{margin-bottom:.8rem;font-size:1.4rem;display:inline-block}.s4y-select{position:relative;width:100%}.s4y-select-field{border-radius:var(--radius);align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem;display:flex;width:100%}.chips{display:flex;gap:6px;overflow-x:hidden}.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#f1f3f5;border:1px solid #e5e7eb;white-space:nowrap}.chip .chip-remove{border:0;background:transparent;cursor:pointer}.s4y-select-dropdown-container{position:relative;margin-top:.8rem}.s4y-dropdown-search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem;width:100%}.s4y-dropdown-search input{font-size:1.4rem}.s4y-dropdown-search input::placeholder{font-size:1.4rem}.s4y-select-dropdown{position:absolute;top:0;left:0;display:flex;flex-direction:column;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.dropdown-actions{display:flex;gap:8px;align-items:flex-start;flex-direction:column}.dropdown-actions .check-all{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius);text-align:left;cursor:pointer;background:transparent;font-size:1.4rem}.options{display:flex;flex-direction:column;max-height:240px;overflow-y:auto}.option{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius);text-align:left;cursor:pointer;background:transparent}.option span{font-size:1.4rem}.option:hover{background-color:var(--gray-300)}.arrow{flex-shrink:0;display:flex;align-items:center;justify-content:center}.no-results{font-size:1.4rem;color:var(--gray-900)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "input[s4yCheckbox][type=\"checkbox\"]" }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], animations: [selectMultiAnim] });
|
|
3312
3724
|
}
|
|
3313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectMultiComponent, decorators: [{
|
|
3314
3726
|
type: Component,
|
|
3315
3727
|
args: [{ selector: 's4y-select-multi', imports: [CommonModule, CheckboxComponent, SpinnerComponent], providers: [
|
|
3316
3728
|
{
|
|
@@ -3384,6 +3796,7 @@ class DynamicDialogRef {
|
|
|
3384
3796
|
isClosing = false;
|
|
3385
3797
|
_container;
|
|
3386
3798
|
_opts;
|
|
3799
|
+
_contentComponentRef;
|
|
3387
3800
|
constructor(overlayRef) {
|
|
3388
3801
|
this.overlayRef = overlayRef;
|
|
3389
3802
|
this.afterOpened$ = this._afterOpened.asObservable();
|
|
@@ -3466,6 +3879,15 @@ class DynamicDialogRef {
|
|
|
3466
3879
|
}
|
|
3467
3880
|
this.overlayRef.dispose();
|
|
3468
3881
|
}
|
|
3882
|
+
_attachContentComponent(componentRef) {
|
|
3883
|
+
this._contentComponentRef = componentRef;
|
|
3884
|
+
}
|
|
3885
|
+
getComponent() {
|
|
3886
|
+
return this._contentComponentRef?.instance;
|
|
3887
|
+
}
|
|
3888
|
+
hasComponent() {
|
|
3889
|
+
return !!this._contentComponentRef;
|
|
3890
|
+
}
|
|
3469
3891
|
_attachForButtonUpdates(container, opts) {
|
|
3470
3892
|
this._container = container;
|
|
3471
3893
|
this._opts = opts;
|
|
@@ -3538,10 +3960,17 @@ class DynamicDialogComponent {
|
|
|
3538
3960
|
footerTemplate;
|
|
3539
3961
|
contentTemplate;
|
|
3540
3962
|
templateContext;
|
|
3963
|
+
portalOutlet;
|
|
3541
3964
|
constructor(ref, dialogOptions) {
|
|
3542
3965
|
this.ref = ref;
|
|
3543
3966
|
this.dialogOptions = dialogOptions;
|
|
3544
3967
|
}
|
|
3968
|
+
ngAfterViewInit() {
|
|
3969
|
+
if (this.portalOutlet?.attachedRef) {
|
|
3970
|
+
console.log();
|
|
3971
|
+
this.ref._attachContentComponent(this.portalOutlet.attachedRef);
|
|
3972
|
+
}
|
|
3973
|
+
}
|
|
3545
3974
|
get data() {
|
|
3546
3975
|
return this.injectedData;
|
|
3547
3976
|
}
|
|
@@ -3550,7 +3979,12 @@ class DynamicDialogComponent {
|
|
|
3550
3979
|
return;
|
|
3551
3980
|
this.okLoading = true;
|
|
3552
3981
|
try {
|
|
3553
|
-
const
|
|
3982
|
+
const component = this.ref.getComponent();
|
|
3983
|
+
const out = await toHandlerResult(this.dialogOptions?.onOk?.({
|
|
3984
|
+
data: this.injectedData,
|
|
3985
|
+
ref: this.ref,
|
|
3986
|
+
component,
|
|
3987
|
+
}));
|
|
3554
3988
|
if (out === false)
|
|
3555
3989
|
return;
|
|
3556
3990
|
const result = out === true || typeof out === 'undefined' ? undefined : out;
|
|
@@ -3566,9 +4000,11 @@ class DynamicDialogComponent {
|
|
|
3566
4000
|
return;
|
|
3567
4001
|
// this.cancelLoading = true;
|
|
3568
4002
|
try {
|
|
4003
|
+
const component = this.ref.getComponent();
|
|
3569
4004
|
const out = await toHandlerResult(this.dialogOptions?.onCancel?.({
|
|
3570
4005
|
data: this.injectedData,
|
|
3571
4006
|
ref: this.ref,
|
|
4007
|
+
component,
|
|
3572
4008
|
}));
|
|
3573
4009
|
if (out === false)
|
|
3574
4010
|
return; // NÃO fecha
|
|
@@ -3579,10 +4015,10 @@ class DynamicDialogComponent {
|
|
|
3579
4015
|
this.cancelLoading = false;
|
|
3580
4016
|
}
|
|
3581
4017
|
}
|
|
3582
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3583
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4018
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
4019
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n @if (headerTemplate) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n </header>\r\n } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n <p class=\"s4y-dialog-header__description\">\r\n {{ dialogOptions?.description }}\r\n </p>\r\n </header>\r\n }\r\n\r\n @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n ×\r\n </button>\r\n }\r\n\r\n <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n @if (contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n <ng-template\r\n cdkPortalOutlet\r\n [cdkPortalOutlet]=\"contentPortal\"\r\n ></ng-template>\r\n }\r\n </section>\r\n\r\n @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n @if (!(dialogOptions?.hideFooter ?? false)) {\r\n <footer\r\n class=\"flex gap-1 s4y-dialog__footer\"\r\n [ngStyle]=\"dialogOptions?.footerStyle\"\r\n >\r\n @if (footerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n @if (cancelBtnOptions?.text) {\r\n <button\r\n (click)=\"onCancel()\"\r\n [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n </button>\r\n }\r\n @if (okBtnOptions?.text) {\r\n <button\r\n (click)=\"onOk()\"\r\n [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n [size]=\"okBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ okBtnOptions?.text ?? \"Ok\" }}\r\n </button>\r\n }\r\n }\r\n </footer>\r\n }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
|
|
3584
4020
|
}
|
|
3585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4021
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogComponent, decorators: [{
|
|
3586
4022
|
type: Component,
|
|
3587
4023
|
args: [{ selector: 's4y-dynamic-dialog', imports: [CdkPortalOutlet, ButtonComponent, NgStyle, NgIf, NgTemplateOutlet], host: {
|
|
3588
4024
|
role: 'dialog',
|
|
@@ -3604,12 +4040,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3604
4040
|
type: Input
|
|
3605
4041
|
}], templateContext: [{
|
|
3606
4042
|
type: Input
|
|
4043
|
+
}], portalOutlet: [{
|
|
4044
|
+
type: ViewChild,
|
|
4045
|
+
args: [CdkPortalOutlet, { static: false }]
|
|
3607
4046
|
}] } });
|
|
3608
4047
|
|
|
3609
4048
|
class DynamicDialogService {
|
|
3610
4049
|
overlay = inject(Overlay);
|
|
3611
4050
|
rootInjector = inject(Injector);
|
|
3612
|
-
open(component, opts
|
|
4051
|
+
open(component, opts) {
|
|
4052
|
+
opts = opts ?? {};
|
|
3613
4053
|
const overlayRef = this.overlay.create(this.buildOverlayConfig(opts));
|
|
3614
4054
|
overlayRef.updateSize({
|
|
3615
4055
|
width: opts.width ?? 'auto',
|
|
@@ -3698,16 +4138,1035 @@ class DynamicDialogService {
|
|
|
3698
4138
|
],
|
|
3699
4139
|
};
|
|
3700
4140
|
}
|
|
3701
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3702
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4142
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogService, providedIn: 'root' });
|
|
3703
4143
|
}
|
|
3704
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogService, decorators: [{
|
|
3705
4145
|
type: Injectable,
|
|
3706
4146
|
args: [{
|
|
3707
4147
|
providedIn: 'root',
|
|
3708
4148
|
}]
|
|
3709
4149
|
}] });
|
|
3710
4150
|
|
|
4151
|
+
class DynamicLoadingGlobalComponent {
|
|
4152
|
+
message = signal('Carregando dados...');
|
|
4153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DynamicLoadingGlobalComponent, isStandalone: true, selector: "s4y-dynamic-loading-global", ngImport: i0, template: `
|
|
4155
|
+
<div class="s4y-dynamic-loading-container">
|
|
4156
|
+
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4157
|
+
<p>{{ message() }}</p>
|
|
4158
|
+
</div>
|
|
4159
|
+
`, isInline: true, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
4160
|
+
}
|
|
4161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalComponent, decorators: [{
|
|
4162
|
+
type: Component,
|
|
4163
|
+
args: [{ selector: 's4y-dynamic-loading-global', imports: [], template: `
|
|
4164
|
+
<div class="s4y-dynamic-loading-container">
|
|
4165
|
+
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4166
|
+
<p>{{ message() }}</p>
|
|
4167
|
+
</div>
|
|
4168
|
+
`, encapsulation: ViewEncapsulation.None, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4169
|
+
}] });
|
|
4170
|
+
|
|
4171
|
+
class DynamicLoadingGlobalService {
|
|
4172
|
+
overlay = inject(Overlay);
|
|
4173
|
+
overlays = new Map();
|
|
4174
|
+
constructor() { }
|
|
4175
|
+
showLoading(message) {
|
|
4176
|
+
const overlayRef = this.createOverlay();
|
|
4177
|
+
const portal = this.loadingComponentPortal();
|
|
4178
|
+
const id = crypto.randomUUID();
|
|
4179
|
+
const componentRef = overlayRef.attach(portal);
|
|
4180
|
+
if (message) {
|
|
4181
|
+
componentRef.instance.message.set(message);
|
|
4182
|
+
}
|
|
4183
|
+
this.overlays.set(id, { overlayRef, componentRef });
|
|
4184
|
+
return id;
|
|
4185
|
+
}
|
|
4186
|
+
updateMessage(id, message) {
|
|
4187
|
+
const entry = this.overlays.get(id);
|
|
4188
|
+
if (entry) {
|
|
4189
|
+
entry.componentRef.instance.message.set(message);
|
|
4190
|
+
}
|
|
4191
|
+
}
|
|
4192
|
+
hiddenLoading(id) {
|
|
4193
|
+
if (id) {
|
|
4194
|
+
const entry = this.overlays.get(id);
|
|
4195
|
+
if (entry) {
|
|
4196
|
+
entry.overlayRef.dispose();
|
|
4197
|
+
this.overlays.delete(id);
|
|
4198
|
+
}
|
|
4199
|
+
}
|
|
4200
|
+
else {
|
|
4201
|
+
this.overlays.forEach((entry) => entry.overlayRef.dispose());
|
|
4202
|
+
this.overlays.clear();
|
|
4203
|
+
}
|
|
4204
|
+
}
|
|
4205
|
+
loadingComponentPortal() {
|
|
4206
|
+
return new ComponentPortal(DynamicLoadingGlobalComponent);
|
|
4207
|
+
}
|
|
4208
|
+
createOverlay() {
|
|
4209
|
+
return this.overlay.create({
|
|
4210
|
+
backdropClass: ['s4y-overlay-bg'],
|
|
4211
|
+
panelClass: ['s4y-centered-panel-content'],
|
|
4212
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
4213
|
+
hasBackdrop: true,
|
|
4214
|
+
disposeOnNavigation: true,
|
|
4215
|
+
});
|
|
4216
|
+
}
|
|
4217
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4218
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalService, providedIn: 'root' });
|
|
4219
|
+
}
|
|
4220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalService, decorators: [{
|
|
4221
|
+
type: Injectable,
|
|
4222
|
+
args: [{
|
|
4223
|
+
providedIn: 'root',
|
|
4224
|
+
}]
|
|
4225
|
+
}], ctorParameters: () => [] });
|
|
4226
|
+
|
|
4227
|
+
const SIZE_MAP = {
|
|
4228
|
+
xs: 16,
|
|
4229
|
+
sm: 20,
|
|
4230
|
+
md: 24,
|
|
4231
|
+
lg: 32,
|
|
4232
|
+
xl: 40,
|
|
4233
|
+
};
|
|
4234
|
+
class RatingComponent {
|
|
4235
|
+
sanitizer = inject(DomSanitizer);
|
|
4236
|
+
value = signal(0);
|
|
4237
|
+
hoverValue = signal(null);
|
|
4238
|
+
count = input(5);
|
|
4239
|
+
size = input('md');
|
|
4240
|
+
sizePx = computed(() => {
|
|
4241
|
+
const size = this.size();
|
|
4242
|
+
return typeof size === 'number' ? size : (SIZE_MAP[size] ?? SIZE_MAP.md);
|
|
4243
|
+
});
|
|
4244
|
+
allowHalf = input(false);
|
|
4245
|
+
readOnly = input(false);
|
|
4246
|
+
disabled = signal(false);
|
|
4247
|
+
onChange = () => { };
|
|
4248
|
+
onTouched = () => { };
|
|
4249
|
+
stars = computed(() => {
|
|
4250
|
+
const totalStars = this.count(); // número, ex: 5
|
|
4251
|
+
const displayValue = this.hoverValue() ?? this.value();
|
|
4252
|
+
const result = [];
|
|
4253
|
+
for (let i = 0; i < totalStars; i++) {
|
|
4254
|
+
let icon = this.starLineIcon;
|
|
4255
|
+
if (displayValue >= i + 1) {
|
|
4256
|
+
icon = this.starFillIcon;
|
|
4257
|
+
}
|
|
4258
|
+
else if (this.allowHalf() && displayValue >= i + 0.5) {
|
|
4259
|
+
icon = this.starHalfIcon;
|
|
4260
|
+
}
|
|
4261
|
+
result.push(this.sanitizer.bypassSecurityTrustHtml(icon));
|
|
4262
|
+
}
|
|
4263
|
+
return result;
|
|
4264
|
+
});
|
|
4265
|
+
get isDisabledClass() {
|
|
4266
|
+
return this.disabled();
|
|
4267
|
+
}
|
|
4268
|
+
get isReadOnlyClass() {
|
|
4269
|
+
return this.readOnly();
|
|
4270
|
+
}
|
|
4271
|
+
clearHoverStar() {
|
|
4272
|
+
this.hoverValue.set(null);
|
|
4273
|
+
}
|
|
4274
|
+
writeValue(value) {
|
|
4275
|
+
const total = this.count();
|
|
4276
|
+
const normalized = typeof value === 'number' ? Math.max(0, Math.min(value, total)) : 0;
|
|
4277
|
+
this.value.set(this.allowHalf()
|
|
4278
|
+
? Math.round(normalized * 2) / 2
|
|
4279
|
+
: Math.round(normalized));
|
|
4280
|
+
}
|
|
4281
|
+
registerOnChange(fn) {
|
|
4282
|
+
this.onChange = fn;
|
|
4283
|
+
}
|
|
4284
|
+
registerOnTouched(fn) {
|
|
4285
|
+
this.onTouched = fn;
|
|
4286
|
+
}
|
|
4287
|
+
setDisabledState(isDisabled) {
|
|
4288
|
+
this.disabled.set(isDisabled);
|
|
4289
|
+
}
|
|
4290
|
+
setRating(index, event) {
|
|
4291
|
+
if (!this.isInteractive)
|
|
4292
|
+
return;
|
|
4293
|
+
//é um array, entao a posicao é 0
|
|
4294
|
+
const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
|
|
4295
|
+
if (next === this.value()) {
|
|
4296
|
+
this.updateValue(0);
|
|
4297
|
+
this.hoverValue.set(null);
|
|
4298
|
+
}
|
|
4299
|
+
else {
|
|
4300
|
+
this.updateValue(next);
|
|
4301
|
+
}
|
|
4302
|
+
}
|
|
4303
|
+
onKey(event) {
|
|
4304
|
+
if (!this.isInteractive)
|
|
4305
|
+
return;
|
|
4306
|
+
const total = this.count();
|
|
4307
|
+
const step = this.allowHalf() ? 0.5 : 1;
|
|
4308
|
+
const base = this.hoverValue() ?? this.value();
|
|
4309
|
+
if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
|
|
4310
|
+
const next = Math.min(base + step, total);
|
|
4311
|
+
this.hoverValue.set(next);
|
|
4312
|
+
event.preventDefault();
|
|
4313
|
+
return;
|
|
4314
|
+
}
|
|
4315
|
+
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
|
|
4316
|
+
const next = Math.max(base - step, 0);
|
|
4317
|
+
this.hoverValue.set(next);
|
|
4318
|
+
event.preventDefault();
|
|
4319
|
+
return;
|
|
4320
|
+
}
|
|
4321
|
+
if (event.key === 'Home') {
|
|
4322
|
+
this.hoverValue.set(0);
|
|
4323
|
+
event.preventDefault();
|
|
4324
|
+
return;
|
|
4325
|
+
}
|
|
4326
|
+
if (event.key === 'End') {
|
|
4327
|
+
this.hoverValue.set(total);
|
|
4328
|
+
event.preventDefault();
|
|
4329
|
+
return;
|
|
4330
|
+
}
|
|
4331
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
4332
|
+
const targetValue = this.hoverValue() ?? this.value();
|
|
4333
|
+
this.updateValue(targetValue);
|
|
4334
|
+
this.hoverValue.set(null);
|
|
4335
|
+
event.preventDefault();
|
|
4336
|
+
return;
|
|
4337
|
+
}
|
|
4338
|
+
if (event.key === 'Escape') {
|
|
4339
|
+
this.hoverValue.set(null);
|
|
4340
|
+
event.preventDefault();
|
|
4341
|
+
return;
|
|
4342
|
+
}
|
|
4343
|
+
}
|
|
4344
|
+
onStarHover(index, event) {
|
|
4345
|
+
if (!this.isInteractive)
|
|
4346
|
+
return;
|
|
4347
|
+
if (this.allowHalf()) {
|
|
4348
|
+
this.hoverValue.set(this.computeHalf(index, event));
|
|
4349
|
+
}
|
|
4350
|
+
else {
|
|
4351
|
+
this.hoverValue.set(index + 1);
|
|
4352
|
+
}
|
|
4353
|
+
}
|
|
4354
|
+
onStarHoverTouch(index, event) {
|
|
4355
|
+
if (!this.isInteractive)
|
|
4356
|
+
return;
|
|
4357
|
+
if (this.allowHalf()) {
|
|
4358
|
+
this.hoverValue.set(this.computeHalf(index, event));
|
|
4359
|
+
}
|
|
4360
|
+
else {
|
|
4361
|
+
this.hoverValue.set(index + 1);
|
|
4362
|
+
}
|
|
4363
|
+
}
|
|
4364
|
+
onTouchCommit(index, event) {
|
|
4365
|
+
if (!this.isInteractive)
|
|
4366
|
+
return;
|
|
4367
|
+
const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
|
|
4368
|
+
// Em mobile, toque único normalmente deve setar; se tocar de novo no mesmo, zera:
|
|
4369
|
+
if (next === this.value()) {
|
|
4370
|
+
this.updateValue(0);
|
|
4371
|
+
this.hoverValue.set(null);
|
|
4372
|
+
}
|
|
4373
|
+
else {
|
|
4374
|
+
this.updateValue(next);
|
|
4375
|
+
}
|
|
4376
|
+
// evita rolagem acidental ao tocar/arrastar levemente
|
|
4377
|
+
event.preventDefault();
|
|
4378
|
+
}
|
|
4379
|
+
updateValue(value) {
|
|
4380
|
+
const newValue = this.allowHalf()
|
|
4381
|
+
? Math.round(value * 2) / 2
|
|
4382
|
+
: Math.round(value);
|
|
4383
|
+
this.value.set(newValue);
|
|
4384
|
+
this.onChange(newValue);
|
|
4385
|
+
this.onTouched();
|
|
4386
|
+
}
|
|
4387
|
+
getClientXFromEvent(e) {
|
|
4388
|
+
if (e instanceof TouchEvent) {
|
|
4389
|
+
const t = e.touches[0] ?? e.changedTouches[0];
|
|
4390
|
+
return t?.clientX ?? 0;
|
|
4391
|
+
}
|
|
4392
|
+
return e.clientX ?? 0;
|
|
4393
|
+
}
|
|
4394
|
+
computeHalf(index, e) {
|
|
4395
|
+
const target = e.currentTarget;
|
|
4396
|
+
const rect = target.getBoundingClientRect();
|
|
4397
|
+
const clientX = this.getClientXFromEvent(e);
|
|
4398
|
+
const relativeX = clientX - rect.left; // 0..width
|
|
4399
|
+
const isHalf = relativeX < rect.width / 2;
|
|
4400
|
+
return isHalf ? index + 0.5 : index + 1;
|
|
4401
|
+
}
|
|
4402
|
+
get isInteractive() {
|
|
4403
|
+
return !this.disabled() && !this.readOnly();
|
|
4404
|
+
}
|
|
4405
|
+
get starLineIcon() {
|
|
4406
|
+
return `<svg
|
|
4407
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4408
|
+
viewBox="0 0 24 24"
|
|
4409
|
+
fill="currentColor"
|
|
4410
|
+
>
|
|
4411
|
+
<path
|
|
4412
|
+
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z"
|
|
4413
|
+
></path>
|
|
4414
|
+
</svg>`;
|
|
4415
|
+
}
|
|
4416
|
+
get starFillIcon() {
|
|
4417
|
+
return `<svg
|
|
4418
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4419
|
+
viewBox="0 0 24 24"
|
|
4420
|
+
fill="currentColor"
|
|
4421
|
+
>
|
|
4422
|
+
<path
|
|
4423
|
+
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
|
|
4424
|
+
></path>
|
|
4425
|
+
</svg>`;
|
|
4426
|
+
}
|
|
4427
|
+
get starHalfIcon() {
|
|
4428
|
+
return `
|
|
4429
|
+
<svg
|
|
4430
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4431
|
+
viewBox="0 0 24 24"
|
|
4432
|
+
fill="currentColor"
|
|
4433
|
+
>
|
|
4434
|
+
<path
|
|
4435
|
+
d="M12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502V15.968ZM12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
|
|
4436
|
+
></path>
|
|
4437
|
+
</svg>
|
|
4438
|
+
`;
|
|
4439
|
+
}
|
|
4440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RatingComponent, isStandalone: true, selector: "s4y-rating", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowHalf: { classPropertyName: "allowHalf", publicName: "allowHalf", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseleave": "clearHoverStar()" }, properties: { "class.s4y-rating--disabled": "this.isDisabledClass", "class.s4y-rating--readonly": "this.isReadOnlyClass" } }, providers: [
|
|
4442
|
+
{
|
|
4443
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4444
|
+
useExisting: forwardRef(() => RatingComponent),
|
|
4445
|
+
multi: true,
|
|
4446
|
+
},
|
|
4447
|
+
], ngImport: i0, template: "<div\r\n class=\"s4y-star-container\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"count()\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n tabindex=\"0\"\r\n (blur)=\"onTouched()\"\r\n (keydown)=\"onKey($event)\"\r\n>\r\n @for (star of stars(); track $index) {\r\n <button\r\n tabindex=\"-1\"\r\n (click)=\"setRating($index, $event)\"\r\n (mousemove)=\"onStarHover($index, $event)\"\r\n (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n (touchend)=\"onTouchCommit($index, $event)\"\r\n [innerHTML]=\"star\"\r\n [disabled]=\"disabled()\"\r\n role=\"button\"\r\n class=\"s4y-star-item\"\r\n [style.height.px]=\"sizePx()\"\r\n [style.width.px]=\"sizePx()\"\r\n [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n ></button>\r\n }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] });
|
|
4448
|
+
}
|
|
4449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RatingComponent, decorators: [{
|
|
4450
|
+
type: Component,
|
|
4451
|
+
args: [{ selector: 's4y-rating', providers: [
|
|
4452
|
+
{
|
|
4453
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4454
|
+
useExisting: forwardRef(() => RatingComponent),
|
|
4455
|
+
multi: true,
|
|
4456
|
+
},
|
|
4457
|
+
], template: "<div\r\n class=\"s4y-star-container\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"count()\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n tabindex=\"0\"\r\n (blur)=\"onTouched()\"\r\n (keydown)=\"onKey($event)\"\r\n>\r\n @for (star of stars(); track $index) {\r\n <button\r\n tabindex=\"-1\"\r\n (click)=\"setRating($index, $event)\"\r\n (mousemove)=\"onStarHover($index, $event)\"\r\n (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n (touchend)=\"onTouchCommit($index, $event)\"\r\n [innerHTML]=\"star\"\r\n [disabled]=\"disabled()\"\r\n role=\"button\"\r\n class=\"s4y-star-item\"\r\n [style.height.px]=\"sizePx()\"\r\n [style.width.px]=\"sizePx()\"\r\n [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n ></button>\r\n }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] }]
|
|
4458
|
+
}], propDecorators: { isDisabledClass: [{
|
|
4459
|
+
type: HostBinding,
|
|
4460
|
+
args: ['class.s4y-rating--disabled']
|
|
4461
|
+
}], isReadOnlyClass: [{
|
|
4462
|
+
type: HostBinding,
|
|
4463
|
+
args: ['class.s4y-rating--readonly']
|
|
4464
|
+
}], clearHoverStar: [{
|
|
4465
|
+
type: HostListener,
|
|
4466
|
+
args: ['mouseleave']
|
|
4467
|
+
}] } });
|
|
4468
|
+
|
|
4469
|
+
class TagComponent {
|
|
4470
|
+
injector = inject(Injector);
|
|
4471
|
+
editInput = viewChild('editInput');
|
|
4472
|
+
size = input('md');
|
|
4473
|
+
severity = input('primary');
|
|
4474
|
+
value = model('');
|
|
4475
|
+
outlined = input(false);
|
|
4476
|
+
withShadow = input(true);
|
|
4477
|
+
editable = input(false);
|
|
4478
|
+
isEditing = signal(false);
|
|
4479
|
+
editStart = output();
|
|
4480
|
+
editEnd = output();
|
|
4481
|
+
class = computed(() => {
|
|
4482
|
+
let baseClass = '';
|
|
4483
|
+
switch (this.severity()) {
|
|
4484
|
+
case 'success':
|
|
4485
|
+
baseClass = 'tag-success';
|
|
4486
|
+
break;
|
|
4487
|
+
case 'error':
|
|
4488
|
+
baseClass = 'tag-error';
|
|
4489
|
+
break;
|
|
4490
|
+
case 'info':
|
|
4491
|
+
baseClass = 'tag-info';
|
|
4492
|
+
break;
|
|
4493
|
+
case 'warning':
|
|
4494
|
+
baseClass = 'tag-warning';
|
|
4495
|
+
break;
|
|
4496
|
+
case 'neutral':
|
|
4497
|
+
baseClass = 'tag-neutral';
|
|
4498
|
+
break;
|
|
4499
|
+
case 'primary':
|
|
4500
|
+
baseClass = 'tag-primary';
|
|
4501
|
+
break;
|
|
4502
|
+
case 'secondary':
|
|
4503
|
+
baseClass = 'tag-secondary';
|
|
4504
|
+
break;
|
|
4505
|
+
case 'finished':
|
|
4506
|
+
baseClass = 'tag-finished';
|
|
4507
|
+
break;
|
|
4508
|
+
default:
|
|
4509
|
+
baseClass = 'tag-primary';
|
|
4510
|
+
}
|
|
4511
|
+
const outline = this.outlined() ? ' outlined' : '';
|
|
4512
|
+
return `${baseClass}${outline} ${this.sizeClass()}`;
|
|
4513
|
+
});
|
|
4514
|
+
sizeClass = computed(() => {
|
|
4515
|
+
switch (this.size()) {
|
|
4516
|
+
case 'xs':
|
|
4517
|
+
return 'size-xs';
|
|
4518
|
+
case 'sm':
|
|
4519
|
+
return 'size-sm';
|
|
4520
|
+
case 'md':
|
|
4521
|
+
return 'size-md';
|
|
4522
|
+
case 'lg':
|
|
4523
|
+
return 'size-lg';
|
|
4524
|
+
case 'xl':
|
|
4525
|
+
return 'size-xl';
|
|
4526
|
+
default:
|
|
4527
|
+
return 'size-md';
|
|
4528
|
+
}
|
|
4529
|
+
});
|
|
4530
|
+
constructor() {
|
|
4531
|
+
effect(() => {
|
|
4532
|
+
if (this.isEditing()) {
|
|
4533
|
+
afterNextRender(() => {
|
|
4534
|
+
const el = this.editInput()?.nativeElement;
|
|
4535
|
+
if (el) {
|
|
4536
|
+
el.focus();
|
|
4537
|
+
// el.select();
|
|
4538
|
+
}
|
|
4539
|
+
}, { injector: this.injector });
|
|
4540
|
+
}
|
|
4541
|
+
});
|
|
4542
|
+
}
|
|
4543
|
+
shadow = computed(() => this.withShadow() ? ' box-shadow: var(--shadow-default);' : null);
|
|
4544
|
+
onDblClick(_) {
|
|
4545
|
+
this.startEdit();
|
|
4546
|
+
}
|
|
4547
|
+
startEdit() {
|
|
4548
|
+
if (!this.editable())
|
|
4549
|
+
return;
|
|
4550
|
+
if (!this.isEditing()) {
|
|
4551
|
+
this.isEditing.set(true);
|
|
4552
|
+
this.editStart.emit();
|
|
4553
|
+
}
|
|
4554
|
+
}
|
|
4555
|
+
stopEdit(commit = true) {
|
|
4556
|
+
if (this.isEditing()) {
|
|
4557
|
+
this.isEditing.set(false);
|
|
4558
|
+
this.editEnd.emit();
|
|
4559
|
+
}
|
|
4560
|
+
}
|
|
4561
|
+
setValue(event) {
|
|
4562
|
+
const value = event.target.value;
|
|
4563
|
+
this.value.set(value);
|
|
4564
|
+
}
|
|
4565
|
+
onKeydown(event) {
|
|
4566
|
+
if (!this.editable())
|
|
4567
|
+
return;
|
|
4568
|
+
if (event.key === 'Enter' && !this.isEditing()) {
|
|
4569
|
+
event.preventDefault();
|
|
4570
|
+
this.startEdit();
|
|
4571
|
+
}
|
|
4572
|
+
else if (event.key === 'Escape' && this.isEditing()) {
|
|
4573
|
+
event.preventDefault();
|
|
4574
|
+
this.stopEdit(false);
|
|
4575
|
+
}
|
|
4576
|
+
}
|
|
4577
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TagComponent, isStandalone: true, selector: "s4y-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, withShadow: { classPropertyName: "withShadow", publicName: "withShadow", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", editStart: "editStart", editEnd: "editEnd" }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "dblclick": "onDblClick($event)" }, properties: { "style.fontWeight": "\"500\"", "style.boxShadow": "shadow()", "class": "class()", "attr.aria-label": "editable() ? \"Editar tag\" : null" } }, viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (!isEditing()) {\r\n <p (keydown)=\"onKeydown($event)\">\r\n {{ value() }}\r\n </p>\r\n\r\n <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n <input\r\n type=\"text\"\r\n [value]=\"value()\"\r\n (blur)=\"stopEdit()\"\r\n (keydown.enter)=\"stopEdit()\"\r\n (keydown.escape)=\"stopEdit(false)\"\r\n (input)=\"setValue($event)\"\r\n autofocus\r\n #editInput\r\n />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] });
|
|
4579
|
+
}
|
|
4580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TagComponent, decorators: [{
|
|
4581
|
+
type: Component,
|
|
4582
|
+
args: [{ selector: 's4y-tag', imports: [], host: {
|
|
4583
|
+
'[style.fontWeight]': '"500"',
|
|
4584
|
+
'[style.boxShadow]': 'shadow()',
|
|
4585
|
+
'[class]': 'class()',
|
|
4586
|
+
'(dblclick)': 'onDblClick($event)',
|
|
4587
|
+
role: 'button',
|
|
4588
|
+
'[attr.aria-label]': 'editable() ? "Editar tag" : null',
|
|
4589
|
+
tabindex: '0',
|
|
4590
|
+
}, template: "\r\n@if (!isEditing()) {\r\n <p (keydown)=\"onKeydown($event)\">\r\n {{ value() }}\r\n </p>\r\n\r\n <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n <input\r\n type=\"text\"\r\n [value]=\"value()\"\r\n (blur)=\"stopEdit()\"\r\n (keydown.enter)=\"stopEdit()\"\r\n (keydown.escape)=\"stopEdit(false)\"\r\n (input)=\"setValue($event)\"\r\n autofocus\r\n #editInput\r\n />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] }]
|
|
4591
|
+
}], ctorParameters: () => [] });
|
|
4592
|
+
|
|
4593
|
+
class ConfirmationComponent {
|
|
4594
|
+
sanitizer = inject(DomSanitizer);
|
|
4595
|
+
props;
|
|
4596
|
+
onCancelClick;
|
|
4597
|
+
onConfirmClick;
|
|
4598
|
+
confirmLoading = false;
|
|
4599
|
+
cancelLoading = false;
|
|
4600
|
+
loading = false;
|
|
4601
|
+
get isTemplate() {
|
|
4602
|
+
return this.props?.content instanceof TemplateRef;
|
|
4603
|
+
}
|
|
4604
|
+
// Verifica se é HTML
|
|
4605
|
+
get isHtml() {
|
|
4606
|
+
return !this.isTemplate && this.props?.contentType === 'html';
|
|
4607
|
+
}
|
|
4608
|
+
// Verifica se é texto simples
|
|
4609
|
+
get isText() {
|
|
4610
|
+
return !this.isTemplate && this.props?.contentType !== 'html';
|
|
4611
|
+
}
|
|
4612
|
+
// Retorna o template se for TemplateRef
|
|
4613
|
+
get template() {
|
|
4614
|
+
return this.isTemplate
|
|
4615
|
+
? this.props.content
|
|
4616
|
+
: undefined;
|
|
4617
|
+
}
|
|
4618
|
+
// Retorna HTML sanitizado se contentType for 'html'
|
|
4619
|
+
get safeHtml() {
|
|
4620
|
+
if (!this.isHtml || typeof this.props?.content !== 'string')
|
|
4621
|
+
return undefined;
|
|
4622
|
+
return (this.sanitizer.sanitize(SecurityContext.HTML, this.props.content) || '');
|
|
4623
|
+
}
|
|
4624
|
+
// Retorna texto simples
|
|
4625
|
+
get textContent() {
|
|
4626
|
+
return this.isText && typeof this.props?.content === 'string'
|
|
4627
|
+
? this.props.content
|
|
4628
|
+
: undefined;
|
|
4629
|
+
}
|
|
4630
|
+
async handleCancel() {
|
|
4631
|
+
if (this.onCancelClick) {
|
|
4632
|
+
this.cancelLoading = true;
|
|
4633
|
+
this.loading = true;
|
|
4634
|
+
await this.onCancelClick();
|
|
4635
|
+
this.cancelLoading = false;
|
|
4636
|
+
this.loading = false;
|
|
4637
|
+
}
|
|
4638
|
+
}
|
|
4639
|
+
async handleConfirm() {
|
|
4640
|
+
if (this.onConfirmClick) {
|
|
4641
|
+
this.confirmLoading = true;
|
|
4642
|
+
this.loading = true;
|
|
4643
|
+
await this.onConfirmClick();
|
|
4644
|
+
this.confirmLoading = false;
|
|
4645
|
+
this.loading = false;
|
|
4646
|
+
}
|
|
4647
|
+
}
|
|
4648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfirmationComponent, isStandalone: true, selector: "s4y-confirmation", ngImport: i0, template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media (max-width: 30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4650
|
+
}
|
|
4651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
4652
|
+
type: Component,
|
|
4653
|
+
args: [{ selector: 's4y-confirmation', imports: [SvgComponent, ButtonComponent, NgTemplateOutlet], template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media (max-width: 30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"] }]
|
|
4654
|
+
}] });
|
|
4655
|
+
|
|
4656
|
+
class ConfirmationService {
|
|
4657
|
+
overlay = inject(Overlay);
|
|
4658
|
+
constructor() { }
|
|
4659
|
+
open(config) {
|
|
4660
|
+
const overlayRef = this.createOverlay(config);
|
|
4661
|
+
const confirmationPortal = this.confirmationPortal();
|
|
4662
|
+
const result$ = new Subject();
|
|
4663
|
+
let isProcessing = false;
|
|
4664
|
+
const confirmationInstance = overlayRef.attach(confirmationPortal);
|
|
4665
|
+
confirmationInstance.instance.props = config;
|
|
4666
|
+
confirmationInstance.instance.onCancelClick = async () => {
|
|
4667
|
+
isProcessing = true;
|
|
4668
|
+
await this.handleAction(config.onCancel, overlayRef, false, result$);
|
|
4669
|
+
isProcessing = false;
|
|
4670
|
+
};
|
|
4671
|
+
confirmationInstance.instance.onConfirmClick = async () => {
|
|
4672
|
+
isProcessing = true;
|
|
4673
|
+
await this.handleAction(config.onConfirm, overlayRef, true, result$);
|
|
4674
|
+
isProcessing = false;
|
|
4675
|
+
};
|
|
4676
|
+
const backdropSub = overlayRef.backdropClick().subscribe(() => {
|
|
4677
|
+
if (!isProcessing) {
|
|
4678
|
+
this.closeWithResult(overlayRef, result$, false);
|
|
4679
|
+
}
|
|
4680
|
+
});
|
|
4681
|
+
const keySub = overlayRef.keydownEvents().subscribe((event) => {
|
|
4682
|
+
if (event.key === 'Escape' && !isProcessing) {
|
|
4683
|
+
// ADICIONE essa verificação
|
|
4684
|
+
this.closeWithResult(overlayRef, result$, false);
|
|
4685
|
+
}
|
|
4686
|
+
});
|
|
4687
|
+
return result$.asObservable().pipe(take(1), finalize(() => {
|
|
4688
|
+
backdropSub.unsubscribe();
|
|
4689
|
+
keySub.unsubscribe();
|
|
4690
|
+
}));
|
|
4691
|
+
}
|
|
4692
|
+
async handleAction(action, overlayRef, confirmed, result$) {
|
|
4693
|
+
try {
|
|
4694
|
+
if (!action) {
|
|
4695
|
+
result$.next({ confirmed });
|
|
4696
|
+
result$.complete();
|
|
4697
|
+
overlayRef.dispose();
|
|
4698
|
+
return;
|
|
4699
|
+
}
|
|
4700
|
+
const actionResult$ = this.toObservable(action);
|
|
4701
|
+
const actionData = await firstValueFrom(actionResult$.pipe(catchError$1(() => of(true))));
|
|
4702
|
+
if (actionData === false) {
|
|
4703
|
+
return;
|
|
4704
|
+
}
|
|
4705
|
+
result$.next({ confirmed, data: actionData });
|
|
4706
|
+
result$.complete();
|
|
4707
|
+
overlayRef.dispose();
|
|
4708
|
+
}
|
|
4709
|
+
catch (error) {
|
|
4710
|
+
console.error('Error handling confirmation action:', error);
|
|
4711
|
+
result$.next({ confirmed: false });
|
|
4712
|
+
result$.complete();
|
|
4713
|
+
overlayRef.dispose();
|
|
4714
|
+
}
|
|
4715
|
+
}
|
|
4716
|
+
toObservable(value) {
|
|
4717
|
+
const resolvedValue = typeof value === 'function' ? value() : value;
|
|
4718
|
+
if (isObservable(resolvedValue)) {
|
|
4719
|
+
return resolvedValue;
|
|
4720
|
+
}
|
|
4721
|
+
if (resolvedValue instanceof Promise) {
|
|
4722
|
+
return from(resolvedValue);
|
|
4723
|
+
}
|
|
4724
|
+
return of(resolvedValue);
|
|
4725
|
+
}
|
|
4726
|
+
createOverlay({ width, height }) {
|
|
4727
|
+
const overlayRef = this.overlay.create({
|
|
4728
|
+
hasBackdrop: true,
|
|
4729
|
+
disposeOnNavigation: true,
|
|
4730
|
+
backdropClass: 's4y-backdrop-dialog',
|
|
4731
|
+
panelClass: 's4y-confirmation-panel',
|
|
4732
|
+
maxWidth: '90dvw',
|
|
4733
|
+
height: height,
|
|
4734
|
+
width: width ?? 'min(41rem, 90dvw)',
|
|
4735
|
+
positionStrategy: this.overlay
|
|
4736
|
+
.position()
|
|
4737
|
+
.global()
|
|
4738
|
+
.centerHorizontally()
|
|
4739
|
+
.centerVertically(),
|
|
4740
|
+
});
|
|
4741
|
+
return overlayRef;
|
|
4742
|
+
}
|
|
4743
|
+
confirmationPortal() {
|
|
4744
|
+
return new ComponentPortal(ConfirmationComponent);
|
|
4745
|
+
}
|
|
4746
|
+
closeWithResult(overlayRef, result$, confirmed) {
|
|
4747
|
+
if (!result$.closed) {
|
|
4748
|
+
result$.next({ confirmed });
|
|
4749
|
+
result$.complete();
|
|
4750
|
+
}
|
|
4751
|
+
if (overlayRef.hasAttached()) {
|
|
4752
|
+
overlayRef.dispose();
|
|
4753
|
+
}
|
|
4754
|
+
}
|
|
4755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4756
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
|
|
4757
|
+
}
|
|
4758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, decorators: [{
|
|
4759
|
+
type: Injectable,
|
|
4760
|
+
args: [{
|
|
4761
|
+
providedIn: 'root',
|
|
4762
|
+
}]
|
|
4763
|
+
}], ctorParameters: () => [] });
|
|
4764
|
+
|
|
4765
|
+
class CollapseComponent {
|
|
4766
|
+
cdr;
|
|
4767
|
+
/**
|
|
4768
|
+
* Modo acordeão - apenas um painel pode estar aberto por vez
|
|
4769
|
+
*/
|
|
4770
|
+
accordion = false;
|
|
4771
|
+
/**
|
|
4772
|
+
* Define se o collapse terá bordas
|
|
4773
|
+
*/
|
|
4774
|
+
bordered = true;
|
|
4775
|
+
/**
|
|
4776
|
+
* Modo ghost - sem bordas e fundo transparente
|
|
4777
|
+
*/
|
|
4778
|
+
ghost = false;
|
|
4779
|
+
/**
|
|
4780
|
+
* Posição do ícone de expansão
|
|
4781
|
+
*/
|
|
4782
|
+
expandIconPosition = 'start';
|
|
4783
|
+
/**
|
|
4784
|
+
* Tamanho do collapse
|
|
4785
|
+
*/
|
|
4786
|
+
size = 'medium';
|
|
4787
|
+
panels = [];
|
|
4788
|
+
constructor(cdr) {
|
|
4789
|
+
this.cdr = cdr;
|
|
4790
|
+
}
|
|
4791
|
+
/**
|
|
4792
|
+
* Adiciona um painel à lista
|
|
4793
|
+
*/
|
|
4794
|
+
addPanel(panel) {
|
|
4795
|
+
this.panels.push(panel);
|
|
4796
|
+
}
|
|
4797
|
+
/**
|
|
4798
|
+
* Remove um painel da lista
|
|
4799
|
+
*/
|
|
4800
|
+
removePanel(panel) {
|
|
4801
|
+
const index = this.panels.indexOf(panel);
|
|
4802
|
+
if (index > -1) {
|
|
4803
|
+
this.panels.splice(index, 1);
|
|
4804
|
+
}
|
|
4805
|
+
}
|
|
4806
|
+
/**
|
|
4807
|
+
* Manipula o clique em um painel
|
|
4808
|
+
*/
|
|
4809
|
+
handlePanelClick(panel) {
|
|
4810
|
+
// Se está em modo acordeão e o painel não está ativo
|
|
4811
|
+
if (this.accordion && !panel.active) {
|
|
4812
|
+
// Fecha todos os outros painéis
|
|
4813
|
+
this.panels
|
|
4814
|
+
.filter((p) => p !== panel && p.active)
|
|
4815
|
+
.forEach((p) => {
|
|
4816
|
+
p.active = false;
|
|
4817
|
+
p.activeChange.emit(false);
|
|
4818
|
+
p.markForCheck();
|
|
4819
|
+
});
|
|
4820
|
+
}
|
|
4821
|
+
// Alterna o estado do painel clicado
|
|
4822
|
+
panel.active = !panel.active;
|
|
4823
|
+
panel.activeChange.emit(panel.active);
|
|
4824
|
+
}
|
|
4825
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4826
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: CollapseComponent, isStandalone: true, selector: "s4y-collapse", inputs: { accordion: ["accordion", "accordion", booleanAttribute], bordered: ["bordered", "bordered", booleanAttribute], ghost: ["ghost", "ghost", booleanAttribute], expandIconPosition: "expandIconPosition", size: "size" }, host: { properties: { "class.s4y-collapse-icon-position-start": "expandIconPosition === 'start'", "class.s4y-collapse-icon-position-end": "expandIconPosition === 'end'", "class.s4y-collapse-ghost": "ghost", "class.s4y-collapse-borderless": "!bordered", "class.s4y-collapse-small": "size === 'small'", "class.s4y-collapse-large": "size === 'large'" }, classAttribute: "s4y-collapse" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".s4y-collapse{display:block;background-color:#fff;border:1px solid var(--gray-200);border-bottom:0;border-radius:var(--radius)}.s4y-collapse .s4y-collapse-item{display:block;border-bottom:1px solid var(--gray-200)}.s4y-collapse .s4y-collapse-item:last-child,.s4y-collapse .s4y-collapse-item:last-child .s4y-collapse-header{border-radius:0 0 var(--radius) var(--radius)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header{position:relative;display:flex;flex-wrap:nowrap;align-items:center;padding:12px 16px;color:var(--gray-900);line-height:1.5715;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header:hover{background-color:var(--gray-100)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header:focus{outline:none}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-expand-icon{display:inline-flex;align-items:center;margin-right:12px;font-size:14px}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-arrow{display:inline-block;transition:transform .24s cubic-bezier(.4,0,.2,1);color:var(--gray-600)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-arrow.s4y-collapse-arrow-active{transform:rotate(90deg)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-header-text{flex:auto;font-weight:500}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-extra{margin-left:auto;color:var(--gray-600)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header-collapsible-only{cursor:default}.s4y-collapse .s4y-collapse-item .s4y-collapse-header-collapsible-only .s4y-collapse-header-text{flex:none;cursor:pointer}.s4y-collapse .s4y-collapse-item .s4y-collapse-icon-collapsible-only{cursor:default}.s4y-collapse .s4y-collapse-item .s4y-collapse-icon-collapsible-only .s4y-collapse-expand-icon{cursor:pointer}.s4y-collapse .s4y-collapse-item.s4y-collapse-no-arrow .s4y-collapse-header{padding-left:12px}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-active .s4y-collapse-header{background-color:var(--gray-100)}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header{color:var(--gray-400);cursor:not-allowed}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header:hover{background-color:transparent}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header .s4y-collapse-arrow{color:var(--gray-400)}.s4y-collapse .s4y-collapse-content{color:var(--gray-700);background-color:#fff;border-top:1px solid var(--gray-200)}.s4y-collapse .s4y-collapse-content .s4y-collapse-content-box{padding:16px}.s4y-collapse .s4y-collapse-content.s4y-collapse-content-active{border-top-color:var(--gray-200)}.s4y-collapse .s4y-collapse-item:last-child .s4y-collapse-content{border-radius:0 0 var(--radius) var(--radius)}.s4y-collapse.s4y-collapse-icon-position-end .s4y-collapse-item .s4y-collapse-header{padding-right:40px}.s4y-collapse.s4y-collapse-icon-position-end .s4y-collapse-item .s4y-collapse-header .s4y-collapse-expand-icon{position:absolute;top:50%;right:16px;left:auto;margin:0;transform:translateY(-50%)}.s4y-collapse.s4y-collapse-borderless{background-color:transparent;border:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item{border-bottom:1px solid var(--gray-200)}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child{border-bottom:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child,.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child .s4y-collapse-header{border-radius:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item .s4y-collapse-content{background-color:transparent;border-top:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding-top:4px}.s4y-collapse.s4y-collapse-ghost{background-color:transparent;border:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item{border-bottom:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item .s4y-collapse-content{background-color:transparent;border-top:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding-top:12px;padding-bottom:12px}.s4y-collapse.s4y-collapse-small .s4y-collapse-item .s4y-collapse-header{padding:8px 12px;font-size:1.4rem}.s4y-collapse.s4y-collapse-small .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding:12px;font-size:1.4rem}.s4y-collapse.s4y-collapse-large .s4y-collapse-item{font-size:16px;line-height:1.5}.s4y-collapse.s4y-collapse-large .s4y-collapse-item .s4y-collapse-header{padding:16px 24px}.s4y-collapse.s4y-collapse-large .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4827
|
+
}
|
|
4828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
4829
|
+
type: Component,
|
|
4830
|
+
args: [{ selector: 's4y-collapse', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content></ng-content>`, host: {
|
|
4831
|
+
class: 's4y-collapse',
|
|
4832
|
+
'[class.s4y-collapse-icon-position-start]': `expandIconPosition === 'start'`,
|
|
4833
|
+
'[class.s4y-collapse-icon-position-end]': `expandIconPosition === 'end'`,
|
|
4834
|
+
'[class.s4y-collapse-ghost]': 'ghost',
|
|
4835
|
+
'[class.s4y-collapse-borderless]': '!bordered',
|
|
4836
|
+
'[class.s4y-collapse-small]': `size === 'small'`,
|
|
4837
|
+
'[class.s4y-collapse-large]': `size === 'large'`,
|
|
4838
|
+
}, styles: [".s4y-collapse{display:block;background-color:#fff;border:1px solid var(--gray-200);border-bottom:0;border-radius:var(--radius)}.s4y-collapse .s4y-collapse-item{display:block;border-bottom:1px solid var(--gray-200)}.s4y-collapse .s4y-collapse-item:last-child,.s4y-collapse .s4y-collapse-item:last-child .s4y-collapse-header{border-radius:0 0 var(--radius) var(--radius)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header{position:relative;display:flex;flex-wrap:nowrap;align-items:center;padding:12px 16px;color:var(--gray-900);line-height:1.5715;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header:hover{background-color:var(--gray-100)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header:focus{outline:none}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-expand-icon{display:inline-flex;align-items:center;margin-right:12px;font-size:14px}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-arrow{display:inline-block;transition:transform .24s cubic-bezier(.4,0,.2,1);color:var(--gray-600)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-arrow.s4y-collapse-arrow-active{transform:rotate(90deg)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-header-text{flex:auto;font-weight:500}.s4y-collapse .s4y-collapse-item .s4y-collapse-header .s4y-collapse-extra{margin-left:auto;color:var(--gray-600)}.s4y-collapse .s4y-collapse-item .s4y-collapse-header-collapsible-only{cursor:default}.s4y-collapse .s4y-collapse-item .s4y-collapse-header-collapsible-only .s4y-collapse-header-text{flex:none;cursor:pointer}.s4y-collapse .s4y-collapse-item .s4y-collapse-icon-collapsible-only{cursor:default}.s4y-collapse .s4y-collapse-item .s4y-collapse-icon-collapsible-only .s4y-collapse-expand-icon{cursor:pointer}.s4y-collapse .s4y-collapse-item.s4y-collapse-no-arrow .s4y-collapse-header{padding-left:12px}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-active .s4y-collapse-header{background-color:var(--gray-100)}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header{color:var(--gray-400);cursor:not-allowed}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header:hover{background-color:transparent}.s4y-collapse .s4y-collapse-item.s4y-collapse-item-disabled .s4y-collapse-header .s4y-collapse-arrow{color:var(--gray-400)}.s4y-collapse .s4y-collapse-content{color:var(--gray-700);background-color:#fff;border-top:1px solid var(--gray-200)}.s4y-collapse .s4y-collapse-content .s4y-collapse-content-box{padding:16px}.s4y-collapse .s4y-collapse-content.s4y-collapse-content-active{border-top-color:var(--gray-200)}.s4y-collapse .s4y-collapse-item:last-child .s4y-collapse-content{border-radius:0 0 var(--radius) var(--radius)}.s4y-collapse.s4y-collapse-icon-position-end .s4y-collapse-item .s4y-collapse-header{padding-right:40px}.s4y-collapse.s4y-collapse-icon-position-end .s4y-collapse-item .s4y-collapse-header .s4y-collapse-expand-icon{position:absolute;top:50%;right:16px;left:auto;margin:0;transform:translateY(-50%)}.s4y-collapse.s4y-collapse-borderless{background-color:transparent;border:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item{border-bottom:1px solid var(--gray-200)}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child{border-bottom:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child,.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item:last-child .s4y-collapse-header{border-radius:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item .s4y-collapse-content{background-color:transparent;border-top:0}.s4y-collapse.s4y-collapse-borderless .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding-top:4px}.s4y-collapse.s4y-collapse-ghost{background-color:transparent;border:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item{border-bottom:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item .s4y-collapse-content{background-color:transparent;border-top:0}.s4y-collapse.s4y-collapse-ghost .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding-top:12px;padding-bottom:12px}.s4y-collapse.s4y-collapse-small .s4y-collapse-item .s4y-collapse-header{padding:8px 12px;font-size:1.4rem}.s4y-collapse.s4y-collapse-small .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding:12px;font-size:1.4rem}.s4y-collapse.s4y-collapse-large .s4y-collapse-item{font-size:16px;line-height:1.5}.s4y-collapse.s4y-collapse-large .s4y-collapse-item .s4y-collapse-header{padding:16px 24px}.s4y-collapse.s4y-collapse-large .s4y-collapse-item .s4y-collapse-content .s4y-collapse-content-box{padding:24px}\n"] }]
|
|
4839
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { accordion: [{
|
|
4840
|
+
type: Input,
|
|
4841
|
+
args: [{ transform: booleanAttribute }]
|
|
4842
|
+
}], bordered: [{
|
|
4843
|
+
type: Input,
|
|
4844
|
+
args: [{ transform: booleanAttribute }]
|
|
4845
|
+
}], ghost: [{
|
|
4846
|
+
type: Input,
|
|
4847
|
+
args: [{ transform: booleanAttribute }]
|
|
4848
|
+
}], expandIconPosition: [{
|
|
4849
|
+
type: Input
|
|
4850
|
+
}], size: [{
|
|
4851
|
+
type: Input
|
|
4852
|
+
}] } });
|
|
4853
|
+
|
|
4854
|
+
class CollapsePanelComponent {
|
|
4855
|
+
cdr = inject(ChangeDetectorRef);
|
|
4856
|
+
destroyRef = inject(DestroyRef);
|
|
4857
|
+
collapseComponent = inject(CollapseComponent, { host: true });
|
|
4858
|
+
/**
|
|
4859
|
+
* Define se o painel está ativo/expandido
|
|
4860
|
+
*/
|
|
4861
|
+
active = false;
|
|
4862
|
+
/**
|
|
4863
|
+
* Define se o painel está desabilitado
|
|
4864
|
+
* @deprecated Use collapsible='disabled' ao invés
|
|
4865
|
+
*/
|
|
4866
|
+
disabled = false;
|
|
4867
|
+
/**
|
|
4868
|
+
* Define se a seta de expansão será exibida
|
|
4869
|
+
*/
|
|
4870
|
+
showArrow = true;
|
|
4871
|
+
/**
|
|
4872
|
+
* Conteúdo extra no cabeçalho (texto ou template)
|
|
4873
|
+
*/
|
|
4874
|
+
extra;
|
|
4875
|
+
/**
|
|
4876
|
+
* Template para conteúdo extra
|
|
4877
|
+
*/
|
|
4878
|
+
extraTemplate;
|
|
4879
|
+
/**
|
|
4880
|
+
* Título do painel (texto ou template)
|
|
4881
|
+
*/
|
|
4882
|
+
header;
|
|
4883
|
+
/**
|
|
4884
|
+
* Template para o título
|
|
4885
|
+
*/
|
|
4886
|
+
headerTemplate;
|
|
4887
|
+
/**
|
|
4888
|
+
* Template customizado para o ícone de expansão
|
|
4889
|
+
*/
|
|
4890
|
+
expandedIconTemplate;
|
|
4891
|
+
/**
|
|
4892
|
+
* Define o comportamento de clique do painel
|
|
4893
|
+
*/
|
|
4894
|
+
collapsible;
|
|
4895
|
+
/**
|
|
4896
|
+
* Evento emitido quando o estado ativo muda
|
|
4897
|
+
*/
|
|
4898
|
+
activeChange = new EventEmitter();
|
|
4899
|
+
headerElement;
|
|
4900
|
+
iconElement;
|
|
4901
|
+
constructor() {
|
|
4902
|
+
// Quando o componente for destruído, remove da lista do collapse pai
|
|
4903
|
+
this.destroyRef.onDestroy(() => {
|
|
4904
|
+
this.collapseComponent.removePanel(this);
|
|
4905
|
+
});
|
|
4906
|
+
}
|
|
4907
|
+
ngOnInit() {
|
|
4908
|
+
// Adiciona este painel à lista do collapse pai
|
|
4909
|
+
this.collapseComponent.addPanel(this);
|
|
4910
|
+
}
|
|
4911
|
+
ngAfterViewInit() {
|
|
4912
|
+
// Define qual elemento será clicável baseado no modo collapsible
|
|
4913
|
+
let clickElement = this.headerElement.nativeElement;
|
|
4914
|
+
if (this.showArrow && this.collapsible === 'icon' && this.iconElement) {
|
|
4915
|
+
clickElement = this.iconElement.nativeElement;
|
|
4916
|
+
}
|
|
4917
|
+
// Configura o listener de clique
|
|
4918
|
+
fromEvent(clickElement, 'click')
|
|
4919
|
+
.pipe(filter(() => !this.disabled && this.collapsible !== 'disabled'), takeUntilDestroyed(this.destroyRef))
|
|
4920
|
+
.subscribe(() => {
|
|
4921
|
+
this.collapseComponent.handlePanelClick(this);
|
|
4922
|
+
this.cdr.markForCheck();
|
|
4923
|
+
});
|
|
4924
|
+
}
|
|
4925
|
+
/**
|
|
4926
|
+
* Marca o componente para verificação de mudanças
|
|
4927
|
+
*/
|
|
4928
|
+
markForCheck() {
|
|
4929
|
+
this.cdr.markForCheck();
|
|
4930
|
+
}
|
|
4931
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapsePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4932
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CollapsePanelComponent, isStandalone: true, selector: "s4y-collapse-panel", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], extra: "extra", extraTemplate: "extraTemplate", header: "header", headerTemplate: "headerTemplate", expandedIconTemplate: "expandedIconTemplate", collapsible: "collapsible" }, outputs: { activeChange: "activeChange" }, host: { properties: { "class.s4y-collapse-no-arrow": "!showArrow", "class.s4y-collapse-item-active": "active", "class.s4y-collapse-item-disabled": "disabled || collapsible === \"disabled\"" }, classAttribute: "s4y-collapse-item" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true }], ngImport: i0, template: `
|
|
4933
|
+
<div
|
|
4934
|
+
#headerElement
|
|
4935
|
+
role="button"
|
|
4936
|
+
[attr.aria-expanded]="active"
|
|
4937
|
+
class="s4y-collapse-header"
|
|
4938
|
+
[class.s4y-collapse-icon-collapsible-only]="collapsible === 'icon'"
|
|
4939
|
+
[class.s4y-collapse-header-collapsible-only]="collapsible === 'header'"
|
|
4940
|
+
>
|
|
4941
|
+
@if (showArrow) {
|
|
4942
|
+
<div #iconElement role="button" class="s4y-collapse-expand-icon">
|
|
4943
|
+
<ng-container
|
|
4944
|
+
*ngTemplateOutlet="
|
|
4945
|
+
expandedIconTemplate || defaultIcon;
|
|
4946
|
+
context: { $implicit: active }
|
|
4947
|
+
"
|
|
4948
|
+
>
|
|
4949
|
+
</ng-container>
|
|
4950
|
+
<ng-template #defaultIcon>
|
|
4951
|
+
<svg
|
|
4952
|
+
class="s4y-collapse-arrow"
|
|
4953
|
+
[class.s4y-collapse-arrow-active]="active"
|
|
4954
|
+
width="16"
|
|
4955
|
+
height="16"
|
|
4956
|
+
viewBox="0 0 16 16"
|
|
4957
|
+
fill="currentColor"
|
|
4958
|
+
>
|
|
4959
|
+
<path
|
|
4960
|
+
d="M6 4l4 4-4 4"
|
|
4961
|
+
stroke="currentColor"
|
|
4962
|
+
stroke-width="2"
|
|
4963
|
+
fill="none"
|
|
4964
|
+
stroke-linecap="round"
|
|
4965
|
+
stroke-linejoin="round"
|
|
4966
|
+
/>
|
|
4967
|
+
</svg>
|
|
4968
|
+
</ng-template>
|
|
4969
|
+
</div>
|
|
4970
|
+
}
|
|
4971
|
+
|
|
4972
|
+
<span class="s4y-collapse-header-text">
|
|
4973
|
+
<ng-container *ngTemplateOutlet="headerTemplate || defaultHeader">
|
|
4974
|
+
</ng-container>
|
|
4975
|
+
<ng-template #defaultHeader>{{ header }}</ng-template>
|
|
4976
|
+
</span>
|
|
4977
|
+
|
|
4978
|
+
@if (extra || extraTemplate) {
|
|
4979
|
+
<div class="s4y-collapse-extra">
|
|
4980
|
+
<ng-container *ngTemplateOutlet="extraTemplate || defaultExtra">
|
|
4981
|
+
</ng-container>
|
|
4982
|
+
<ng-template #defaultExtra>{{ extra }}</ng-template>
|
|
4983
|
+
</div>
|
|
4984
|
+
}
|
|
4985
|
+
</div>
|
|
4986
|
+
|
|
4987
|
+
<div
|
|
4988
|
+
class="s4y-collapse-content"
|
|
4989
|
+
[class.s4y-collapse-content-active]="active"
|
|
4990
|
+
[@collapseMotion]="active ? 'expanded' : 'collapsed'"
|
|
4991
|
+
>
|
|
4992
|
+
<div class="s4y-collapse-content-box">
|
|
4993
|
+
<ng-content></ng-content>
|
|
4994
|
+
</div>
|
|
4995
|
+
</div>
|
|
4996
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
4997
|
+
trigger('collapseMotion', [
|
|
4998
|
+
state('expanded', style({
|
|
4999
|
+
height: '*',
|
|
5000
|
+
opacity: 1,
|
|
5001
|
+
})),
|
|
5002
|
+
state('collapsed', style({
|
|
5003
|
+
height: 0,
|
|
5004
|
+
opacity: 0,
|
|
5005
|
+
overflow: 'hidden',
|
|
5006
|
+
})),
|
|
5007
|
+
transition('expanded <=> collapsed', [
|
|
5008
|
+
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
|
|
5009
|
+
]),
|
|
5010
|
+
]),
|
|
5011
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5012
|
+
}
|
|
5013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapsePanelComponent, decorators: [{
|
|
5014
|
+
type: Component,
|
|
5015
|
+
args: [{
|
|
5016
|
+
selector: 's4y-collapse-panel',
|
|
5017
|
+
standalone: true,
|
|
5018
|
+
imports: [CommonModule],
|
|
5019
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5020
|
+
encapsulation: ViewEncapsulation.None,
|
|
5021
|
+
animations: [
|
|
5022
|
+
trigger('collapseMotion', [
|
|
5023
|
+
state('expanded', style({
|
|
5024
|
+
height: '*',
|
|
5025
|
+
opacity: 1,
|
|
5026
|
+
})),
|
|
5027
|
+
state('collapsed', style({
|
|
5028
|
+
height: 0,
|
|
5029
|
+
opacity: 0,
|
|
5030
|
+
overflow: 'hidden',
|
|
5031
|
+
})),
|
|
5032
|
+
transition('expanded <=> collapsed', [
|
|
5033
|
+
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
|
|
5034
|
+
]),
|
|
5035
|
+
]),
|
|
5036
|
+
],
|
|
5037
|
+
template: `
|
|
5038
|
+
<div
|
|
5039
|
+
#headerElement
|
|
5040
|
+
role="button"
|
|
5041
|
+
[attr.aria-expanded]="active"
|
|
5042
|
+
class="s4y-collapse-header"
|
|
5043
|
+
[class.s4y-collapse-icon-collapsible-only]="collapsible === 'icon'"
|
|
5044
|
+
[class.s4y-collapse-header-collapsible-only]="collapsible === 'header'"
|
|
5045
|
+
>
|
|
5046
|
+
@if (showArrow) {
|
|
5047
|
+
<div #iconElement role="button" class="s4y-collapse-expand-icon">
|
|
5048
|
+
<ng-container
|
|
5049
|
+
*ngTemplateOutlet="
|
|
5050
|
+
expandedIconTemplate || defaultIcon;
|
|
5051
|
+
context: { $implicit: active }
|
|
5052
|
+
"
|
|
5053
|
+
>
|
|
5054
|
+
</ng-container>
|
|
5055
|
+
<ng-template #defaultIcon>
|
|
5056
|
+
<svg
|
|
5057
|
+
class="s4y-collapse-arrow"
|
|
5058
|
+
[class.s4y-collapse-arrow-active]="active"
|
|
5059
|
+
width="16"
|
|
5060
|
+
height="16"
|
|
5061
|
+
viewBox="0 0 16 16"
|
|
5062
|
+
fill="currentColor"
|
|
5063
|
+
>
|
|
5064
|
+
<path
|
|
5065
|
+
d="M6 4l4 4-4 4"
|
|
5066
|
+
stroke="currentColor"
|
|
5067
|
+
stroke-width="2"
|
|
5068
|
+
fill="none"
|
|
5069
|
+
stroke-linecap="round"
|
|
5070
|
+
stroke-linejoin="round"
|
|
5071
|
+
/>
|
|
5072
|
+
</svg>
|
|
5073
|
+
</ng-template>
|
|
5074
|
+
</div>
|
|
5075
|
+
}
|
|
5076
|
+
|
|
5077
|
+
<span class="s4y-collapse-header-text">
|
|
5078
|
+
<ng-container *ngTemplateOutlet="headerTemplate || defaultHeader">
|
|
5079
|
+
</ng-container>
|
|
5080
|
+
<ng-template #defaultHeader>{{ header }}</ng-template>
|
|
5081
|
+
</span>
|
|
5082
|
+
|
|
5083
|
+
@if (extra || extraTemplate) {
|
|
5084
|
+
<div class="s4y-collapse-extra">
|
|
5085
|
+
<ng-container *ngTemplateOutlet="extraTemplate || defaultExtra">
|
|
5086
|
+
</ng-container>
|
|
5087
|
+
<ng-template #defaultExtra>{{ extra }}</ng-template>
|
|
5088
|
+
</div>
|
|
5089
|
+
}
|
|
5090
|
+
</div>
|
|
5091
|
+
|
|
5092
|
+
<div
|
|
5093
|
+
class="s4y-collapse-content"
|
|
5094
|
+
[class.s4y-collapse-content-active]="active"
|
|
5095
|
+
[@collapseMotion]="active ? 'expanded' : 'collapsed'"
|
|
5096
|
+
>
|
|
5097
|
+
<div class="s4y-collapse-content-box">
|
|
5098
|
+
<ng-content></ng-content>
|
|
5099
|
+
</div>
|
|
5100
|
+
</div>
|
|
5101
|
+
`,
|
|
5102
|
+
host: {
|
|
5103
|
+
class: 's4y-collapse-item',
|
|
5104
|
+
'[class.s4y-collapse-no-arrow]': '!showArrow',
|
|
5105
|
+
'[class.s4y-collapse-item-active]': 'active',
|
|
5106
|
+
'[class.s4y-collapse-item-disabled]': 'disabled || collapsible === "disabled"',
|
|
5107
|
+
},
|
|
5108
|
+
}]
|
|
5109
|
+
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
5110
|
+
type: Input,
|
|
5111
|
+
args: [{ transform: booleanAttribute }]
|
|
5112
|
+
}], disabled: [{
|
|
5113
|
+
type: Input,
|
|
5114
|
+
args: [{ transform: booleanAttribute }]
|
|
5115
|
+
}], showArrow: [{
|
|
5116
|
+
type: Input,
|
|
5117
|
+
args: [{ transform: booleanAttribute }]
|
|
5118
|
+
}], extra: [{
|
|
5119
|
+
type: Input
|
|
5120
|
+
}], extraTemplate: [{
|
|
5121
|
+
type: Input
|
|
5122
|
+
}], header: [{
|
|
5123
|
+
type: Input
|
|
5124
|
+
}], headerTemplate: [{
|
|
5125
|
+
type: Input
|
|
5126
|
+
}], expandedIconTemplate: [{
|
|
5127
|
+
type: Input
|
|
5128
|
+
}], collapsible: [{
|
|
5129
|
+
type: Input
|
|
5130
|
+
}], activeChange: [{
|
|
5131
|
+
type: Output
|
|
5132
|
+
}], headerElement: [{
|
|
5133
|
+
type: ViewChild,
|
|
5134
|
+
args: ['headerElement']
|
|
5135
|
+
}], iconElement: [{
|
|
5136
|
+
type: ViewChild,
|
|
5137
|
+
args: ['iconElement']
|
|
5138
|
+
}] } });
|
|
5139
|
+
|
|
5140
|
+
/**
|
|
5141
|
+
* Módulo de Collapse
|
|
5142
|
+
*
|
|
5143
|
+
* Componente para criar painéis expansíveis/retráteis.
|
|
5144
|
+
*
|
|
5145
|
+
* @example
|
|
5146
|
+
* ```html
|
|
5147
|
+
* <s4y-collapse [accordion]="true" [bordered]="true">
|
|
5148
|
+
* <s4y-collapse-panel header="Painel 1" [active]="true">
|
|
5149
|
+
* Conteúdo do painel 1
|
|
5150
|
+
* </s4y-collapse-panel>
|
|
5151
|
+
* <s4y-collapse-panel header="Painel 2">
|
|
5152
|
+
* Conteúdo do painel 2
|
|
5153
|
+
* </s4y-collapse-panel>
|
|
5154
|
+
* </s4y-collapse>
|
|
5155
|
+
* ```
|
|
5156
|
+
*/
|
|
5157
|
+
class CollapseModule {
|
|
5158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5159
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, imports: [CollapseComponent, CollapsePanelComponent], exports: [CollapseComponent, CollapsePanelComponent] });
|
|
5160
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, imports: [CollapseComponent, CollapsePanelComponent] });
|
|
5161
|
+
}
|
|
5162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, decorators: [{
|
|
5163
|
+
type: NgModule,
|
|
5164
|
+
args: [{
|
|
5165
|
+
imports: [CollapseComponent, CollapsePanelComponent],
|
|
5166
|
+
exports: [CollapseComponent, CollapsePanelComponent],
|
|
5167
|
+
}]
|
|
5168
|
+
}] });
|
|
5169
|
+
|
|
3711
5170
|
/*
|
|
3712
5171
|
* Public API Surface of s4y-components
|
|
3713
5172
|
*/
|
|
@@ -3717,5 +5176,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3717
5176
|
* Generated bundle index. Do not edit.
|
|
3718
5177
|
*/
|
|
3719
5178
|
|
|
3720
|
-
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
5179
|
+
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CollapseComponent, CollapseModule, CollapsePanelComponent, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
3721
5180
|
//# sourceMappingURL=s4y-ui.mjs.map
|