@filip.mazev/modal 0.0.1

package/lib/interfaces/igeneric-modal-component.interface.d.ts

@@ -0,0 +1,28 @@
+import { ComponentRef, OnDestroy, OnInit } from "@angular/core";
+import { Subject, Observable } from "rxjs";
+import { GenericModal } from "../classes/generic-modal";
+import { GenericModalConfig } from "../classes/generic-modal-config";
+import { ModalCloseMode } from "../types/modal.types";
+/**
+ * Interface for the Generic Modal Component
+ * @param {ComponentRef<any>} componentRef (optional) The component reference (the component that is being displayed in the modal), will default to undefined (for non-dynamic modals)
+ * @param {GenericModalConfig} config (optional) The configuration for the modal, will default to default values for the configuration
+ * @param {boolean} isOpen (required) Whether the modal is open or not
+ * @param {number} animationDuration (required) The duration of the animation (in milliseconds)
+ * @param {boolean} isSwipeableModalActive (required) Whether the swipeable modal is active (open) or not
+ * @param {Subject<MouseEvent>} backdropClickSubject (required) The subject for the backdrop click event, will be used to listen for backdrop clicks
+ * @param {Observable<MouseEvent>} backdropClick (required) The observable for the backdrop click event, will be used to listen for backdrop clicks (subscribed to the backdropClickSubject)
+ * @param {Function} closeFunction (optional) The outside function to run when the modal closes (received from the config)
+ * @param {Function} close (required) The function to run when the modal closes, will return the result of the modal
+ */
+export interface IGenericModalComponenet<D = any, R = any, C extends GenericModal<D, R> = GenericModal<D, R>> extends OnInit, OnDestroy {
+    componentRef?: ComponentRef<C>;
+    config?: GenericModalConfig<D>;
+    isOpen: boolean;
+    animationDuration: number;
+    isSwipeableModalActive: boolean;
+    backdropClickSubject: Subject<MouseEvent>;
+    backdropClick: Observable<MouseEvent>;
+    closeFunction?: Function;
+    close: (state: ModalCloseMode, result: R | undefined, fromInsideInteraction: boolean, forceClose: boolean) => void;
+}

package/lib/interfaces/igeneric-modal-config.interface.d.ts

@@ -0,0 +1,45 @@
+import { GenericModal } from "../classes/generic-modal";
+import { IGenericConfirmCloseConfig } from "./igeneric-confirm-close.interface";
+import { IGenericModalStyleConfig } from "./igeneric-modal-style-config.interface";
+/**
+ * IGenericModalConfig<D>, the configuration for the generic modal
+ * @param {boolean} open (optional) Whether the modal should be open or not, will default to true
+ * @param {Function} afterClose (optional) The function to run after the modal closes
+ * @param {IGenericConfirmCloseConfig<ConfirmComponent, ConfirmComponentData>} confirmCloseConfig (optional) The configuration for the confirm close modal, will default to { confirmClose: false }
+ * @param {boolean} disableClose (optional) Whether the modal should be closable or not, will default to false (this applies to the close button and backdrop)
+ * @param {boolean} disableCloseOnBackdropClick (optional) Whether the modal shouldn't be closable when the user clicks on the backdrop, will default to false
+ * @param {boolean} disableCloseOnNavigation (optional) Whether the modal should be closable or not when the user navigates away from the page, will default to false
+ * @param {boolean} enableExtremeOverflowHandling (optional) Whether the modal should enable the extreme overflow handling (may cause issues with keypress registration) or not, will default to false
+ * @param {boolean} webkitOnlyOverflowMobileHandling (optional) Whether the modal should only handle overflow for webkit browsers on mobile or should it handle it for all browsers, will default to true
+ * @param {boolean} closeOnSwipeBack (optional) Whether the modal should close when swiped back on mobile devices, will default to false
+ * @param {D | null} data (optional) The data to pass to the component of the modal, the component needs to have the @Inject(GENERIC_MODAL_DATA) data: any; decorator to receive this data
+ * @param {IGenericModalStyleConfig} style (optional) The style configuration for the modal, will default to an empty object
+ * @param {boolean} showCloseButton (optional) Whether the modal should show a close button or not, will default to true
+ * @param {string} bannerText (optional) The text to display in the banner of the modal
+ * @param {string} bannerTextAnnotatedString (optional) The annotated string (in bold style, in addition to some text) to display in the banner of the modal, will default to an empty string
+ * @param {string[]} bannerIcons (optional) The icons to display in the banner of the modal
+ * @param {string} contentClasses (optional) The classes to apply to the content of the modal
+ * @param {string} contentStyles (optional) The styles to apply to the content of the modal
+ * @param {string} id (optional) The id of the modal (set at the top level of the modal), will default to a random string
+ */
+export interface IGenericModalConfig<D = undefined, ConfirmComponentData = any, ConfirmComponent extends GenericModal<ConfirmComponentData, undefined> = GenericModal<ConfirmComponentData, undefined>> {
+    open?: boolean;
+    afterClose?: Function;
+    confirmCloseConfig?: IGenericConfirmCloseConfig<ConfirmComponentData, ConfirmComponent>;
+    disableClose?: boolean;
+    disableCloseOnBackdropClick?: boolean;
+    disableCloseOnNavigation?: boolean;
+    enableExtremeOverflowHandling?: boolean;
+    webkitOnlyOverflowMobileHandling?: boolean;
+    closeOnSwipeBack?: boolean;
+    data?: D | null;
+    style?: IGenericModalStyleConfig;
+    bannerText?: string;
+    bannerTextAnnotatedString?: string;
+    bannerIcons?: string[];
+    contentClasses?: string;
+    contentStyles?: string;
+    disableConsoleWarnings?: boolean;
+    disableConsoleInfo?: boolean;
+    id?: string;
+}

