s4y-ui 5.2.1 → 5.2.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 +1174 -32
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +4 -3
- package/lib/components/confirmation/confirmation.component.d.ts +23 -0
- package/lib/components/confirmation/confirmation.service.d.ts +34 -0
- package/lib/components/dynamic-dialog/dynamic-dialog.component.d.ts +4 -2
- package/lib/components/dynamic-dialog/dynamic-dialog.ref.d.ts +23 -1
- package/lib/components/dynamic-dialog/dynamic-dialog.service.d.ts +8 -6
- package/lib/components/dynamic-dialog/dynamic-dialog.tokens.d.ts +1 -1
- package/lib/components/dynamic-dialog/dynamic-dialog.util.d.ts +3 -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 +13 -0
- package/lib/components/dynamic-loading-global/index.d.ts +1 -0
- package/lib/components/dynamic-tooltip/dynamic-tooltip.component.d.ts +6 -0
- package/lib/components/dynamic-tooltip/dynamic-tooltip.directive.d.ts +26 -0
- package/lib/components/image/components/image-preview/image-preview.component.d.ts +22 -0
- package/lib/components/image/image.component.d.ts +31 -0
- package/lib/components/image/image.service.d.ts +12 -0
- package/lib/components/image/index.d.ts +2 -0
- package/lib/components/modal/modal.component.d.ts +3 -1
- package/lib/components/rating/rating.component.d.ts +40 -0
- package/lib/components/search-bar/search-bar.component.d.ts +6 -1
- package/lib/components/summary-card/summary-card.component.d.ts +22 -0
- package/lib/components/tag/tag.component.d.ts +28 -0
- package/package.json +1 -1
- package/public-api.d.ts +7 -0
- package/src/assets/icons/fullscreen-exit-line.svg +1 -0
- package/src/assets/icons/fullscreen-line.svg +1 -0
- package/src/assets/icons/refresh-line.svg +1 -0
- package/src/assets/icons/zoom-in-line.svg +1 -0
- package/src/assets/icons/zoom-out-line.svg +1 -0
- package/src/scss/styles.scss +255 -2
- package/src/scss/styles.scss.map +1 -1
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, InjectionToken, Injector } from '@angular/core';
|
|
2
|
+
import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender, SecurityContext } 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,14 +7,15 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|
|
7
7
|
import * as i1$2 from '@angular/router';
|
|
8
8
|
import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
|
|
9
9
|
import { catchError, map, filter } from 'rxjs/operators';
|
|
10
|
-
import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take } from 'rxjs';
|
|
10
|
+
import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take, finalize, catchError as catchError$1, of } from 'rxjs';
|
|
11
11
|
import * as i1$3 from '@angular/cdk/scrolling';
|
|
12
12
|
import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
|
|
13
13
|
import * as i2 from '@angular/forms';
|
|
14
14
|
import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
|
|
15
15
|
import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
|
|
16
16
|
import { Overlay } from '@angular/cdk/overlay';
|
|
17
|
-
import { TemplatePortal,
|
|
17
|
+
import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
18
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
18
19
|
|
|
19
20
|
class DashboardLayoutComponent {
|
|
20
21
|
asideTemplate;
|
|
@@ -131,11 +132,11 @@ class AvatarComponent {
|
|
|
131
132
|
this.imageError.set(true);
|
|
132
133
|
}
|
|
133
134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AvatarComponent, isStandalone: true, selector: "s4y-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n<svg xmlns=\"http://www.w3.org/2000/svg\"
|
|
135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AvatarComponent, isStandalone: true, selector: "s4y-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n <svg\r\n viewBox=\"0 0 128 128\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"display:block\"\r\n >\r\n <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n <path\r\n fill=\"#A9AEB3\"\r\n d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n />\r\n </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
135
136
|
}
|
|
136
137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
137
138
|
type: Component,
|
|
138
|
-
args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n<svg xmlns=\"http://www.w3.org/2000/svg\"
|
|
139
|
+
args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n <svg\r\n viewBox=\"0 0 128 128\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n style=\"display:block\"\r\n >\r\n <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n <path\r\n fill=\"#A9AEB3\"\r\n d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n />\r\n </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"] }]
|
|
139
140
|
}], propDecorators: { hostClasses: [{
|
|
140
141
|
type: HostBinding,
|
|
141
142
|
args: ['class']
|
|
@@ -313,11 +314,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
313
314
|
|
|
314
315
|
class DashboardContainerComponent {
|
|
315
316
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
316
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 4rem 3.2rem;min-height:100%}\n"] });
|
|
317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] });
|
|
317
318
|
}
|
|
318
319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardContainerComponent, decorators: [{
|
|
319
320
|
type: Component,
|
|
320
|
-
args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 4rem 3.2rem;min-height:100%}\n"] }]
|
|
321
|
+
args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] }]
|
|
321
322
|
}] });
|
|
322
323
|
|
|
323
324
|
const COMPONENTS$1 = [
|
|
@@ -369,6 +370,7 @@ class ButtonComponent {
|
|
|
369
370
|
outlined = input(false, { transform: booleanAttribute });
|
|
370
371
|
loading = input(false);
|
|
371
372
|
size = input('medium');
|
|
373
|
+
roundend = input(true);
|
|
372
374
|
variant = input('primary');
|
|
373
375
|
fullWidth = input(false);
|
|
374
376
|
iconAligned = input(true);
|
|
@@ -395,13 +397,13 @@ class ButtonComponent {
|
|
|
395
397
|
}
|
|
396
398
|
});
|
|
397
399
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, 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()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, roundend: { classPropertyName: "roundend", publicName: "roundend", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconAligned: { classPropertyName: "iconAligned", publicName: "iconAligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-default": "true", "class.loading": "loading()", "attr.size": "size()", "attr.variant": "variant()", "style.width": "fullWidth() ? \"100%\" : null", "class.outlined": "outlined()", "class.disabled": "disabled()", "class": "variantClass()", "class.icon-centered": "iconAligned()", "class.rounded": "roundend()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
|
|
399
401
|
@if (loading()) {
|
|
400
402
|
<div class="loader"></div>
|
|
401
403
|
} @else {
|
|
402
404
|
<ng-content></ng-content>
|
|
403
405
|
}
|
|
404
|
-
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;
|
|
406
|
+
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] });
|
|
405
407
|
}
|
|
406
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
407
409
|
type: Component,
|
|
@@ -421,7 +423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
421
423
|
'[class.disabled]': 'disabled()',
|
|
422
424
|
'[class]': 'variantClass()',
|
|
423
425
|
'[class.icon-centered]': 'iconAligned()',
|
|
424
|
-
|
|
426
|
+
'[class.rounded]': 'roundend()',
|
|
427
|
+
}, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] }]
|
|
425
428
|
}], propDecorators: { isDisabled: [{
|
|
426
429
|
type: HostBinding,
|
|
427
430
|
args: ['disabled']
|
|
@@ -886,11 +889,11 @@ class ToastComponent {
|
|
|
886
889
|
toasts = computed(() => this._toastService.toasts());
|
|
887
890
|
isBottomPosition = computed(() => this.position().startsWith('bottom'));
|
|
888
891
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
889
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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(--
|
|
892
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToastComponent, isStandalone: true, selector: "s4y-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ToastAnimation] });
|
|
890
893
|
}
|
|
891
894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, decorators: [{
|
|
892
895
|
type: Component,
|
|
893
|
-
args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--
|
|
896
|
+
args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n @for (toast of toasts(); track $index; let i = $index) {\r\n <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n <div class=\"s4y-toast-item_content\">\r\n <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <p class=\"s4y-toast-item_message\">\r\n {{ toast.message }}\r\n </p>\r\n </div>\r\n <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n ×\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"] }]
|
|
894
897
|
}], ctorParameters: () => [{ type: ToastService }] });
|
|
895
898
|
|
|
896
899
|
const drawerAnimation = trigger('drawerAnimation', [
|
|
@@ -1394,6 +1397,8 @@ class ModalComponent {
|
|
|
1394
1397
|
withHeader = input(true);
|
|
1395
1398
|
closeOnBackdrop = input(true);
|
|
1396
1399
|
closeOnEsc = input(true);
|
|
1400
|
+
interceptBackdropClick = input(false);
|
|
1401
|
+
onBackdrop = output();
|
|
1397
1402
|
constructor(renderer, document) {
|
|
1398
1403
|
this.renderer = renderer;
|
|
1399
1404
|
this.document = document;
|
|
@@ -1416,9 +1421,13 @@ class ModalComponent {
|
|
|
1416
1421
|
}
|
|
1417
1422
|
ngAfterViewInit() { }
|
|
1418
1423
|
onBackdropClick(evt) {
|
|
1419
|
-
if (!this.closeOnBackdrop)
|
|
1424
|
+
if (!this.closeOnBackdrop())
|
|
1420
1425
|
return;
|
|
1421
1426
|
if (evt.target === evt.currentTarget) {
|
|
1427
|
+
if (this.interceptBackdropClick()) {
|
|
1428
|
+
this.onBackdrop.emit();
|
|
1429
|
+
return;
|
|
1430
|
+
}
|
|
1422
1431
|
this.onClose();
|
|
1423
1432
|
}
|
|
1424
1433
|
}
|
|
@@ -1431,7 +1440,7 @@ class ModalComponent {
|
|
|
1431
1440
|
window.removeEventListener('keydown', this.escListener);
|
|
1432
1441
|
}
|
|
1433
1442
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 } }, outputs: { visible: "visibleChange", requestClose: "requestClose" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @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] });
|
|
1443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, interceptBackdropClick: { classPropertyName: "interceptBackdropClick", publicName: "interceptBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose", onBackdrop: "onBackdrop" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n @modalFadeCombined\r\n cdkScrollable\r\n (click)=\"onBackdropClick($event)\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n cdkScrollable\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [modalFadeCombined] });
|
|
1435
1444
|
}
|
|
1436
1445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1437
1446
|
type: Component,
|
|
@@ -1501,7 +1510,7 @@ class ModalConfirmationComponent {
|
|
|
1501
1510
|
this.modalConfirmationService.close();
|
|
1502
1511
|
}
|
|
1503
1512
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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", "variant", "fullWidth", "iconAligned"] }], animations: [modalFadeCombined] });
|
|
1513
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }], animations: [modalFadeCombined] });
|
|
1505
1514
|
}
|
|
1506
1515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
|
|
1507
1516
|
type: Component,
|
|
@@ -1512,12 +1521,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1512
1521
|
}] } });
|
|
1513
1522
|
|
|
1514
1523
|
class SearchBarComponent {
|
|
1524
|
+
size = input('md');
|
|
1525
|
+
iconPosition = input('left');
|
|
1526
|
+
showIcon = input(true);
|
|
1515
1527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1516
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchBarComponent, isStandalone: true, selector: "s4y-search-bar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\r\n [attr.data-size]=\"size()\"\r\n class=\"s4y-search-bar-container\"\r\n [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n @if (showIcon()) {\r\n <ng-container>\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n <span class=\"s4y-search-bar__icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1517
1529
|
}
|
|
1518
1530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
1519
1531
|
type: Component,
|
|
1520
|
-
args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label
|
|
1532
|
+
args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label\r\n [attr.data-size]=\"size()\"\r\n class=\"s4y-search-bar-container\"\r\n [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n @if (showIcon()) {\r\n <ng-container>\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </ng-container>\r\n }\r\n <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n <span class=\"s4y-search-bar__icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"] }]
|
|
1521
1533
|
}] });
|
|
1522
1534
|
|
|
1523
1535
|
class ToggleComponent {
|
|
@@ -3155,6 +3167,406 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3155
3167
|
}, styles: [":host{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;padding:0 .4rem;min-height:4rem;width:100%;&:hover{text-decoration:underline}}\n"] }]
|
|
3156
3168
|
}] });
|
|
3157
3169
|
|
|
3170
|
+
class ImagePreviewComponent {
|
|
3171
|
+
imgEl = viewChild('imgEl');
|
|
3172
|
+
src = '';
|
|
3173
|
+
name;
|
|
3174
|
+
overlayRef;
|
|
3175
|
+
zoom = signal(1);
|
|
3176
|
+
MIN_ZOOM = 0.5;
|
|
3177
|
+
MAX_ZOOM = 3;
|
|
3178
|
+
ZOOM_STEP = 0.25;
|
|
3179
|
+
fullScreenImage = signal(false);
|
|
3180
|
+
toggleFullscreen() {
|
|
3181
|
+
this.fullScreenImage.update((value) => !value);
|
|
3182
|
+
}
|
|
3183
|
+
zoomOut() {
|
|
3184
|
+
const currentZoom = this.zoom();
|
|
3185
|
+
const newZoom = Math.max(this.MIN_ZOOM, currentZoom - this.ZOOM_STEP);
|
|
3186
|
+
this.zoom.set(newZoom);
|
|
3187
|
+
this.applyZoom();
|
|
3188
|
+
}
|
|
3189
|
+
zoomIn() {
|
|
3190
|
+
const currentZoom = this.zoom();
|
|
3191
|
+
const newZoom = Math.min(this.MAX_ZOOM, currentZoom + this.ZOOM_STEP);
|
|
3192
|
+
this.zoom.set(newZoom);
|
|
3193
|
+
this.applyZoom();
|
|
3194
|
+
}
|
|
3195
|
+
resetZoom() {
|
|
3196
|
+
this.zoom.set(1);
|
|
3197
|
+
this.applyZoom();
|
|
3198
|
+
}
|
|
3199
|
+
applyZoom() {
|
|
3200
|
+
const img = this.imgEl()?.nativeElement;
|
|
3201
|
+
if (img) {
|
|
3202
|
+
img.style.transform = `scale(${this.zoom()})`;
|
|
3203
|
+
}
|
|
3204
|
+
}
|
|
3205
|
+
close() {
|
|
3206
|
+
if (!this.overlayRef)
|
|
3207
|
+
return;
|
|
3208
|
+
this.overlayRef.dispose();
|
|
3209
|
+
}
|
|
3210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ImagePreviewComponent, isStandalone: true, selector: "s4y-image-preview", viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3212
|
+
}
|
|
3213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
3214
|
+
type: Component,
|
|
3215
|
+
args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"] }]
|
|
3216
|
+
}] });
|
|
3217
|
+
|
|
3218
|
+
class ImageService {
|
|
3219
|
+
_overlay = inject(Overlay);
|
|
3220
|
+
_overlayRef;
|
|
3221
|
+
open(fileSrc, fileName) {
|
|
3222
|
+
const portal = this.createPortal();
|
|
3223
|
+
this._overlayRef = this.createOverlay();
|
|
3224
|
+
const componentRef = this._overlayRef.attach(portal);
|
|
3225
|
+
componentRef.instance.src = fileSrc;
|
|
3226
|
+
componentRef.instance.name = fileName;
|
|
3227
|
+
componentRef.instance.overlayRef = this._overlayRef;
|
|
3228
|
+
let sub = this._overlayRef.backdropClick().subscribe((_) => {
|
|
3229
|
+
sub.unsubscribe();
|
|
3230
|
+
this.close();
|
|
3231
|
+
});
|
|
3232
|
+
let sub2 = this._overlayRef
|
|
3233
|
+
.keydownEvents()
|
|
3234
|
+
.pipe(filter$1((key) => key.code === 'Escape'))
|
|
3235
|
+
.subscribe((_) => {
|
|
3236
|
+
sub2.unsubscribe();
|
|
3237
|
+
this.close();
|
|
3238
|
+
});
|
|
3239
|
+
return this._overlayRef;
|
|
3240
|
+
}
|
|
3241
|
+
close() {
|
|
3242
|
+
this._overlayRef.dispose();
|
|
3243
|
+
}
|
|
3244
|
+
createOverlay() {
|
|
3245
|
+
const overlay = this._overlay.create({
|
|
3246
|
+
hasBackdrop: true,
|
|
3247
|
+
backdropClass: ['s4y-overlay-bg'],
|
|
3248
|
+
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
3249
|
+
panelClass: ['s4y-preview-pane'],
|
|
3250
|
+
disposeOnNavigation: true,
|
|
3251
|
+
});
|
|
3252
|
+
overlay.backdropClick().subscribe(() => overlay.dispose());
|
|
3253
|
+
return overlay;
|
|
3254
|
+
}
|
|
3255
|
+
createPortal() {
|
|
3256
|
+
return new ComponentPortal(ImagePreviewComponent);
|
|
3257
|
+
}
|
|
3258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3259
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageService, providedIn: 'root' });
|
|
3260
|
+
}
|
|
3261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageService, decorators: [{
|
|
3262
|
+
type: Injectable,
|
|
3263
|
+
args: [{
|
|
3264
|
+
providedIn: 'root',
|
|
3265
|
+
}]
|
|
3266
|
+
}] });
|
|
3267
|
+
|
|
3268
|
+
class ImageComponent {
|
|
3269
|
+
imageService = inject(ImageService);
|
|
3270
|
+
elRef = inject(ElementRef);
|
|
3271
|
+
renderer = inject(Renderer2);
|
|
3272
|
+
destroy = inject(DestroyRef);
|
|
3273
|
+
constructor() { }
|
|
3274
|
+
src = input('', {
|
|
3275
|
+
alias: 's4ySrc',
|
|
3276
|
+
});
|
|
3277
|
+
innerTpl = input();
|
|
3278
|
+
fileName = input();
|
|
3279
|
+
disablePreview = input(false);
|
|
3280
|
+
withOverlay = input(false);
|
|
3281
|
+
wrapper;
|
|
3282
|
+
overlayEl;
|
|
3283
|
+
ngOnInit() {
|
|
3284
|
+
this.configureWrapperElement();
|
|
3285
|
+
this.configureOverlay();
|
|
3286
|
+
this.configureEyeSvg();
|
|
3287
|
+
this.configureImageSrc();
|
|
3288
|
+
}
|
|
3289
|
+
ngAfterViewInit() {
|
|
3290
|
+
this.onShowOverlay();
|
|
3291
|
+
}
|
|
3292
|
+
configureWrapperElement() {
|
|
3293
|
+
const img = this.ImageEl;
|
|
3294
|
+
if (!img)
|
|
3295
|
+
return;
|
|
3296
|
+
const parent = img.parentNode;
|
|
3297
|
+
this.wrapper = this.createElement('span');
|
|
3298
|
+
this.addClass(this.wrapper, 's4y-img-wrapper');
|
|
3299
|
+
this.renderer.setStyle(this.wrapper, 'position', 'relative');
|
|
3300
|
+
this.renderer.setStyle(this.wrapper, 'display', 'inline-block');
|
|
3301
|
+
this.renderer.insertBefore(parent, this.wrapper, img);
|
|
3302
|
+
this.renderer.removeChild(parent, img);
|
|
3303
|
+
this.renderer.appendChild(this.wrapper, img);
|
|
3304
|
+
const click$ = fromEvent(this.wrapper, 'click');
|
|
3305
|
+
click$.pipe(takeUntilDestroyed(this.destroy)).subscribe(() => {
|
|
3306
|
+
this.showPreview();
|
|
3307
|
+
});
|
|
3308
|
+
}
|
|
3309
|
+
configureOverlay() {
|
|
3310
|
+
if (this.withOverlay()) {
|
|
3311
|
+
this.overlayEl = this.createElement('div');
|
|
3312
|
+
this.renderer.addClass(this.overlayEl, 's4y-img-overlay');
|
|
3313
|
+
this.renderer.appendChild(this.wrapper, this.overlayEl);
|
|
3314
|
+
}
|
|
3315
|
+
}
|
|
3316
|
+
configureEyeSvg() {
|
|
3317
|
+
const overlay = this.overlayEl;
|
|
3318
|
+
if (!overlay)
|
|
3319
|
+
return;
|
|
3320
|
+
const svgContainer = this.createElement('span');
|
|
3321
|
+
svgContainer.innerHTML = this.eyeSvg;
|
|
3322
|
+
this.renderer.appendChild(overlay, svgContainer);
|
|
3323
|
+
}
|
|
3324
|
+
configureImageSrc() {
|
|
3325
|
+
const imgEl = this.ImageEl;
|
|
3326
|
+
const src = this.src();
|
|
3327
|
+
if (!imgEl || !src)
|
|
3328
|
+
return;
|
|
3329
|
+
this.renderer.setAttribute(imgEl, 'src', src);
|
|
3330
|
+
}
|
|
3331
|
+
onShowOverlay() {
|
|
3332
|
+
const wrapper = this.wrapper;
|
|
3333
|
+
const overlay = this.overlayEl;
|
|
3334
|
+
if (!wrapper || !this.withOverlay() || !overlay)
|
|
3335
|
+
return;
|
|
3336
|
+
const wrapperMouseOver$ = fromEvent(this.wrapper, 'mouseover');
|
|
3337
|
+
const wrapperMouseLeave$ = fromEvent(this.wrapper, 'mouseleave');
|
|
3338
|
+
wrapperMouseOver$.pipe(takeUntilDestroyed(this.destroy)).subscribe((x) => {
|
|
3339
|
+
this.addClass(overlay, 'active');
|
|
3340
|
+
});
|
|
3341
|
+
wrapperMouseLeave$.pipe(takeUntilDestroyed(this.destroy)).subscribe((x) => {
|
|
3342
|
+
this.removeClass(overlay, 'active');
|
|
3343
|
+
});
|
|
3344
|
+
}
|
|
3345
|
+
createElement(element) {
|
|
3346
|
+
return this.renderer.createElement(element);
|
|
3347
|
+
}
|
|
3348
|
+
addClass(el, className) {
|
|
3349
|
+
return this.renderer.addClass(el, className);
|
|
3350
|
+
}
|
|
3351
|
+
removeClass(el, className) {
|
|
3352
|
+
return this.renderer.removeClass(el, className);
|
|
3353
|
+
}
|
|
3354
|
+
showPreview() {
|
|
3355
|
+
this.imageService.open(this.src(), this.fileName());
|
|
3356
|
+
}
|
|
3357
|
+
get eyeSvg() {
|
|
3358
|
+
return `<svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path></svg>`;
|
|
3359
|
+
}
|
|
3360
|
+
get ImageEl() {
|
|
3361
|
+
return this.elRef.nativeElement;
|
|
3362
|
+
}
|
|
3363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ImageComponent, isStandalone: true, selector: "img[s4yImage]", inputs: { src: { classPropertyName: "src", publicName: "s4ySrc", isSignal: true, isRequired: false, transformFunction: null }, innerTpl: { classPropertyName: "innerTpl", publicName: "innerTpl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, withOverlay: { classPropertyName: "withOverlay", publicName: "withOverlay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
3365
|
+
}
|
|
3366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3367
|
+
type: Component,
|
|
3368
|
+
args: [{ selector: 'img[s4yImage]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
3369
|
+
}], ctorParameters: () => [] });
|
|
3370
|
+
|
|
3371
|
+
class DynamicTooltipComponent {
|
|
3372
|
+
text = "";
|
|
3373
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DynamicTooltipComponent, isStandalone: true, selector: "s4y-dynamic-tooltip", ngImport: i0, template: "<div class=\"s4y-tooltip-container\">\r\n <p>\r\n {{ text }}\r\n </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] });
|
|
3375
|
+
}
|
|
3376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipComponent, decorators: [{
|
|
3377
|
+
type: Component,
|
|
3378
|
+
args: [{ selector: 's4y-dynamic-tooltip', imports: [], template: "<div class=\"s4y-tooltip-container\">\r\n <p>\r\n {{ text }}\r\n </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] }]
|
|
3379
|
+
}] });
|
|
3380
|
+
|
|
3381
|
+
class DynamicTooltipDirective {
|
|
3382
|
+
overlay = inject(Overlay);
|
|
3383
|
+
elRef = inject((ElementRef));
|
|
3384
|
+
overlayRef;
|
|
3385
|
+
tooltipContent = input.required({
|
|
3386
|
+
alias: 's4yDynamicTooltip',
|
|
3387
|
+
});
|
|
3388
|
+
placement = input('top');
|
|
3389
|
+
tooltipPortal = new ComponentPortal(DynamicTooltipComponent);
|
|
3390
|
+
onOverlayEnter;
|
|
3391
|
+
onOverlayLeave;
|
|
3392
|
+
constructor() {
|
|
3393
|
+
console.log(this.host);
|
|
3394
|
+
}
|
|
3395
|
+
get host() {
|
|
3396
|
+
return this.elRef.nativeElement;
|
|
3397
|
+
}
|
|
3398
|
+
shown() {
|
|
3399
|
+
this.overlayRef?.dispose();
|
|
3400
|
+
this.overlayRef = this.createOverlay();
|
|
3401
|
+
const compRef = this.overlayRef.attach(this.tooltipPortal);
|
|
3402
|
+
compRef.instance.text = this.tooltipContent();
|
|
3403
|
+
this.overlayRef.updatePosition();
|
|
3404
|
+
this.bindOverlayHoverGuards();
|
|
3405
|
+
}
|
|
3406
|
+
hide(e) {
|
|
3407
|
+
// Se o mouse saiu do host indo PARA o overlay, não fecha
|
|
3408
|
+
const next = e.relatedTarget;
|
|
3409
|
+
if (next && this.overlayRef?.overlayElement.contains(next))
|
|
3410
|
+
return;
|
|
3411
|
+
this.dispose();
|
|
3412
|
+
}
|
|
3413
|
+
bindOverlayHoverGuards() {
|
|
3414
|
+
if (!this.overlayRef)
|
|
3415
|
+
return;
|
|
3416
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
3417
|
+
// remove listeners antigos (se existirem)
|
|
3418
|
+
this.unbindOverlayHoverGuards();
|
|
3419
|
+
this.onOverlayEnter = () => {
|
|
3420
|
+
// não faz nada, apenas impede fechamento “por acidente”
|
|
3421
|
+
};
|
|
3422
|
+
this.onOverlayLeave = (e) => {
|
|
3423
|
+
// Se saiu do overlay indo PARA o host, não fecha
|
|
3424
|
+
const next = e.relatedTarget;
|
|
3425
|
+
if (next && this.elRef.nativeElement.contains(next))
|
|
3426
|
+
return;
|
|
3427
|
+
this.dispose();
|
|
3428
|
+
};
|
|
3429
|
+
overlayEl.addEventListener('mouseenter', this.onOverlayEnter);
|
|
3430
|
+
overlayEl.addEventListener('mouseleave', this.onOverlayLeave);
|
|
3431
|
+
}
|
|
3432
|
+
unbindOverlayHoverGuards() {
|
|
3433
|
+
if (!this.overlayRef)
|
|
3434
|
+
return;
|
|
3435
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
3436
|
+
if (this.onOverlayEnter)
|
|
3437
|
+
overlayEl.removeEventListener('mouseenter', this.onOverlayEnter);
|
|
3438
|
+
if (this.onOverlayLeave)
|
|
3439
|
+
overlayEl.removeEventListener('mouseleave', this.onOverlayLeave);
|
|
3440
|
+
this.onOverlayEnter = undefined;
|
|
3441
|
+
this.onOverlayLeave = undefined;
|
|
3442
|
+
}
|
|
3443
|
+
createOverlay() {
|
|
3444
|
+
const positionStrategy = this.overlay
|
|
3445
|
+
.position()
|
|
3446
|
+
.flexibleConnectedTo(this.elRef)
|
|
3447
|
+
.withFlexibleDimensions(false)
|
|
3448
|
+
.withPush(true)
|
|
3449
|
+
.withViewportMargin(8)
|
|
3450
|
+
.withPositions(this.getPositionsByPlacement(this.placement()));
|
|
3451
|
+
return this.overlay.create({
|
|
3452
|
+
hasBackdrop: false,
|
|
3453
|
+
disposeOnNavigation: true,
|
|
3454
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
3455
|
+
positionStrategy,
|
|
3456
|
+
panelClass: 's4y-tooltip-panel',
|
|
3457
|
+
});
|
|
3458
|
+
}
|
|
3459
|
+
getPositionsByPlacement(p) {
|
|
3460
|
+
const gap = 8;
|
|
3461
|
+
const map = {
|
|
3462
|
+
top: [
|
|
3463
|
+
{
|
|
3464
|
+
originX: 'center',
|
|
3465
|
+
originY: 'top',
|
|
3466
|
+
overlayX: 'center',
|
|
3467
|
+
overlayY: 'bottom',
|
|
3468
|
+
offsetY: -gap,
|
|
3469
|
+
},
|
|
3470
|
+
{
|
|
3471
|
+
originX: 'center',
|
|
3472
|
+
originY: 'bottom',
|
|
3473
|
+
overlayX: 'center',
|
|
3474
|
+
overlayY: 'top',
|
|
3475
|
+
offsetY: gap,
|
|
3476
|
+
},
|
|
3477
|
+
],
|
|
3478
|
+
bottom: [
|
|
3479
|
+
{
|
|
3480
|
+
originX: 'center',
|
|
3481
|
+
originY: 'bottom',
|
|
3482
|
+
overlayX: 'center',
|
|
3483
|
+
overlayY: 'top',
|
|
3484
|
+
offsetY: gap,
|
|
3485
|
+
},
|
|
3486
|
+
{
|
|
3487
|
+
originX: 'center',
|
|
3488
|
+
originY: 'top',
|
|
3489
|
+
overlayX: 'center',
|
|
3490
|
+
overlayY: 'bottom',
|
|
3491
|
+
offsetY: -gap,
|
|
3492
|
+
},
|
|
3493
|
+
],
|
|
3494
|
+
left: [
|
|
3495
|
+
{
|
|
3496
|
+
originX: 'start',
|
|
3497
|
+
originY: 'center',
|
|
3498
|
+
overlayX: 'end',
|
|
3499
|
+
overlayY: 'center',
|
|
3500
|
+
offsetX: -gap,
|
|
3501
|
+
},
|
|
3502
|
+
{
|
|
3503
|
+
originX: 'end',
|
|
3504
|
+
originY: 'center',
|
|
3505
|
+
overlayX: 'start',
|
|
3506
|
+
overlayY: 'center',
|
|
3507
|
+
offsetX: gap,
|
|
3508
|
+
},
|
|
3509
|
+
],
|
|
3510
|
+
right: [
|
|
3511
|
+
{
|
|
3512
|
+
originX: 'end',
|
|
3513
|
+
originY: 'center',
|
|
3514
|
+
overlayX: 'start',
|
|
3515
|
+
overlayY: 'center',
|
|
3516
|
+
offsetX: gap,
|
|
3517
|
+
},
|
|
3518
|
+
{
|
|
3519
|
+
originX: 'start',
|
|
3520
|
+
originY: 'center',
|
|
3521
|
+
overlayX: 'end',
|
|
3522
|
+
overlayY: 'center',
|
|
3523
|
+
offsetX: -gap,
|
|
3524
|
+
},
|
|
3525
|
+
],
|
|
3526
|
+
};
|
|
3527
|
+
return map[p];
|
|
3528
|
+
}
|
|
3529
|
+
dispose() {
|
|
3530
|
+
this.unbindOverlayHoverGuards();
|
|
3531
|
+
this.overlayRef?.dispose();
|
|
3532
|
+
this.overlayRef = undefined;
|
|
3533
|
+
}
|
|
3534
|
+
ngOnDestroy() {
|
|
3535
|
+
this.dispose();
|
|
3536
|
+
}
|
|
3537
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3538
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: DynamicTooltipDirective, isStandalone: true, selector: "[s4yDynamicTooltip]", inputs: { tooltipContent: { classPropertyName: "tooltipContent", publicName: "s4yDynamicTooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "shown()", "mouseleave": "hide($event)" } }, ngImport: i0 });
|
|
3539
|
+
}
|
|
3540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipDirective, decorators: [{
|
|
3541
|
+
type: Directive,
|
|
3542
|
+
args: [{
|
|
3543
|
+
selector: '[s4yDynamicTooltip]',
|
|
3544
|
+
}]
|
|
3545
|
+
}], ctorParameters: () => [], propDecorators: { shown: [{
|
|
3546
|
+
type: HostListener,
|
|
3547
|
+
args: ['mouseenter']
|
|
3548
|
+
}], hide: [{
|
|
3549
|
+
type: HostListener,
|
|
3550
|
+
args: ['mouseleave', ['$event']]
|
|
3551
|
+
}] } });
|
|
3552
|
+
|
|
3553
|
+
class SummaryCardComponent {
|
|
3554
|
+
props = input({
|
|
3555
|
+
withFooter: false,
|
|
3556
|
+
withIcon: false,
|
|
3557
|
+
withTooltip: false,
|
|
3558
|
+
iconSize: 18,
|
|
3559
|
+
iconBackgroundColor: '#4b5563',
|
|
3560
|
+
});
|
|
3561
|
+
footerTpl = contentChild('footerTpl');
|
|
3562
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SummaryCardComponent, isStandalone: true, selector: "s4y-summary-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n <div class=\"s4y-summary-card-header__content\">\r\n <p class=\"small-text-regular gray-7\">\r\n {{ summaryProps.label }}\r\n </p>\r\n\r\n @if (summaryProps.withTooltip) {\r\n <svg\r\n [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"14\"\r\n height=\"14\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n @if (showIcon) {\r\n <div\r\n class=\"s4y-summary-card-icon\"\r\n [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n >\r\n <s4y-svg\r\n [size]=\"summaryProps.iconSize ?? 18\"\r\n [color]=\"summaryProps.iconColor || '#fff'\"\r\n [src]=\"summaryProps.iconUri\"\r\n ></s4y-svg>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n <p class=\"medium-text-bold gray-9\">\r\n {{ summaryProps.value }}\r\n </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n <div class=\"s4y-summary-card-footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTooltipDirective, selector: "[s4yDynamicTooltip]", inputs: ["s4yDynamicTooltip", "placement"] }] });
|
|
3564
|
+
}
|
|
3565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SummaryCardComponent, decorators: [{
|
|
3566
|
+
type: Component,
|
|
3567
|
+
args: [{ selector: 's4y-summary-card', imports: [SvgComponent, NgTemplateOutlet, DynamicTooltipDirective], template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n <div class=\"s4y-summary-card-header__content\">\r\n <p class=\"small-text-regular gray-7\">\r\n {{ summaryProps.label }}\r\n </p>\r\n\r\n @if (summaryProps.withTooltip) {\r\n <svg\r\n [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"14\"\r\n height=\"14\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n @if (showIcon) {\r\n <div\r\n class=\"s4y-summary-card-icon\"\r\n [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n >\r\n <s4y-svg\r\n [size]=\"summaryProps.iconSize ?? 18\"\r\n [color]=\"summaryProps.iconColor || '#fff'\"\r\n [src]=\"summaryProps.iconUri\"\r\n ></s4y-svg>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n <p class=\"medium-text-bold gray-9\">\r\n {{ summaryProps.value }}\r\n </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n <div class=\"s4y-summary-card-footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"] }]
|
|
3568
|
+
}] });
|
|
3569
|
+
|
|
3158
3570
|
const selectMultiAnim = trigger('selectMultiAnim', [
|
|
3159
3571
|
// entra
|
|
3160
3572
|
transition(':enter', [
|
|
@@ -3351,6 +3763,25 @@ async function toMaybeBooleanPromise(value) {
|
|
|
3351
3763
|
return await firstValueFrom(value);
|
|
3352
3764
|
return value;
|
|
3353
3765
|
}
|
|
3766
|
+
async function toHandlerResult(ret) {
|
|
3767
|
+
if (ret instanceof Promise)
|
|
3768
|
+
return await ret;
|
|
3769
|
+
if (ret instanceof EventEmitter)
|
|
3770
|
+
return await firstValueFrom(ret);
|
|
3771
|
+
if (isObservable(ret))
|
|
3772
|
+
return await firstValueFrom(ret);
|
|
3773
|
+
return ret;
|
|
3774
|
+
}
|
|
3775
|
+
async function allow(canDismiss, reason) {
|
|
3776
|
+
if (!canDismiss)
|
|
3777
|
+
return true;
|
|
3778
|
+
try {
|
|
3779
|
+
return await Promise.resolve(canDismiss(reason));
|
|
3780
|
+
}
|
|
3781
|
+
catch {
|
|
3782
|
+
return false;
|
|
3783
|
+
}
|
|
3784
|
+
}
|
|
3354
3785
|
|
|
3355
3786
|
class DynamicDialogRef {
|
|
3356
3787
|
overlayRef;
|
|
@@ -3363,6 +3794,9 @@ class DynamicDialogRef {
|
|
|
3363
3794
|
_afterClosed = new Subject();
|
|
3364
3795
|
panelEl;
|
|
3365
3796
|
isClosing = false;
|
|
3797
|
+
_container;
|
|
3798
|
+
_opts;
|
|
3799
|
+
_contentComponentRef;
|
|
3366
3800
|
constructor(overlayRef) {
|
|
3367
3801
|
this.overlayRef = overlayRef;
|
|
3368
3802
|
this.afterOpened$ = this._afterOpened.asObservable();
|
|
@@ -3445,6 +3879,72 @@ class DynamicDialogRef {
|
|
|
3445
3879
|
}
|
|
3446
3880
|
this.overlayRef.dispose();
|
|
3447
3881
|
}
|
|
3882
|
+
_attachContentComponent(componentRef) {
|
|
3883
|
+
this._contentComponentRef = componentRef;
|
|
3884
|
+
}
|
|
3885
|
+
getComponent() {
|
|
3886
|
+
return this._contentComponentRef?.instance;
|
|
3887
|
+
}
|
|
3888
|
+
hasComponent() {
|
|
3889
|
+
return !!this._contentComponentRef;
|
|
3890
|
+
}
|
|
3891
|
+
_attachForButtonUpdates(container, opts) {
|
|
3892
|
+
this._container = container;
|
|
3893
|
+
this._opts = opts;
|
|
3894
|
+
// garantir objetos
|
|
3895
|
+
this._opts.okBtnOptions ??= {};
|
|
3896
|
+
this._opts.cancelBtnOptions ??= {};
|
|
3897
|
+
}
|
|
3898
|
+
updateButtons(patch) {
|
|
3899
|
+
if (!this._opts)
|
|
3900
|
+
return;
|
|
3901
|
+
if (patch.ok)
|
|
3902
|
+
Object.assign(this._opts.okBtnOptions, patch.ok);
|
|
3903
|
+
if (patch.cancel)
|
|
3904
|
+
Object.assign(this._opts.cancelBtnOptions, patch.cancel);
|
|
3905
|
+
this._markForCheck();
|
|
3906
|
+
}
|
|
3907
|
+
// OK
|
|
3908
|
+
setOkLoading(state) {
|
|
3909
|
+
this._ensureBtn('ok').loading = state;
|
|
3910
|
+
// se você usa okLoading interno como overlay, mantenha em sincronia:
|
|
3911
|
+
this._container.okLoading = !!state;
|
|
3912
|
+
this._markForCheck();
|
|
3913
|
+
}
|
|
3914
|
+
setOkDisabled(state) {
|
|
3915
|
+
this._ensureBtn('ok').disabled = state;
|
|
3916
|
+
this._markForCheck();
|
|
3917
|
+
}
|
|
3918
|
+
setOkText(text) {
|
|
3919
|
+
this._ensureBtn('ok').text = text;
|
|
3920
|
+
this._markForCheck();
|
|
3921
|
+
}
|
|
3922
|
+
// Cancel
|
|
3923
|
+
setCancelLoading(state) {
|
|
3924
|
+
this._ensureBtn('cancel').loading = state;
|
|
3925
|
+
this._container.cancelLoading = !!state;
|
|
3926
|
+
this._markForCheck();
|
|
3927
|
+
}
|
|
3928
|
+
setCancelDisabled(state) {
|
|
3929
|
+
this._ensureBtn('cancel').disabled = state;
|
|
3930
|
+
this._markForCheck();
|
|
3931
|
+
}
|
|
3932
|
+
setCancelText(text) {
|
|
3933
|
+
this._ensureBtn('cancel').text = text;
|
|
3934
|
+
this._markForCheck();
|
|
3935
|
+
}
|
|
3936
|
+
_ensureBtn(which) {
|
|
3937
|
+
if (!this._opts)
|
|
3938
|
+
throw new Error('Dialog options not attached.');
|
|
3939
|
+
const key = which === 'ok' ? 'okBtnOptions' : 'cancelBtnOptions';
|
|
3940
|
+
this._opts[key] ??= {};
|
|
3941
|
+
return this._opts[key];
|
|
3942
|
+
}
|
|
3943
|
+
_markForCheck() {
|
|
3944
|
+
const cdr = this._container?.cdr;
|
|
3945
|
+
if (cdr?.markForCheck)
|
|
3946
|
+
cdr.markForCheck();
|
|
3947
|
+
}
|
|
3448
3948
|
}
|
|
3449
3949
|
|
|
3450
3950
|
class DynamicDialogComponent {
|
|
@@ -3460,10 +3960,17 @@ class DynamicDialogComponent {
|
|
|
3460
3960
|
footerTemplate;
|
|
3461
3961
|
contentTemplate;
|
|
3462
3962
|
templateContext;
|
|
3963
|
+
portalOutlet;
|
|
3463
3964
|
constructor(ref, dialogOptions) {
|
|
3464
3965
|
this.ref = ref;
|
|
3465
3966
|
this.dialogOptions = dialogOptions;
|
|
3466
3967
|
}
|
|
3968
|
+
ngAfterViewInit() {
|
|
3969
|
+
if (this.portalOutlet?.attachedRef) {
|
|
3970
|
+
console.log();
|
|
3971
|
+
this.ref._attachContentComponent(this.portalOutlet.attachedRef);
|
|
3972
|
+
}
|
|
3973
|
+
}
|
|
3467
3974
|
get data() {
|
|
3468
3975
|
return this.injectedData;
|
|
3469
3976
|
}
|
|
@@ -3472,10 +3979,16 @@ class DynamicDialogComponent {
|
|
|
3472
3979
|
return;
|
|
3473
3980
|
this.okLoading = true;
|
|
3474
3981
|
try {
|
|
3475
|
-
const
|
|
3476
|
-
|
|
3982
|
+
const component = this.ref.getComponent();
|
|
3983
|
+
const out = await toHandlerResult(this.dialogOptions?.onOk?.({
|
|
3984
|
+
data: this.injectedData,
|
|
3985
|
+
ref: this.ref,
|
|
3986
|
+
component,
|
|
3987
|
+
}));
|
|
3988
|
+
if (out === false)
|
|
3477
3989
|
return;
|
|
3478
|
-
|
|
3990
|
+
const result = out === true || typeof out === 'undefined' ? undefined : out;
|
|
3991
|
+
await this.ref.closeAnimated(result, 'ok');
|
|
3479
3992
|
}
|
|
3480
3993
|
finally {
|
|
3481
3994
|
this.okLoading = false;
|
|
@@ -3485,22 +3998,25 @@ class DynamicDialogComponent {
|
|
|
3485
3998
|
async onCancel() {
|
|
3486
3999
|
if (this.cancelLoading)
|
|
3487
4000
|
return;
|
|
3488
|
-
this.cancelLoading = true;
|
|
4001
|
+
// this.cancelLoading = true;
|
|
3489
4002
|
try {
|
|
3490
|
-
const
|
|
4003
|
+
const component = this.ref.getComponent();
|
|
4004
|
+
const out = await toHandlerResult(this.dialogOptions?.onCancel?.({
|
|
3491
4005
|
data: this.injectedData,
|
|
3492
4006
|
ref: this.ref,
|
|
4007
|
+
component,
|
|
3493
4008
|
}));
|
|
3494
|
-
if (
|
|
3495
|
-
return;
|
|
3496
|
-
|
|
4009
|
+
if (out === false)
|
|
4010
|
+
return; // NÃO fecha
|
|
4011
|
+
const result = out === true || typeof out === 'undefined' ? undefined : out;
|
|
4012
|
+
await this.ref.closeAnimated(result, 'cancel');
|
|
3497
4013
|
}
|
|
3498
4014
|
finally {
|
|
3499
4015
|
this.cancelLoading = false;
|
|
3500
4016
|
}
|
|
3501
4017
|
}
|
|
3502
4018
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
3503
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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" }, 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", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
|
|
4019
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: [] });
|
|
3504
4020
|
}
|
|
3505
4021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, decorators: [{
|
|
3506
4022
|
type: Component,
|
|
@@ -3524,12 +4040,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3524
4040
|
type: Input
|
|
3525
4041
|
}], templateContext: [{
|
|
3526
4042
|
type: Input
|
|
4043
|
+
}], portalOutlet: [{
|
|
4044
|
+
type: ViewChild,
|
|
4045
|
+
args: [CdkPortalOutlet, { static: false }]
|
|
3527
4046
|
}] } });
|
|
3528
4047
|
|
|
3529
4048
|
class DynamicDialogService {
|
|
3530
4049
|
overlay = inject(Overlay);
|
|
3531
4050
|
rootInjector = inject(Injector);
|
|
3532
|
-
open(component, opts
|
|
4051
|
+
open(component, opts) {
|
|
4052
|
+
opts = opts ?? {};
|
|
3533
4053
|
const overlayRef = this.overlay.create(this.buildOverlayConfig(opts));
|
|
3534
4054
|
overlayRef.updateSize({
|
|
3535
4055
|
width: opts.width ?? 'auto',
|
|
@@ -3546,19 +4066,26 @@ class DynamicDialogService {
|
|
|
3546
4066
|
classes.forEach((c) => overlayRef.addPanelClass(c));
|
|
3547
4067
|
}
|
|
3548
4068
|
const dialogRef = new DynamicDialogRef(overlayRef);
|
|
4069
|
+
const untilClosed$ = dialogRef.afterClosed$.pipe(take(1));
|
|
3549
4070
|
if (opts.closeOnBackdrop) {
|
|
3550
4071
|
overlayRef
|
|
3551
4072
|
.backdropClick()
|
|
3552
|
-
.pipe(
|
|
3553
|
-
.subscribe(() => {
|
|
4073
|
+
.pipe(takeUntil(untilClosed$))
|
|
4074
|
+
.subscribe(async () => {
|
|
4075
|
+
if (!(await allow(opts.canDismiss, 'backdrop')))
|
|
4076
|
+
return;
|
|
3554
4077
|
dialogRef.closeAnimated(undefined, 'backdrop');
|
|
3555
4078
|
});
|
|
3556
4079
|
}
|
|
3557
4080
|
if (opts.closeOnEsc !== false) {
|
|
3558
4081
|
overlayRef
|
|
3559
4082
|
.keydownEvents()
|
|
3560
|
-
.pipe(filter$1((e) => e.key === 'Escape' || e.key === 'Esc'),
|
|
3561
|
-
.subscribe(() =>
|
|
4083
|
+
.pipe(filter$1((e) => e.key === 'Escape' || e.key === 'Esc'), takeUntil(untilClosed$))
|
|
4084
|
+
.subscribe(async () => {
|
|
4085
|
+
if (!(await allow(opts.canDismiss, 'esc')))
|
|
4086
|
+
return;
|
|
4087
|
+
dialogRef.closeAnimated(undefined, 'esc');
|
|
4088
|
+
});
|
|
3562
4089
|
}
|
|
3563
4090
|
// injeta o ref + dados no componente container
|
|
3564
4091
|
const injector = Injector.create({
|
|
@@ -3572,6 +4099,7 @@ class DynamicDialogService {
|
|
|
3572
4099
|
// anexa o container
|
|
3573
4100
|
const containerPortal = new ComponentPortal(DynamicDialogComponent, null, injector);
|
|
3574
4101
|
const containerRef = overlayRef.attach(containerPortal);
|
|
4102
|
+
dialogRef._attachForButtonUpdates(containerRef.instance, opts);
|
|
3575
4103
|
const templateCtx = {
|
|
3576
4104
|
$implicit: opts.data,
|
|
3577
4105
|
data: opts.data,
|
|
@@ -3620,6 +4148,620 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3620
4148
|
}]
|
|
3621
4149
|
}] });
|
|
3622
4150
|
|
|
4151
|
+
class DynamicLoadingGlobalComponent {
|
|
4152
|
+
message = signal('Carregando dados...');
|
|
4153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DynamicLoadingGlobalComponent, isStandalone: true, selector: "s4y-dynamic-loading-global", ngImport: i0, template: `
|
|
4155
|
+
<div class="s4y-dynamic-loading-container">
|
|
4156
|
+
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4157
|
+
<p>{{ message() }}</p>
|
|
4158
|
+
</div>
|
|
4159
|
+
`, isInline: true, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
4160
|
+
}
|
|
4161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalComponent, decorators: [{
|
|
4162
|
+
type: Component,
|
|
4163
|
+
args: [{ selector: 's4y-dynamic-loading-global', imports: [], template: `
|
|
4164
|
+
<div class="s4y-dynamic-loading-container">
|
|
4165
|
+
<span class="s4y-dynamic-loading-container__loader"></span>
|
|
4166
|
+
<p>{{ message() }}</p>
|
|
4167
|
+
</div>
|
|
4168
|
+
`, encapsulation: ViewEncapsulation.None, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4169
|
+
}] });
|
|
4170
|
+
|
|
4171
|
+
class DynamicLoadingGlobalService {
|
|
4172
|
+
overlay = inject(Overlay);
|
|
4173
|
+
overlays = new Map();
|
|
4174
|
+
constructor() { }
|
|
4175
|
+
showLoading(message) {
|
|
4176
|
+
const overlayRef = this.createOverlay();
|
|
4177
|
+
const portal = this.loadingComponentPortal();
|
|
4178
|
+
const id = crypto.randomUUID();
|
|
4179
|
+
const componentRef = overlayRef.attach(portal);
|
|
4180
|
+
if (message) {
|
|
4181
|
+
componentRef.instance.message.set(message);
|
|
4182
|
+
}
|
|
4183
|
+
this.overlays.set(id, { overlayRef, componentRef });
|
|
4184
|
+
return id;
|
|
4185
|
+
}
|
|
4186
|
+
updateMessage(id, message) {
|
|
4187
|
+
const entry = this.overlays.get(id);
|
|
4188
|
+
if (entry) {
|
|
4189
|
+
entry.componentRef.instance.message.set(message);
|
|
4190
|
+
}
|
|
4191
|
+
}
|
|
4192
|
+
hiddenLoading(id) {
|
|
4193
|
+
if (id) {
|
|
4194
|
+
const entry = this.overlays.get(id);
|
|
4195
|
+
if (entry) {
|
|
4196
|
+
entry.overlayRef.dispose();
|
|
4197
|
+
this.overlays.delete(id);
|
|
4198
|
+
}
|
|
4199
|
+
}
|
|
4200
|
+
else {
|
|
4201
|
+
this.overlays.forEach((entry) => entry.overlayRef.dispose());
|
|
4202
|
+
this.overlays.clear();
|
|
4203
|
+
}
|
|
4204
|
+
}
|
|
4205
|
+
loadingComponentPortal() {
|
|
4206
|
+
return new ComponentPortal(DynamicLoadingGlobalComponent);
|
|
4207
|
+
}
|
|
4208
|
+
createOverlay() {
|
|
4209
|
+
return this.overlay.create({
|
|
4210
|
+
backdropClass: ['s4y-overlay-bg'],
|
|
4211
|
+
panelClass: ['s4y-centered-panel-content'],
|
|
4212
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
4213
|
+
hasBackdrop: true,
|
|
4214
|
+
disposeOnNavigation: true,
|
|
4215
|
+
});
|
|
4216
|
+
}
|
|
4217
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4218
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalService, providedIn: 'root' });
|
|
4219
|
+
}
|
|
4220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalService, decorators: [{
|
|
4221
|
+
type: Injectable,
|
|
4222
|
+
args: [{
|
|
4223
|
+
providedIn: 'root',
|
|
4224
|
+
}]
|
|
4225
|
+
}], ctorParameters: () => [] });
|
|
4226
|
+
|
|
4227
|
+
const SIZE_MAP = {
|
|
4228
|
+
xs: 16,
|
|
4229
|
+
sm: 20,
|
|
4230
|
+
md: 24,
|
|
4231
|
+
lg: 32,
|
|
4232
|
+
xl: 40,
|
|
4233
|
+
};
|
|
4234
|
+
class RatingComponent {
|
|
4235
|
+
sanitizer = inject(DomSanitizer);
|
|
4236
|
+
value = signal(0);
|
|
4237
|
+
hoverValue = signal(null);
|
|
4238
|
+
count = input(5);
|
|
4239
|
+
size = input('md');
|
|
4240
|
+
sizePx = computed(() => {
|
|
4241
|
+
const size = this.size();
|
|
4242
|
+
return typeof size === 'number' ? size : (SIZE_MAP[size] ?? SIZE_MAP.md);
|
|
4243
|
+
});
|
|
4244
|
+
allowHalf = input(false);
|
|
4245
|
+
readOnly = input(false);
|
|
4246
|
+
disabled = signal(false);
|
|
4247
|
+
onChange = () => { };
|
|
4248
|
+
onTouched = () => { };
|
|
4249
|
+
stars = computed(() => {
|
|
4250
|
+
const totalStars = this.count(); // número, ex: 5
|
|
4251
|
+
const displayValue = this.hoverValue() ?? this.value();
|
|
4252
|
+
const result = [];
|
|
4253
|
+
for (let i = 0; i < totalStars; i++) {
|
|
4254
|
+
let icon = this.starLineIcon;
|
|
4255
|
+
if (displayValue >= i + 1) {
|
|
4256
|
+
icon = this.starFillIcon;
|
|
4257
|
+
}
|
|
4258
|
+
else if (this.allowHalf() && displayValue >= i + 0.5) {
|
|
4259
|
+
icon = this.starHalfIcon;
|
|
4260
|
+
}
|
|
4261
|
+
result.push(this.sanitizer.bypassSecurityTrustHtml(icon));
|
|
4262
|
+
}
|
|
4263
|
+
return result;
|
|
4264
|
+
});
|
|
4265
|
+
get isDisabledClass() {
|
|
4266
|
+
return this.disabled();
|
|
4267
|
+
}
|
|
4268
|
+
get isReadOnlyClass() {
|
|
4269
|
+
return this.readOnly();
|
|
4270
|
+
}
|
|
4271
|
+
clearHoverStar() {
|
|
4272
|
+
this.hoverValue.set(null);
|
|
4273
|
+
}
|
|
4274
|
+
writeValue(value) {
|
|
4275
|
+
const total = this.count();
|
|
4276
|
+
const normalized = typeof value === 'number' ? Math.max(0, Math.min(value, total)) : 0;
|
|
4277
|
+
this.value.set(this.allowHalf()
|
|
4278
|
+
? Math.round(normalized * 2) / 2
|
|
4279
|
+
: Math.round(normalized));
|
|
4280
|
+
}
|
|
4281
|
+
registerOnChange(fn) {
|
|
4282
|
+
this.onChange = fn;
|
|
4283
|
+
}
|
|
4284
|
+
registerOnTouched(fn) {
|
|
4285
|
+
this.onTouched = fn;
|
|
4286
|
+
}
|
|
4287
|
+
setDisabledState(isDisabled) {
|
|
4288
|
+
this.disabled.set(isDisabled);
|
|
4289
|
+
}
|
|
4290
|
+
setRating(index, event) {
|
|
4291
|
+
if (!this.isInteractive)
|
|
4292
|
+
return;
|
|
4293
|
+
//é um array, entao a posicao é 0
|
|
4294
|
+
const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
|
|
4295
|
+
if (next === this.value()) {
|
|
4296
|
+
this.updateValue(0);
|
|
4297
|
+
this.hoverValue.set(null);
|
|
4298
|
+
}
|
|
4299
|
+
else {
|
|
4300
|
+
this.updateValue(next);
|
|
4301
|
+
}
|
|
4302
|
+
}
|
|
4303
|
+
onKey(event) {
|
|
4304
|
+
if (!this.isInteractive)
|
|
4305
|
+
return;
|
|
4306
|
+
const total = this.count();
|
|
4307
|
+
const step = this.allowHalf() ? 0.5 : 1;
|
|
4308
|
+
const base = this.hoverValue() ?? this.value();
|
|
4309
|
+
if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
|
|
4310
|
+
const next = Math.min(base + step, total);
|
|
4311
|
+
this.hoverValue.set(next);
|
|
4312
|
+
event.preventDefault();
|
|
4313
|
+
return;
|
|
4314
|
+
}
|
|
4315
|
+
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
|
|
4316
|
+
const next = Math.max(base - step, 0);
|
|
4317
|
+
this.hoverValue.set(next);
|
|
4318
|
+
event.preventDefault();
|
|
4319
|
+
return;
|
|
4320
|
+
}
|
|
4321
|
+
if (event.key === 'Home') {
|
|
4322
|
+
this.hoverValue.set(0);
|
|
4323
|
+
event.preventDefault();
|
|
4324
|
+
return;
|
|
4325
|
+
}
|
|
4326
|
+
if (event.key === 'End') {
|
|
4327
|
+
this.hoverValue.set(total);
|
|
4328
|
+
event.preventDefault();
|
|
4329
|
+
return;
|
|
4330
|
+
}
|
|
4331
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
4332
|
+
const targetValue = this.hoverValue() ?? this.value();
|
|
4333
|
+
this.updateValue(targetValue);
|
|
4334
|
+
this.hoverValue.set(null);
|
|
4335
|
+
event.preventDefault();
|
|
4336
|
+
return;
|
|
4337
|
+
}
|
|
4338
|
+
if (event.key === 'Escape') {
|
|
4339
|
+
this.hoverValue.set(null);
|
|
4340
|
+
event.preventDefault();
|
|
4341
|
+
return;
|
|
4342
|
+
}
|
|
4343
|
+
}
|
|
4344
|
+
onStarHover(index, event) {
|
|
4345
|
+
if (!this.isInteractive)
|
|
4346
|
+
return;
|
|
4347
|
+
if (this.allowHalf()) {
|
|
4348
|
+
this.hoverValue.set(this.computeHalf(index, event));
|
|
4349
|
+
}
|
|
4350
|
+
else {
|
|
4351
|
+
this.hoverValue.set(index + 1);
|
|
4352
|
+
}
|
|
4353
|
+
}
|
|
4354
|
+
onStarHoverTouch(index, event) {
|
|
4355
|
+
if (!this.isInteractive)
|
|
4356
|
+
return;
|
|
4357
|
+
if (this.allowHalf()) {
|
|
4358
|
+
this.hoverValue.set(this.computeHalf(index, event));
|
|
4359
|
+
}
|
|
4360
|
+
else {
|
|
4361
|
+
this.hoverValue.set(index + 1);
|
|
4362
|
+
}
|
|
4363
|
+
}
|
|
4364
|
+
onTouchCommit(index, event) {
|
|
4365
|
+
if (!this.isInteractive)
|
|
4366
|
+
return;
|
|
4367
|
+
const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
|
|
4368
|
+
// Em mobile, toque único normalmente deve setar; se tocar de novo no mesmo, zera:
|
|
4369
|
+
if (next === this.value()) {
|
|
4370
|
+
this.updateValue(0);
|
|
4371
|
+
this.hoverValue.set(null);
|
|
4372
|
+
}
|
|
4373
|
+
else {
|
|
4374
|
+
this.updateValue(next);
|
|
4375
|
+
}
|
|
4376
|
+
// evita rolagem acidental ao tocar/arrastar levemente
|
|
4377
|
+
event.preventDefault();
|
|
4378
|
+
}
|
|
4379
|
+
updateValue(value) {
|
|
4380
|
+
const newValue = this.allowHalf()
|
|
4381
|
+
? Math.round(value * 2) / 2
|
|
4382
|
+
: Math.round(value);
|
|
4383
|
+
this.value.set(newValue);
|
|
4384
|
+
this.onChange(newValue);
|
|
4385
|
+
this.onTouched();
|
|
4386
|
+
}
|
|
4387
|
+
getClientXFromEvent(e) {
|
|
4388
|
+
if (e instanceof TouchEvent) {
|
|
4389
|
+
const t = e.touches[0] ?? e.changedTouches[0];
|
|
4390
|
+
return t?.clientX ?? 0;
|
|
4391
|
+
}
|
|
4392
|
+
return e.clientX ?? 0;
|
|
4393
|
+
}
|
|
4394
|
+
computeHalf(index, e) {
|
|
4395
|
+
const target = e.currentTarget;
|
|
4396
|
+
const rect = target.getBoundingClientRect();
|
|
4397
|
+
const clientX = this.getClientXFromEvent(e);
|
|
4398
|
+
const relativeX = clientX - rect.left; // 0..width
|
|
4399
|
+
const isHalf = relativeX < rect.width / 2;
|
|
4400
|
+
return isHalf ? index + 0.5 : index + 1;
|
|
4401
|
+
}
|
|
4402
|
+
get isInteractive() {
|
|
4403
|
+
return !this.disabled() && !this.readOnly();
|
|
4404
|
+
}
|
|
4405
|
+
get starLineIcon() {
|
|
4406
|
+
return `<svg
|
|
4407
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4408
|
+
viewBox="0 0 24 24"
|
|
4409
|
+
fill="currentColor"
|
|
4410
|
+
>
|
|
4411
|
+
<path
|
|
4412
|
+
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z"
|
|
4413
|
+
></path>
|
|
4414
|
+
</svg>`;
|
|
4415
|
+
}
|
|
4416
|
+
get starFillIcon() {
|
|
4417
|
+
return `<svg
|
|
4418
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4419
|
+
viewBox="0 0 24 24"
|
|
4420
|
+
fill="currentColor"
|
|
4421
|
+
>
|
|
4422
|
+
<path
|
|
4423
|
+
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
|
|
4424
|
+
></path>
|
|
4425
|
+
</svg>`;
|
|
4426
|
+
}
|
|
4427
|
+
get starHalfIcon() {
|
|
4428
|
+
return `
|
|
4429
|
+
<svg
|
|
4430
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4431
|
+
viewBox="0 0 24 24"
|
|
4432
|
+
fill="currentColor"
|
|
4433
|
+
>
|
|
4434
|
+
<path
|
|
4435
|
+
d="M12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502V15.968ZM12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
|
|
4436
|
+
></path>
|
|
4437
|
+
</svg>
|
|
4438
|
+
`;
|
|
4439
|
+
}
|
|
4440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RatingComponent, isStandalone: true, selector: "s4y-rating", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowHalf: { classPropertyName: "allowHalf", publicName: "allowHalf", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseleave": "clearHoverStar()" }, properties: { "class.s4y-rating--disabled": "this.isDisabledClass", "class.s4y-rating--readonly": "this.isReadOnlyClass" } }, providers: [
|
|
4442
|
+
{
|
|
4443
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4444
|
+
useExisting: forwardRef(() => RatingComponent),
|
|
4445
|
+
multi: true,
|
|
4446
|
+
},
|
|
4447
|
+
], ngImport: i0, template: "<div\r\n class=\"s4y-star-container\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"count()\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n tabindex=\"0\"\r\n (blur)=\"onTouched()\"\r\n (keydown)=\"onKey($event)\"\r\n>\r\n @for (star of stars(); track $index) {\r\n <button\r\n tabindex=\"-1\"\r\n (click)=\"setRating($index, $event)\"\r\n (mousemove)=\"onStarHover($index, $event)\"\r\n (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n (touchend)=\"onTouchCommit($index, $event)\"\r\n [innerHTML]=\"star\"\r\n [disabled]=\"disabled()\"\r\n role=\"button\"\r\n class=\"s4y-star-item\"\r\n [style.height.px]=\"sizePx()\"\r\n [style.width.px]=\"sizePx()\"\r\n [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n ></button>\r\n }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] });
|
|
4448
|
+
}
|
|
4449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RatingComponent, decorators: [{
|
|
4450
|
+
type: Component,
|
|
4451
|
+
args: [{ selector: 's4y-rating', providers: [
|
|
4452
|
+
{
|
|
4453
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4454
|
+
useExisting: forwardRef(() => RatingComponent),
|
|
4455
|
+
multi: true,
|
|
4456
|
+
},
|
|
4457
|
+
], template: "<div\r\n class=\"s4y-star-container\"\r\n role=\"slider\"\r\n [attr.aria-valuemin]=\"0\"\r\n [attr.aria-valuemax]=\"count()\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n tabindex=\"0\"\r\n (blur)=\"onTouched()\"\r\n (keydown)=\"onKey($event)\"\r\n>\r\n @for (star of stars(); track $index) {\r\n <button\r\n tabindex=\"-1\"\r\n (click)=\"setRating($index, $event)\"\r\n (mousemove)=\"onStarHover($index, $event)\"\r\n (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n (touchend)=\"onTouchCommit($index, $event)\"\r\n [innerHTML]=\"star\"\r\n [disabled]=\"disabled()\"\r\n role=\"button\"\r\n class=\"s4y-star-item\"\r\n [style.height.px]=\"sizePx()\"\r\n [style.width.px]=\"sizePx()\"\r\n [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n ></button>\r\n }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] }]
|
|
4458
|
+
}], propDecorators: { isDisabledClass: [{
|
|
4459
|
+
type: HostBinding,
|
|
4460
|
+
args: ['class.s4y-rating--disabled']
|
|
4461
|
+
}], isReadOnlyClass: [{
|
|
4462
|
+
type: HostBinding,
|
|
4463
|
+
args: ['class.s4y-rating--readonly']
|
|
4464
|
+
}], clearHoverStar: [{
|
|
4465
|
+
type: HostListener,
|
|
4466
|
+
args: ['mouseleave']
|
|
4467
|
+
}] } });
|
|
4468
|
+
|
|
4469
|
+
class TagComponent {
|
|
4470
|
+
injector = inject(Injector);
|
|
4471
|
+
editInput = viewChild('editInput');
|
|
4472
|
+
size = input('md');
|
|
4473
|
+
severity = input('primary');
|
|
4474
|
+
value = model('');
|
|
4475
|
+
outlined = input(false);
|
|
4476
|
+
withShadow = input(true);
|
|
4477
|
+
editable = input(false);
|
|
4478
|
+
isEditing = signal(false);
|
|
4479
|
+
editStart = output();
|
|
4480
|
+
editEnd = output();
|
|
4481
|
+
class = computed(() => {
|
|
4482
|
+
let baseClass = '';
|
|
4483
|
+
switch (this.severity()) {
|
|
4484
|
+
case 'success':
|
|
4485
|
+
baseClass = 'tag-success';
|
|
4486
|
+
break;
|
|
4487
|
+
case 'error':
|
|
4488
|
+
baseClass = 'tag-error';
|
|
4489
|
+
break;
|
|
4490
|
+
case 'info':
|
|
4491
|
+
baseClass = 'tag-info';
|
|
4492
|
+
break;
|
|
4493
|
+
case 'warning':
|
|
4494
|
+
baseClass = 'tag-warning';
|
|
4495
|
+
break;
|
|
4496
|
+
case 'neutral':
|
|
4497
|
+
baseClass = 'tag-neutral';
|
|
4498
|
+
break;
|
|
4499
|
+
case 'primary':
|
|
4500
|
+
baseClass = 'tag-primary';
|
|
4501
|
+
break;
|
|
4502
|
+
case 'secondary':
|
|
4503
|
+
baseClass = 'tag-secondary';
|
|
4504
|
+
break;
|
|
4505
|
+
case 'finished':
|
|
4506
|
+
baseClass = 'tag-finished';
|
|
4507
|
+
break;
|
|
4508
|
+
default:
|
|
4509
|
+
baseClass = 'tag-primary';
|
|
4510
|
+
}
|
|
4511
|
+
const outline = this.outlined() ? ' outlined' : '';
|
|
4512
|
+
return `${baseClass}${outline} ${this.sizeClass()}`;
|
|
4513
|
+
});
|
|
4514
|
+
sizeClass = computed(() => {
|
|
4515
|
+
switch (this.size()) {
|
|
4516
|
+
case 'xs':
|
|
4517
|
+
return 'size-xs';
|
|
4518
|
+
case 'sm':
|
|
4519
|
+
return 'size-sm';
|
|
4520
|
+
case 'md':
|
|
4521
|
+
return 'size-md';
|
|
4522
|
+
case 'lg':
|
|
4523
|
+
return 'size-lg';
|
|
4524
|
+
case 'xl':
|
|
4525
|
+
return 'size-xl';
|
|
4526
|
+
default:
|
|
4527
|
+
return 'size-md';
|
|
4528
|
+
}
|
|
4529
|
+
});
|
|
4530
|
+
constructor() {
|
|
4531
|
+
effect(() => {
|
|
4532
|
+
if (this.isEditing()) {
|
|
4533
|
+
afterNextRender(() => {
|
|
4534
|
+
const el = this.editInput()?.nativeElement;
|
|
4535
|
+
if (el) {
|
|
4536
|
+
el.focus();
|
|
4537
|
+
// el.select();
|
|
4538
|
+
}
|
|
4539
|
+
}, { injector: this.injector });
|
|
4540
|
+
}
|
|
4541
|
+
});
|
|
4542
|
+
}
|
|
4543
|
+
shadow = computed(() => this.withShadow() ? ' box-shadow: var(--shadow-default);' : null);
|
|
4544
|
+
onDblClick(_) {
|
|
4545
|
+
this.startEdit();
|
|
4546
|
+
}
|
|
4547
|
+
startEdit() {
|
|
4548
|
+
if (!this.editable())
|
|
4549
|
+
return;
|
|
4550
|
+
if (!this.isEditing()) {
|
|
4551
|
+
this.isEditing.set(true);
|
|
4552
|
+
this.editStart.emit();
|
|
4553
|
+
}
|
|
4554
|
+
}
|
|
4555
|
+
stopEdit(commit = true) {
|
|
4556
|
+
if (this.isEditing()) {
|
|
4557
|
+
this.isEditing.set(false);
|
|
4558
|
+
this.editEnd.emit();
|
|
4559
|
+
}
|
|
4560
|
+
}
|
|
4561
|
+
setValue(event) {
|
|
4562
|
+
const value = event.target.value;
|
|
4563
|
+
this.value.set(value);
|
|
4564
|
+
}
|
|
4565
|
+
onKeydown(event) {
|
|
4566
|
+
if (!this.editable())
|
|
4567
|
+
return;
|
|
4568
|
+
if (event.key === 'Enter' && !this.isEditing()) {
|
|
4569
|
+
event.preventDefault();
|
|
4570
|
+
this.startEdit();
|
|
4571
|
+
}
|
|
4572
|
+
else if (event.key === 'Escape' && this.isEditing()) {
|
|
4573
|
+
event.preventDefault();
|
|
4574
|
+
this.stopEdit(false);
|
|
4575
|
+
}
|
|
4576
|
+
}
|
|
4577
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TagComponent, isStandalone: true, selector: "s4y-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, withShadow: { classPropertyName: "withShadow", publicName: "withShadow", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", editStart: "editStart", editEnd: "editEnd" }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "dblclick": "onDblClick($event)" }, properties: { "style.fontWeight": "\"500\"", "style.boxShadow": "shadow()", "class": "class()", "attr.aria-label": "editable() ? \"Editar tag\" : null" } }, viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (!isEditing()) {\r\n <p (keydown)=\"onKeydown($event)\">\r\n {{ value() }}\r\n </p>\r\n\r\n <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n <input\r\n type=\"text\"\r\n [value]=\"value()\"\r\n (blur)=\"stopEdit()\"\r\n (keydown.enter)=\"stopEdit()\"\r\n (keydown.escape)=\"stopEdit(false)\"\r\n (input)=\"setValue($event)\"\r\n autofocus\r\n #editInput\r\n />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] });
|
|
4579
|
+
}
|
|
4580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, decorators: [{
|
|
4581
|
+
type: Component,
|
|
4582
|
+
args: [{ selector: 's4y-tag', imports: [], host: {
|
|
4583
|
+
'[style.fontWeight]': '"500"',
|
|
4584
|
+
'[style.boxShadow]': 'shadow()',
|
|
4585
|
+
'[class]': 'class()',
|
|
4586
|
+
'(dblclick)': 'onDblClick($event)',
|
|
4587
|
+
role: 'button',
|
|
4588
|
+
'[attr.aria-label]': 'editable() ? "Editar tag" : null',
|
|
4589
|
+
tabindex: '0',
|
|
4590
|
+
}, template: "\r\n@if (!isEditing()) {\r\n <p (keydown)=\"onKeydown($event)\">\r\n {{ value() }}\r\n </p>\r\n\r\n <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n <input\r\n type=\"text\"\r\n [value]=\"value()\"\r\n (blur)=\"stopEdit()\"\r\n (keydown.enter)=\"stopEdit()\"\r\n (keydown.escape)=\"stopEdit(false)\"\r\n (input)=\"setValue($event)\"\r\n autofocus\r\n #editInput\r\n />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] }]
|
|
4591
|
+
}], ctorParameters: () => [] });
|
|
4592
|
+
|
|
4593
|
+
class ConfirmationComponent {
|
|
4594
|
+
sanitizer = inject(DomSanitizer);
|
|
4595
|
+
props;
|
|
4596
|
+
onCancelClick;
|
|
4597
|
+
onConfirmClick;
|
|
4598
|
+
confirmLoading = false;
|
|
4599
|
+
cancelLoading = false;
|
|
4600
|
+
loading = false;
|
|
4601
|
+
get isTemplate() {
|
|
4602
|
+
return this.props?.content instanceof TemplateRef;
|
|
4603
|
+
}
|
|
4604
|
+
// Verifica se é HTML
|
|
4605
|
+
get isHtml() {
|
|
4606
|
+
return !this.isTemplate && this.props?.contentType === 'html';
|
|
4607
|
+
}
|
|
4608
|
+
// Verifica se é texto simples
|
|
4609
|
+
get isText() {
|
|
4610
|
+
return !this.isTemplate && this.props?.contentType !== 'html';
|
|
4611
|
+
}
|
|
4612
|
+
// Retorna o template se for TemplateRef
|
|
4613
|
+
get template() {
|
|
4614
|
+
return this.isTemplate
|
|
4615
|
+
? this.props.content
|
|
4616
|
+
: undefined;
|
|
4617
|
+
}
|
|
4618
|
+
// Retorna HTML sanitizado se contentType for 'html'
|
|
4619
|
+
get safeHtml() {
|
|
4620
|
+
if (!this.isHtml || typeof this.props?.content !== 'string')
|
|
4621
|
+
return undefined;
|
|
4622
|
+
return (this.sanitizer.sanitize(SecurityContext.HTML, this.props.content) || '');
|
|
4623
|
+
}
|
|
4624
|
+
// Retorna texto simples
|
|
4625
|
+
get textContent() {
|
|
4626
|
+
return this.isText && typeof this.props?.content === 'string'
|
|
4627
|
+
? this.props.content
|
|
4628
|
+
: undefined;
|
|
4629
|
+
}
|
|
4630
|
+
async handleCancel() {
|
|
4631
|
+
if (this.onCancelClick) {
|
|
4632
|
+
this.cancelLoading = true;
|
|
4633
|
+
this.loading = true;
|
|
4634
|
+
await this.onCancelClick();
|
|
4635
|
+
this.cancelLoading = false;
|
|
4636
|
+
this.loading = false;
|
|
4637
|
+
}
|
|
4638
|
+
}
|
|
4639
|
+
async handleConfirm() {
|
|
4640
|
+
if (this.onConfirmClick) {
|
|
4641
|
+
this.confirmLoading = true;
|
|
4642
|
+
this.loading = true;
|
|
4643
|
+
await this.onConfirmClick();
|
|
4644
|
+
this.confirmLoading = false;
|
|
4645
|
+
this.loading = false;
|
|
4646
|
+
}
|
|
4647
|
+
}
|
|
4648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmationComponent, isStandalone: true, selector: "s4y-confirmation", ngImport: i0, template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media (max-width: 30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4650
|
+
}
|
|
4651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
4652
|
+
type: Component,
|
|
4653
|
+
args: [{ selector: 's4y-confirmation', imports: [SvgComponent, ButtonComponent, NgTemplateOutlet], template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n <div class=\"s4y-confirmation-icon\">\r\n @if (model.iconUri) {\r\n <s4y-svg [src]=\"model.iconUri\" />\r\n } @else {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n ></path>\r\n </svg>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-content flex\">\r\n <p class=\"medium-text-bold s4y-confirmation-title\">\r\n {{ model.title }}\r\n </p>\r\n\r\n @if (model.content) {\r\n <div class=\"s4y-confirmation-description\">\r\n @if (isTemplate) {\r\n <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n } @else if (isHtml) {\r\n <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n } @else {\r\n <p class=\"small-text-regular\">{{ textContent }}</p>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"s4y-confirmation-buttons\">\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"true\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"cancelLoading || loading\"\r\n [loading]=\"cancelLoading\"\r\n (click)=\"handleCancel()\"\r\n >\r\n {{ cancelModel?.text ?? \"Cancelar\" }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n s4yButton\r\n [outlined]=\"false\"\r\n [variant]=\"'danger'\"\r\n [fullWidth]=\"true\"\r\n [disabled]=\"confirmLoading || loading\"\r\n [loading]=\"confirmLoading\"\r\n (click)=\"handleConfirm()\"\r\n >\r\n {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n </button>\r\n </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media (max-width: 30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"] }]
|
|
4654
|
+
}] });
|
|
4655
|
+
|
|
4656
|
+
class ConfirmationService {
|
|
4657
|
+
overlay = inject(Overlay);
|
|
4658
|
+
constructor() { }
|
|
4659
|
+
open(config) {
|
|
4660
|
+
const overlayRef = this.createOverlay(config);
|
|
4661
|
+
const confirmationPortal = this.confirmationPortal();
|
|
4662
|
+
const result$ = new Subject();
|
|
4663
|
+
let isProcessing = false;
|
|
4664
|
+
const confirmationInstance = overlayRef.attach(confirmationPortal);
|
|
4665
|
+
confirmationInstance.instance.props = config;
|
|
4666
|
+
confirmationInstance.instance.onCancelClick = async () => {
|
|
4667
|
+
isProcessing = true;
|
|
4668
|
+
await this.handleAction(config.onCancel, overlayRef, false, result$);
|
|
4669
|
+
isProcessing = false;
|
|
4670
|
+
};
|
|
4671
|
+
confirmationInstance.instance.onConfirmClick = async () => {
|
|
4672
|
+
isProcessing = true;
|
|
4673
|
+
await this.handleAction(config.onConfirm, overlayRef, true, result$);
|
|
4674
|
+
isProcessing = false;
|
|
4675
|
+
};
|
|
4676
|
+
const backdropSub = overlayRef.backdropClick().subscribe(() => {
|
|
4677
|
+
if (!isProcessing) {
|
|
4678
|
+
this.closeWithResult(overlayRef, result$, false);
|
|
4679
|
+
}
|
|
4680
|
+
});
|
|
4681
|
+
const keySub = overlayRef.keydownEvents().subscribe((event) => {
|
|
4682
|
+
if (event.key === 'Escape' && !isProcessing) {
|
|
4683
|
+
// ADICIONE essa verificação
|
|
4684
|
+
this.closeWithResult(overlayRef, result$, false);
|
|
4685
|
+
}
|
|
4686
|
+
});
|
|
4687
|
+
return result$.asObservable().pipe(take(1), finalize(() => {
|
|
4688
|
+
backdropSub.unsubscribe();
|
|
4689
|
+
keySub.unsubscribe();
|
|
4690
|
+
}));
|
|
4691
|
+
}
|
|
4692
|
+
async handleAction(action, overlayRef, confirmed, result$) {
|
|
4693
|
+
try {
|
|
4694
|
+
if (!action) {
|
|
4695
|
+
result$.next({ confirmed });
|
|
4696
|
+
result$.complete();
|
|
4697
|
+
overlayRef.dispose();
|
|
4698
|
+
return;
|
|
4699
|
+
}
|
|
4700
|
+
const actionResult$ = this.toObservable(action);
|
|
4701
|
+
const actionData = await firstValueFrom(actionResult$.pipe(catchError$1(() => of(true))));
|
|
4702
|
+
if (actionData === false) {
|
|
4703
|
+
return;
|
|
4704
|
+
}
|
|
4705
|
+
result$.next({ confirmed, data: actionData });
|
|
4706
|
+
result$.complete();
|
|
4707
|
+
overlayRef.dispose();
|
|
4708
|
+
}
|
|
4709
|
+
catch (error) {
|
|
4710
|
+
console.error('Error handling confirmation action:', error);
|
|
4711
|
+
result$.next({ confirmed: false });
|
|
4712
|
+
result$.complete();
|
|
4713
|
+
overlayRef.dispose();
|
|
4714
|
+
}
|
|
4715
|
+
}
|
|
4716
|
+
toObservable(value) {
|
|
4717
|
+
const resolvedValue = typeof value === 'function' ? value() : value;
|
|
4718
|
+
if (isObservable(resolvedValue)) {
|
|
4719
|
+
return resolvedValue;
|
|
4720
|
+
}
|
|
4721
|
+
if (resolvedValue instanceof Promise) {
|
|
4722
|
+
return from(resolvedValue);
|
|
4723
|
+
}
|
|
4724
|
+
return of(resolvedValue);
|
|
4725
|
+
}
|
|
4726
|
+
createOverlay({ width, height }) {
|
|
4727
|
+
const overlayRef = this.overlay.create({
|
|
4728
|
+
hasBackdrop: true,
|
|
4729
|
+
disposeOnNavigation: true,
|
|
4730
|
+
backdropClass: 's4y-backdrop-dialog',
|
|
4731
|
+
panelClass: 's4y-confirmation-panel',
|
|
4732
|
+
maxWidth: '90dvw',
|
|
4733
|
+
height: height,
|
|
4734
|
+
width: width ?? 'min(41rem, 90dvw)',
|
|
4735
|
+
positionStrategy: this.overlay
|
|
4736
|
+
.position()
|
|
4737
|
+
.global()
|
|
4738
|
+
.centerHorizontally()
|
|
4739
|
+
.centerVertically(),
|
|
4740
|
+
});
|
|
4741
|
+
return overlayRef;
|
|
4742
|
+
}
|
|
4743
|
+
confirmationPortal() {
|
|
4744
|
+
return new ComponentPortal(ConfirmationComponent);
|
|
4745
|
+
}
|
|
4746
|
+
closeWithResult(overlayRef, result$, confirmed) {
|
|
4747
|
+
if (!result$.closed) {
|
|
4748
|
+
result$.next({ confirmed });
|
|
4749
|
+
result$.complete();
|
|
4750
|
+
}
|
|
4751
|
+
if (overlayRef.hasAttached()) {
|
|
4752
|
+
overlayRef.dispose();
|
|
4753
|
+
}
|
|
4754
|
+
}
|
|
4755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4756
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
|
|
4757
|
+
}
|
|
4758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationService, decorators: [{
|
|
4759
|
+
type: Injectable,
|
|
4760
|
+
args: [{
|
|
4761
|
+
providedIn: 'root',
|
|
4762
|
+
}]
|
|
4763
|
+
}], ctorParameters: () => [] });
|
|
4764
|
+
|
|
3623
4765
|
/*
|
|
3624
4766
|
* Public API Surface of s4y-components
|
|
3625
4767
|
*/
|
|
@@ -3629,5 +4771,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3629
4771
|
* Generated bundle index. Do not edit.
|
|
3630
4772
|
*/
|
|
3631
4773
|
|
|
3632
|
-
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
4774
|
+
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
|
|
3633
4775
|
//# sourceMappingURL=s4y-ui.mjs.map
|