s4y-ui 5.6.1 → 5.6.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 +1528 -209
- 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-loading-global/dynamic-loading-global.component.d.ts +6 -0
- package/lib/components/dynamic-loading-global/dynamic-loading-global.service.d.ts +14 -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/image.component.d.ts +5 -2
- package/lib/components/information-banner/information-banner.component.d.ts +27 -0
- package/lib/components/radio/radio.component.d.ts +13 -8
- 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/select-multi/components/select-multi-options/select-multi-option.component.d.ts +6 -0
- package/lib/components/select-multi/index.d.ts +2 -0
- 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/scss/styles.scss +136 -3
- 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, viewChild, Renderer2, DestroyRef, 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,7 +7,7 @@ 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';
|
|
@@ -21,10 +21,10 @@ class DashboardLayoutComponent {
|
|
|
21
21
|
asideTemplate;
|
|
22
22
|
navTemplate;
|
|
23
23
|
rightPanel;
|
|
24
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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"] }] });
|
|
26
26
|
}
|
|
27
|
-
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: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ selector: 's4y-dashboard-layout', standalone: false, template: "<div class=\"s4y-dashboard-layout\">\r\n @if (asideTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"asideTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-aside\"></ng-content>\r\n }\r\n <div class=\"s4y-dashboard-layout__content\">\r\n @if (navTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"navTemplate\"></ng-container>\r\n } @else {\r\n <ng-content select=\"s4y-navbar\"></ng-content>\r\n }\r\n <ng-content select=\"s4y-dashboard-routes\"></ng-content>\r\n </div>\r\n @if (rightPanel) {\r\n <ng-container [ngTemplateOutlet]=\"rightPanel\"></ng-container>\r\n }\r\n</div>\r\n", styles: [".s4y-dashboard-layout{height:100dvh;width:100dvw;display:flex;overflow:hidden}.s4y-dashboard-layout__content{flex-grow:1;position:relative}\n"] }]
|
|
30
30
|
}], propDecorators: { asideTemplate: [{
|
|
@@ -67,10 +67,10 @@ class AsideService {
|
|
|
67
67
|
window.removeEventListener('resize', this.resizeHandler);
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
71
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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' });
|
|
72
72
|
}
|
|
73
|
-
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: [{
|
|
74
74
|
type: Injectable,
|
|
75
75
|
args: [{
|
|
76
76
|
providedIn: 'root',
|
|
@@ -80,10 +80,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
80
80
|
class NavbarComponent {
|
|
81
81
|
_asideService = inject(AsideService);
|
|
82
82
|
actionsTemplate;
|
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
84
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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"] }] });
|
|
85
85
|
}
|
|
86
|
-
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: [{
|
|
87
87
|
type: Component,
|
|
88
88
|
args: [{ selector: 's4y-navbar', standalone: false, template: "<nav class=\"s4y-navbar-container\">\r\n <button\r\n (click)=\"_asideService.onToggle()\"\r\n class=\"s4y-navbar-container__btn\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"menuIcon\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-navbar-container__actions\">\r\n <ng-container *ngIf=\"actionsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</nav>\r\n\r\n\r\n<ng-template #menuIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path d=\"M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [":host{display:block;display:flex;align-items:center;justify-content:center}.s4y-navbar-container{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-bottom:1px solid var(--gray-300);min-height:5.8rem;height:var(--nav-height);width:100%;padding:1.4rem}.s4y-navbar-container__actions{display:flex;gap:1.6rem}.s4y-navbar-container__btn{height:4.2rem;width:4.2rem;border-radius:100%;background-color:var(--gray-200);display:flex;align-items:center;justify-content:center}.s4y-navbar-container__btn svg{width:2.2rem;height:2.2rem}\n"] }]
|
|
89
89
|
}], propDecorators: { actionsTemplate: [{
|
|
@@ -131,12 +131,12 @@ class AvatarComponent {
|
|
|
131
131
|
onError() {
|
|
132
132
|
this.imageError.set(true);
|
|
133
133
|
}
|
|
134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
134
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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 }] });
|
|
136
136
|
}
|
|
137
|
-
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: [{
|
|
138
138
|
type: Component,
|
|
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 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"] }]
|
|
140
140
|
}], propDecorators: { hostClasses: [{
|
|
141
141
|
type: HostBinding,
|
|
142
142
|
args: ['class']
|
|
@@ -161,10 +161,10 @@ class SvgService {
|
|
|
161
161
|
return throwError(() => error);
|
|
162
162
|
}));
|
|
163
163
|
}
|
|
164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
165
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
164
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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' });
|
|
166
166
|
}
|
|
167
|
-
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: [{
|
|
168
168
|
type: Injectable,
|
|
169
169
|
args: [{
|
|
170
170
|
providedIn: 'root',
|
|
@@ -221,10 +221,10 @@ class SvgComponent {
|
|
|
221
221
|
.getSvgContent(src)
|
|
222
222
|
.pipe(map((content) => this.sanitizer.bypassSecurityTrustHtml(content)));
|
|
223
223
|
}
|
|
224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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 });
|
|
226
226
|
}
|
|
227
|
-
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: [{
|
|
228
228
|
type: Component,
|
|
229
229
|
args: [{ selector: 's4y-svg', imports: [AsyncPipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\" ></div>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;--icon-font-size: 1em;font-size:var(--icon-font-size);width:1em;height:1em;color:currentColor;contain:content;box-sizing:content-box!important}.icon-inner{display:contents}:host ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}:host ::ng-deep svg [fill]:not([fill=none]){fill:currentColor}:host ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"] }]
|
|
230
230
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: SvgService }], propDecorators: { src: [{
|
|
@@ -284,10 +284,10 @@ class AsideComponent {
|
|
|
284
284
|
closeByOverlay() {
|
|
285
285
|
this.asideService.onToggle();
|
|
286
286
|
}
|
|
287
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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"] }] });
|
|
289
289
|
}
|
|
290
|
-
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: [{
|
|
291
291
|
type: Component,
|
|
292
292
|
args: [{ selector: 's4y-aside', standalone: false, host: {
|
|
293
293
|
'[attr.data-opened]': 'isOpened()',
|
|
@@ -304,21 +304,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
304
304
|
}] } });
|
|
305
305
|
|
|
306
306
|
class DashboardRoutesComponent {
|
|
307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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]" }] });
|
|
309
309
|
}
|
|
310
|
-
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: [{
|
|
311
311
|
type: Component,
|
|
312
312
|
args: [{ selector: 's4y-dashboard-routes', standalone: false, host: {}, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] }]
|
|
313
313
|
}] });
|
|
314
314
|
|
|
315
315
|
class DashboardContainerComponent {
|
|
316
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
316
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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"] });
|
|
318
318
|
}
|
|
319
|
-
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: [{
|
|
320
320
|
type: Component,
|
|
321
|
-
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"] }]
|
|
322
322
|
}] });
|
|
323
323
|
|
|
324
324
|
const COMPONENTS$1 = [
|
|
@@ -329,8 +329,8 @@ const COMPONENTS$1 = [
|
|
|
329
329
|
DashboardContainerComponent,
|
|
330
330
|
];
|
|
331
331
|
class DashboardModule {
|
|
332
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
333
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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,
|
|
334
334
|
AsideComponent,
|
|
335
335
|
NavbarComponent,
|
|
336
336
|
DashboardRoutesComponent,
|
|
@@ -343,12 +343,12 @@ class DashboardModule {
|
|
|
343
343
|
NavbarComponent,
|
|
344
344
|
DashboardRoutesComponent,
|
|
345
345
|
DashboardContainerComponent] });
|
|
346
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
346
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardModule, imports: [RouterModule,
|
|
347
347
|
CommonModule,
|
|
348
348
|
AvatarComponent,
|
|
349
349
|
CdkScrollableModule] });
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardModule, decorators: [{
|
|
352
352
|
type: NgModule,
|
|
353
353
|
args: [{
|
|
354
354
|
declarations: [COMPONENTS$1],
|
|
@@ -370,6 +370,7 @@ class ButtonComponent {
|
|
|
370
370
|
outlined = input(false, { transform: booleanAttribute });
|
|
371
371
|
loading = input(false);
|
|
372
372
|
size = input('medium');
|
|
373
|
+
roundend = input(true);
|
|
373
374
|
variant = input('primary');
|
|
374
375
|
fullWidth = input(false);
|
|
375
376
|
iconAligned = input(true);
|
|
@@ -395,16 +396,16 @@ class ButtonComponent {
|
|
|
395
396
|
return 'btn-primary';
|
|
396
397
|
}
|
|
397
398
|
});
|
|
398
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
399
|
-
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: `
|
|
400
401
|
@if (loading()) {
|
|
401
402
|
<div class="loader"></div>
|
|
402
403
|
} @else {
|
|
403
404
|
<ng-content></ng-content>
|
|
404
405
|
}
|
|
405
|
-
`, 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"] });
|
|
406
407
|
}
|
|
407
|
-
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: [{
|
|
408
409
|
type: Component,
|
|
409
410
|
args: [{ selector: 'button[s4yButton], a[s4yButton]', imports: [], template: `
|
|
410
411
|
@if (loading()) {
|
|
@@ -422,71 +423,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
422
423
|
'[class.disabled]': 'disabled()',
|
|
423
424
|
'[class]': 'variantClass()',
|
|
424
425
|
'[class.icon-centered]': 'iconAligned()',
|
|
425
|
-
|
|
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"] }]
|
|
426
428
|
}], propDecorators: { isDisabled: [{
|
|
427
429
|
type: HostBinding,
|
|
428
430
|
args: ['disabled']
|
|
429
431
|
}] } });
|
|
430
432
|
|
|
431
433
|
class FormFieldComponent {
|
|
432
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
433
|
-
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"] });
|
|
434
436
|
}
|
|
435
|
-
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: [{
|
|
436
438
|
type: Component,
|
|
437
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"] }]
|
|
438
440
|
}] });
|
|
439
441
|
|
|
440
442
|
class InputComponent {
|
|
441
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
442
|
-
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"] });
|
|
443
445
|
}
|
|
444
|
-
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: [{
|
|
445
447
|
type: Component,
|
|
446
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"] }]
|
|
447
449
|
}] });
|
|
448
450
|
|
|
449
451
|
class LabelComponent {
|
|
450
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
451
|
-
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"] });
|
|
452
454
|
}
|
|
453
|
-
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: [{
|
|
454
456
|
type: Component,
|
|
455
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"] }]
|
|
456
458
|
}] });
|
|
457
459
|
|
|
458
460
|
class HintComponent {
|
|
459
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
460
|
-
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"] });
|
|
461
463
|
}
|
|
462
|
-
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: [{
|
|
463
465
|
type: Component,
|
|
464
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"] }]
|
|
465
467
|
}] });
|
|
466
468
|
|
|
467
469
|
class ErrorMessageComponent {
|
|
468
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
469
|
-
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"] });
|
|
470
472
|
}
|
|
471
|
-
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: [{
|
|
472
474
|
type: Component,
|
|
473
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"] }]
|
|
474
476
|
}] });
|
|
475
477
|
|
|
476
478
|
class InputPrefixComponent {
|
|
477
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
478
|
-
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"] });
|
|
479
481
|
}
|
|
480
|
-
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: [{
|
|
481
483
|
type: Component,
|
|
482
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"] }]
|
|
483
485
|
}] });
|
|
484
486
|
|
|
485
487
|
class InputSufixComponent {
|
|
486
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
487
|
-
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"] });
|
|
488
490
|
}
|
|
489
|
-
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: [{
|
|
490
492
|
type: Component,
|
|
491
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"] }]
|
|
492
494
|
}] });
|
|
@@ -522,8 +524,8 @@ class FormFieldPasswordComponent {
|
|
|
522
524
|
setDisabledState(isDisabled) {
|
|
523
525
|
this.disabled = isDisabled;
|
|
524
526
|
}
|
|
525
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
526
|
-
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: [
|
|
527
529
|
{
|
|
528
530
|
multi: true,
|
|
529
531
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -531,7 +533,7 @@ class FormFieldPasswordComponent {
|
|
|
531
533
|
},
|
|
532
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" }] });
|
|
533
535
|
}
|
|
534
|
-
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: [{
|
|
535
537
|
type: Component,
|
|
536
538
|
args: [{ selector: 's4y-form-field-password', standalone: false, providers: [
|
|
537
539
|
{
|
|
@@ -553,8 +555,8 @@ const COMPONENTS = [
|
|
|
553
555
|
FormFieldPasswordComponent,
|
|
554
556
|
];
|
|
555
557
|
class FormsKitModule {
|
|
556
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
557
|
-
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,
|
|
558
560
|
InputComponent,
|
|
559
561
|
LabelComponent,
|
|
560
562
|
HintComponent,
|
|
@@ -569,9 +571,9 @@ class FormsKitModule {
|
|
|
569
571
|
InputPrefixComponent,
|
|
570
572
|
InputSufixComponent,
|
|
571
573
|
FormFieldPasswordComponent] });
|
|
572
|
-
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] });
|
|
573
575
|
}
|
|
574
|
-
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: [{
|
|
575
577
|
type: NgModule,
|
|
576
578
|
args: [{
|
|
577
579
|
declarations: COMPONENTS,
|
|
@@ -764,10 +766,10 @@ class MaskDirective {
|
|
|
764
766
|
const nextPos = this._getCursorPosition(template, digits.length);
|
|
765
767
|
setTimeout(() => input.setSelectionRange(nextPos, nextPos));
|
|
766
768
|
}
|
|
767
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
768
|
-
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 });
|
|
769
771
|
}
|
|
770
|
-
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: [{
|
|
771
773
|
type: Directive,
|
|
772
774
|
args: [{
|
|
773
775
|
selector: '[s4yMask]',
|
|
@@ -797,10 +799,10 @@ class ClickOutsideDirective {
|
|
|
797
799
|
this.clickOutside.emit();
|
|
798
800
|
}
|
|
799
801
|
}
|
|
800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
801
|
-
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 });
|
|
802
804
|
}
|
|
803
|
-
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: [{
|
|
804
806
|
type: Directive,
|
|
805
807
|
args: [{
|
|
806
808
|
selector: '[s4yClickOutside]',
|
|
@@ -868,10 +870,10 @@ class ToastService {
|
|
|
868
870
|
return v.toString(16);
|
|
869
871
|
});
|
|
870
872
|
}
|
|
871
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
872
|
-
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' });
|
|
873
875
|
}
|
|
874
|
-
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: [{
|
|
875
877
|
type: Injectable,
|
|
876
878
|
args: [{
|
|
877
879
|
providedIn: 'root',
|
|
@@ -886,12 +888,12 @@ class ToastComponent {
|
|
|
886
888
|
}
|
|
887
889
|
toasts = computed(() => this._toastService.toasts());
|
|
888
890
|
isBottomPosition = computed(() => this.position().startsWith('bottom'));
|
|
889
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
890
|
-
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] });
|
|
891
893
|
}
|
|
892
|
-
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: [{
|
|
893
895
|
type: Component,
|
|
894
|
-
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"] }]
|
|
895
897
|
}], ctorParameters: () => [{ type: ToastService }] });
|
|
896
898
|
|
|
897
899
|
const drawerAnimation = trigger('drawerAnimation', [
|
|
@@ -1016,10 +1018,10 @@ class DrawerComponent {
|
|
|
1016
1018
|
this.isOpen.set(false);
|
|
1017
1019
|
}
|
|
1018
1020
|
}
|
|
1019
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1020
|
-
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] });
|
|
1021
1023
|
}
|
|
1022
|
-
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: [{
|
|
1023
1025
|
type: Component,
|
|
1024
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"] }]
|
|
1025
1027
|
}], ctorParameters: () => [], propDecorators: { headerTemplate: [{
|
|
@@ -1041,10 +1043,10 @@ class SpinnerComponent {
|
|
|
1041
1043
|
color = input('primary');
|
|
1042
1044
|
constructor() { }
|
|
1043
1045
|
ngOnInit() { }
|
|
1044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1045
|
-
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"] });
|
|
1046
1048
|
}
|
|
1047
|
-
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: [{
|
|
1048
1050
|
type: Component,
|
|
1049
1051
|
args: [{ selector: 's4y-spinner', host: {
|
|
1050
1052
|
'[attr.size]': 'size()',
|
|
@@ -1103,10 +1105,10 @@ class TableComponent {
|
|
|
1103
1105
|
sortBy = signal(undefined);
|
|
1104
1106
|
constructor() { }
|
|
1105
1107
|
ngAfterViewInit() { }
|
|
1106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1107
|
-
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 });
|
|
1108
1110
|
}
|
|
1109
|
-
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: [{
|
|
1110
1112
|
type: Component,
|
|
1111
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"] }]
|
|
1112
1114
|
}], ctorParameters: () => [], propDecorators: { rowTemplate: [{
|
|
@@ -1332,10 +1334,10 @@ class TableSortDirective {
|
|
|
1332
1334
|
get descIcon() {
|
|
1333
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>';
|
|
1334
1336
|
}
|
|
1335
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1336
|
-
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 });
|
|
1337
1339
|
}
|
|
1338
|
-
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: [{
|
|
1339
1341
|
type: Directive,
|
|
1340
1342
|
args: [{
|
|
1341
1343
|
selector: '[s4ySortableColumnName]',
|
|
@@ -1437,10 +1439,10 @@ class ModalComponent {
|
|
|
1437
1439
|
ngOnDestroy() {
|
|
1438
1440
|
window.removeEventListener('keydown', this.escListener);
|
|
1439
1441
|
}
|
|
1440
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1441
|
-
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] });
|
|
1442
1444
|
}
|
|
1443
|
-
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: [{
|
|
1444
1446
|
type: Component,
|
|
1445
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"] }]
|
|
1446
1448
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
@@ -1477,10 +1479,10 @@ class ModalConfirmationService {
|
|
|
1477
1479
|
close() {
|
|
1478
1480
|
this._visible.set(false);
|
|
1479
1481
|
}
|
|
1480
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1481
|
-
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 });
|
|
1482
1484
|
}
|
|
1483
|
-
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: [{
|
|
1484
1486
|
type: Injectable
|
|
1485
1487
|
}] });
|
|
1486
1488
|
|
|
@@ -1507,10 +1509,10 @@ class ModalConfirmationComponent {
|
|
|
1507
1509
|
onClose() {
|
|
1508
1510
|
this.modalConfirmationService.close();
|
|
1509
1511
|
}
|
|
1510
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1511
|
-
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] });
|
|
1512
1514
|
}
|
|
1513
|
-
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: [{
|
|
1514
1516
|
type: Component,
|
|
1515
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"] }]
|
|
1516
1518
|
}], propDecorators: { iconTemplate: [{
|
|
@@ -1519,12 +1521,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1519
1521
|
}] } });
|
|
1520
1522
|
|
|
1521
1523
|
class SearchBarComponent {
|
|
1522
|
-
|
|
1523
|
-
|
|
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 });
|
|
1524
1529
|
}
|
|
1525
|
-
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: [{
|
|
1526
1531
|
type: Component,
|
|
1527
|
-
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"] }]
|
|
1528
1533
|
}] });
|
|
1529
1534
|
|
|
1530
1535
|
class ToggleComponent {
|
|
@@ -1553,8 +1558,8 @@ class ToggleComponent {
|
|
|
1553
1558
|
this.onTouched();
|
|
1554
1559
|
this.onChange(this.model());
|
|
1555
1560
|
}
|
|
1556
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1557
|
-
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: [
|
|
1558
1563
|
{
|
|
1559
1564
|
provide: NG_VALUE_ACCESSOR,
|
|
1560
1565
|
useExisting: ToggleComponent,
|
|
@@ -1562,7 +1567,7 @@ class ToggleComponent {
|
|
|
1562
1567
|
},
|
|
1563
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 }] });
|
|
1564
1569
|
}
|
|
1565
|
-
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: [{
|
|
1566
1571
|
type: Component,
|
|
1567
1572
|
args: [{ selector: 's4y-toggle', imports: [FormsModule], providers: [
|
|
1568
1573
|
{
|
|
@@ -1684,8 +1689,8 @@ class SelectComponent {
|
|
|
1684
1689
|
? opt1.id === opt2.id
|
|
1685
1690
|
: JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
|
|
1686
1691
|
}
|
|
1687
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1688
|
-
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: [
|
|
1689
1694
|
{
|
|
1690
1695
|
multi: true,
|
|
1691
1696
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1693,7 +1698,7 @@ class SelectComponent {
|
|
|
1693
1698
|
},
|
|
1694
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] });
|
|
1695
1700
|
}
|
|
1696
|
-
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: [{
|
|
1697
1702
|
type: Component,
|
|
1698
1703
|
args: [{ selector: 's4y-select', imports: [NgIf, CommonModule, SpinnerComponent, ClickOutsideDirective, FormsModule], animations: [selectAnimation], providers: [
|
|
1699
1704
|
{
|
|
@@ -1789,10 +1794,10 @@ class PaginationComponent {
|
|
|
1789
1794
|
rowsPerPage: this.rowsPerPage(),
|
|
1790
1795
|
});
|
|
1791
1796
|
}
|
|
1792
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1793
|
-
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"] }] });
|
|
1794
1799
|
}
|
|
1795
|
-
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: [{
|
|
1796
1801
|
type: Component,
|
|
1797
1802
|
args: [{ selector: 's4y-pagination', imports: [
|
|
1798
1803
|
NgTemplateOutlet,
|
|
@@ -1832,8 +1837,8 @@ class SliderComponent {
|
|
|
1832
1837
|
this.value = typeof value === 'number' ? value : Number(value);
|
|
1833
1838
|
this.onChange(value);
|
|
1834
1839
|
}
|
|
1835
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1836
|
-
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: [
|
|
1837
1842
|
{
|
|
1838
1843
|
provide: NG_VALUE_ACCESSOR,
|
|
1839
1844
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -1841,7 +1846,7 @@ class SliderComponent {
|
|
|
1841
1846
|
},
|
|
1842
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"] }] });
|
|
1843
1848
|
}
|
|
1844
|
-
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: [{
|
|
1845
1850
|
type: Component,
|
|
1846
1851
|
args: [{ selector: 's4y-slider', imports: [NgStyle], providers: [
|
|
1847
1852
|
{
|
|
@@ -1857,12 +1862,14 @@ class RadioComponent {
|
|
|
1857
1862
|
name = input();
|
|
1858
1863
|
id = input();
|
|
1859
1864
|
radioValue = input.required();
|
|
1865
|
+
compareWith = input();
|
|
1866
|
+
displayWith = input((o) => String(o));
|
|
1860
1867
|
disabled = false;
|
|
1861
|
-
value = null;
|
|
1862
|
-
onChange = (
|
|
1868
|
+
value = signal(null);
|
|
1869
|
+
onChange = () => { };
|
|
1863
1870
|
onTouched = () => { };
|
|
1864
1871
|
writeValue(value) {
|
|
1865
|
-
this.value
|
|
1872
|
+
this.value.set(value);
|
|
1866
1873
|
}
|
|
1867
1874
|
registerOnChange(fn) {
|
|
1868
1875
|
this.onChange = fn;
|
|
@@ -1873,22 +1880,38 @@ class RadioComponent {
|
|
|
1873
1880
|
setDisabledState(isDisabled) {
|
|
1874
1881
|
this.disabled = isDisabled;
|
|
1875
1882
|
}
|
|
1876
|
-
onInput(
|
|
1877
|
-
const
|
|
1878
|
-
this.value
|
|
1879
|
-
this.onChange(
|
|
1883
|
+
onInput() {
|
|
1884
|
+
const v = this.radioValue();
|
|
1885
|
+
this.value.set(v);
|
|
1886
|
+
this.onChange(v);
|
|
1880
1887
|
this.onTouched();
|
|
1881
1888
|
}
|
|
1882
|
-
|
|
1883
|
-
|
|
1889
|
+
isChecked = computed(() => {
|
|
1890
|
+
const current = this.value();
|
|
1891
|
+
const candidate = this.radioValue();
|
|
1892
|
+
if (current == null)
|
|
1893
|
+
return false;
|
|
1894
|
+
const cmp = this.compareWith?.();
|
|
1895
|
+
if (cmp)
|
|
1896
|
+
return cmp(current, candidate);
|
|
1897
|
+
return current === candidate;
|
|
1898
|
+
});
|
|
1899
|
+
displayLabel = computed(() => {
|
|
1900
|
+
const manual = this.label();
|
|
1901
|
+
if (manual != null && manual !== '')
|
|
1902
|
+
return manual;
|
|
1903
|
+
return this.displayWith()(this.radioValue());
|
|
1904
|
+
});
|
|
1905
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1884
1907
|
{
|
|
1885
1908
|
provide: NG_VALUE_ACCESSOR,
|
|
1886
1909
|
useExisting: forwardRef(() => RadioComponent),
|
|
1887
1910
|
multi: true,
|
|
1888
1911
|
},
|
|
1889
|
-
], ngImport: i0, template: "<label class=\"s4y-radio\" [class.disabled]=\"disabled\">\r\n <input\r\n
|
|
1912
|
+
], ngImport: i0, template: "<label class=\"s4y-radio\" [class.disabled]=\"disabled\">\r\n <input\r\n value=\"on\"\r\n [disabled]=\"disabled\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"radio\"\r\n (change)=\"onInput()\"\r\n [checked]=\"isChecked()\"\r\n />\r\n <span class=\"s4y-radio-label\">\r\n {{ displayLabel() }}\r\n </span>\r\n</label>\r\n", styles: [".s4y-radio{display:block;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;width:max-content;min-height:1.8rem;min-height:1.9rem}.s4y-radio .s4y-radio-label{font-size:1.4rem;color:var(--gray-900)}.s4y-radio+.s4y-radio{margin-top:12px}.s4y-radio input{display:none}.s4y-radio input+span{display:inline-block;position:relative;padding-left:24px}.s4y-radio input+span:before{content:\"\";display:block;position:absolute;top:0;left:0;border-radius:50%;margin-right:5px;width:16px;height:16px;border:1px solid #ccc;background:#fff}.s4y-radio input+span:after{content:\"\";display:block;width:10px;height:10px;background:var(--primary-color);position:absolute;border-radius:50%;top:3px;left:3px;opacity:0;transform:scale(0);transition:all .2s cubic-bezier(.64,.57,.67,1.53)}.s4y-radio input:checked+span:after{opacity:1;transform:scale(1)}.s4y-radio.disabled{cursor:not-allowed}\n"] });
|
|
1890
1913
|
}
|
|
1891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1892
1915
|
type: Component,
|
|
1893
1916
|
args: [{ selector: 's4y-radio', imports: [], providers: [
|
|
1894
1917
|
{
|
|
@@ -1896,7 +1919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1896
1919
|
useExisting: forwardRef(() => RadioComponent),
|
|
1897
1920
|
multi: true,
|
|
1898
1921
|
},
|
|
1899
|
-
], template: "<label class=\"s4y-radio\" [class.disabled]=\"disabled\">\r\n <input\r\n
|
|
1922
|
+
], template: "<label class=\"s4y-radio\" [class.disabled]=\"disabled\">\r\n <input\r\n value=\"on\"\r\n [disabled]=\"disabled\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"radio\"\r\n (change)=\"onInput()\"\r\n [checked]=\"isChecked()\"\r\n />\r\n <span class=\"s4y-radio-label\">\r\n {{ displayLabel() }}\r\n </span>\r\n</label>\r\n", styles: [".s4y-radio{display:block;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;width:max-content;min-height:1.8rem;min-height:1.9rem}.s4y-radio .s4y-radio-label{font-size:1.4rem;color:var(--gray-900)}.s4y-radio+.s4y-radio{margin-top:12px}.s4y-radio input{display:none}.s4y-radio input+span{display:inline-block;position:relative;padding-left:24px}.s4y-radio input+span:before{content:\"\";display:block;position:absolute;top:0;left:0;border-radius:50%;margin-right:5px;width:16px;height:16px;border:1px solid #ccc;background:#fff}.s4y-radio input+span:after{content:\"\";display:block;width:10px;height:10px;background:var(--primary-color);position:absolute;border-radius:50%;top:3px;left:3px;opacity:0;transform:scale(0);transition:all .2s cubic-bezier(.64,.57,.67,1.53)}.s4y-radio input:checked+span:after{opacity:1;transform:scale(1)}.s4y-radio.disabled{cursor:not-allowed}\n"] }]
|
|
1900
1923
|
}] });
|
|
1901
1924
|
|
|
1902
1925
|
var TooltipPosition;
|
|
@@ -1917,10 +1940,10 @@ class TooltipComponent {
|
|
|
1917
1940
|
visible = false;
|
|
1918
1941
|
constructor() { }
|
|
1919
1942
|
ngOnInit() { }
|
|
1920
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1943
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1944
|
+
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"] });
|
|
1922
1945
|
}
|
|
1923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1946
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1924
1947
|
type: Component,
|
|
1925
1948
|
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"] }]
|
|
1926
1949
|
}], ctorParameters: () => [] });
|
|
@@ -2031,10 +2054,10 @@ class TooltipDirective {
|
|
|
2031
2054
|
this.componentRef = null;
|
|
2032
2055
|
}
|
|
2033
2056
|
}
|
|
2034
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2035
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2057
|
+
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 });
|
|
2058
|
+
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 });
|
|
2036
2059
|
}
|
|
2037
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
2038
2061
|
type: Directive,
|
|
2039
2062
|
args: [{
|
|
2040
2063
|
selector: '[s4yTooltip]',
|
|
@@ -2068,11 +2091,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2068
2091
|
}] } });
|
|
2069
2092
|
|
|
2070
2093
|
class TooltipModule {
|
|
2071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2072
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
2073
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
2094
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2095
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent, TooltipDirective], imports: [CommonModule, NgClass], exports: [TooltipDirective] });
|
|
2096
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
|
|
2074
2097
|
}
|
|
2075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TooltipModule, decorators: [{
|
|
2076
2099
|
type: NgModule,
|
|
2077
2100
|
args: [{
|
|
2078
2101
|
declarations: [TooltipComponent, TooltipDirective],
|
|
@@ -2087,10 +2110,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2087
2110
|
* Usage: refer to the demo - app.component.html
|
|
2088
2111
|
*/
|
|
2089
2112
|
class BreadcrumbItemDirective {
|
|
2090
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2091
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2114
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: BreadcrumbItemDirective, isStandalone: true, selector: "[s4yBreadcrumbItem]", ngImport: i0 });
|
|
2092
2115
|
}
|
|
2093
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
|
|
2094
2117
|
type: Directive,
|
|
2095
2118
|
args: [{
|
|
2096
2119
|
selector: '[s4yBreadcrumbItem]',
|
|
@@ -2415,10 +2438,10 @@ class BreadcrumbService {
|
|
|
2415
2438
|
}
|
|
2416
2439
|
return config || {};
|
|
2417
2440
|
}
|
|
2418
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2419
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2441
|
+
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 });
|
|
2442
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
|
|
2420
2443
|
}
|
|
2421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
2422
2445
|
type: Injectable,
|
|
2423
2446
|
args: [{
|
|
2424
2447
|
providedIn: 'root',
|
|
@@ -2518,10 +2541,10 @@ class BreadcrumbComponent {
|
|
|
2518
2541
|
});
|
|
2519
2542
|
}));
|
|
2520
2543
|
}
|
|
2521
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2522
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2544
|
+
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 });
|
|
2545
|
+
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 });
|
|
2523
2546
|
}
|
|
2524
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2525
2548
|
type: Component,
|
|
2526
2549
|
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"] }]
|
|
2527
2550
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.ActivatedRoute }], propDecorators: { itemTemplate: [{
|
|
@@ -2557,10 +2580,10 @@ class StepComponent {
|
|
|
2557
2580
|
this.stepClicked.emit(this.value);
|
|
2558
2581
|
}
|
|
2559
2582
|
}
|
|
2560
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2583
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2584
|
+
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"] }] });
|
|
2562
2585
|
}
|
|
2563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepComponent, decorators: [{
|
|
2564
2587
|
type: Component,
|
|
2565
2588
|
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"] }]
|
|
2566
2589
|
}], propDecorators: { root: [{
|
|
@@ -2605,10 +2628,10 @@ class StepPanelComponent {
|
|
|
2605
2628
|
canNavigateTo(value) {
|
|
2606
2629
|
this.stepperComponent.setSelected(value);
|
|
2607
2630
|
}
|
|
2608
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2609
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2631
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2632
|
+
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] });
|
|
2610
2633
|
}
|
|
2611
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepPanelComponent, decorators: [{
|
|
2612
2635
|
type: Component,
|
|
2613
2636
|
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" }]
|
|
2614
2637
|
}], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
|
|
@@ -2690,10 +2713,10 @@ class StepperComponent {
|
|
|
2690
2713
|
this.onDestroy$.next();
|
|
2691
2714
|
this.onDestroy$.complete();
|
|
2692
2715
|
}
|
|
2693
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2716
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2717
|
+
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 }] });
|
|
2695
2718
|
}
|
|
2696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2719
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2697
2720
|
type: Component,
|
|
2698
2721
|
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"] }]
|
|
2699
2722
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
@@ -2717,10 +2740,10 @@ class LoadingModalService {
|
|
|
2717
2740
|
hiddenLoading() {
|
|
2718
2741
|
this._isLoading.set(false);
|
|
2719
2742
|
}
|
|
2720
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2721
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2743
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2744
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalService });
|
|
2722
2745
|
}
|
|
2723
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalService, decorators: [{
|
|
2724
2747
|
type: Injectable
|
|
2725
2748
|
}] });
|
|
2726
2749
|
|
|
@@ -2760,22 +2783,21 @@ class LoadingModalComponent {
|
|
|
2760
2783
|
clearInterval(this.intervalId);
|
|
2761
2784
|
}
|
|
2762
2785
|
}
|
|
2763
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2764
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2786
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2787
|
+
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 });
|
|
2765
2788
|
}
|
|
2766
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LoadingModalComponent, decorators: [{
|
|
2767
2790
|
type: Component,
|
|
2768
2791
|
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"] }]
|
|
2769
2792
|
}] });
|
|
2770
2793
|
|
|
2771
2794
|
class CheckboxComponent {
|
|
2772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2795
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2796
|
+
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" } }, 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"] });
|
|
2774
2797
|
}
|
|
2775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2776
2799
|
type: Component,
|
|
2777
2800
|
args: [{ selector: 'input[s4yCheckbox][type="checkbox"]', imports: [], host: {
|
|
2778
|
-
'[attr.aria-checked]': 'checked',
|
|
2779
2801
|
role: 'checkbox',
|
|
2780
2802
|
}, 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"] }]
|
|
2781
2803
|
}] });
|
|
@@ -2838,10 +2860,10 @@ class SidebarRightService {
|
|
|
2838
2860
|
window.removeEventListener('resize', this.resizeHandler);
|
|
2839
2861
|
}
|
|
2840
2862
|
}
|
|
2841
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2842
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2863
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2864
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightService, providedIn: 'root' });
|
|
2843
2865
|
}
|
|
2844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightService, decorators: [{
|
|
2845
2867
|
type: Injectable,
|
|
2846
2868
|
args: [{
|
|
2847
2869
|
providedIn: 'root',
|
|
@@ -2863,10 +2885,10 @@ class SidebarRightComponent {
|
|
|
2863
2885
|
closeByOverlay() {
|
|
2864
2886
|
this.sidebarRightService.toggleSidebar();
|
|
2865
2887
|
}
|
|
2866
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2867
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2889
|
+
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] });
|
|
2868
2890
|
}
|
|
2869
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SidebarRightComponent, decorators: [{
|
|
2870
2892
|
type: Component,
|
|
2871
2893
|
args: [{ selector: 's4y-sidebar-right', imports: [CommonModule], animations: [sidebarRightAnimation], host: {
|
|
2872
2894
|
'[attr.data-opened]': 'isOpened()',
|
|
@@ -2876,10 +2898,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2876
2898
|
}] } });
|
|
2877
2899
|
|
|
2878
2900
|
class PopoverPanelComponent {
|
|
2879
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2880
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2901
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2902
|
+
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"] });
|
|
2881
2903
|
}
|
|
2882
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverPanelComponent, decorators: [{
|
|
2883
2905
|
type: Component,
|
|
2884
2906
|
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"] }]
|
|
2885
2907
|
}] });
|
|
@@ -3108,10 +3130,10 @@ class PopoverTriggerDirective {
|
|
|
3108
3130
|
this.subs.unsubscribe();
|
|
3109
3131
|
this.overlayRef?.dispose();
|
|
3110
3132
|
}
|
|
3111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3112
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
3133
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3134
|
+
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 });
|
|
3113
3135
|
}
|
|
3114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
|
|
3115
3137
|
type: Directive,
|
|
3116
3138
|
args: [{
|
|
3117
3139
|
selector: '[s4yPopoverTrigger]',
|
|
@@ -3123,10 +3145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3123
3145
|
}] } });
|
|
3124
3146
|
|
|
3125
3147
|
class MenuComponent {
|
|
3126
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
3148
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3149
|
+
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"] });
|
|
3128
3150
|
}
|
|
3129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3130
3152
|
type: Component,
|
|
3131
3153
|
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"] }]
|
|
3132
3154
|
}] });
|
|
@@ -3134,8 +3156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3134
3156
|
class MenuItemComponent {
|
|
3135
3157
|
iconUri = input();
|
|
3136
3158
|
imageUri = input();
|
|
3137
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3138
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3159
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3160
|
+
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: `
|
|
3139
3161
|
@if (iconUri()) {
|
|
3140
3162
|
<s4y-svg [size]="18" [src]="iconUri()"></s4y-svg>
|
|
3141
3163
|
}
|
|
@@ -3146,7 +3168,7 @@ class MenuItemComponent {
|
|
|
3146
3168
|
<ng-content></ng-content>
|
|
3147
3169
|
`, 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"] }] });
|
|
3148
3170
|
}
|
|
3149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
3150
3172
|
type: Component,
|
|
3151
3173
|
args: [{ selector: 'button[s4yMenuItem], a[s4yMenuItem]', standalone: true, imports: [SvgComponent], template: `
|
|
3152
3174
|
@if (iconUri()) {
|
|
@@ -3202,12 +3224,12 @@ class ImagePreviewComponent {
|
|
|
3202
3224
|
return;
|
|
3203
3225
|
this.overlayRef.dispose();
|
|
3204
3226
|
}
|
|
3205
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3206
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3228
|
+
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 });
|
|
3207
3229
|
}
|
|
3208
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
3209
3231
|
type: Component,
|
|
3210
|
-
args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], template: "\r\n<div class=\"preview-controls\">\r\n
|
|
3232
|
+
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"] }]
|
|
3211
3233
|
}] });
|
|
3212
3234
|
|
|
3213
3235
|
class ImageService {
|
|
@@ -3250,10 +3272,10 @@ class ImageService {
|
|
|
3250
3272
|
createPortal() {
|
|
3251
3273
|
return new ComponentPortal(ImagePreviewComponent);
|
|
3252
3274
|
}
|
|
3253
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3254
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
3275
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3276
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageService, providedIn: 'root' });
|
|
3255
3277
|
}
|
|
3256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageService, decorators: [{
|
|
3257
3279
|
type: Injectable,
|
|
3258
3280
|
args: [{
|
|
3259
3281
|
providedIn: 'root',
|
|
@@ -3266,7 +3288,10 @@ class ImageComponent {
|
|
|
3266
3288
|
renderer = inject(Renderer2);
|
|
3267
3289
|
destroy = inject(DestroyRef);
|
|
3268
3290
|
constructor() { }
|
|
3269
|
-
src = input(''
|
|
3291
|
+
src = input('', {
|
|
3292
|
+
alias: 's4ySrc',
|
|
3293
|
+
});
|
|
3294
|
+
innerTpl = input();
|
|
3270
3295
|
fileName = input();
|
|
3271
3296
|
disablePreview = input(false);
|
|
3272
3297
|
withOverlay = input(false);
|
|
@@ -3276,12 +3301,13 @@ class ImageComponent {
|
|
|
3276
3301
|
this.configureWrapperElement();
|
|
3277
3302
|
this.configureOverlay();
|
|
3278
3303
|
this.configureEyeSvg();
|
|
3304
|
+
this.configureImageSrc();
|
|
3279
3305
|
}
|
|
3280
3306
|
ngAfterViewInit() {
|
|
3281
3307
|
this.onShowOverlay();
|
|
3282
3308
|
}
|
|
3283
3309
|
configureWrapperElement() {
|
|
3284
|
-
const img = this.
|
|
3310
|
+
const img = this.ImageEl;
|
|
3285
3311
|
if (!img)
|
|
3286
3312
|
return;
|
|
3287
3313
|
const parent = img.parentNode;
|
|
@@ -3312,6 +3338,13 @@ class ImageComponent {
|
|
|
3312
3338
|
svgContainer.innerHTML = this.eyeSvg;
|
|
3313
3339
|
this.renderer.appendChild(overlay, svgContainer);
|
|
3314
3340
|
}
|
|
3341
|
+
configureImageSrc() {
|
|
3342
|
+
const imgEl = this.ImageEl;
|
|
3343
|
+
const src = this.src();
|
|
3344
|
+
if (!imgEl || !src)
|
|
3345
|
+
return;
|
|
3346
|
+
this.renderer.setAttribute(imgEl, 'src', src);
|
|
3347
|
+
}
|
|
3315
3348
|
onShowOverlay() {
|
|
3316
3349
|
const wrapper = this.wrapper;
|
|
3317
3350
|
const overlay = this.overlayEl;
|
|
@@ -3341,14 +3374,216 @@ class ImageComponent {
|
|
|
3341
3374
|
get eyeSvg() {
|
|
3342
3375
|
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>`;
|
|
3343
3376
|
}
|
|
3344
|
-
|
|
3345
|
-
|
|
3377
|
+
get ImageEl() {
|
|
3378
|
+
return this.elRef.nativeElement;
|
|
3379
|
+
}
|
|
3380
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3381
|
+
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 });
|
|
3346
3382
|
}
|
|
3347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3348
3384
|
type: Component,
|
|
3349
|
-
args: [{ selector: 'img[s4yImage]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".s4y-overlay
|
|
3385
|
+
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"] }]
|
|
3350
3386
|
}], ctorParameters: () => [] });
|
|
3351
3387
|
|
|
3388
|
+
class DynamicTooltipComponent {
|
|
3389
|
+
text = "";
|
|
3390
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3391
|
+
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"] });
|
|
3392
|
+
}
|
|
3393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipComponent, decorators: [{
|
|
3394
|
+
type: Component,
|
|
3395
|
+
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"] }]
|
|
3396
|
+
}] });
|
|
3397
|
+
|
|
3398
|
+
class DynamicTooltipDirective {
|
|
3399
|
+
overlay = inject(Overlay);
|
|
3400
|
+
elRef = inject((ElementRef));
|
|
3401
|
+
overlayRef;
|
|
3402
|
+
tooltipContent = input.required({
|
|
3403
|
+
alias: 's4yDynamicTooltip',
|
|
3404
|
+
});
|
|
3405
|
+
placement = input('top');
|
|
3406
|
+
tooltipPortal = new ComponentPortal(DynamicTooltipComponent);
|
|
3407
|
+
onOverlayEnter;
|
|
3408
|
+
onOverlayLeave;
|
|
3409
|
+
constructor() {
|
|
3410
|
+
console.log(this.host);
|
|
3411
|
+
}
|
|
3412
|
+
get host() {
|
|
3413
|
+
return this.elRef.nativeElement;
|
|
3414
|
+
}
|
|
3415
|
+
shown() {
|
|
3416
|
+
this.overlayRef?.dispose();
|
|
3417
|
+
this.overlayRef = this.createOverlay();
|
|
3418
|
+
const compRef = this.overlayRef.attach(this.tooltipPortal);
|
|
3419
|
+
compRef.instance.text = this.tooltipContent();
|
|
3420
|
+
this.overlayRef.updatePosition();
|
|
3421
|
+
this.bindOverlayHoverGuards();
|
|
3422
|
+
}
|
|
3423
|
+
hide(e) {
|
|
3424
|
+
// Se o mouse saiu do host indo PARA o overlay, não fecha
|
|
3425
|
+
const next = e.relatedTarget;
|
|
3426
|
+
if (next && this.overlayRef?.overlayElement.contains(next))
|
|
3427
|
+
return;
|
|
3428
|
+
this.dispose();
|
|
3429
|
+
}
|
|
3430
|
+
bindOverlayHoverGuards() {
|
|
3431
|
+
if (!this.overlayRef)
|
|
3432
|
+
return;
|
|
3433
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
3434
|
+
// remove listeners antigos (se existirem)
|
|
3435
|
+
this.unbindOverlayHoverGuards();
|
|
3436
|
+
this.onOverlayEnter = () => {
|
|
3437
|
+
// não faz nada, apenas impede fechamento “por acidente”
|
|
3438
|
+
};
|
|
3439
|
+
this.onOverlayLeave = (e) => {
|
|
3440
|
+
// Se saiu do overlay indo PARA o host, não fecha
|
|
3441
|
+
const next = e.relatedTarget;
|
|
3442
|
+
if (next && this.elRef.nativeElement.contains(next))
|
|
3443
|
+
return;
|
|
3444
|
+
this.dispose();
|
|
3445
|
+
};
|
|
3446
|
+
overlayEl.addEventListener('mouseenter', this.onOverlayEnter);
|
|
3447
|
+
overlayEl.addEventListener('mouseleave', this.onOverlayLeave);
|
|
3448
|
+
}
|
|
3449
|
+
unbindOverlayHoverGuards() {
|
|
3450
|
+
if (!this.overlayRef)
|
|
3451
|
+
return;
|
|
3452
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
3453
|
+
if (this.onOverlayEnter)
|
|
3454
|
+
overlayEl.removeEventListener('mouseenter', this.onOverlayEnter);
|
|
3455
|
+
if (this.onOverlayLeave)
|
|
3456
|
+
overlayEl.removeEventListener('mouseleave', this.onOverlayLeave);
|
|
3457
|
+
this.onOverlayEnter = undefined;
|
|
3458
|
+
this.onOverlayLeave = undefined;
|
|
3459
|
+
}
|
|
3460
|
+
createOverlay() {
|
|
3461
|
+
const positionStrategy = this.overlay
|
|
3462
|
+
.position()
|
|
3463
|
+
.flexibleConnectedTo(this.elRef)
|
|
3464
|
+
.withFlexibleDimensions(false)
|
|
3465
|
+
.withPush(true)
|
|
3466
|
+
.withViewportMargin(8)
|
|
3467
|
+
.withPositions(this.getPositionsByPlacement(this.placement()));
|
|
3468
|
+
return this.overlay.create({
|
|
3469
|
+
hasBackdrop: false,
|
|
3470
|
+
disposeOnNavigation: true,
|
|
3471
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
3472
|
+
positionStrategy,
|
|
3473
|
+
panelClass: 's4y-tooltip-panel',
|
|
3474
|
+
});
|
|
3475
|
+
}
|
|
3476
|
+
getPositionsByPlacement(p) {
|
|
3477
|
+
const gap = 8;
|
|
3478
|
+
const map = {
|
|
3479
|
+
top: [
|
|
3480
|
+
{
|
|
3481
|
+
originX: 'center',
|
|
3482
|
+
originY: 'top',
|
|
3483
|
+
overlayX: 'center',
|
|
3484
|
+
overlayY: 'bottom',
|
|
3485
|
+
offsetY: -gap,
|
|
3486
|
+
},
|
|
3487
|
+
{
|
|
3488
|
+
originX: 'center',
|
|
3489
|
+
originY: 'bottom',
|
|
3490
|
+
overlayX: 'center',
|
|
3491
|
+
overlayY: 'top',
|
|
3492
|
+
offsetY: gap,
|
|
3493
|
+
},
|
|
3494
|
+
],
|
|
3495
|
+
bottom: [
|
|
3496
|
+
{
|
|
3497
|
+
originX: 'center',
|
|
3498
|
+
originY: 'bottom',
|
|
3499
|
+
overlayX: 'center',
|
|
3500
|
+
overlayY: 'top',
|
|
3501
|
+
offsetY: gap,
|
|
3502
|
+
},
|
|
3503
|
+
{
|
|
3504
|
+
originX: 'center',
|
|
3505
|
+
originY: 'top',
|
|
3506
|
+
overlayX: 'center',
|
|
3507
|
+
overlayY: 'bottom',
|
|
3508
|
+
offsetY: -gap,
|
|
3509
|
+
},
|
|
3510
|
+
],
|
|
3511
|
+
left: [
|
|
3512
|
+
{
|
|
3513
|
+
originX: 'start',
|
|
3514
|
+
originY: 'center',
|
|
3515
|
+
overlayX: 'end',
|
|
3516
|
+
overlayY: 'center',
|
|
3517
|
+
offsetX: -gap,
|
|
3518
|
+
},
|
|
3519
|
+
{
|
|
3520
|
+
originX: 'end',
|
|
3521
|
+
originY: 'center',
|
|
3522
|
+
overlayX: 'start',
|
|
3523
|
+
overlayY: 'center',
|
|
3524
|
+
offsetX: gap,
|
|
3525
|
+
},
|
|
3526
|
+
],
|
|
3527
|
+
right: [
|
|
3528
|
+
{
|
|
3529
|
+
originX: 'end',
|
|
3530
|
+
originY: 'center',
|
|
3531
|
+
overlayX: 'start',
|
|
3532
|
+
overlayY: 'center',
|
|
3533
|
+
offsetX: gap,
|
|
3534
|
+
},
|
|
3535
|
+
{
|
|
3536
|
+
originX: 'start',
|
|
3537
|
+
originY: 'center',
|
|
3538
|
+
overlayX: 'end',
|
|
3539
|
+
overlayY: 'center',
|
|
3540
|
+
offsetX: -gap,
|
|
3541
|
+
},
|
|
3542
|
+
],
|
|
3543
|
+
};
|
|
3544
|
+
return map[p];
|
|
3545
|
+
}
|
|
3546
|
+
dispose() {
|
|
3547
|
+
this.unbindOverlayHoverGuards();
|
|
3548
|
+
this.overlayRef?.dispose();
|
|
3549
|
+
this.overlayRef = undefined;
|
|
3550
|
+
}
|
|
3551
|
+
ngOnDestroy() {
|
|
3552
|
+
this.dispose();
|
|
3553
|
+
}
|
|
3554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3555
|
+
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 });
|
|
3556
|
+
}
|
|
3557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicTooltipDirective, decorators: [{
|
|
3558
|
+
type: Directive,
|
|
3559
|
+
args: [{
|
|
3560
|
+
selector: '[s4yDynamicTooltip]',
|
|
3561
|
+
}]
|
|
3562
|
+
}], ctorParameters: () => [], propDecorators: { shown: [{
|
|
3563
|
+
type: HostListener,
|
|
3564
|
+
args: ['mouseenter']
|
|
3565
|
+
}], hide: [{
|
|
3566
|
+
type: HostListener,
|
|
3567
|
+
args: ['mouseleave', ['$event']]
|
|
3568
|
+
}] } });
|
|
3569
|
+
|
|
3570
|
+
class SummaryCardComponent {
|
|
3571
|
+
props = input({
|
|
3572
|
+
withFooter: false,
|
|
3573
|
+
withIcon: false,
|
|
3574
|
+
withTooltip: false,
|
|
3575
|
+
iconSize: 18,
|
|
3576
|
+
iconBackgroundColor: '#4b5563',
|
|
3577
|
+
});
|
|
3578
|
+
footerTpl = contentChild('footerTpl');
|
|
3579
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3580
|
+
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"] }] });
|
|
3581
|
+
}
|
|
3582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SummaryCardComponent, decorators: [{
|
|
3583
|
+
type: Component,
|
|
3584
|
+
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"] }]
|
|
3585
|
+
}] });
|
|
3586
|
+
|
|
3352
3587
|
const selectMultiAnim = trigger('selectMultiAnim', [
|
|
3353
3588
|
// entra
|
|
3354
3589
|
transition(':enter', [
|
|
@@ -3495,8 +3730,8 @@ class SelectMultiComponent {
|
|
|
3495
3730
|
this._onChange(stillValid);
|
|
3496
3731
|
}
|
|
3497
3732
|
});
|
|
3498
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3499
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectMultiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3734
|
+
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: [
|
|
3500
3735
|
{
|
|
3501
3736
|
provide: NG_VALUE_ACCESSOR,
|
|
3502
3737
|
multi: true,
|
|
@@ -3504,7 +3739,7 @@ class SelectMultiComponent {
|
|
|
3504
3739
|
},
|
|
3505
3740
|
], 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] });
|
|
3506
3741
|
}
|
|
3507
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectMultiComponent, decorators: [{
|
|
3508
3743
|
type: Component,
|
|
3509
3744
|
args: [{ selector: 's4y-select-multi', imports: [CommonModule, CheckboxComponent, SpinnerComponent], providers: [
|
|
3510
3745
|
{
|
|
@@ -3797,10 +4032,10 @@ class DynamicDialogComponent {
|
|
|
3797
4032
|
this.cancelLoading = false;
|
|
3798
4033
|
}
|
|
3799
4034
|
}
|
|
3800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4035
|
+
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 });
|
|
4036
|
+
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: [] });
|
|
3802
4037
|
}
|
|
3803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogComponent, decorators: [{
|
|
3804
4039
|
type: Component,
|
|
3805
4040
|
args: [{ selector: 's4y-dynamic-dialog', imports: [CdkPortalOutlet, ButtonComponent, NgStyle, NgIf, NgTemplateOutlet], host: {
|
|
3806
4041
|
role: 'dialog',
|
|
@@ -3920,14 +4155,1098 @@ class DynamicDialogService {
|
|
|
3920
4155
|
],
|
|
3921
4156
|
};
|
|
3922
4157
|
}
|
|
3923
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3924
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4159
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogService, providedIn: 'root' });
|
|
4160
|
+
}
|
|
4161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogService, decorators: [{
|
|
4162
|
+
type: Injectable,
|
|
4163
|
+
args: [{
|
|
4164
|
+
providedIn: 'root',
|
|
4165
|
+
}]
|
|
4166
|
+
}] });
|
|
4167
|
+
|
|
4168
|
+
class DynamicLoadingGlobalComponent {
|
|
4169
|
+
message = signal('Carregando dados...');
|
|
4170
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DynamicLoadingGlobalComponent, isStandalone: true, selector: "s4y-dynamic-loading-global", ngImport: i0, template: `
|
|
4172
|
+
<div class="s4y-dynamic-loading-container">
|
|
4173
|
+
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4174
|
+
<p>{{ message() }}</p>
|
|
4175
|
+
</div>
|
|
4176
|
+
`, 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 });
|
|
4177
|
+
}
|
|
4178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalComponent, decorators: [{
|
|
4179
|
+
type: Component,
|
|
4180
|
+
args: [{ selector: 's4y-dynamic-loading-global', imports: [], template: `
|
|
4181
|
+
<div class="s4y-dynamic-loading-container">
|
|
4182
|
+
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4183
|
+
<p>{{ message() }}</p>
|
|
4184
|
+
</div>
|
|
4185
|
+
`, 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"] }]
|
|
4186
|
+
}] });
|
|
4187
|
+
|
|
4188
|
+
class DynamicLoadingGlobalService {
|
|
4189
|
+
overlay = inject(Overlay);
|
|
4190
|
+
overlays = new Map();
|
|
4191
|
+
constructor() { }
|
|
4192
|
+
showLoading(message) {
|
|
4193
|
+
const overlayRef = this.createOverlay();
|
|
4194
|
+
const portal = this.loadingComponentPortal();
|
|
4195
|
+
const id = this.generateId();
|
|
4196
|
+
const componentRef = overlayRef.attach(portal);
|
|
4197
|
+
if (message) {
|
|
4198
|
+
componentRef.instance.message.set(message);
|
|
4199
|
+
}
|
|
4200
|
+
this.overlays.set(id, { overlayRef, componentRef });
|
|
4201
|
+
return id;
|
|
4202
|
+
}
|
|
4203
|
+
updateMessage(id, message) {
|
|
4204
|
+
const entry = this.overlays.get(id);
|
|
4205
|
+
if (entry) {
|
|
4206
|
+
entry.componentRef.instance.message.set(message);
|
|
4207
|
+
}
|
|
4208
|
+
}
|
|
4209
|
+
hiddenLoading(id) {
|
|
4210
|
+
if (id) {
|
|
4211
|
+
const entry = this.overlays.get(id);
|
|
4212
|
+
if (entry) {
|
|
4213
|
+
entry.overlayRef.dispose();
|
|
4214
|
+
this.overlays.delete(id);
|
|
4215
|
+
}
|
|
4216
|
+
}
|
|
4217
|
+
else {
|
|
4218
|
+
this.overlays.forEach((entry) => entry.overlayRef.dispose());
|
|
4219
|
+
this.overlays.clear();
|
|
4220
|
+
}
|
|
4221
|
+
}
|
|
4222
|
+
loadingComponentPortal() {
|
|
4223
|
+
return new ComponentPortal(DynamicLoadingGlobalComponent);
|
|
4224
|
+
}
|
|
4225
|
+
createOverlay() {
|
|
4226
|
+
return this.overlay.create({
|
|
4227
|
+
backdropClass: ['s4y-overlay-bg'],
|
|
4228
|
+
panelClass: ['s4y-centered-panel-content'],
|
|
4229
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
4230
|
+
hasBackdrop: true,
|
|
4231
|
+
disposeOnNavigation: true,
|
|
4232
|
+
});
|
|
4233
|
+
}
|
|
4234
|
+
generateId() {
|
|
4235
|
+
const c = globalThis.crypto;
|
|
4236
|
+
if (c?.randomUUID) {
|
|
4237
|
+
return c.randomUUID();
|
|
4238
|
+
}
|
|
4239
|
+
return `dlg_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
|
|
4240
|
+
}
|
|
4241
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4242
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalService, providedIn: 'root' });
|
|
4243
|
+
}
|
|
4244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicLoadingGlobalService, decorators: [{
|
|
4245
|
+
type: Injectable,
|
|
4246
|
+
args: [{
|
|
4247
|
+
providedIn: 'root',
|
|
4248
|
+
}]
|
|
4249
|
+
}], ctorParameters: () => [] });
|
|
4250
|
+
|
|
4251
|
+
const SIZE_MAP = {
|
|
4252
|
+
xs: 16,
|
|
4253
|
+
sm: 20,
|
|
4254
|
+
md: 24,
|
|
4255
|
+
lg: 32,
|
|
4256
|
+
xl: 40,
|
|
4257
|
+
};
|
|
4258
|
+
class RatingComponent {
|
|
4259
|
+
sanitizer = inject(DomSanitizer);
|
|
4260
|
+
value = signal(0);
|
|
4261
|
+
hoverValue = signal(null);
|
|
4262
|
+
count = input(5);
|
|
4263
|
+
size = input('md');
|
|
4264
|
+
sizePx = computed(() => {
|
|
4265
|
+
const size = this.size();
|
|
4266
|
+
return typeof size === 'number' ? size : (SIZE_MAP[size] ?? SIZE_MAP.md);
|
|
4267
|
+
});
|
|
4268
|
+
allowHalf = input(false);
|
|
4269
|
+
readOnly = input(false);
|
|
4270
|
+
disabled = signal(false);
|
|
4271
|
+
onChange = () => { };
|
|
4272
|
+
onTouched = () => { };
|
|
4273
|
+
stars = computed(() => {
|
|
4274
|
+
const totalStars = this.count(); // número, ex: 5
|
|
4275
|
+
const displayValue = this.hoverValue() ?? this.value();
|
|
4276
|
+
const result = [];
|
|
4277
|
+
for (let i = 0; i < totalStars; i++) {
|
|
4278
|
+
let icon = this.starLineIcon;
|
|
4279
|
+
if (displayValue >= i + 1) {
|
|
4280
|
+
icon = this.starFillIcon;
|
|
4281
|
+
}
|
|
4282
|
+
else if (this.allowHalf() && displayValue >= i + 0.5) {
|
|
4283
|
+
icon = this.starHalfIcon;
|
|
4284
|
+
}
|
|
4285
|
+
result.push(this.sanitizer.bypassSecurityTrustHtml(icon));
|
|
4286
|
+
}
|
|
4287
|
+
return result;
|
|
4288
|
+
});
|
|
4289
|
+
get isDisabledClass() {
|
|
4290
|
+
return this.disabled();
|
|
4291
|
+
}
|
|
4292
|
+
get isReadOnlyClass() {
|
|
4293
|
+
return this.readOnly();
|
|
4294
|
+
}
|
|
4295
|
+
clearHoverStar() {
|
|
4296
|
+
this.hoverValue.set(null);
|
|
4297
|
+
}
|
|
4298
|
+
writeValue(value) {
|
|
4299
|
+
const total = this.count();
|
|
4300
|
+
const normalized = typeof value === 'number' ? Math.max(0, Math.min(value, total)) : 0;
|
|
4301
|
+
this.value.set(this.allowHalf()
|
|
4302
|
+
? Math.round(normalized * 2) / 2
|
|
4303
|
+
: Math.round(normalized));
|
|
4304
|
+
}
|
|
4305
|
+
registerOnChange(fn) {
|
|
4306
|
+
this.onChange = fn;
|
|
4307
|
+
}
|
|
4308
|
+
registerOnTouched(fn) {
|
|
4309
|
+
this.onTouched = fn;
|
|
4310
|
+
}
|
|
4311
|
+
setDisabledState(isDisabled) {
|
|
4312
|
+
this.disabled.set(isDisabled);
|
|
4313
|
+
}
|
|
4314
|
+
setRating(index, event) {
|
|
4315
|
+
if (!this.isInteractive)
|
|
4316
|
+
return;
|
|
4317
|
+
//é um array, entao a posicao é 0
|
|
4318
|
+
const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
|
|
4319
|
+
if (next === this.value()) {
|
|
4320
|
+
this.updateValue(0);
|
|
4321
|
+
this.hoverValue.set(null);
|
|
4322
|
+
}
|
|
4323
|
+
else {
|
|
4324
|
+
this.updateValue(next);
|
|
4325
|
+
}
|
|
4326
|
+
}
|
|
4327
|
+
onKey(event) {
|
|
4328
|
+
if (!this.isInteractive)
|
|
4329
|
+
return;
|
|
4330
|
+
const total = this.count();
|
|
4331
|
+
const step = this.allowHalf() ? 0.5 : 1;
|
|
4332
|
+
const base = this.hoverValue() ?? this.value();
|
|
4333
|
+
if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
|
|
4334
|
+
const next = Math.min(base + step, total);
|
|
4335
|
+
this.hoverValue.set(next);
|
|
4336
|
+
event.preventDefault();
|
|
4337
|
+
return;
|
|
4338
|
+
}
|
|
4339
|
+
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
|
|
4340
|
+
const next = Math.max(base - step, 0);
|
|
4341
|
+
this.hoverValue.set(next);
|
|
4342
|
+
event.preventDefault();
|
|
4343
|
+
return;
|
|
4344
|
+
}
|
|
4345
|
+
if (event.key === 'Home') {
|
|
4346
|
+
this.hoverValue.set(0);
|
|
4347
|
+
event.preventDefault();
|
|
4348
|
+
return;
|
|
4349
|
+
}
|
|
4350
|
+
if (event.key === 'End') {
|
|
4351
|
+
this.hoverValue.set(total);
|
|
4352
|
+
event.preventDefault();
|
|
4353
|
+
return;
|
|
4354
|
+
}
|
|
4355
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
4356
|
+
const targetValue = this.hoverValue() ?? this.value();
|
|
4357
|
+
this.updateValue(targetValue);
|
|
4358
|
+
this.hoverValue.set(null);
|
|
4359
|
+
event.preventDefault();
|
|
4360
|
+
return;
|
|
4361
|
+
}
|
|
4362
|
+
if (event.key === 'Escape') {
|
|
4363
|
+
this.hoverValue.set(null);
|
|
4364
|
+
event.preventDefault();
|
|
4365
|
+
return;
|
|
4366
|
+
}
|
|
4367
|
+
}
|
|
4368
|
+
onStarHover(index, event) {
|
|
4369
|
+
if (!this.isInteractive)
|
|
4370
|
+
return;
|
|
4371
|
+
if (this.allowHalf()) {
|
|
4372
|
+
this.hoverValue.set(this.computeHalf(index, event));
|
|
4373
|
+
}
|
|
4374
|
+
else {
|
|
4375
|
+
this.hoverValue.set(index + 1);
|
|
4376
|
+
}
|
|
4377
|
+
}
|
|
4378
|
+
onStarHoverTouch(index, event) {
|
|
4379
|
+
if (!this.isInteractive)
|
|
4380
|
+
return;
|
|
4381
|
+
if (this.allowHalf()) {
|
|
4382
|
+
this.hoverValue.set(this.computeHalf(index, event));
|
|
4383
|
+
}
|
|
4384
|
+
else {
|
|
4385
|
+
this.hoverValue.set(index + 1);
|
|
4386
|
+
}
|
|
4387
|
+
}
|
|
4388
|
+
onTouchCommit(index, event) {
|
|
4389
|
+
if (!this.isInteractive)
|
|
4390
|
+
return;
|
|
4391
|
+
const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
|
|
4392
|
+
// Em mobile, toque único normalmente deve setar; se tocar de novo no mesmo, zera:
|
|
4393
|
+
if (next === this.value()) {
|
|
4394
|
+
this.updateValue(0);
|
|
4395
|
+
this.hoverValue.set(null);
|
|
4396
|
+
}
|
|
4397
|
+
else {
|
|
4398
|
+
this.updateValue(next);
|
|
4399
|
+
}
|
|
4400
|
+
// evita rolagem acidental ao tocar/arrastar levemente
|
|
4401
|
+
event.preventDefault();
|
|
4402
|
+
}
|
|
4403
|
+
updateValue(value) {
|
|
4404
|
+
const newValue = this.allowHalf()
|
|
4405
|
+
? Math.round(value * 2) / 2
|
|
4406
|
+
: Math.round(value);
|
|
4407
|
+
this.value.set(newValue);
|
|
4408
|
+
this.onChange(newValue);
|
|
4409
|
+
this.onTouched();
|
|
4410
|
+
}
|
|
4411
|
+
getClientXFromEvent(e) {
|
|
4412
|
+
if (e instanceof TouchEvent) {
|
|
4413
|
+
const t = e.touches[0] ?? e.changedTouches[0];
|
|
4414
|
+
return t?.clientX ?? 0;
|
|
4415
|
+
}
|
|
4416
|
+
return e.clientX ?? 0;
|
|
4417
|
+
}
|
|
4418
|
+
computeHalf(index, e) {
|
|
4419
|
+
const target = e.currentTarget;
|
|
4420
|
+
const rect = target.getBoundingClientRect();
|
|
4421
|
+
const clientX = this.getClientXFromEvent(e);
|
|
4422
|
+
const relativeX = clientX - rect.left; // 0..width
|
|
4423
|
+
const isHalf = relativeX < rect.width / 2;
|
|
4424
|
+
return isHalf ? index + 0.5 : index + 1;
|
|
4425
|
+
}
|
|
4426
|
+
get isInteractive() {
|
|
4427
|
+
return !this.disabled() && !this.readOnly();
|
|
4428
|
+
}
|
|
4429
|
+
get starLineIcon() {
|
|
4430
|
+
return `<svg
|
|
4431
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4432
|
+
viewBox="0 0 24 24"
|
|
4433
|
+
fill="currentColor"
|
|
4434
|
+
>
|
|
4435
|
+
<path
|
|
4436
|
+
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"
|
|
4437
|
+
></path>
|
|
4438
|
+
</svg>`;
|
|
4439
|
+
}
|
|
4440
|
+
get starFillIcon() {
|
|
4441
|
+
return `<svg
|
|
4442
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4443
|
+
viewBox="0 0 24 24"
|
|
4444
|
+
fill="currentColor"
|
|
4445
|
+
>
|
|
4446
|
+
<path
|
|
4447
|
+
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"
|
|
4448
|
+
></path>
|
|
4449
|
+
</svg>`;
|
|
4450
|
+
}
|
|
4451
|
+
get starHalfIcon() {
|
|
4452
|
+
return `
|
|
4453
|
+
<svg
|
|
4454
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4455
|
+
viewBox="0 0 24 24"
|
|
4456
|
+
fill="currentColor"
|
|
4457
|
+
>
|
|
4458
|
+
<path
|
|
4459
|
+
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"
|
|
4460
|
+
></path>
|
|
4461
|
+
</svg>
|
|
4462
|
+
`;
|
|
4463
|
+
}
|
|
4464
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4465
|
+
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: [
|
|
4466
|
+
{
|
|
4467
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4468
|
+
useExisting: forwardRef(() => RatingComponent),
|
|
4469
|
+
multi: true,
|
|
4470
|
+
},
|
|
4471
|
+
], 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"] });
|
|
4472
|
+
}
|
|
4473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RatingComponent, decorators: [{
|
|
4474
|
+
type: Component,
|
|
4475
|
+
args: [{ selector: 's4y-rating', providers: [
|
|
4476
|
+
{
|
|
4477
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4478
|
+
useExisting: forwardRef(() => RatingComponent),
|
|
4479
|
+
multi: true,
|
|
4480
|
+
},
|
|
4481
|
+
], 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"] }]
|
|
4482
|
+
}], propDecorators: { isDisabledClass: [{
|
|
4483
|
+
type: HostBinding,
|
|
4484
|
+
args: ['class.s4y-rating--disabled']
|
|
4485
|
+
}], isReadOnlyClass: [{
|
|
4486
|
+
type: HostBinding,
|
|
4487
|
+
args: ['class.s4y-rating--readonly']
|
|
4488
|
+
}], clearHoverStar: [{
|
|
4489
|
+
type: HostListener,
|
|
4490
|
+
args: ['mouseleave']
|
|
4491
|
+
}] } });
|
|
4492
|
+
|
|
4493
|
+
class TagComponent {
|
|
4494
|
+
injector = inject(Injector);
|
|
4495
|
+
editInput = viewChild('editInput');
|
|
4496
|
+
size = input('md');
|
|
4497
|
+
severity = input('primary');
|
|
4498
|
+
value = model('');
|
|
4499
|
+
outlined = input(false);
|
|
4500
|
+
withShadow = input(true);
|
|
4501
|
+
editable = input(false);
|
|
4502
|
+
isEditing = signal(false);
|
|
4503
|
+
editStart = output();
|
|
4504
|
+
editEnd = output();
|
|
4505
|
+
class = computed(() => {
|
|
4506
|
+
let baseClass = '';
|
|
4507
|
+
switch (this.severity()) {
|
|
4508
|
+
case 'success':
|
|
4509
|
+
baseClass = 'tag-success';
|
|
4510
|
+
break;
|
|
4511
|
+
case 'error':
|
|
4512
|
+
baseClass = 'tag-error';
|
|
4513
|
+
break;
|
|
4514
|
+
case 'info':
|
|
4515
|
+
baseClass = 'tag-info';
|
|
4516
|
+
break;
|
|
4517
|
+
case 'warning':
|
|
4518
|
+
baseClass = 'tag-warning';
|
|
4519
|
+
break;
|
|
4520
|
+
case 'neutral':
|
|
4521
|
+
baseClass = 'tag-neutral';
|
|
4522
|
+
break;
|
|
4523
|
+
case 'primary':
|
|
4524
|
+
baseClass = 'tag-primary';
|
|
4525
|
+
break;
|
|
4526
|
+
case 'secondary':
|
|
4527
|
+
baseClass = 'tag-secondary';
|
|
4528
|
+
break;
|
|
4529
|
+
case 'finished':
|
|
4530
|
+
baseClass = 'tag-finished';
|
|
4531
|
+
break;
|
|
4532
|
+
default:
|
|
4533
|
+
baseClass = 'tag-primary';
|
|
4534
|
+
}
|
|
4535
|
+
const outline = this.outlined() ? ' outlined' : '';
|
|
4536
|
+
return `${baseClass}${outline} ${this.sizeClass()}`;
|
|
4537
|
+
});
|
|
4538
|
+
sizeClass = computed(() => {
|
|
4539
|
+
switch (this.size()) {
|
|
4540
|
+
case 'xs':
|
|
4541
|
+
return 'size-xs';
|
|
4542
|
+
case 'sm':
|
|
4543
|
+
return 'size-sm';
|
|
4544
|
+
case 'md':
|
|
4545
|
+
return 'size-md';
|
|
4546
|
+
case 'lg':
|
|
4547
|
+
return 'size-lg';
|
|
4548
|
+
case 'xl':
|
|
4549
|
+
return 'size-xl';
|
|
4550
|
+
default:
|
|
4551
|
+
return 'size-md';
|
|
4552
|
+
}
|
|
4553
|
+
});
|
|
4554
|
+
constructor() {
|
|
4555
|
+
effect(() => {
|
|
4556
|
+
if (this.isEditing()) {
|
|
4557
|
+
afterNextRender(() => {
|
|
4558
|
+
const el = this.editInput()?.nativeElement;
|
|
4559
|
+
if (el) {
|
|
4560
|
+
el.focus();
|
|
4561
|
+
// el.select();
|
|
4562
|
+
}
|
|
4563
|
+
}, { injector: this.injector });
|
|
4564
|
+
}
|
|
4565
|
+
});
|
|
4566
|
+
}
|
|
4567
|
+
shadow = computed(() => this.withShadow() ? ' box-shadow: var(--shadow-default);' : null);
|
|
4568
|
+
onDblClick(_) {
|
|
4569
|
+
this.startEdit();
|
|
4570
|
+
}
|
|
4571
|
+
startEdit() {
|
|
4572
|
+
if (!this.editable())
|
|
4573
|
+
return;
|
|
4574
|
+
if (!this.isEditing()) {
|
|
4575
|
+
this.isEditing.set(true);
|
|
4576
|
+
this.editStart.emit();
|
|
4577
|
+
}
|
|
4578
|
+
}
|
|
4579
|
+
stopEdit(commit = true) {
|
|
4580
|
+
if (this.isEditing()) {
|
|
4581
|
+
this.isEditing.set(false);
|
|
4582
|
+
this.editEnd.emit();
|
|
4583
|
+
}
|
|
4584
|
+
}
|
|
4585
|
+
setValue(event) {
|
|
4586
|
+
const value = event.target.value;
|
|
4587
|
+
this.value.set(value);
|
|
4588
|
+
}
|
|
4589
|
+
onKeydown(event) {
|
|
4590
|
+
if (!this.editable())
|
|
4591
|
+
return;
|
|
4592
|
+
if (event.key === 'Enter' && !this.isEditing()) {
|
|
4593
|
+
event.preventDefault();
|
|
4594
|
+
this.startEdit();
|
|
4595
|
+
}
|
|
4596
|
+
else if (event.key === 'Escape' && this.isEditing()) {
|
|
4597
|
+
event.preventDefault();
|
|
4598
|
+
this.stopEdit(false);
|
|
4599
|
+
}
|
|
4600
|
+
}
|
|
4601
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4602
|
+
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"] });
|
|
4603
|
+
}
|
|
4604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TagComponent, decorators: [{
|
|
4605
|
+
type: Component,
|
|
4606
|
+
args: [{ selector: 's4y-tag', imports: [], host: {
|
|
4607
|
+
'[style.fontWeight]': '"500"',
|
|
4608
|
+
'[style.boxShadow]': 'shadow()',
|
|
4609
|
+
'[class]': 'class()',
|
|
4610
|
+
'(dblclick)': 'onDblClick($event)',
|
|
4611
|
+
role: 'button',
|
|
4612
|
+
'[attr.aria-label]': 'editable() ? "Editar tag" : null',
|
|
4613
|
+
tabindex: '0',
|
|
4614
|
+
}, 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"] }]
|
|
4615
|
+
}], ctorParameters: () => [] });
|
|
4616
|
+
|
|
4617
|
+
class ConfirmationComponent {
|
|
4618
|
+
sanitizer = inject(DomSanitizer);
|
|
4619
|
+
props;
|
|
4620
|
+
onCancelClick;
|
|
4621
|
+
onConfirmClick;
|
|
4622
|
+
confirmLoading = false;
|
|
4623
|
+
cancelLoading = false;
|
|
4624
|
+
loading = false;
|
|
4625
|
+
get isTemplate() {
|
|
4626
|
+
return this.props?.content instanceof TemplateRef;
|
|
4627
|
+
}
|
|
4628
|
+
// Verifica se é HTML
|
|
4629
|
+
get isHtml() {
|
|
4630
|
+
return !this.isTemplate && this.props?.contentType === 'html';
|
|
4631
|
+
}
|
|
4632
|
+
// Verifica se é texto simples
|
|
4633
|
+
get isText() {
|
|
4634
|
+
return !this.isTemplate && this.props?.contentType !== 'html';
|
|
4635
|
+
}
|
|
4636
|
+
// Retorna o template se for TemplateRef
|
|
4637
|
+
get template() {
|
|
4638
|
+
return this.isTemplate
|
|
4639
|
+
? this.props.content
|
|
4640
|
+
: undefined;
|
|
4641
|
+
}
|
|
4642
|
+
// Retorna HTML sanitizado se contentType for 'html'
|
|
4643
|
+
get safeHtml() {
|
|
4644
|
+
if (!this.isHtml || typeof this.props?.content !== 'string')
|
|
4645
|
+
return undefined;
|
|
4646
|
+
return (this.sanitizer.sanitize(SecurityContext.HTML, this.props.content) || '');
|
|
4647
|
+
}
|
|
4648
|
+
// Retorna texto simples
|
|
4649
|
+
get textContent() {
|
|
4650
|
+
return this.isText && typeof this.props?.content === 'string'
|
|
4651
|
+
? this.props.content
|
|
4652
|
+
: undefined;
|
|
4653
|
+
}
|
|
4654
|
+
async handleCancel() {
|
|
4655
|
+
if (this.onCancelClick) {
|
|
4656
|
+
this.cancelLoading = true;
|
|
4657
|
+
this.loading = true;
|
|
4658
|
+
await this.onCancelClick();
|
|
4659
|
+
this.cancelLoading = false;
|
|
4660
|
+
this.loading = false;
|
|
4661
|
+
}
|
|
4662
|
+
}
|
|
4663
|
+
async handleConfirm() {
|
|
4664
|
+
if (this.onConfirmClick) {
|
|
4665
|
+
this.confirmLoading = true;
|
|
4666
|
+
this.loading = true;
|
|
4667
|
+
await this.onConfirmClick();
|
|
4668
|
+
this.confirmLoading = false;
|
|
4669
|
+
this.loading = false;
|
|
4670
|
+
}
|
|
4671
|
+
}
|
|
4672
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4673
|
+
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"] }] });
|
|
4674
|
+
}
|
|
4675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
4676
|
+
type: Component,
|
|
4677
|
+
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"] }]
|
|
4678
|
+
}] });
|
|
4679
|
+
|
|
4680
|
+
class ConfirmationService {
|
|
4681
|
+
overlay = inject(Overlay);
|
|
4682
|
+
constructor() { }
|
|
4683
|
+
open(config) {
|
|
4684
|
+
const overlayRef = this.createOverlay(config);
|
|
4685
|
+
const confirmationPortal = this.confirmationPortal();
|
|
4686
|
+
const result$ = new Subject();
|
|
4687
|
+
let isProcessing = false;
|
|
4688
|
+
const confirmationInstance = overlayRef.attach(confirmationPortal);
|
|
4689
|
+
confirmationInstance.instance.props = config;
|
|
4690
|
+
confirmationInstance.instance.onCancelClick = async () => {
|
|
4691
|
+
isProcessing = true;
|
|
4692
|
+
await this.handleAction(config.onCancel, overlayRef, false, result$);
|
|
4693
|
+
isProcessing = false;
|
|
4694
|
+
};
|
|
4695
|
+
confirmationInstance.instance.onConfirmClick = async () => {
|
|
4696
|
+
isProcessing = true;
|
|
4697
|
+
await this.handleAction(config.onConfirm, overlayRef, true, result$);
|
|
4698
|
+
isProcessing = false;
|
|
4699
|
+
};
|
|
4700
|
+
const backdropSub = overlayRef.backdropClick().subscribe(() => {
|
|
4701
|
+
if (!isProcessing) {
|
|
4702
|
+
this.closeWithResult(overlayRef, result$, false);
|
|
4703
|
+
}
|
|
4704
|
+
});
|
|
4705
|
+
const keySub = overlayRef.keydownEvents().subscribe((event) => {
|
|
4706
|
+
if (event.key === 'Escape' && !isProcessing) {
|
|
4707
|
+
// ADICIONE essa verificação
|
|
4708
|
+
this.closeWithResult(overlayRef, result$, false);
|
|
4709
|
+
}
|
|
4710
|
+
});
|
|
4711
|
+
return result$.asObservable().pipe(take(1), finalize(() => {
|
|
4712
|
+
backdropSub.unsubscribe();
|
|
4713
|
+
keySub.unsubscribe();
|
|
4714
|
+
}));
|
|
4715
|
+
}
|
|
4716
|
+
async handleAction(action, overlayRef, confirmed, result$) {
|
|
4717
|
+
try {
|
|
4718
|
+
if (!action) {
|
|
4719
|
+
result$.next({ confirmed });
|
|
4720
|
+
result$.complete();
|
|
4721
|
+
overlayRef.dispose();
|
|
4722
|
+
return;
|
|
4723
|
+
}
|
|
4724
|
+
const actionResult$ = this.toObservable(action);
|
|
4725
|
+
const actionData = await firstValueFrom(actionResult$.pipe(catchError$1(() => of(true))));
|
|
4726
|
+
if (actionData === false) {
|
|
4727
|
+
return;
|
|
4728
|
+
}
|
|
4729
|
+
result$.next({ confirmed, data: actionData });
|
|
4730
|
+
result$.complete();
|
|
4731
|
+
overlayRef.dispose();
|
|
4732
|
+
}
|
|
4733
|
+
catch (error) {
|
|
4734
|
+
console.error('Error handling confirmation action:', error);
|
|
4735
|
+
result$.next({ confirmed: false });
|
|
4736
|
+
result$.complete();
|
|
4737
|
+
overlayRef.dispose();
|
|
4738
|
+
}
|
|
4739
|
+
}
|
|
4740
|
+
toObservable(value) {
|
|
4741
|
+
const resolvedValue = typeof value === 'function' ? value() : value;
|
|
4742
|
+
if (isObservable(resolvedValue)) {
|
|
4743
|
+
return resolvedValue;
|
|
4744
|
+
}
|
|
4745
|
+
if (resolvedValue instanceof Promise) {
|
|
4746
|
+
return from(resolvedValue);
|
|
4747
|
+
}
|
|
4748
|
+
return of(resolvedValue);
|
|
4749
|
+
}
|
|
4750
|
+
createOverlay({ width, height }) {
|
|
4751
|
+
const overlayRef = this.overlay.create({
|
|
4752
|
+
hasBackdrop: true,
|
|
4753
|
+
disposeOnNavigation: true,
|
|
4754
|
+
backdropClass: 's4y-backdrop-dialog',
|
|
4755
|
+
panelClass: 's4y-confirmation-panel',
|
|
4756
|
+
maxWidth: '90dvw',
|
|
4757
|
+
height: height,
|
|
4758
|
+
width: width ?? 'min(41rem, 90dvw)',
|
|
4759
|
+
positionStrategy: this.overlay
|
|
4760
|
+
.position()
|
|
4761
|
+
.global()
|
|
4762
|
+
.centerHorizontally()
|
|
4763
|
+
.centerVertically(),
|
|
4764
|
+
});
|
|
4765
|
+
return overlayRef;
|
|
4766
|
+
}
|
|
4767
|
+
confirmationPortal() {
|
|
4768
|
+
return new ComponentPortal(ConfirmationComponent);
|
|
4769
|
+
}
|
|
4770
|
+
closeWithResult(overlayRef, result$, confirmed) {
|
|
4771
|
+
if (!result$.closed) {
|
|
4772
|
+
result$.next({ confirmed });
|
|
4773
|
+
result$.complete();
|
|
4774
|
+
}
|
|
4775
|
+
if (overlayRef.hasAttached()) {
|
|
4776
|
+
overlayRef.dispose();
|
|
4777
|
+
}
|
|
4778
|
+
}
|
|
4779
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4780
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
|
|
3925
4781
|
}
|
|
3926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, decorators: [{
|
|
3927
4783
|
type: Injectable,
|
|
3928
4784
|
args: [{
|
|
3929
4785
|
providedIn: 'root',
|
|
3930
4786
|
}]
|
|
4787
|
+
}], ctorParameters: () => [] });
|
|
4788
|
+
|
|
4789
|
+
class CollapseComponent {
|
|
4790
|
+
cdr;
|
|
4791
|
+
/**
|
|
4792
|
+
* Modo acordeão - apenas um painel pode estar aberto por vez
|
|
4793
|
+
*/
|
|
4794
|
+
accordion = false;
|
|
4795
|
+
/**
|
|
4796
|
+
* Define se o collapse terá bordas
|
|
4797
|
+
*/
|
|
4798
|
+
bordered = true;
|
|
4799
|
+
/**
|
|
4800
|
+
* Modo ghost - sem bordas e fundo transparente
|
|
4801
|
+
*/
|
|
4802
|
+
ghost = false;
|
|
4803
|
+
/**
|
|
4804
|
+
* Posição do ícone de expansão
|
|
4805
|
+
*/
|
|
4806
|
+
expandIconPosition = 'start';
|
|
4807
|
+
/**
|
|
4808
|
+
* Tamanho do collapse
|
|
4809
|
+
*/
|
|
4810
|
+
size = 'medium';
|
|
4811
|
+
panels = [];
|
|
4812
|
+
constructor(cdr) {
|
|
4813
|
+
this.cdr = cdr;
|
|
4814
|
+
}
|
|
4815
|
+
/**
|
|
4816
|
+
* Adiciona um painel à lista
|
|
4817
|
+
*/
|
|
4818
|
+
addPanel(panel) {
|
|
4819
|
+
this.panels.push(panel);
|
|
4820
|
+
}
|
|
4821
|
+
/**
|
|
4822
|
+
* Remove um painel da lista
|
|
4823
|
+
*/
|
|
4824
|
+
removePanel(panel) {
|
|
4825
|
+
const index = this.panels.indexOf(panel);
|
|
4826
|
+
if (index > -1) {
|
|
4827
|
+
this.panels.splice(index, 1);
|
|
4828
|
+
}
|
|
4829
|
+
}
|
|
4830
|
+
/**
|
|
4831
|
+
* Manipula o clique em um painel
|
|
4832
|
+
*/
|
|
4833
|
+
handlePanelClick(panel) {
|
|
4834
|
+
// Se está em modo acordeão e o painel não está ativo
|
|
4835
|
+
if (this.accordion && !panel.active) {
|
|
4836
|
+
// Fecha todos os outros painéis
|
|
4837
|
+
this.panels
|
|
4838
|
+
.filter((p) => p !== panel && p.active)
|
|
4839
|
+
.forEach((p) => {
|
|
4840
|
+
p.active = false;
|
|
4841
|
+
p.activeChange.emit(false);
|
|
4842
|
+
p.markForCheck();
|
|
4843
|
+
});
|
|
4844
|
+
}
|
|
4845
|
+
// Alterna o estado do painel clicado
|
|
4846
|
+
panel.active = !panel.active;
|
|
4847
|
+
panel.activeChange.emit(panel.active);
|
|
4848
|
+
}
|
|
4849
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4850
|
+
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 });
|
|
4851
|
+
}
|
|
4852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
4853
|
+
type: Component,
|
|
4854
|
+
args: [{ selector: 's4y-collapse', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content></ng-content>`, host: {
|
|
4855
|
+
class: 's4y-collapse',
|
|
4856
|
+
'[class.s4y-collapse-icon-position-start]': `expandIconPosition === 'start'`,
|
|
4857
|
+
'[class.s4y-collapse-icon-position-end]': `expandIconPosition === 'end'`,
|
|
4858
|
+
'[class.s4y-collapse-ghost]': 'ghost',
|
|
4859
|
+
'[class.s4y-collapse-borderless]': '!bordered',
|
|
4860
|
+
'[class.s4y-collapse-small]': `size === 'small'`,
|
|
4861
|
+
'[class.s4y-collapse-large]': `size === 'large'`,
|
|
4862
|
+
}, 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"] }]
|
|
4863
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { accordion: [{
|
|
4864
|
+
type: Input,
|
|
4865
|
+
args: [{ transform: booleanAttribute }]
|
|
4866
|
+
}], bordered: [{
|
|
4867
|
+
type: Input,
|
|
4868
|
+
args: [{ transform: booleanAttribute }]
|
|
4869
|
+
}], ghost: [{
|
|
4870
|
+
type: Input,
|
|
4871
|
+
args: [{ transform: booleanAttribute }]
|
|
4872
|
+
}], expandIconPosition: [{
|
|
4873
|
+
type: Input
|
|
4874
|
+
}], size: [{
|
|
4875
|
+
type: Input
|
|
4876
|
+
}] } });
|
|
4877
|
+
|
|
4878
|
+
class CollapsePanelComponent {
|
|
4879
|
+
cdr = inject(ChangeDetectorRef);
|
|
4880
|
+
destroyRef = inject(DestroyRef);
|
|
4881
|
+
collapseComponent = inject(CollapseComponent, { host: true });
|
|
4882
|
+
/**
|
|
4883
|
+
* Define se o painel está ativo/expandido
|
|
4884
|
+
*/
|
|
4885
|
+
active = false;
|
|
4886
|
+
/**
|
|
4887
|
+
* Define se o painel está desabilitado
|
|
4888
|
+
* @deprecated Use collapsible='disabled' ao invés
|
|
4889
|
+
*/
|
|
4890
|
+
disabled = false;
|
|
4891
|
+
/**
|
|
4892
|
+
* Define se a seta de expansão será exibida
|
|
4893
|
+
*/
|
|
4894
|
+
showArrow = true;
|
|
4895
|
+
/**
|
|
4896
|
+
* Conteúdo extra no cabeçalho (texto ou template)
|
|
4897
|
+
*/
|
|
4898
|
+
extra;
|
|
4899
|
+
/**
|
|
4900
|
+
* Template para conteúdo extra
|
|
4901
|
+
*/
|
|
4902
|
+
extraTemplate;
|
|
4903
|
+
/**
|
|
4904
|
+
* Título do painel (texto ou template)
|
|
4905
|
+
*/
|
|
4906
|
+
header;
|
|
4907
|
+
/**
|
|
4908
|
+
* Template para o título
|
|
4909
|
+
*/
|
|
4910
|
+
headerTemplate;
|
|
4911
|
+
/**
|
|
4912
|
+
* Template customizado para o ícone de expansão
|
|
4913
|
+
*/
|
|
4914
|
+
expandedIconTemplate;
|
|
4915
|
+
/**
|
|
4916
|
+
* Define o comportamento de clique do painel
|
|
4917
|
+
*/
|
|
4918
|
+
collapsible;
|
|
4919
|
+
/**
|
|
4920
|
+
* Evento emitido quando o estado ativo muda
|
|
4921
|
+
*/
|
|
4922
|
+
activeChange = new EventEmitter();
|
|
4923
|
+
headerElement;
|
|
4924
|
+
iconElement;
|
|
4925
|
+
constructor() {
|
|
4926
|
+
// Quando o componente for destruído, remove da lista do collapse pai
|
|
4927
|
+
this.destroyRef.onDestroy(() => {
|
|
4928
|
+
this.collapseComponent.removePanel(this);
|
|
4929
|
+
});
|
|
4930
|
+
}
|
|
4931
|
+
ngOnInit() {
|
|
4932
|
+
// Adiciona este painel à lista do collapse pai
|
|
4933
|
+
this.collapseComponent.addPanel(this);
|
|
4934
|
+
}
|
|
4935
|
+
ngAfterViewInit() {
|
|
4936
|
+
// Define qual elemento será clicável baseado no modo collapsible
|
|
4937
|
+
let clickElement = this.headerElement.nativeElement;
|
|
4938
|
+
if (this.showArrow && this.collapsible === 'icon' && this.iconElement) {
|
|
4939
|
+
clickElement = this.iconElement.nativeElement;
|
|
4940
|
+
}
|
|
4941
|
+
// Configura o listener de clique
|
|
4942
|
+
fromEvent(clickElement, 'click')
|
|
4943
|
+
.pipe(filter(() => !this.disabled && this.collapsible !== 'disabled'), takeUntilDestroyed(this.destroyRef))
|
|
4944
|
+
.subscribe(() => {
|
|
4945
|
+
this.collapseComponent.handlePanelClick(this);
|
|
4946
|
+
this.cdr.markForCheck();
|
|
4947
|
+
});
|
|
4948
|
+
}
|
|
4949
|
+
/**
|
|
4950
|
+
* Marca o componente para verificação de mudanças
|
|
4951
|
+
*/
|
|
4952
|
+
markForCheck() {
|
|
4953
|
+
this.cdr.markForCheck();
|
|
4954
|
+
}
|
|
4955
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapsePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4956
|
+
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: `
|
|
4957
|
+
<div
|
|
4958
|
+
#headerElement
|
|
4959
|
+
role="button"
|
|
4960
|
+
[attr.aria-expanded]="active"
|
|
4961
|
+
class="s4y-collapse-header"
|
|
4962
|
+
[class.s4y-collapse-icon-collapsible-only]="collapsible === 'icon'"
|
|
4963
|
+
[class.s4y-collapse-header-collapsible-only]="collapsible === 'header'"
|
|
4964
|
+
>
|
|
4965
|
+
@if (showArrow) {
|
|
4966
|
+
<div #iconElement role="button" class="s4y-collapse-expand-icon">
|
|
4967
|
+
<ng-container
|
|
4968
|
+
*ngTemplateOutlet="
|
|
4969
|
+
expandedIconTemplate || defaultIcon;
|
|
4970
|
+
context: { $implicit: active }
|
|
4971
|
+
"
|
|
4972
|
+
>
|
|
4973
|
+
</ng-container>
|
|
4974
|
+
<ng-template #defaultIcon>
|
|
4975
|
+
<svg
|
|
4976
|
+
class="s4y-collapse-arrow"
|
|
4977
|
+
[class.s4y-collapse-arrow-active]="active"
|
|
4978
|
+
width="16"
|
|
4979
|
+
height="16"
|
|
4980
|
+
viewBox="0 0 16 16"
|
|
4981
|
+
fill="currentColor"
|
|
4982
|
+
>
|
|
4983
|
+
<path
|
|
4984
|
+
d="M6 4l4 4-4 4"
|
|
4985
|
+
stroke="currentColor"
|
|
4986
|
+
stroke-width="2"
|
|
4987
|
+
fill="none"
|
|
4988
|
+
stroke-linecap="round"
|
|
4989
|
+
stroke-linejoin="round"
|
|
4990
|
+
/>
|
|
4991
|
+
</svg>
|
|
4992
|
+
</ng-template>
|
|
4993
|
+
</div>
|
|
4994
|
+
}
|
|
4995
|
+
|
|
4996
|
+
<span class="s4y-collapse-header-text">
|
|
4997
|
+
<ng-container *ngTemplateOutlet="headerTemplate || defaultHeader">
|
|
4998
|
+
</ng-container>
|
|
4999
|
+
<ng-template #defaultHeader>{{ header }}</ng-template>
|
|
5000
|
+
</span>
|
|
5001
|
+
|
|
5002
|
+
@if (extra || extraTemplate) {
|
|
5003
|
+
<div class="s4y-collapse-extra">
|
|
5004
|
+
<ng-container *ngTemplateOutlet="extraTemplate || defaultExtra">
|
|
5005
|
+
</ng-container>
|
|
5006
|
+
<ng-template #defaultExtra>{{ extra }}</ng-template>
|
|
5007
|
+
</div>
|
|
5008
|
+
}
|
|
5009
|
+
</div>
|
|
5010
|
+
|
|
5011
|
+
<div
|
|
5012
|
+
class="s4y-collapse-content"
|
|
5013
|
+
[class.s4y-collapse-content-active]="active"
|
|
5014
|
+
[@collapseMotion]="active ? 'expanded' : 'collapsed'"
|
|
5015
|
+
>
|
|
5016
|
+
<div class="s4y-collapse-content-box">
|
|
5017
|
+
<ng-content></ng-content>
|
|
5018
|
+
</div>
|
|
5019
|
+
</div>
|
|
5020
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
5021
|
+
trigger('collapseMotion', [
|
|
5022
|
+
state('expanded', style({
|
|
5023
|
+
height: '*',
|
|
5024
|
+
opacity: 1,
|
|
5025
|
+
})),
|
|
5026
|
+
state('collapsed', style({
|
|
5027
|
+
height: 0,
|
|
5028
|
+
opacity: 0,
|
|
5029
|
+
overflow: 'hidden',
|
|
5030
|
+
})),
|
|
5031
|
+
transition('expanded <=> collapsed', [
|
|
5032
|
+
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
|
|
5033
|
+
]),
|
|
5034
|
+
]),
|
|
5035
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5036
|
+
}
|
|
5037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapsePanelComponent, decorators: [{
|
|
5038
|
+
type: Component,
|
|
5039
|
+
args: [{
|
|
5040
|
+
selector: 's4y-collapse-panel',
|
|
5041
|
+
standalone: true,
|
|
5042
|
+
imports: [CommonModule],
|
|
5043
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5044
|
+
encapsulation: ViewEncapsulation.None,
|
|
5045
|
+
animations: [
|
|
5046
|
+
trigger('collapseMotion', [
|
|
5047
|
+
state('expanded', style({
|
|
5048
|
+
height: '*',
|
|
5049
|
+
opacity: 1,
|
|
5050
|
+
})),
|
|
5051
|
+
state('collapsed', style({
|
|
5052
|
+
height: 0,
|
|
5053
|
+
opacity: 0,
|
|
5054
|
+
overflow: 'hidden',
|
|
5055
|
+
})),
|
|
5056
|
+
transition('expanded <=> collapsed', [
|
|
5057
|
+
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
|
|
5058
|
+
]),
|
|
5059
|
+
]),
|
|
5060
|
+
],
|
|
5061
|
+
template: `
|
|
5062
|
+
<div
|
|
5063
|
+
#headerElement
|
|
5064
|
+
role="button"
|
|
5065
|
+
[attr.aria-expanded]="active"
|
|
5066
|
+
class="s4y-collapse-header"
|
|
5067
|
+
[class.s4y-collapse-icon-collapsible-only]="collapsible === 'icon'"
|
|
5068
|
+
[class.s4y-collapse-header-collapsible-only]="collapsible === 'header'"
|
|
5069
|
+
>
|
|
5070
|
+
@if (showArrow) {
|
|
5071
|
+
<div #iconElement role="button" class="s4y-collapse-expand-icon">
|
|
5072
|
+
<ng-container
|
|
5073
|
+
*ngTemplateOutlet="
|
|
5074
|
+
expandedIconTemplate || defaultIcon;
|
|
5075
|
+
context: { $implicit: active }
|
|
5076
|
+
"
|
|
5077
|
+
>
|
|
5078
|
+
</ng-container>
|
|
5079
|
+
<ng-template #defaultIcon>
|
|
5080
|
+
<svg
|
|
5081
|
+
class="s4y-collapse-arrow"
|
|
5082
|
+
[class.s4y-collapse-arrow-active]="active"
|
|
5083
|
+
width="16"
|
|
5084
|
+
height="16"
|
|
5085
|
+
viewBox="0 0 16 16"
|
|
5086
|
+
fill="currentColor"
|
|
5087
|
+
>
|
|
5088
|
+
<path
|
|
5089
|
+
d="M6 4l4 4-4 4"
|
|
5090
|
+
stroke="currentColor"
|
|
5091
|
+
stroke-width="2"
|
|
5092
|
+
fill="none"
|
|
5093
|
+
stroke-linecap="round"
|
|
5094
|
+
stroke-linejoin="round"
|
|
5095
|
+
/>
|
|
5096
|
+
</svg>
|
|
5097
|
+
</ng-template>
|
|
5098
|
+
</div>
|
|
5099
|
+
}
|
|
5100
|
+
|
|
5101
|
+
<span class="s4y-collapse-header-text">
|
|
5102
|
+
<ng-container *ngTemplateOutlet="headerTemplate || defaultHeader">
|
|
5103
|
+
</ng-container>
|
|
5104
|
+
<ng-template #defaultHeader>{{ header }}</ng-template>
|
|
5105
|
+
</span>
|
|
5106
|
+
|
|
5107
|
+
@if (extra || extraTemplate) {
|
|
5108
|
+
<div class="s4y-collapse-extra">
|
|
5109
|
+
<ng-container *ngTemplateOutlet="extraTemplate || defaultExtra">
|
|
5110
|
+
</ng-container>
|
|
5111
|
+
<ng-template #defaultExtra>{{ extra }}</ng-template>
|
|
5112
|
+
</div>
|
|
5113
|
+
}
|
|
5114
|
+
</div>
|
|
5115
|
+
|
|
5116
|
+
<div
|
|
5117
|
+
class="s4y-collapse-content"
|
|
5118
|
+
[class.s4y-collapse-content-active]="active"
|
|
5119
|
+
[@collapseMotion]="active ? 'expanded' : 'collapsed'"
|
|
5120
|
+
>
|
|
5121
|
+
<div class="s4y-collapse-content-box">
|
|
5122
|
+
<ng-content></ng-content>
|
|
5123
|
+
</div>
|
|
5124
|
+
</div>
|
|
5125
|
+
`,
|
|
5126
|
+
host: {
|
|
5127
|
+
class: 's4y-collapse-item',
|
|
5128
|
+
'[class.s4y-collapse-no-arrow]': '!showArrow',
|
|
5129
|
+
'[class.s4y-collapse-item-active]': 'active',
|
|
5130
|
+
'[class.s4y-collapse-item-disabled]': 'disabled || collapsible === "disabled"',
|
|
5131
|
+
},
|
|
5132
|
+
}]
|
|
5133
|
+
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
5134
|
+
type: Input,
|
|
5135
|
+
args: [{ transform: booleanAttribute }]
|
|
5136
|
+
}], disabled: [{
|
|
5137
|
+
type: Input,
|
|
5138
|
+
args: [{ transform: booleanAttribute }]
|
|
5139
|
+
}], showArrow: [{
|
|
5140
|
+
type: Input,
|
|
5141
|
+
args: [{ transform: booleanAttribute }]
|
|
5142
|
+
}], extra: [{
|
|
5143
|
+
type: Input
|
|
5144
|
+
}], extraTemplate: [{
|
|
5145
|
+
type: Input
|
|
5146
|
+
}], header: [{
|
|
5147
|
+
type: Input
|
|
5148
|
+
}], headerTemplate: [{
|
|
5149
|
+
type: Input
|
|
5150
|
+
}], expandedIconTemplate: [{
|
|
5151
|
+
type: Input
|
|
5152
|
+
}], collapsible: [{
|
|
5153
|
+
type: Input
|
|
5154
|
+
}], activeChange: [{
|
|
5155
|
+
type: Output
|
|
5156
|
+
}], headerElement: [{
|
|
5157
|
+
type: ViewChild,
|
|
5158
|
+
args: ['headerElement']
|
|
5159
|
+
}], iconElement: [{
|
|
5160
|
+
type: ViewChild,
|
|
5161
|
+
args: ['iconElement']
|
|
5162
|
+
}] } });
|
|
5163
|
+
|
|
5164
|
+
/**
|
|
5165
|
+
* Módulo de Collapse
|
|
5166
|
+
*
|
|
5167
|
+
* Componente para criar painéis expansíveis/retráteis.
|
|
5168
|
+
*
|
|
5169
|
+
* @example
|
|
5170
|
+
* ```html
|
|
5171
|
+
* <s4y-collapse [accordion]="true" [bordered]="true">
|
|
5172
|
+
* <s4y-collapse-panel header="Painel 1" [active]="true">
|
|
5173
|
+
* Conteúdo do painel 1
|
|
5174
|
+
* </s4y-collapse-panel>
|
|
5175
|
+
* <s4y-collapse-panel header="Painel 2">
|
|
5176
|
+
* Conteúdo do painel 2
|
|
5177
|
+
* </s4y-collapse-panel>
|
|
5178
|
+
* </s4y-collapse>
|
|
5179
|
+
* ```
|
|
5180
|
+
*/
|
|
5181
|
+
class CollapseModule {
|
|
5182
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5183
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, imports: [CollapseComponent, CollapsePanelComponent], exports: [CollapseComponent, CollapsePanelComponent] });
|
|
5184
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, imports: [CollapseComponent, CollapsePanelComponent] });
|
|
5185
|
+
}
|
|
5186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapseModule, decorators: [{
|
|
5187
|
+
type: NgModule,
|
|
5188
|
+
args: [{
|
|
5189
|
+
imports: [CollapseComponent, CollapsePanelComponent],
|
|
5190
|
+
exports: [CollapseComponent, CollapsePanelComponent],
|
|
5191
|
+
}]
|
|
5192
|
+
}] });
|
|
5193
|
+
|
|
5194
|
+
class InformationBannerComponent {
|
|
5195
|
+
sanitize = inject(DomSanitizer);
|
|
5196
|
+
severity = input('neutral');
|
|
5197
|
+
props = input({
|
|
5198
|
+
closable: false,
|
|
5199
|
+
iconShow: true,
|
|
5200
|
+
iconSize: 22,
|
|
5201
|
+
});
|
|
5202
|
+
headerTpl = contentChild('headerTpl');
|
|
5203
|
+
contentTpl = contentChild('contentTpl');
|
|
5204
|
+
footerTpl = contentChild('footerTpl');
|
|
5205
|
+
onClosable = output();
|
|
5206
|
+
icon = computed(() => {
|
|
5207
|
+
const p = this.props();
|
|
5208
|
+
if (p.iconShow === false)
|
|
5209
|
+
return '';
|
|
5210
|
+
const rawSvg = p.iconUri?.trim()
|
|
5211
|
+
? p.iconUri
|
|
5212
|
+
: this.remixSvgBySeverity[this.severity()];
|
|
5213
|
+
return this.sanitize.bypassSecurityTrustHtml(rawSvg);
|
|
5214
|
+
});
|
|
5215
|
+
bannerClass = computed(() => `s4y-information-banner--${this.severity()}`);
|
|
5216
|
+
// --- Remix Icon SVGs (line) ---
|
|
5217
|
+
remixSvgBySeverity = {
|
|
5218
|
+
neutral: `
|
|
5219
|
+
<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
|
|
5220
|
+
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-9h2v6h-2v-6Zm0-4h2v2h-2V7Z"/>
|
|
5221
|
+
</svg>
|
|
5222
|
+
`,
|
|
5223
|
+
info: `
|
|
5224
|
+
<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
|
|
5225
|
+
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-9h2v6h-2v-6Zm0-4h2v2h-2V7Z"/>
|
|
5226
|
+
</svg>
|
|
5227
|
+
`,
|
|
5228
|
+
success: `
|
|
5229
|
+
<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
|
|
5230
|
+
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm3.535-10.95 1.414 1.414-5.657 5.657L7.05 11.879l1.414-1.414 2.828 2.828 4.243-4.243Z"/>
|
|
5231
|
+
</svg>
|
|
5232
|
+
`,
|
|
5233
|
+
warning: `
|
|
5234
|
+
<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
|
|
5235
|
+
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-5h2v2h-2v-2Zm0-10h2v8h-2V5Z"/>
|
|
5236
|
+
</svg>
|
|
5237
|
+
`,
|
|
5238
|
+
error: `
|
|
5239
|
+
<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true">
|
|
5240
|
+
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm2.828-11.657L13.414 9.757 12 8.343 10.586 9.757 9.172 8.343 7.757 9.757 9.172 11.17 7.757 12.586 9.172 14 10.586 12.586 12 14 13.414 12.586 14.828 14l1.415-1.414-1.415-1.415 1.415-1.414-1.415-1.414Z"/>
|
|
5241
|
+
</svg>
|
|
5242
|
+
`,
|
|
5243
|
+
};
|
|
5244
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InformationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InformationBannerComponent, isStandalone: true, selector: "s4y-information-banner", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClosable: "onClosable" }, queries: [{ propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let model = props();\r\n\r\n<div class=\"s4y-information-banner-container\" [class]=\"bannerClass()\">\r\n <span\r\n class=\"info-banner__icon\"\r\n [style.width.px]=\"model.iconSize ?? 22\"\r\n [style.height.px]=\"model.iconSize ?? 22\"\r\n [innerHTML]=\"icon()\">\r\n </span>\r\n <div class=\"s4y-information-banner__content\">\r\n @let headerTemplate = headerTpl();\r\n\r\n @if (headerTemplate) {\r\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\r\n } @else {\r\n <div class=\"flex align-center justify-between\">\r\n <p class=\"fw-600 small-text-regular\">{{ model.title }}</p>\r\n\r\n @if (model.closable) {\r\n <button type=\"button\" (click)=\"onClosable.emit()\">×</button>\r\n }\r\n </div>\r\n }\r\n\r\n @let contentTemplate = contentTpl();\r\n\r\n @if (contentTemplate) {\r\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\r\n } @else {\r\n <p class=\"small-text-regular gray-7 fw-400\">\r\n {{ model.description }}\r\n </p>\r\n }\r\n\r\n @let footerTemplate = footerTpl();\r\n\r\n @if (footerTemplate) {\r\n <div class=\"s4y-information-banner__footer\">\r\n <ng-template *ngTemplateOutlet=\"footerTemplate\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".s4y-information-banner-container{border-radius:var(--radius);padding:1.6rem;background-color:#f5f7f9;display:flex;gap:1.4rem;border:1px solid transparent}.s4y-information-banner-container .info-banner__icon{display:grid;place-items:center;flex-shrink:0;color:var(--info-banner-icon);line-height:0}.s4y-information-banner-container .info-banner__icon svg{display:block}.s4y-information-banner-container .s4y-information-banner__content{flex-grow:1;display:flex;flex-direction:column;gap:.6rem}.s4y-information-banner-container .s4y-information-banner__content .fw-400{font-weight:400;margin-right:1rem}.s4y-information-banner-container .s4y-information-banner__content .fw-600{font-weight:600}.s4y-information-banner-container .s4y-information-banner__footer{margin-top:1rem}.s4y-information-banner-container.s4y-information-banner--neutral{background:#f5f7f9;border-color:#d7dde3;--info-banner-icon: #6b7280}.s4y-information-banner-container.s4y-information-banner--info{background:#f5f9ff;border-color:#bcd7ff;--info-banner-icon: #2563eb}.s4y-information-banner-container.s4y-information-banner--success{background:#f2fbf5;border-color:#bfe8cd;--info-banner-icon: #16a34a}.s4y-information-banner-container.s4y-information-banner--warning{background:#fff6eb;border-color:#ffd3a6;--info-banner-icon: #f59e0b}.s4y-information-banner-container.s4y-information-banner--error{background:#fff1f1;border-color:#ffb4b4;--info-banner-icon: #dc2626}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5246
|
+
}
|
|
5247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InformationBannerComponent, decorators: [{
|
|
5248
|
+
type: Component,
|
|
5249
|
+
args: [{ selector: 's4y-information-banner', imports: [NgTemplateOutlet], template: "@let model = props();\r\n\r\n<div class=\"s4y-information-banner-container\" [class]=\"bannerClass()\">\r\n <span\r\n class=\"info-banner__icon\"\r\n [style.width.px]=\"model.iconSize ?? 22\"\r\n [style.height.px]=\"model.iconSize ?? 22\"\r\n [innerHTML]=\"icon()\">\r\n </span>\r\n <div class=\"s4y-information-banner__content\">\r\n @let headerTemplate = headerTpl();\r\n\r\n @if (headerTemplate) {\r\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\r\n } @else {\r\n <div class=\"flex align-center justify-between\">\r\n <p class=\"fw-600 small-text-regular\">{{ model.title }}</p>\r\n\r\n @if (model.closable) {\r\n <button type=\"button\" (click)=\"onClosable.emit()\">×</button>\r\n }\r\n </div>\r\n }\r\n\r\n @let contentTemplate = contentTpl();\r\n\r\n @if (contentTemplate) {\r\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\r\n } @else {\r\n <p class=\"small-text-regular gray-7 fw-400\">\r\n {{ model.description }}\r\n </p>\r\n }\r\n\r\n @let footerTemplate = footerTpl();\r\n\r\n @if (footerTemplate) {\r\n <div class=\"s4y-information-banner__footer\">\r\n <ng-template *ngTemplateOutlet=\"footerTemplate\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".s4y-information-banner-container{border-radius:var(--radius);padding:1.6rem;background-color:#f5f7f9;display:flex;gap:1.4rem;border:1px solid transparent}.s4y-information-banner-container .info-banner__icon{display:grid;place-items:center;flex-shrink:0;color:var(--info-banner-icon);line-height:0}.s4y-information-banner-container .info-banner__icon svg{display:block}.s4y-information-banner-container .s4y-information-banner__content{flex-grow:1;display:flex;flex-direction:column;gap:.6rem}.s4y-information-banner-container .s4y-information-banner__content .fw-400{font-weight:400;margin-right:1rem}.s4y-information-banner-container .s4y-information-banner__content .fw-600{font-weight:600}.s4y-information-banner-container .s4y-information-banner__footer{margin-top:1rem}.s4y-information-banner-container.s4y-information-banner--neutral{background:#f5f7f9;border-color:#d7dde3;--info-banner-icon: #6b7280}.s4y-information-banner-container.s4y-information-banner--info{background:#f5f9ff;border-color:#bcd7ff;--info-banner-icon: #2563eb}.s4y-information-banner-container.s4y-information-banner--success{background:#f2fbf5;border-color:#bfe8cd;--info-banner-icon: #16a34a}.s4y-information-banner-container.s4y-information-banner--warning{background:#fff6eb;border-color:#ffd3a6;--info-banner-icon: #f59e0b}.s4y-information-banner-container.s4y-information-banner--error{background:#fff1f1;border-color:#ffb4b4;--info-banner-icon: #dc2626}\n"] }]
|
|
3931
5250
|
}] });
|
|
3932
5251
|
|
|
3933
5252
|
/*
|
|
@@ -3939,5 +5258,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3939
5258
|
* Generated bundle index. Do not edit.
|
|
3940
5259
|
*/
|
|
3941
5260
|
|
|
3942
|
-
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, ImageComponent, ImageService, 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 };
|
|
5261
|
+
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, InformationBannerComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
3943
5262
|
//# sourceMappingURL=s4y-ui.mjs.map
|