package/lib/interfaces/igeneric-modal-ref.interface.d.ts

@@ -0,0 +1,25 @@
+import { Observable } from "rxjs";
+import { ComponentRef, Type } from "@angular/core";
+import { GenericModal } from "../classes/generic-modal";
+import { GenericModalConfig } from "../classes/generic-modal-config";
+import { GenericModalComponent } from "../components/generic-modal";
+import { GenericModalState } from "../enums/generic-modal-state.enum";
+import { IGenericCloseResult } from "./igeneric-close-result.interface";
+export interface IGenericModalRef<D = any, R = any, C extends GenericModal<D, R> = GenericModal<D, R>> {
+    modalContainer: Type<GenericModalComponent<D, R, C>>;
+    modalContainerRef: ComponentRef<GenericModalComponent<D, R, C>>;
+    modalContainerElement: HTMLElement;
+    parentElement?: HTMLElement;
+    componentRef: ComponentRef<C>;
+    modalState$(): Observable<GenericModalState>;
+    selfIdentifier: {
+        constructor: Function;
+    };
+    modalConfig?: GenericModalConfig<D>;
+    afterClosed(): Observable<IGenericCloseResult<R>>;
+    backdropClick(): Observable<MouseEvent>;
+    open(): void;
+    close: (state: "confirm" | "cancel", result: R | undefined, forceClose: boolean, fromSelf: boolean, from: {
+        constructor: Function;
+    } | undefined) => void;
+}

package/lib/interfaces/igeneric-modal-service.interface.d.ts

@@ -0,0 +1,22 @@
+import { OnDestroy, Renderer2, ViewContainerRef } from "@angular/core";
+import { ComponentType } from "@angular/cdk/portal";
+import { IGenericModalConfig } from "./igeneric-modal-config.interface";
+import { Observable } from "rxjs";
+import { GenericModalRef } from "../classes/generic-modal-ref";
+import { GenericModalComponent } from "../components/generic-modal";
+export interface IGenericModalService extends OnDestroy {
+    viewContainer?: ViewContainerRef;
+    register: (viewContainer: ViewContainerRef, renderer: Renderer2) => void;
+    open: (component: ComponentType<any>, config?: IGenericModalConfig<any>) => GenericModalRef<any, any, any>;
+    close: (self: {
+        constructor: Function;
+    }, fromCloseFunction: boolean | undefined) => void;
+    closeAll: () => void;
+    get: (self: {
+        constructor: Function;
+    }) => GenericModalRef<any, any, any> | GenericModalComponent<any, any, any> | undefined;
+    getSubscribe(self: {
+        constructor: Function;
+    }): Observable<GenericModalRef<any, any, any> | GenericModalComponent<any, any, any> | undefined>;
+    modalsCount: () => number;
+}

