s4y-ui 2.2.2 → 2.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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, ViewEncapsulation, output, TemplateRef } from '@angular/core';
|
|
2
|
+
import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, ViewEncapsulation, output, effect, Inject, TemplateRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle } from '@angular/common';
|
|
4
|
+
import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/platform-browser';
|
|
6
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
7
7
|
import * as i1$2 from '@angular/router';
|
|
@@ -1175,10 +1175,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1175
1175
|
const modalFadeCombined = trigger('modalFadeCombined', [
|
|
1176
1176
|
transition(':enter', [
|
|
1177
1177
|
group([
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1178
|
+
style({ opacity: 0 }),
|
|
1179
|
+
animate('200ms ease-out', style({ opacity: 1 })),
|
|
1180
|
+
// query('.s4y-backdrop', [
|
|
1181
|
+
// style({ opacity: 0 }),
|
|
1182
|
+
// animate('200ms ease-out', style({ opacity: 1 })),
|
|
1183
|
+
// ]),
|
|
1182
1184
|
query('.s4y-modal-container', [
|
|
1183
1185
|
style({ opacity: 0, transform: 'translateY(20px)' }),
|
|
1184
1186
|
animate('250ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
|
|
@@ -1187,9 +1189,11 @@ const modalFadeCombined = trigger('modalFadeCombined', [
|
|
|
1187
1189
|
]),
|
|
1188
1190
|
transition(':leave', [
|
|
1189
1191
|
group([
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1192
|
+
style({ opacity: 1 }),
|
|
1193
|
+
animate('200ms ease-in', style({ opacity: 0 })),
|
|
1194
|
+
// query('.s4y-backdrop', [
|
|
1195
|
+
// animate('200ms ease-in', style({ opacity: 0 })),
|
|
1196
|
+
// ]),
|
|
1193
1197
|
query('.s4y-modal-container', [
|
|
1194
1198
|
animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })),
|
|
1195
1199
|
]),
|
|
@@ -1198,15 +1202,32 @@ const modalFadeCombined = trigger('modalFadeCombined', [
|
|
|
1198
1202
|
]);
|
|
1199
1203
|
|
|
1200
1204
|
class ModalComponent {
|
|
1205
|
+
renderer;
|
|
1206
|
+
document;
|
|
1201
1207
|
modalHeaderTemplate;
|
|
1202
1208
|
modalFooterTemplate;
|
|
1203
1209
|
scrollableContent = input(true);
|
|
1204
|
-
|
|
1210
|
+
centeredModal = input(true);
|
|
1205
1211
|
title = input('Titulo');
|
|
1206
1212
|
modalStyle = input();
|
|
1207
1213
|
closeModal = output();
|
|
1208
1214
|
visible = model(false);
|
|
1209
1215
|
withHeader = model(true);
|
|
1216
|
+
constructor(renderer, document) {
|
|
1217
|
+
this.renderer = renderer;
|
|
1218
|
+
this.document = document;
|
|
1219
|
+
window.addEventListener('keydown', this.escListener);
|
|
1220
|
+
effect(() => {
|
|
1221
|
+
const visible = this.visible();
|
|
1222
|
+
if (visible) {
|
|
1223
|
+
this.renderer.setStyle(document.body, 'overflow', 'hidden');
|
|
1224
|
+
}
|
|
1225
|
+
else {
|
|
1226
|
+
this.renderer.removeStyle(document.body, 'overflow');
|
|
1227
|
+
}
|
|
1228
|
+
});
|
|
1229
|
+
}
|
|
1230
|
+
ngAfterViewInit() { }
|
|
1210
1231
|
onClose() {
|
|
1211
1232
|
this.visible.set(false);
|
|
1212
1233
|
}
|
|
@@ -1215,19 +1236,19 @@ class ModalComponent {
|
|
|
1215
1236
|
this.onClose();
|
|
1216
1237
|
}
|
|
1217
1238
|
};
|
|
1218
|
-
constructor() {
|
|
1219
|
-
window.addEventListener('keydown', this.escListener);
|
|
1220
|
-
}
|
|
1221
1239
|
ngOnDestroy() {
|
|
1222
1240
|
window.removeEventListener('keydown', this.escListener);
|
|
1223
1241
|
}
|
|
1224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", visible: "visibleChange", withHeader: "withHeaderChange" }, 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-with-scrollable]=\"!scrollableContent()\"\r\n class
|
|
1242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", visible: "visibleChange", withHeader: "withHeaderChange" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n (click)=\"onClose()\"\r\n @modalFadeCombined\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n (click)=\"$event.stopPropagation()\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [modalFadeCombined] });
|
|
1226
1244
|
}
|
|
1227
1245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1228
1246
|
type: Component,
|
|
1229
|
-
args: [{ selector: 's4y-modal', imports: [CommonModule], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n class
|
|
1230
|
-
}], ctorParameters: () => [
|
|
1247
|
+
args: [{ selector: 's4y-modal', imports: [CommonModule], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div\r\n class=\"s4y-modal-wrapper\"\r\n [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n (click)=\"onClose()\"\r\n @modalFadeCombined\r\n >\r\n <div\r\n class=\"s4y-modal-container\"\r\n (click)=\"$event.stopPropagation()\"\r\n [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n [ngStyle]=\"modalStyle()\"\r\n >\r\n @if (modalHeaderTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n }\r\n @if (!modalHeaderTemplate && withHeader()) {\r\n <div class=\"s4y-modal-header\">\r\n <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n <button role=\"button\" (click)=\"onClose()\">\r\n <p>×</p>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"s4y-modal-body\"\r\n [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (modalFooterTemplate) {\r\n <div class=\"s4y-modal-footer\">\r\n <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;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"] }]
|
|
1248
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
1249
|
+
type: Inject,
|
|
1250
|
+
args: [DOCUMENT]
|
|
1251
|
+
}] }], propDecorators: { modalHeaderTemplate: [{
|
|
1231
1252
|
type: ContentChild,
|
|
1232
1253
|
args: ['modalHeaderTemplate']
|
|
1233
1254
|
}], modalFooterTemplate: [{
|