s4y-ui 5.1.1 → 5.1.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 +1003 -33
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +4 -3
- 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/select/select.component.d.ts +1 -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 +6 -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 +241 -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 } 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';
|
|
@@ -14,7 +14,8 @@ 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 {
|
|
@@ -1684,7 +1696,7 @@ class SelectComponent {
|
|
|
1684
1696
|
provide: NG_VALUE_ACCESSOR,
|
|
1685
1697
|
useExisting: forwardRef(() => SelectComponent),
|
|
1686
1698
|
},
|
|
1687
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
|
|
1699
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <ng-content select=\"s4y-error-message\"></ng-content>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
|
|
1688
1700
|
}
|
|
1689
1701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1690
1702
|
type: Component,
|
|
@@ -1694,7 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1694
1706
|
provide: NG_VALUE_ACCESSOR,
|
|
1695
1707
|
useExisting: forwardRef(() => SelectComponent),
|
|
1696
1708
|
},
|
|
1697
|
-
], template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
|
|
1709
|
+
], template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <ng-content select=\"s4y-error-message\"></ng-content>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
|
|
1698
1710
|
}], propDecorators: { optionTemplate: [{
|
|
1699
1711
|
type: ContentChild,
|
|
1700
1712
|
args: ['optionTemplate']
|
|
@@ -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,448 @@ 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
|
+
|
|
3623
4593
|
/*
|
|
3624
4594
|
* Public API Surface of s4y-components
|
|
3625
4595
|
*/
|
|
@@ -3629,5 +4599,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3629
4599
|
* Generated bundle index. Do not edit.
|
|
3630
4600
|
*/
|
|
3631
4601
|
|
|
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 };
|
|
4602
|
+
export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, 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
4603
|
//# sourceMappingURL=s4y-ui.mjs.map
|