package/lib/interfaces/igeneric-modal-style-config.interface.d.ts

@@ -0,0 +1,28 @@
+import { ModalPoistion } from "../types/modal.types";
+import { IGenericSwipeableModalConfig } from "./igeneric-swipeable-modal-config";
+/**
+ * IGenericModalStyleConfig
+ * @param {center' | 'left' | 'right'} position (optional) The position of the modal (can be center, left, or right), will default to center
+ * @param {boolean} handleMobile (optional) Whether the modal should open in a mobile configuration when going to a certain screen size
+ * @param {boolean} animate (optional) Whether the modal should have animations or not, will default to true
+ * @param {boolean} hasBackdrop (optional) Whether the modal should have a backdrop or not, will default to true
+ * @param {number} closeDelay (optional) The delay in milliseconds before the modal closes, will default to GENERIC_MODAL_DEFAULT_ANIM_DURATION (175)
+ * @param {IGenericSwipeableModalConfig} mobileConfig (optional) The configuration for the swipeable modal, will default to an empty object
+ * @param {boolean} contentWrapper (optional) Whether the content should be wrapped in a default-styled div or not, will default to true
+ * @param {string} wrapperClasses (optional) The classes to apply to the wrapper of the modal
+ * @param {string} wrapperStyles (optional) The styles to apply to the wrapper of the modal
+ * @param {boolean} overrideFullHeight (optional) Whether the modal should override the full height of the modal or not, will default to false
+ */
+export interface IGenericModalStyleConfig {
+    position?: ModalPoistion;
+    handleMobile?: boolean;
+    animate?: boolean;
+    hasBackdrop?: boolean;
+    closeDelay?: number;
+    showCloseButton?: boolean;
+    mobileConfig?: IGenericSwipeableModalConfig;
+    contentWrapper?: boolean;
+    wrapperClasses?: string;
+    wrapperStyles?: string;
+    overrideFullHeight?: boolean;
+}

package/lib/interfaces/igeneric-modal-view.interface.d.ts

@@ -0,0 +1,18 @@
+import { InputSignal, OutputEmitterRef, QueryList } from "@angular/core";
+import { GenericModalConfig } from "../classes/generic-modal-config";
+import { ModalSwipeable } from "../components/views/swipeable/modal-swipeable";
+import { ModalCloseMode } from "../types/modal.types";
+export interface IGenericModalView<D = unknown> {
+    config: InputSignal<GenericModalConfig<D> | undefined>;
+    isOpen: InputSignal<boolean>;
+    isAnimated: InputSignal<boolean>;
+    isSwipeableModalActive: InputSignal<boolean>;
+    animationDuration: InputSignal<number>;
+    hasDefaultContentWrapperClass: InputSignal<boolean>;
+    hasBanner: InputSignal<boolean>;
+    close: OutputEmitterRef<ModalCloseMode | undefined>;
+    swipeableComponents: QueryList<ModalSwipeable>;
+    get modalClasses(): {
+        [key: string]: boolean;
+    };
+}

package/lib/interfaces/igeneric-swipeable-modal-config.d.ts

@@ -0,0 +1,5 @@
+export interface IGenericSwipeableModalConfig {
+    upSwipeLimit?: number;
+    downSwipeLimit?: number;
+    customHeight?: number;
+}

package/lib/services/generic-modal.service.d.ts

