@filip.mazev/modal 1.0.2 → 1.0.6
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/filip.mazev-modal.mjs +36 -36
- package/package.json +1 -1
|
@@ -235,10 +235,10 @@ class ModalGlobalSettingsService {
|
|
|
235
235
|
if (settings.disableCloseOnBackdropClick !== undefined)
|
|
236
236
|
this.disableCloseOnBackdropClick.set(settings.disableCloseOnBackdropClick);
|
|
237
237
|
}
|
|
238
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
239
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
238
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalGlobalSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
239
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalGlobalSettingsService, providedIn: 'root' });
|
|
240
240
|
}
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalGlobalSettingsService, decorators: [{
|
|
242
242
|
type: Injectable,
|
|
243
243
|
args: [{
|
|
244
244
|
providedIn: 'root'
|
|
@@ -397,10 +397,10 @@ class ModalService {
|
|
|
397
397
|
style: resolvedStyle,
|
|
398
398
|
};
|
|
399
399
|
}
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
401
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
401
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
402
402
|
}
|
|
403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, decorators: [{
|
|
404
404
|
type: Injectable,
|
|
405
405
|
args: [{
|
|
406
406
|
providedIn: 'root'
|
|
@@ -411,10 +411,10 @@ class ModalBackdrop {
|
|
|
411
411
|
isAnimated = input(false, ...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
|
|
412
412
|
isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
413
413
|
click = output();
|
|
414
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
415
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
414
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ModalBackdrop, isStandalone: true, selector: "app-modal-backdrop", inputs: { isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<div class=\"modal-backdrop\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\">\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}\n"] });
|
|
416
416
|
}
|
|
417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalBackdrop, decorators: [{
|
|
418
418
|
type: Component,
|
|
419
419
|
args: [{ selector: 'app-modal-backdrop', imports: [], template: "<div class=\"modal-backdrop\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\">\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}\n"] }]
|
|
420
420
|
}], propDecorators: { isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], click: [{ type: i0.Output, args: ["click"] }] } });
|
|
@@ -422,10 +422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
422
422
|
class ModalDefaultCloseButton {
|
|
423
423
|
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
424
424
|
close = output();
|
|
425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalDefaultCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
426
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalDefaultCloseButton, isStandalone: true, selector: "app-modal-default-close-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: " @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"default-close-button\" viewBox=\"0 0 24 24\"\n fill=\"#ffffff\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.4 24L0 21.6L9.6 12L0 2.4L2.4 0L12 9.6L21.6 0L24 2.4L14.4 12L24 21.6L21.6 24L12 14.4L2.4 24Z\"\n fill=\"#ffffff\" />\n </svg>\n }", styles: [".default-close-button{-webkit-user-select:none;user-select:none;background-repeat:no-repeat;display:inline-block;fill:currentColor;height:1.35rem;width:1.35rem;overflow:hidden;cursor:pointer;pointer-events:fill}.default-close-button path{transition:all .3s ease-in-out}.default-close-button path{fill:var(--modal-text, #000000)}\n"] });
|
|
427
427
|
}
|
|
428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalDefaultCloseButton, decorators: [{
|
|
429
429
|
type: Component,
|
|
430
430
|
args: [{ selector: 'app-modal-default-close-button', imports: [], template: " @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"default-close-button\" viewBox=\"0 0 24 24\"\n fill=\"#ffffff\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.4 24L0 21.6L9.6 12L0 2.4L2.4 0L12 9.6L21.6 0L24 2.4L14.4 12L24 21.6L21.6 24L12 14.4L2.4 24Z\"\n fill=\"#ffffff\" />\n </svg>\n }", styles: [".default-close-button{-webkit-user-select:none;user-select:none;background-repeat:no-repeat;display:inline-block;fill:currentColor;height:1.35rem;width:1.35rem;overflow:hidden;cursor:pointer;pointer-events:fill}.default-close-button path{transition:all .3s ease-in-out}.default-close-button path{fill:var(--modal-text, #000000)}\n"] }]
|
|
431
431
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
@@ -433,10 +433,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
433
433
|
class ModalBanner {
|
|
434
434
|
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
435
435
|
close = output();
|
|
436
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
436
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalBanner, isStandalone: true, selector: "app-modal-banner", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-top-banner-container\">\n <div class=\"modal-top-banner-title-container\">\n @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n {{ config()?.bannerText }}\n }\n </div>\n\n <app-modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-default-close-button>\n</div>", styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal-text, #000000);top:0;min-height:2rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1.5rem;align-items:center;width:100%}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-webkit-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-moz-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}\n"], dependencies: [{ kind: "component", type: ModalDefaultCloseButton, selector: "app-modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
|
|
438
438
|
}
|
|
439
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalBanner, decorators: [{
|
|
440
440
|
type: Component,
|
|
441
441
|
args: [{ selector: 'app-modal-banner', imports: [ModalDefaultCloseButton], template: "<div class=\"modal-top-banner-container\">\n <div class=\"modal-top-banner-title-container\">\n @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n {{ config()?.bannerText }}\n }\n </div>\n\n <app-modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-default-close-button>\n</div>", styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal-text, #000000);top:0;min-height:2rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1.5rem;align-items:center;width:100%}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-webkit-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-moz-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}\n"] }]
|
|
442
442
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
@@ -575,10 +575,10 @@ class ModalBottomSheet {
|
|
|
575
575
|
window.addEventListener('pointerdown', handler);
|
|
576
576
|
this.globalResizeCleanup = () => window.removeEventListener('pointerdown', handler);
|
|
577
577
|
}
|
|
578
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
579
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
578
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
579
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalBottomSheet, isStandalone: true, selector: "app-modal-bottom-sheet", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "verticalSwipeTarget", first: true, predicate: ["verticalSwipeTarget"], descendants: true, static: true }, { propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" \n [id]=\"id() ?? ''\"\n [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\"\n [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n [style.transform]=\"modalTransform()\"\n [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\" \n [ngClass]=\"{\n 'opened-bottom-sheet-modal': isAnimated()\n }\" \n #elementRef\n class=\"bottom-sheet-modal-style\">\n \n <div #verticalSwipeTarget \n class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n <div class=\"swipe-line\"></div>\n </div>\n\n <div class=\"bottom-sheet-modal-inner-content-container\">\n <div class=\"bottom-sheet-modal-top-group\">\n @if (headerTemplate()) {\n <div class=\"bottom-sheet-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n </div>\n }\n\n <div class=\"bottom-sheet-modal-main-content-container\"\n [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\">\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"bottom-sheet-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n</div>", styles: [".bottom-sheet-modal-style{position:fixed;z-index:3;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:30px 30px 0 0;background-color:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--modal-mobile-swipe-line-color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.75rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@-moz-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
580
580
|
}
|
|
581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalBottomSheet, decorators: [{
|
|
582
582
|
type: Component,
|
|
583
583
|
args: [{ selector: 'app-modal-bottom-sheet', imports: [NgClass, NgTemplateOutlet], template: "<div (click)=\"$event.stopPropagation()\" \n [id]=\"id() ?? ''\"\n [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\"\n [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n [style.transform]=\"modalTransform()\"\n [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\" \n [ngClass]=\"{\n 'opened-bottom-sheet-modal': isAnimated()\n }\" \n #elementRef\n class=\"bottom-sheet-modal-style\">\n \n <div #verticalSwipeTarget \n class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n <div class=\"swipe-line\"></div>\n </div>\n\n <div class=\"bottom-sheet-modal-inner-content-container\">\n <div class=\"bottom-sheet-modal-top-group\">\n @if (headerTemplate()) {\n <div class=\"bottom-sheet-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n </div>\n }\n\n <div class=\"bottom-sheet-modal-main-content-container\"\n [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\">\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"bottom-sheet-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n</div>", styles: [".bottom-sheet-modal-style{position:fixed;z-index:3;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:30px 30px 0 0;background-color:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--modal-mobile-swipe-line-color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.75rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@-moz-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"] }]
|
|
584
584
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: true }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], verticalSwipeTarget: [{
|
|
@@ -611,10 +611,10 @@ class ModalCentered {
|
|
|
611
611
|
'centered-modal-animate-out': this.isAnimated() && !this.isOpen()
|
|
612
612
|
};
|
|
613
613
|
}, ...(ngDevMode ? [{ debugName: "modalClasses" }] : []));
|
|
614
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
614
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalCentered, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
615
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalCentered, isStandalone: true, selector: "app-modal-centered", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, isBottomSheetModalActive: { classPropertyName: "isBottomSheetModalActive", publicName: "isBottomSheetModalActive", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null }, hasDefaultContentWrapperClass: { classPropertyName: "hasDefaultContentWrapperClass", publicName: "hasDefaultContentWrapperClass", isSignal: true, isRequired: true, transformFunction: null }, hasBanner: { classPropertyName: "hasBanner", publicName: "hasBanner", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", onBackdropClick: "onBackdropClick" }, viewQueries: [{ propertyName: "bottomSheet", predicate: ModalBottomSheet, descendants: true }], ngImport: i0, template: "@if(!isBottomSheetModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" [id]=\"id() ?? ''\"\n (click)=\"config()?.style?.hasBackdrop ? onBackdropClick.emit($event) : null\">\n <div class=\"modal-overlay-wrapper\">\n <div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\">\n <div class=\"centered-modal-inner-content-container\" [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\">\n\n <div class=\"centered-modal-top-group\">\n @if (hasBanner()) {\n <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"centered-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if(!hasBanner()) {\n <app-modal-default-close-button [config]=\"config()\"\n (close)=\"close.emit('cancel')\"></app-modal-default-close-button>\n }\n </div>\n }\n <div class=\"centered-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"centered-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n} @else {\n<app-modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</app-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>", styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:3;justify-content:center;align-items:center;width:100%;height:100%}.modal-overlay{position:absolute;inset:0;z-index:2}.modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal-text, #000000);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--modal-bg, #ffffff)}.centered-modal-default-content-container{padding:1rem 1.5rem;max-height:85vh;max-height:85dvh;overflow-y:auto}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-webkit-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-moz-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-webkit-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-moz-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBottomSheet, selector: "app-modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "component", type: ModalBanner, selector: "app-modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "app-modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
|
|
616
616
|
}
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalCentered, decorators: [{
|
|
618
618
|
type: Component,
|
|
619
619
|
args: [{ selector: 'app-modal-centered', imports: [NgTemplateOutlet, NgClass, ModalBottomSheet, ModalBanner, ModalDefaultCloseButton], template: "@if(!isBottomSheetModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" [id]=\"id() ?? ''\"\n (click)=\"config()?.style?.hasBackdrop ? onBackdropClick.emit($event) : null\">\n <div class=\"modal-overlay-wrapper\">\n <div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\">\n <div class=\"centered-modal-inner-content-container\" [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\">\n\n <div class=\"centered-modal-top-group\">\n @if (hasBanner()) {\n <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"centered-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if(!hasBanner()) {\n <app-modal-default-close-button [config]=\"config()\"\n (close)=\"close.emit('cancel')\"></app-modal-default-close-button>\n }\n </div>\n }\n <div class=\"centered-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"centered-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n} @else {\n<app-modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</app-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>", styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:3;justify-content:center;align-items:center;width:100%;height:100%}.modal-overlay{position:absolute;inset:0;z-index:2}.modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal-text, #000000);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--modal-bg, #ffffff)}.centered-modal-default-content-container{padding:1rem 1.5rem;max-height:85vh;max-height:85dvh;overflow-y:auto}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-webkit-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-moz-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-webkit-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-moz-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}\n"] }]
|
|
620
620
|
}], propDecorators: { headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: true }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], isBottomSheetModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBottomSheetModalActive", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], hasDefaultContentWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultContentWrapperClass", required: true }] }], hasBanner: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBanner", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], onBackdropClick: [{ type: i0.Output, args: ["onBackdropClick"] }], bottomSheet: [{
|
|
@@ -666,10 +666,10 @@ class ModalSide {
|
|
|
666
666
|
}
|
|
667
667
|
});
|
|
668
668
|
}
|
|
669
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
670
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
669
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalSide, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
670
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalSide, isStandalone: true, selector: "app-modal-side", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, isBottomSheetModalActive: { classPropertyName: "isBottomSheetModalActive", publicName: "isBottomSheetModalActive", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null }, hasDefaultContentWrapperClass: { classPropertyName: "hasDefaultContentWrapperClass", publicName: "hasDefaultContentWrapperClass", isSignal: true, isRequired: true, transformFunction: null }, hasBanner: { classPropertyName: "hasBanner", publicName: "hasBanner", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "bottomSheet", predicate: ModalBottomSheet, descendants: true }], ngImport: i0, template: "@if(!isBottomSheetModalActive()) {\n<div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\" [id]=\"id() ?? ''\"\n [style.--anim-duration.ms]=\"animationDuration()\">\n <div class=\"side-modal-inner-content-container\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n @if (hasBanner()) {\n <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"side-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if(!hasBanner()) {\n <app-modal-default-close-button [config]=\"config()\"\n (close)=\"close.emit('cancel')\"></app-modal-default-close-button>\n }\n </div>\n }\n <div class=\"side-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"side-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n</div>\n} @else {\n<app-modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</app-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>", styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:3;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);box-shadow:0 0 15px #0000004d;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalBottomSheet, selector: "app-modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBanner, selector: "app-modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "app-modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
|
|
671
671
|
}
|
|
672
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalSide, decorators: [{
|
|
673
673
|
type: Component,
|
|
674
674
|
args: [{ selector: 'app-modal-side', imports: [NgTemplateOutlet, ModalBottomSheet, NgClass, ModalBanner, ModalDefaultCloseButton], template: "@if(!isBottomSheetModalActive()) {\n<div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\" [id]=\"id() ?? ''\"\n [style.--anim-duration.ms]=\"animationDuration()\">\n <div class=\"side-modal-inner-content-container\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n @if (hasBanner()) {\n <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"side-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if(!hasBanner()) {\n <app-modal-default-close-button [config]=\"config()\"\n (close)=\"close.emit('cancel')\"></app-modal-default-close-button>\n }\n </div>\n }\n <div class=\"side-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"side-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n</div>\n} @else {\n<app-modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</app-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>", styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:3;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);box-shadow:0 0 15px #0000004d;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}\n"] }]
|
|
675
675
|
}], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: true }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], isBottomSheetModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBottomSheetModalActive", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], hasDefaultContentWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultContentWrapperClass", required: true }] }], hasBanner: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBanner", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], bottomSheet: [{
|
|
@@ -884,10 +884,10 @@ class ModalCore {
|
|
|
884
884
|
}
|
|
885
885
|
this.isBottomSheetModalActive.set(false);
|
|
886
886
|
}
|
|
887
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
888
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
887
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalCore, isStandalone: true, selector: "app-modal", viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "sideModalComponents", predicate: ModalSide, descendants: true }, { propertyName: "centeredModalComponents", predicate: ModalCentered, descendants: true }], ngImport: i0, template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<app-modal-backdrop [isAnimated]=\"isAnimated()\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</app-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide()) {\n <app-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </app-modal-side>\n }\n @case (isCentered()) {\n <app-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </app-modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalCentered, selector: "app-modal-centered", inputs: ["headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close", "onBackdropClick"] }, { kind: "component", type: ModalSide, selector: "app-modal-side", inputs: ["layout", "headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close"] }, { kind: "component", type: ModalBackdrop, selector: "app-modal-backdrop", inputs: ["isAnimated", "isOpen"], outputs: ["click"] }] });
|
|
889
889
|
}
|
|
890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalCore, decorators: [{
|
|
891
891
|
type: Component,
|
|
892
892
|
args: [{ selector: 'app-modal', imports: [NgTemplateOutlet, ModalCentered, ModalSide, ModalBackdrop], template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<app-modal-backdrop [isAnimated]=\"isAnimated()\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</app-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide()) {\n <app-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </app-modal-side>\n }\n @case (isCentered()) {\n <app-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </app-modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template>" }]
|
|
893
893
|
}], ctorParameters: () => [], propDecorators: { modalContainer: [{
|
|
@@ -927,10 +927,10 @@ class Modal {
|
|
|
927
927
|
close(result) {
|
|
928
928
|
this.modal?.close('cancel', result);
|
|
929
929
|
}
|
|
930
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
931
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
930
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
931
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Modal });
|
|
932
932
|
}
|
|
933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Modal, decorators: [{
|
|
934
934
|
type: Injectable
|
|
935
935
|
}] });
|
|
936
936
|
|
|
@@ -953,10 +953,10 @@ class ModalHeaderDirective {
|
|
|
953
953
|
console.warn(ModalWarnings.HEADER_DIRECTIVE_OUTSIDE_MODAL);
|
|
954
954
|
}
|
|
955
955
|
}
|
|
956
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
957
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
956
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
957
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ModalHeaderDirective, isStandalone: true, selector: "[appModalHeader]", ngImport: i0 });
|
|
958
958
|
}
|
|
959
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalHeaderDirective, decorators: [{
|
|
960
960
|
type: Directive,
|
|
961
961
|
args: [{
|
|
962
962
|
selector: '[appModalHeader]',
|
|
@@ -975,10 +975,10 @@ class ModalFooterDirective {
|
|
|
975
975
|
console.warn(ModalWarnings.FOOTER_DIRECTIVE_OUTSIDE_MODAL);
|
|
976
976
|
}
|
|
977
977
|
}
|
|
978
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
979
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
979
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ModalFooterDirective, isStandalone: true, selector: "[appModalFooter]", ngImport: i0 });
|
|
980
980
|
}
|
|
981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalFooterDirective, decorators: [{
|
|
982
982
|
type: Directive,
|
|
983
983
|
args: [{
|
|
984
984
|
selector: '[appModalFooter]',
|