@filip.mazev/modal 0.0.2 → 0.0.5
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 +96 -60
- package/fesm2022/filip.mazev-modal.mjs.map +1 -1
- package/package.json +4 -5
- package/src/assets/default-theme.css +1 -1
- package/types/filip.mazev-modal.d.ts +510 -0
- package/index.d.ts +0 -5
- package/lib/classes/generic-modal-config.d.ts +0 -26
- package/lib/classes/generic-modal-ref.d.ts +0 -52
- package/lib/classes/generic-modal-style.config.d.ts +0 -17
- package/lib/classes/generic-modal.d.ts +0 -19
- package/lib/components/generic-modal.d.ts +0 -60
- package/lib/components/views/backdrop/modal-backdrop.d.ts +0 -8
- package/lib/components/views/banner/modal-banner.d.ts +0 -9
- package/lib/components/views/centered/modal-centered.d.ts +0 -23
- package/lib/components/views/side/modal-side.d.ts +0 -26
- package/lib/components/views/swipeable/modal-swipeable.d.ts +0 -32
- package/lib/constants/generic-modal-animation.constants.d.ts +0 -4
- package/lib/constants/generic-modal-common.constants.d.ts +0 -1
- package/lib/constants/generic-modal-swipe.constants.d.ts +0 -3
- package/lib/constants/generic-modal-text.constants.d.ts +0 -4
- package/lib/enums/generic-modal-errors.enum.d.ts +0 -6
- package/lib/enums/generic-modal-state.enum.d.ts +0 -6
- package/lib/enums/generic-modal-warnings.enum.d.ts +0 -7
- package/lib/interfaces/igeneric-close-result.interface.d.ts +0 -5
- package/lib/interfaces/igeneric-confirm-close.interface.d.ts +0 -24
- package/lib/interfaces/igeneric-modal-component.interface.d.ts +0 -28
- package/lib/interfaces/igeneric-modal-config.interface.d.ts +0 -45
- package/lib/interfaces/igeneric-modal-ref.interface.d.ts +0 -25
- package/lib/interfaces/igeneric-modal-service.interface.d.ts +0 -22
- package/lib/interfaces/igeneric-modal-style-config.interface.d.ts +0 -28
- package/lib/interfaces/igeneric-modal-view.interface.d.ts +0 -18
- package/lib/interfaces/igeneric-swipeable-modal-config.d.ts +0 -5
- package/lib/services/generic-modal.service.d.ts +0 -40
- package/lib/tokens/generic-modal-data.token.d.ts +0 -2
- package/lib/types/modal.types.d.ts +0 -2
- package/public-api.d.ts +0 -29
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, Injectable, InjectionToken, Injector, input, output, Component, ViewChild, ViewChildren, effect, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
|
|
3
|
+
import { inject, Injectable, InjectionToken, Injector, input, output, Component, ViewChild, ViewChildren, effect, ChangeDetectorRef, signal, ViewContainerRef, TemplateRef, Directive } from '@angular/core';
|
|
4
4
|
import { BehaviorSubject, Subject, takeUntil, filter, map, take, fromEvent } from 'rxjs';
|
|
5
5
|
import { Router, NavigationEnd } from '@angular/router';
|
|
6
6
|
import { uuidv4, WindowDimensionsService, ScrollLockService, DeviceTypeService } from 'common-parts';
|
|
@@ -18,6 +18,9 @@ var GenericModalWarnings;
|
|
|
18
18
|
//#region Confirm close
|
|
19
19
|
GenericModalWarnings["CONFIRM_MODAL_NESTING_NOT_SUPPORTED"] = "Cannot open a confirm modal from within a confirm modal. If you want to allow this behaviour, set bypassSelfCheck to true in the confirmCloseConfig.";
|
|
20
20
|
//#endregion
|
|
21
|
+
//#region Directive usage
|
|
22
|
+
GenericModalWarnings["FOOTER_DIRECTIVE_OUTSIDE_MODAL"] = "[ModalFooter] Directive used outside of a GenericModalComponent.";
|
|
23
|
+
//#endregion
|
|
21
24
|
})(GenericModalWarnings || (GenericModalWarnings = {}));
|
|
22
25
|
|
|
23
26
|
class GenericModalStyleConfig {
|
|
@@ -255,10 +258,10 @@ class GenericModal {
|
|
|
255
258
|
close() {
|
|
256
259
|
this.modal?.close();
|
|
257
260
|
}
|
|
258
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
259
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
261
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
262
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModal });
|
|
260
263
|
}
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModal, decorators: [{
|
|
262
265
|
type: Injectable
|
|
263
266
|
}], ctorParameters: () => [] });
|
|
264
267
|
|
|
@@ -266,6 +269,7 @@ var GenericModalErrors;
|
|
|
266
269
|
(function (GenericModalErrors) {
|
|
267
270
|
//#region General
|
|
268
271
|
GenericModalErrors["MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES"] = "The modal doesn't match the requested types.";
|
|
272
|
+
GenericModalErrors["GENERIC_MODAL_SERVICE_RENDERER_NOT_SET"] = "ViewContainer and Renderer not set, please set the view container in the constructor of app.module.ts / app.ts (by calling register), before opening a modal";
|
|
269
273
|
//#endregion
|
|
270
274
|
//#region Multi-level modals
|
|
271
275
|
GenericModalErrors["PARENT_MODAL_CANT_BE_THE_SAME_AS_CHILD"] = "Parent modal cannot be the same as the child modal";
|
|
@@ -312,7 +316,7 @@ class GenericModalService {
|
|
|
312
316
|
}
|
|
313
317
|
open(component, config) {
|
|
314
318
|
if (!this.viewContainer || !this.renderer) {
|
|
315
|
-
throw new Error(
|
|
319
|
+
throw new Error(GenericModalErrors.GENERIC_MODAL_SERVICE_RENDERER_NOT_SET);
|
|
316
320
|
}
|
|
317
321
|
const createInjector = Injector.create({
|
|
318
322
|
providers: [{ provide: GENERIC_MODAL_DATA, useValue: config?.data }],
|
|
@@ -389,10 +393,10 @@ class GenericModalService {
|
|
|
389
393
|
}
|
|
390
394
|
return true;
|
|
391
395
|
}
|
|
392
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
393
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
396
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
397
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModalService, providedIn: "root" });
|
|
394
398
|
}
|
|
395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModalService, decorators: [{
|
|
396
400
|
type: Injectable,
|
|
397
401
|
args: [{
|
|
398
402
|
providedIn: "root",
|
|
@@ -400,37 +404,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
400
404
|
}], ctorParameters: () => [] });
|
|
401
405
|
|
|
402
406
|
class ModalBackdrop {
|
|
403
|
-
isAnimated = input(false);
|
|
404
|
-
isOpen = input(false);
|
|
407
|
+
isAnimated = input(false, ...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
|
|
408
|
+
isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
405
409
|
click = output();
|
|
406
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
407
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
410
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
411
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: ModalBackdrop, isStandalone: true, selector: "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:absolute;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"] });
|
|
408
412
|
}
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalBackdrop, decorators: [{
|
|
410
414
|
type: Component,
|
|
411
415
|
args: [{ selector: '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:absolute;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"] }]
|
|
412
|
-
}] });
|
|
416
|
+
}], 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"] }] } });
|
|
413
417
|
|
|
414
418
|
class ModalBanner {
|
|
415
|
-
config = input.required();
|
|
419
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
416
420
|
close = output();
|
|
417
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
422
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalBanner, isStandalone: true, selector: "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()?.bannerIcons && (config() && config()!.bannerIcons.length > 0)) {\n @for (icon of config()?.bannerIcons; track icon) {\n <img src=\"{{ icon }}\" class=\"icon-style custom-svg-icon-color-dark-green\" alt=\"\" />\n }\n }\n\n @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n <div class=\"modal-banner-default-style\">\n <div class=\"generic-modal-banner-text\">\n <div>\n {{ config()?.bannerText }}\n <b> {{ config()?.bannerTextAnnotatedString }} </b>\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"banner-svg-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 }\n</div>", styles: [".modal-banner-default-style{font:lighter;font-size:1.25rem;line-height:1.25rem}.modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal_text_primary, #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%}.banner-svg-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}.banner-svg-close-button path{transition:all .3s ease-in-out}.banner-svg-close-button path{fill:var(--modal_text_primary, #000000)}@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"] });
|
|
419
423
|
}
|
|
420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalBanner, decorators: [{
|
|
421
425
|
type: Component,
|
|
422
|
-
args: [{ selector: 'modal-banner', template: "<div class=\"modal-top-banner-container\">\n <div class=\"modal-top-banner-title-container\">\n @if (config() && config()?.bannerIcons && (config() && config()!.bannerIcons.length > 0)) {\n @for (icon of config()?.bannerIcons; track icon) {\n <img src=\"{{ icon }}\" class=\"icon-style custom-svg-icon-color-dark-green\" alt=\"\" />\n }\n }\n\n @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n <div class=\"modal-banner-default-style\">\n <div class=\"generic-modal-banner-text\">\n <div>\n {{ config()?.bannerText }}\n <b> {{ config()?.bannerTextAnnotatedString }} </b>\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"banner-svg-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 }\n</div>", styles: [".modal-banner-default-style{font:lighter;font-size:1.25rem;line-height:1.25rem}.modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--
|
|
423
|
-
}] });
|
|
426
|
+
args: [{ selector: 'modal-banner', template: "<div class=\"modal-top-banner-container\">\n <div class=\"modal-top-banner-title-container\">\n @if (config() && config()?.bannerIcons && (config() && config()!.bannerIcons.length > 0)) {\n @for (icon of config()?.bannerIcons; track icon) {\n <img src=\"{{ icon }}\" class=\"icon-style custom-svg-icon-color-dark-green\" alt=\"\" />\n }\n }\n\n @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n <div class=\"modal-banner-default-style\">\n <div class=\"generic-modal-banner-text\">\n <div>\n {{ config()?.bannerText }}\n <b> {{ config()?.bannerTextAnnotatedString }} </b>\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"banner-svg-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 }\n</div>", styles: [".modal-banner-default-style{font:lighter;font-size:1.25rem;line-height:1.25rem}.modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal_text_primary, #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%}.banner-svg-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}.banner-svg-close-button path{transition:all .3s ease-in-out}.banner-svg-close-button path{fill:var(--modal_text_primary, #000000)}@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"] }]
|
|
427
|
+
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
424
428
|
|
|
425
429
|
const GENERIC_MODAL_DOWN_SWIPE_LIMIT = 2;
|
|
426
430
|
const GENERIC_MODAL_UP_SWIPE_LIMIT = 1;
|
|
427
431
|
const GENERIC_MODAL_SWIPE_VELOCITY_THRESHOLD = 80;
|
|
428
432
|
|
|
429
433
|
class ModalSwipeable {
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
+
footerTemplate = input.required(...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
|
|
435
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
436
|
+
isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
437
|
+
isAnimated = input.required(...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
|
|
438
|
+
animationDuration = input.required(...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
|
|
434
439
|
close = output();
|
|
435
440
|
currentTranslateY = 0;
|
|
436
441
|
isSwipingVerticallyFinished = false;
|
|
@@ -546,15 +551,16 @@ class ModalSwipeable {
|
|
|
546
551
|
}
|
|
547
552
|
});
|
|
548
553
|
}
|
|
549
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
550
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalSwipeable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
555
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalSwipeable, isStandalone: true, selector: "modal-swipeable", inputs: { 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: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" [id]=\"config()?.id ?? ''\"\n [class]=\"config()?.style?.wrapperClasses !== undefined ? config()!.style.wrapperClasses! : ''\"\n [style]=\"config()?.style?.wrapperStyles !== undefined ? config()!.style.wrapperStyles! : ''\"\n [style.max-height]=\"config() && config()?.style?.mobileConfig && config()?.style?.mobileConfig?.customHeight ? config()?.style?.mobileConfig?.customHeight : ''\"\n [style.transform]=\"!isSwipingVerticallyFinished\n ? 'translateY(' + (currentTranslateY * -1 > windowInnerHeight / upSwipeLimit ? (windowInnerHeight / upSwipeLimit) * -1 : currentTranslateY) + 'px)'\n : 'translateY(100%)'\"\n [style.transition]=\"isAnimated() && !isSwipingVertically ? '300ms ease-in-out' : ''\" [ngClass]=\"{\n 'opened-swipeable-modal': isAnimated()\n }\" data-horizontal-swipe-target=\"swipeable-modal\" class=\"swipeable-modal-style\">\n <div #verticalSwipeTarget class=\"touch-hitbox\" class=\"swipeable-modal-top-bar\"\n (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n <div class=\"swipe-line\"></div>\n </div>\n\n <div class=\"swipeable-modal-content-container\"\n [style.animationDuration]=\"isAnimated() ? animationDuration().toString() + 'ms' : '0ms'\">\n <ng-content></ng-content>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"swipeable-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n</div>", styles: [".swipeable-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(--text_primary, #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}.swipe-line{width:7rem;height:.33rem;background-color:var(--swipe_line_color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.swipeable-modal-content-container{padding:0rem 1.25rem 1.25rem;overflow-y:auto;max-height:93vh;max-height:93dvh;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1}@media(max-width:640px){.swipeable-modal-content-container{padding-top:1.25rem}}.opened-swipeable-modal{animation:opened-swipeable-modal-anim .35s}.swipeable-modal-top-bar{display:flex;justify-content:center}.swipeable-modal-footer{padding-top:.75rem;padding-bottom:1rem}@-moz-keyframes opened-swipeable-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-swipeable-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-swipeable-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"] }] });
|
|
551
556
|
}
|
|
552
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalSwipeable, decorators: [{
|
|
553
558
|
type: Component,
|
|
554
559
|
args: [{ selector: 'modal-swipeable', imports: [
|
|
555
|
-
NgClass
|
|
556
|
-
|
|
557
|
-
|
|
560
|
+
NgClass,
|
|
561
|
+
NgTemplateOutlet
|
|
562
|
+
], template: "<div (click)=\"$event.stopPropagation()\" [id]=\"config()?.id ?? ''\"\n [class]=\"config()?.style?.wrapperClasses !== undefined ? config()!.style.wrapperClasses! : ''\"\n [style]=\"config()?.style?.wrapperStyles !== undefined ? config()!.style.wrapperStyles! : ''\"\n [style.max-height]=\"config() && config()?.style?.mobileConfig && config()?.style?.mobileConfig?.customHeight ? config()?.style?.mobileConfig?.customHeight : ''\"\n [style.transform]=\"!isSwipingVerticallyFinished\n ? 'translateY(' + (currentTranslateY * -1 > windowInnerHeight / upSwipeLimit ? (windowInnerHeight / upSwipeLimit) * -1 : currentTranslateY) + 'px)'\n : 'translateY(100%)'\"\n [style.transition]=\"isAnimated() && !isSwipingVertically ? '300ms ease-in-out' : ''\" [ngClass]=\"{\n 'opened-swipeable-modal': isAnimated()\n }\" data-horizontal-swipe-target=\"swipeable-modal\" class=\"swipeable-modal-style\">\n <div #verticalSwipeTarget class=\"touch-hitbox\" class=\"swipeable-modal-top-bar\"\n (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n <div class=\"swipe-line\"></div>\n </div>\n\n <div class=\"swipeable-modal-content-container\"\n [style.animationDuration]=\"isAnimated() ? animationDuration().toString() + 'ms' : '0ms'\">\n <ng-content></ng-content>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"swipeable-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n</div>", styles: [".swipeable-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(--text_primary, #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}.swipe-line{width:7rem;height:.33rem;background-color:var(--swipe_line_color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.swipeable-modal-content-container{padding:0rem 1.25rem 1.25rem;overflow-y:auto;max-height:93vh;max-height:93dvh;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1}@media(max-width:640px){.swipeable-modal-content-container{padding-top:1.25rem}}.opened-swipeable-modal{animation:opened-swipeable-modal-anim .35s}.swipeable-modal-top-bar{display:flex;justify-content:center}.swipeable-modal-footer{padding-top:.75rem;padding-bottom:1rem}@-moz-keyframes opened-swipeable-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-swipeable-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-swipeable-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"] }]
|
|
563
|
+
}], propDecorators: { 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: [{
|
|
558
564
|
type: ViewChild,
|
|
559
565
|
args: ["verticalSwipeTarget", { static: true }]
|
|
560
566
|
}], modalContent: [{
|
|
@@ -563,13 +569,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
563
569
|
}] } });
|
|
564
570
|
|
|
565
571
|
class ModalCentered {
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
572
|
+
footerTemplate = input.required(...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
|
|
573
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
574
|
+
isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
575
|
+
isAnimated = input.required(...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
|
|
576
|
+
isSwipeableModalActive = input.required(...(ngDevMode ? [{ debugName: "isSwipeableModalActive" }] : []));
|
|
577
|
+
animationDuration = input.required(...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
|
|
578
|
+
hasDefaultContentWrapperClass = input.required(...(ngDevMode ? [{ debugName: "hasDefaultContentWrapperClass" }] : []));
|
|
579
|
+
hasBanner = input.required(...(ngDevMode ? [{ debugName: "hasBanner" }] : []));
|
|
573
580
|
close = output();
|
|
574
581
|
onBackdropClick = output();
|
|
575
582
|
swipeableComponents;
|
|
@@ -581,18 +588,18 @@ class ModalCentered {
|
|
|
581
588
|
'centered-modal-animate-out': this.isAnimated() && !this.isOpen(),
|
|
582
589
|
};
|
|
583
590
|
}
|
|
584
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
585
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
591
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalCentered, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalCentered, isStandalone: true, selector: "modal-centered", inputs: { 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 }, isSwipeableModalActive: { classPropertyName: "isSwipeableModalActive", publicName: "isSwipeableModalActive", 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: "swipeableComponents", predicate: ModalSwipeable, descendants: true }], ngImport: i0, template: "@if(!isSwipeableModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" (click)=\"\n 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\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n @if (hasBanner()) {\n <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n }\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\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<modal-swipeable [footerTemplate]=\"footerTemplate()\" [config]=\"config()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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:absolute;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{max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal_text_primary, #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;padding:1rem 1.5rem;gap:2rem}.centered-modal-footer{padding-top:.75rem;padding-bottom:1rem}.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: ModalSwipeable, selector: "modal-swipeable", inputs: ["footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "component", type: ModalBanner, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }] });
|
|
586
593
|
}
|
|
587
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalCentered, decorators: [{
|
|
588
595
|
type: Component,
|
|
589
596
|
args: [{ selector: 'modal-centered', imports: [
|
|
590
597
|
NgTemplateOutlet,
|
|
591
598
|
NgClass,
|
|
592
599
|
ModalSwipeable,
|
|
593
600
|
ModalBanner,
|
|
594
|
-
], template: "@if(!isSwipeableModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" (click)=\"\n 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\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n @if (hasBanner()) {\n <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n }\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n </div>\n</div>\n} @else {\n<modal-swipeable [config]=\"config()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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:absolute;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{max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--
|
|
595
|
-
}], propDecorators: { swipeableComponents: [{
|
|
601
|
+
], template: "@if(!isSwipeableModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" (click)=\"\n 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\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n @if (hasBanner()) {\n <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n }\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\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<modal-swipeable [footerTemplate]=\"footerTemplate()\" [config]=\"config()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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:absolute;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{max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal_text_primary, #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;padding:1rem 1.5rem;gap:2rem}.centered-modal-footer{padding-top:.75rem;padding-bottom:1rem}.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"] }]
|
|
602
|
+
}], propDecorators: { 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 }] }], isSwipeableModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSwipeableModalActive", 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"] }], swipeableComponents: [{
|
|
596
603
|
type: ViewChildren,
|
|
597
604
|
args: [ModalSwipeable]
|
|
598
605
|
}] } });
|
|
@@ -603,8 +610,9 @@ const GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL = 0.65;
|
|
|
603
610
|
const GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE = 0.85;
|
|
604
611
|
|
|
605
612
|
class ModalSide {
|
|
606
|
-
|
|
607
|
-
|
|
613
|
+
footerTemplate = input.required(...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
|
|
614
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
615
|
+
isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
608
616
|
_innerIsOpen = false;
|
|
609
617
|
set innerIsOpen(value) {
|
|
610
618
|
if (value) {
|
|
@@ -620,11 +628,11 @@ class ModalSide {
|
|
|
620
628
|
get innerIsOpen() {
|
|
621
629
|
return this._innerIsOpen;
|
|
622
630
|
}
|
|
623
|
-
isAnimated = input.required();
|
|
624
|
-
isSwipeableModalActive = input.required();
|
|
625
|
-
animationDuration = input.required();
|
|
626
|
-
hasDefaultContentWrapperClass = input.required();
|
|
627
|
-
hasBanner = input.required();
|
|
631
|
+
isAnimated = input.required(...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
|
|
632
|
+
isSwipeableModalActive = input.required(...(ngDevMode ? [{ debugName: "isSwipeableModalActive" }] : []));
|
|
633
|
+
animationDuration = input.required(...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
|
|
634
|
+
hasDefaultContentWrapperClass = input.required(...(ngDevMode ? [{ debugName: "hasDefaultContentWrapperClass" }] : []));
|
|
635
|
+
hasBanner = input.required(...(ngDevMode ? [{ debugName: "hasBanner" }] : []));
|
|
628
636
|
close = output();
|
|
629
637
|
swipeableComponents;
|
|
630
638
|
constructor() {
|
|
@@ -645,18 +653,18 @@ class ModalSide {
|
|
|
645
653
|
'side-modal-animate-out': this.isAnimated() && !this.innerIsOpen,
|
|
646
654
|
};
|
|
647
655
|
}
|
|
648
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalSide, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalSide, isStandalone: true, selector: "modal-side", inputs: { 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 }, isSwipeableModalActive: { classPropertyName: "isSwipeableModalActive", publicName: "isSwipeableModalActive", 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: "swipeableComponents", predicate: ModalSwipeable, descendants: true }], ngImport: i0, template: "@if(!isSwipeableModalActive()) {\n<div [ngClass]=\"modalClasses\" (click)=\"$event.stopPropagation()\">\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 <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n }\n <div class=\"side-modal-content-wrapper\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n @if (footerTemplate()) {\n <div class=\"side-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n</div>\n} @else {\n<modal-swipeable [footerTemplate]=\"footerTemplate()\" [config]=\"config()\" [isOpen]=\"innerIsOpen\" [isAnimated]=\"isAnimated()\"\n [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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;background:var(--modal_bg, #ffffff);box-shadow:0 0 15px #0000004d;z-index:1050;overflow-y:auto;max-width:85vw;max-width:85dvw;display:flex;flex-direction:column;transition:transform .3s ease-in-out}.side-modal-content-wrapper.left{left:0;transform:translate(-100%)}.side-modal-content-wrapper.right{right:0;transform:translate(100%)}.side-modal-content-wrapper.side-modal-animate-in.left,.side-modal-content-wrapper.side-modal-animate-in.right{transform:translate(0)}.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 .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;padding:1rem;gap:2rem}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-content-wrapper{max-height:89vh;max-height:89dvh;overflow-y:auto}.side-modal-footer{padding-top:.75rem;padding-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalSwipeable, selector: "modal-swipeable", inputs: ["footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBanner, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }] });
|
|
650
658
|
}
|
|
651
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalSide, decorators: [{
|
|
652
660
|
type: Component,
|
|
653
661
|
args: [{ selector: 'modal-side', imports: [
|
|
654
662
|
NgTemplateOutlet,
|
|
655
663
|
ModalSwipeable,
|
|
656
664
|
NgClass,
|
|
657
665
|
ModalBanner
|
|
658
|
-
], template: "@if(!isSwipeableModalActive()) {\n<div [ngClass]=\"modalClasses\" (click)=\"$event.stopPropagation()\">\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 <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n }\n <div class=\"side-
|
|
659
|
-
}], ctorParameters: () => [], propDecorators: { swipeableComponents: [{
|
|
666
|
+
], template: "@if(!isSwipeableModalActive()) {\n<div [ngClass]=\"modalClasses\" (click)=\"$event.stopPropagation()\">\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 <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n }\n <div class=\"side-modal-content-wrapper\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n @if (footerTemplate()) {\n <div class=\"side-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n</div>\n} @else {\n<modal-swipeable [footerTemplate]=\"footerTemplate()\" [config]=\"config()\" [isOpen]=\"innerIsOpen\" [isAnimated]=\"isAnimated()\"\n [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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;background:var(--modal_bg, #ffffff);box-shadow:0 0 15px #0000004d;z-index:1050;overflow-y:auto;max-width:85vw;max-width:85dvw;display:flex;flex-direction:column;transition:transform .3s ease-in-out}.side-modal-content-wrapper.left{left:0;transform:translate(-100%)}.side-modal-content-wrapper.right{right:0;transform:translate(100%)}.side-modal-content-wrapper.side-modal-animate-in.left,.side-modal-content-wrapper.side-modal-animate-in.right{transform:translate(0)}.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 .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;padding:1rem;gap:2rem}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-content-wrapper{max-height:89vh;max-height:89dvh;overflow-y:auto}.side-modal-footer{padding-top:.75rem;padding-bottom:1rem}\n"] }]
|
|
667
|
+
}], ctorParameters: () => [], propDecorators: { 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 }] }], isSwipeableModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSwipeableModalActive", 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"] }], swipeableComponents: [{
|
|
660
668
|
type: ViewChildren,
|
|
661
669
|
args: [ModalSwipeable]
|
|
662
670
|
}] } });
|
|
@@ -688,6 +696,7 @@ class GenericModalComponent {
|
|
|
688
696
|
isSide = false;
|
|
689
697
|
hasBanner = false;
|
|
690
698
|
hasDefaultContentWrapperClass = false;
|
|
699
|
+
footerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
|
|
691
700
|
isConfirmCloseModalOpen = false;
|
|
692
701
|
isSpecialMobileOverflowHandlingEnabled = false;
|
|
693
702
|
isScrollDisabled = false;
|
|
@@ -783,6 +792,11 @@ class GenericModalComponent {
|
|
|
783
792
|
this.isSide = this.config?.style.position === "left" || this.config?.style.position === "right";
|
|
784
793
|
}
|
|
785
794
|
//#endregion
|
|
795
|
+
//#region Public Template Methods
|
|
796
|
+
setFooterTemplate(template) {
|
|
797
|
+
this.footerTemplate.set(template);
|
|
798
|
+
}
|
|
799
|
+
//#endregion
|
|
786
800
|
//#region Closing Methods
|
|
787
801
|
close(state = "cancel", result = undefined, fromInsideInteraction = false, forceClose = false) {
|
|
788
802
|
if (this.isConfirmCloseModalOpen)
|
|
@@ -887,18 +901,18 @@ class GenericModalComponent {
|
|
|
887
901
|
swipeableModal.isSwipingVerticallyFinished = isFinished;
|
|
888
902
|
}
|
|
889
903
|
}
|
|
890
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
891
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
904
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GenericModalComponent, isStandalone: true, selector: "generic-modal", outputs: { afterClose: "afterClose" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: 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 || isSwipeableModalActive)) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide) {\n <modal-side [footerTemplate]=\"footerTemplate()\" [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n </ng-container>\n </modal-side>\n }\n @case (isCentered) {\n <modal-centered [footerTemplate]=\"footerTemplate()\" [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n </ng-container>\n </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: "modal-centered", inputs: ["footerTemplate", "config", "isOpen", "isAnimated", "isSwipeableModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close", "onBackdropClick"] }, { kind: "component", type: ModalSide, selector: "modal-side", inputs: ["footerTemplate", "config", "isOpen", "isAnimated", "isSwipeableModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close"] }, { kind: "component", type: ModalBackdrop, selector: "modal-backdrop", inputs: ["isAnimated", "isOpen"], outputs: ["click"] }] });
|
|
892
906
|
}
|
|
893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GenericModalComponent, decorators: [{
|
|
894
908
|
type: Component,
|
|
895
909
|
args: [{ selector: "generic-modal", imports: [
|
|
896
910
|
NgTemplateOutlet,
|
|
897
911
|
ModalCentered,
|
|
898
912
|
ModalSide,
|
|
899
913
|
ModalBackdrop
|
|
900
|
-
], template: "@if (config?.style?.hasBackdrop && (isSide || isSwipeableModalActive)) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide) {\n <modal-side [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n </ng-container>\n </modal-side>\n }\n @case (isCentered) {\n <modal-centered [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n </ng-container>\n </modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template>" }]
|
|
901
|
-
}], ctorParameters: () => [], propDecorators: { modalContainer: [{
|
|
914
|
+
], template: "@if (config?.style?.hasBackdrop && (isSide || isSwipeableModalActive)) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide) {\n <modal-side [footerTemplate]=\"footerTemplate()\" [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n </ng-container>\n </modal-side>\n }\n @case (isCentered) {\n <modal-centered [footerTemplate]=\"footerTemplate()\" [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n </ng-container>\n </modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template>" }]
|
|
915
|
+
}], ctorParameters: () => [], propDecorators: { afterClose: [{ type: i0.Output, args: ["afterClose"] }], modalContainer: [{
|
|
902
916
|
type: ViewChild,
|
|
903
917
|
args: ["modalContainer", { static: true }]
|
|
904
918
|
}], sideModalComponents: [{
|
|
@@ -920,6 +934,28 @@ const LOWER_CHARACTER_CAP = 33;
|
|
|
920
934
|
const MID_CHARACTER_CAP = 49;
|
|
921
935
|
const UPPER_CHARACTER_CAP = 60;
|
|
922
936
|
|
|
937
|
+
class ModalFooterDirective {
|
|
938
|
+
templateRef = inject(TemplateRef);
|
|
939
|
+
modal = inject(GenericModalComponent, { optional: true });
|
|
940
|
+
constructor() {
|
|
941
|
+
if (this.modal) {
|
|
942
|
+
this.modal.setFooterTemplate(this.templateRef);
|
|
943
|
+
}
|
|
944
|
+
else {
|
|
945
|
+
console.warn(GenericModalWarnings.FOOTER_DIRECTIVE_OUTSIDE_MODAL);
|
|
946
|
+
}
|
|
947
|
+
}
|
|
948
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
949
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: ModalFooterDirective, isStandalone: true, selector: "[modalFooter]", ngImport: i0 });
|
|
950
|
+
}
|
|
951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalFooterDirective, decorators: [{
|
|
952
|
+
type: Directive,
|
|
953
|
+
args: [{
|
|
954
|
+
selector: '[modalFooter]',
|
|
955
|
+
standalone: true
|
|
956
|
+
}]
|
|
957
|
+
}], ctorParameters: () => [] });
|
|
958
|
+
|
|
923
959
|
/*
|
|
924
960
|
* Public API Surface of modal
|
|
925
961
|
*/
|
|
@@ -928,5 +964,5 @@ const UPPER_CHARACTER_CAP = 60;
|
|
|
928
964
|
* Generated bundle index. Do not edit.
|
|
929
965
|
*/
|
|
930
966
|
|
|
931
|
-
export { EMPTY_STRING, GENERIC_MODAL_DATA, GENERIC_MODAL_DEFAULT_ANIM_DURATION, GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE, GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL, GENERIC_MODAL_DEFAULT_INTERNAL_ANIM_DURATION, GENERIC_MODAL_DOWN_SWIPE_LIMIT, GENERIC_MODAL_SWIPE_VELOCITY_THRESHOLD, GENERIC_MODAL_UP_SWIPE_LIMIT, GenericModal, GenericModalComponent, GenericModalConfig, GenericModalErrors, GenericModalRef, GenericModalService, GenericModalState, GenericModalStyleConfig, GenericModalWarnings, LOWER_CHARACTER_CAP, LOWEST_CHARACTER_CAP, MID_CHARACTER_CAP, ModalBackdrop, ModalBanner, ModalCentered, ModalSide, ModalSwipeable, UPPER_CHARACTER_CAP };
|
|
967
|
+
export { EMPTY_STRING, GENERIC_MODAL_DATA, GENERIC_MODAL_DEFAULT_ANIM_DURATION, GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE, GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL, GENERIC_MODAL_DEFAULT_INTERNAL_ANIM_DURATION, GENERIC_MODAL_DOWN_SWIPE_LIMIT, GENERIC_MODAL_SWIPE_VELOCITY_THRESHOLD, GENERIC_MODAL_UP_SWIPE_LIMIT, GenericModal, GenericModalComponent, GenericModalConfig, GenericModalErrors, GenericModalRef, GenericModalService, GenericModalState, GenericModalStyleConfig, GenericModalWarnings, LOWER_CHARACTER_CAP, LOWEST_CHARACTER_CAP, MID_CHARACTER_CAP, ModalBackdrop, ModalBanner, ModalCentered, ModalFooterDirective, ModalSide, ModalSwipeable, UPPER_CHARACTER_CAP };
|
|
932
968
|
//# sourceMappingURL=filip.mazev-modal.mjs.map
|