@@ -0,0 +1,40 @@
+import { Injector, ViewContainerRef, Renderer2 } from "@angular/core";
+import { Observable } from "rxjs";
+import { GenericModal } from "../classes/generic-modal";
+import { GenericModalRef } from "../classes/generic-modal-ref";
+import { GenericModalComponent } from "../components/generic-modal";
+import { IGenericModalConfig } from "../interfaces/igeneric-modal-config.interface";
+import { IGenericModalService } from "../interfaces/igeneric-modal-service.interface";
+import { ComponentType } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+export declare class GenericModalService implements IGenericModalService {
+    private router;
+    protected injector: Injector;
+    private modals;
+    private modalsSubject;
+    viewContainer?: ViewContainerRef;
+    renderer?: Renderer2;
+    private unsubscribe$;
+    constructor();
+    ngOnDestroy(): void;
+    private createSubscriptions;
+    register(viewContainer: ViewContainerRef, renderer: Renderer2): void;
+    open<D, R, C extends GenericModal<D, R> = GenericModal<D, R>>(component: ComponentType<C>, config?: IGenericModalConfig<D>): GenericModalRef<D, R, C>;
+    close(self: {
+        constructor: Function;
+    }, fromCloseFunction?: boolean | undefined): void;
+    closeAll(onNavigate?: boolean): void;
+    get<D, R, C extends GenericModal<D, R> = GenericModal<D, R>>(self: {
+        constructor: Function;
+    }): GenericModalRef<D, R, C> | GenericModalComponent<D, R, C> | undefined;
+    getSubscribe<D, R, C extends GenericModal<D, R> = GenericModal<D, R>>(self: {
+        constructor: Function;
+    }): Observable<GenericModalRef<D, R, C> | GenericModalComponent<D, R, C> | undefined>;
+    modalsCount(): number;
+    find(self: {
+        constructor: Function;
+    }): boolean;
+    modalRequestedTypeCheck(modal: GenericModalRef | GenericModalComponent | undefined): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GenericModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GenericModalService>;
+}

package/lib/tokens/generic-modal-data.token.d.ts

@@ -0,0 +1,2 @@
+import { InjectionToken } from "@angular/core";
+export declare const GENERIC_MODAL_DATA: InjectionToken<any>;

package/lib/types/modal.types.d.ts

@@ -0,0 +1,2 @@
+export type ModalCloseMode = "cancel" | "confirm";
+export type ModalPoistion = "center" | "right" | "left";

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@filip.mazev/modal",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^21.1.1",
+    "@angular/core": "^21.1.1",
+    "@filip.mazev/common-parts": "^0.0.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/filip.mazev-modal.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/filip.mazev-modal.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,30 @@
+export * from './lib/components/generic-modal';
+export * from './lib/components/views/swipeable/modal-swipeable';
+export * from './lib/components/views/side/modal-side';
+export * from './lib/components/views/centered/modal-centered';
+export * from './lib/components/views/backdrop/modal-backdrop';
+export * from './lib/components/views/banner/modal-banner';
+export * from './lib/services/generic-modal.service';
+export * from './lib/classes/generic-modal';
+export * from './lib/classes/generic-modal-config';
+export * from './lib/classes/generic-modal-ref';
+export * from './lib/classes/generic-modal-style.config';
+export * from './lib/interfaces/igeneric-close-result.interface';
+export * from './lib/interfaces/igeneric-confirm-close.interface';
+export * from './lib/interfaces/igeneric-confirm-modal-data.interface';
+export * from './lib/interfaces/igeneric-modal-component.interface';
+export * from './lib/interfaces/igeneric-modal-config.interface';
+export * from './lib/interfaces/igeneric-modal-ref.interface';
+export * from './lib/interfaces/igeneric-modal-service.interface';
+export * from './lib/interfaces/igeneric-modal-style-config.interface';
+export * from './lib/interfaces/igeneric-modal-view.interface';
+export * from './lib/interfaces/igeneric-swipeable-modal-config';
+export * from './lib/constants/generic-modal-animation.constants';
+export * from './lib/constants/generic-modal-common.constants';
+export * from './lib/constants/generic-modal-swipe.constants';
+export * from './lib/constants/generic-modal-text.constants';
+export * from './lib/enums/generic-modal-errors.enum';
+export * from './lib/enums/generic-modal-warnings.enum';
+export * from './lib/enums/generic-modal-state.enum';
+export * from './lib/tokens/generic-modal-data.token';
+export * from './lib/types/modal.types';

package/src/assets/default-theme.css

@@ -0,0 +1,5 @@
+:root {
+    --modal_bg: #f0f0f0;
+    --text_primary: #2d2d2d;
+    --swipe_line_color: #cccccc;
+}