@yoursabhishekabhi7/modal-popup-ng-all
Version:
Reusable Angular modal popup components supporting Angular 14 to 18
603 lines (585 loc) • 47.8 kB
JavaScript
import * as i0 from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ViewContainerRef, Component, Input, ViewChild, InjectionToken, Injector, Injectable, TemplateRef, ElementRef, EventEmitter, Output } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import * as i1 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { Subject } from 'rxjs';
import * as $$1 from 'jquery';
class SharedHomeModule {
ScriptElement;
JquerySrciptElement;
constructor() {
// bootstrap .css add in head
this.JquerySrciptElement = document.createElement('script');
this.JquerySrciptElement.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js';
document.body.appendChild(this.JquerySrciptElement);
// bootstrap script.js add in body
this.ScriptElement = document.createElement("script");
this.ScriptElement.src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js";
document.body.appendChild(this.ScriptElement);
// bootstrap .css add in head
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
document.head.appendChild(linkElement);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SharedHomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SharedHomeModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
OverlayModule], exports: [CommonModule,
FormsModule,
BrowserAnimationsModule,
ReactiveFormsModule,
OverlayModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SharedHomeModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
OverlayModule, CommonModule,
FormsModule,
BrowserAnimationsModule,
ReactiveFormsModule,
OverlayModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SharedHomeModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
OverlayModule
],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [
CommonModule,
FormsModule,
BrowserAnimationsModule,
ReactiveFormsModule,
OverlayModule
],
declarations: [],
}]
}], ctorParameters: () => [] });
class TemplateWrapperComponent {
template = null;
container;
ngAfterViewInit() {
if (this.template) {
this.container.createEmbeddedView(this.template);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TemplateWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TemplateWrapperComponent, selector: "app-template-wrapper", inputs: { template: "template" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #container></ng-container>`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TemplateWrapperComponent, decorators: [{
type: Component,
args: [{
selector: 'app-template-wrapper',
template: `<ng-container #container></ng-container>`,
}]
}], propDecorators: { template: [{
type: Input
}], container: [{
type: ViewChild,
args: ['container', { read: ViewContainerRef, static: true }]
}] } });
const DATA_MODAL_DIALOG_DATA = new InjectionToken('DATA_MODAL_DIALOG_DATA');
class ModalService {
overlay;
injector;
overlayRefMap = new Map();
componentRef;
modalOpenSubject = new Subject();
modalOpen$ = this.modalOpenSubject.asObservable();
RAMDOM_ID = '';
constructor(overlay, injector) {
this.overlay = overlay;
this.injector = injector;
}
open(component, options) {
const modalId = options.id || this.generateUniqueModalId();
this.RAMDOM_ID = modalId;
const overlayConfig = {
hasBackdrop: true,
backdropClass: 'dark-backdrop',
panelClass: 'custom-panel',
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
};
const injector = Injector.create({
providers: [
{ provide: DATA_MODAL_DIALOG_DATA, useValue: options?.data },
],
parent: this.injector,
});
const overlayRef = this.overlay.create(overlayConfig);
const modalPortal = new ComponentPortal(AngularModalPopup, null, injector);
this.componentRef = overlayRef.attach(modalPortal);
overlayRef.hostElement.setAttribute('id', modalId);
if (options.title)
this.componentRef.instance.title = options.title;
if (options.body)
this.componentRef.instance.body = options.body;
this.componentRef.instance.injectComponent(options, component, modalId);
this.modalOpenSubject.next(true);
this.overlayRefMap.set(modalId, overlayRef);
// Handle backdrop click
overlayRef.backdropClick().subscribe(() => {
this.close(modalId);
});
// Assign the close method to the modal component
this.componentRef.instance.close = (id) => {
this.close(id);
};
return this.componentRef.instance;
}
close(modalId) {
const overlayRef = this.overlayRefMap.get(modalId);
if (overlayRef) {
overlayRef.dispose();
this.overlayRefMap.delete(modalId);
this.modalOpenSubject.next(false);
}
}
generateUniqueModalId() {
let id = '';
do {
id = this.randomAlphaNumeric(10);
} while (this.overlayRefMap.has(id));
return id;
}
randomAlphaNumeric(length) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }] });
class AngularModalPopup {
componentFactoryResolver;
modalService;
injector;
elementRef;
title;
body;
RAMDOM_ID = -1;
options;
dynamicComponentContainer;
isVisible = false;
content;
constructor(componentFactoryResolver, modalService, injector, elementRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.modalService = modalService;
this.injector = injector;
this.elementRef = elementRef;
}
ngOnInit() {
this.modalService.modalOpen$.subscribe(isOpen => {
this.isVisible = isOpen;
});
}
onAttached() { }
// Method to dynamically inject another component into the modal
injectComponent(options, componentOrTemplate, RAMDOM_ID) {
this.title = options.title;
this.body = options.body;
this.options = options;
this.dynamicComponentContainer.clear(); // Clear the container
this.RAMDOM_ID = RAMDOM_ID;
if (componentOrTemplate instanceof TemplateRef) {
const componentRef_1 = this.dynamicComponentContainer.createComponent(TemplateWrapperComponent);
componentRef_1.instance.template = componentOrTemplate;
if (componentRef_1?.location) {
const popupHeader = componentRef_1?.location?.nativeElement?.querySelector('popup-header');
if (popupHeader) {
const content = document.querySelector('.btn-controller');
if (content) {
content.insertBefore(popupHeader, content.firstChild);
const existingPopupHeaders = content.querySelectorAll('popup-header');
if (existingPopupHeaders.length > 1) {
for (let i = 1; i < existingPopupHeaders.length; i++) {
existingPopupHeaders[i].remove(); // Remove old instances, keep the first one
}
}
}
}
}
}
else {
const factory = this.componentFactoryResolver.resolveComponentFactory(componentOrTemplate);
const componentRef_2 = this.dynamicComponentContainer.createComponent(factory);
if (componentRef_2?.location) {
const popupHeader = componentRef_2?.location?.nativeElement?.querySelector('popup-header');
if (popupHeader) {
const content = document.querySelector('.btn-controller');
if (content) {
content.insertBefore(popupHeader, content.firstChild);
const existingPopupHeaders = content.querySelectorAll('popup-header');
if (existingPopupHeaders.length > 1) {
for (let i = 1; i < existingPopupHeaders.length; i++) {
existingPopupHeaders[i].remove(); // Remove old instances, keep the first one
}
}
}
}
}
}
}
ngAfterViewInit() { }
close(RAMDOM_ID) {
this.dynamicComponentContainer.remove();
this.dynamicComponentContainer.clear(); // Clear the container
}
ClosePopup() {
this.close(this.RAMDOM_ID);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AngularModalPopup, deps: [{ token: i0.ComponentFactoryResolver }, { token: ModalService }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AngularModalPopup, selector: "modal-popup", inputs: { title: "title", body: "body", RAMDOM_ID: "RAMDOM_ID" }, host: { attributes: { "tabindex": "-1" }, classAttribute: "mat-mdc-dialog-container mdc-dialog" }, viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: `
<div class="angular-mat-modal">
<div class="angular-bg" [ngClass]="{'bg-hide':options?.bghide==true}" [ngStyle]="{
'min-width': options?.size?.minWidth,
'width': options?.size?.width,
'max-width': options?.size?.maxWidth,
'min-height': options?.size?.minHeight,
'height': options?.size?.height,
'max-height': options?.size?.maxHeight
}">
<div class="header" [ngClass]="{'hide-header':options?.headerhide==true}">
<h2 [style]="options?.HeaderTitleStyle">{{ title }}</h2>
<div class="btn-controller" [style]="options?.HeaderButtonControllerStyle">
<button [style]="options?.HeaderCloseButtonStyle" class="close-btn" (click)="close(this.RAMDOM_ID)">X</button>
</div>
</div>
<div class="components-append" [ngStyle]="options?.bodyStyle">
<ng-container #dynamicComponentContainer></ng-container> <!-- Container for dynamic component -->
</div>
</div>
</div>
`, isInline: true, styles: ["::ng-deep .cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%;position:fixed}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1;background:#00000049}::ng-deep .cdk-global-overlay-wrapper{height:100vh;padding:0;width:100vw;position:absolute;top:0;left:0;z-index:1000;display:flex}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%;padding:30px}.angular-bg{display:flex;min-width:500px;max-width:100%;height:auto;overflow-x:hidden;overflow-y:auto;outline:0;flex-direction:column;gap:20px;background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 0 14px 8px #bfbfbf;margin:auto}.angular-bg .header{display:flex;width:100%;flex-direction:row;gap:20px;background-color:#fff;border-bottom:2px solid #afafaf;padding-bottom:10px}.angular-bg .header .close-btn{margin:auto 0 auto auto;background:transparent;border-radius:5px;padding:0!important;font-size:15px;border:2px solid #a2a2a2;cursor:pointer;width:80px}.angular-bg .header .close-btn:hover{color:#5f9ea0}.btn-controller{margin:auto 0 auto auto;display:flex}.bg-hide{background:transparent!important}.hide-header{display:none!important;opacity:0!important;visibility:hidden!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AngularModalPopup, decorators: [{
type: Component,
args: [{ selector: 'modal-popup', template: `
<div class="angular-mat-modal">
<div class="angular-bg" [ngClass]="{'bg-hide':options?.bghide==true}" [ngStyle]="{
'min-width': options?.size?.minWidth,
'width': options?.size?.width,
'max-width': options?.size?.maxWidth,
'min-height': options?.size?.minHeight,
'height': options?.size?.height,
'max-height': options?.size?.maxHeight
}">
<div class="header" [ngClass]="{'hide-header':options?.headerhide==true}">
<h2 [style]="options?.HeaderTitleStyle">{{ title }}</h2>
<div class="btn-controller" [style]="options?.HeaderButtonControllerStyle">
<button [style]="options?.HeaderCloseButtonStyle" class="close-btn" (click)="close(this.RAMDOM_ID)">X</button>
</div>
</div>
<div class="components-append" [ngStyle]="options?.bodyStyle">
<ng-container #dynamicComponentContainer></ng-container> <!-- Container for dynamic component -->
</div>
</div>
</div>
`, host: {
'class': 'mat-mdc-dialog-container mdc-dialog',
'tabindex': '-1'
}, styles: ["::ng-deep .cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%;position:fixed}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1;background:#00000049}::ng-deep .cdk-global-overlay-wrapper{height:100vh;padding:0;width:100vw;position:absolute;top:0;left:0;z-index:1000;display:flex}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%;padding:30px}.angular-bg{display:flex;min-width:500px;max-width:100%;height:auto;overflow-x:hidden;overflow-y:auto;outline:0;flex-direction:column;gap:20px;background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 0 14px 8px #bfbfbf;margin:auto}.angular-bg .header{display:flex;width:100%;flex-direction:row;gap:20px;background-color:#fff;border-bottom:2px solid #afafaf;padding-bottom:10px}.angular-bg .header .close-btn{margin:auto 0 auto auto;background:transparent;border-radius:5px;padding:0!important;font-size:15px;border:2px solid #a2a2a2;cursor:pointer;width:80px}.angular-bg .header .close-btn:hover{color:#5f9ea0}.btn-controller{margin:auto 0 auto auto;display:flex}.bg-hide{background:transparent!important}.hide-header{display:none!important;opacity:0!important;visibility:hidden!important}\n"] }]
}], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: ModalService }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { title: [{
type: Input
}], body: [{
type: Input
}], RAMDOM_ID: [{
type: Input
}], dynamicComponentContainer: [{
type: ViewChild,
args: ['dynamicComponentContainer', { read: ViewContainerRef, static: true }]
}], content: [{
type: ViewChild,
args: ['content', { read: ElementRef }]
}] } });
class ModalOpenComponent {
title = '';
body = '';
constructor() { }
ngOnInit() {
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalOpenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ModalOpenComponent, selector: "lib-modal-open", inputs: { title: "title", body: "body" }, ngImport: i0, template: "<div class=\"angular-mat-modal\">\r\n <div class=\"angular-bg\">\r\n <div class=\"header\">\r\n <h2>{{ title }}</h2>\r\n <!-- <button class=\"close-btn\" (click)=\"closeModal()\">Close</button> -->\r\n </div>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalOpenComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-modal-open', template: "<div class=\"angular-mat-modal\">\r\n <div class=\"angular-bg\">\r\n <div class=\"header\">\r\n <h2>{{ title }}</h2>\r\n <!-- <button class=\"close-btn\" (click)=\"closeModal()\">Close</button> -->\r\n </div>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>" }]
}], ctorParameters: () => [], propDecorators: { title: [{
type: Input
}], body: [{
type: Input
}] } });
class BootStarpAccordionComponent {
AccordionItem = [];
constructor() { }
ngOnInit() {
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStarpAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStarpAccordionComponent, selector: "boot-starp-accordion", inputs: { AccordionItem: "AccordionItem" }, ngImport: i0, template: "<div class=\"accordion\" id=\"accordionExample\">\r\n <div class=\"accordion-item\" *ngFor=\"let item of this.AccordionItem;let i=index\">\r\n <h2 class=\"accordion-header\" id=\"headingOne\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\"\r\n aria-expanded=\"true\" aria-controls=\"collapseOne\">\r\n {{item?.title}}\r\n </button>\r\n </h2>\r\n <div id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\"\r\n data-bs-parent=\"#accordionExample\">\r\n <div class=\"accordion-body\">\r\n <p *ngFor=\"let accordionbody of item?.items;let i=index\">{{accordionbody}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStarpAccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-starp-accordion', template: "<div class=\"accordion\" id=\"accordionExample\">\r\n <div class=\"accordion-item\" *ngFor=\"let item of this.AccordionItem;let i=index\">\r\n <h2 class=\"accordion-header\" id=\"headingOne\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\"\r\n aria-expanded=\"true\" aria-controls=\"collapseOne\">\r\n {{item?.title}}\r\n </button>\r\n </h2>\r\n <div id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\"\r\n data-bs-parent=\"#accordionExample\">\r\n <div class=\"accordion-body\">\r\n <p *ngFor=\"let accordionbody of item?.items;let i=index\">{{accordionbody}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>" }]
}], ctorParameters: () => [], propDecorators: { AccordionItem: [{
type: Input,
args: ['AccordionItem']
}] } });
class BootStarpCarouselComponent {
constructor() { }
ngOnInit() {
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStarpCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStarpCarouselComponent, selector: "boot-starp-carousel", ngImport: i0, template: "<div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item active\">\r\n <img src=\"...\" class=\"d-block w-100\" alt=\"...\">\r\n </div>\r\n <div class=\"carousel-item\">\r\n <img src=\"...\" class=\"d-block w-100\" alt=\"...\">\r\n </div>\r\n <div class=\"carousel-item\">\r\n <img src=\"...\" class=\"d-block w-100\" alt=\"...\">\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleControls\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"visually-hidden\">Previous</span>\r\n </button>\r\n <button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleControls\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"visually-hidden\">Next</span>\r\n </button>\r\n</div>", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStarpCarouselComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-starp-carousel', template: "<div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item active\">\r\n <img src=\"...\" class=\"d-block w-100\" alt=\"...\">\r\n </div>\r\n <div class=\"carousel-item\">\r\n <img src=\"...\" class=\"d-block w-100\" alt=\"...\">\r\n </div>\r\n <div class=\"carousel-item\">\r\n <img src=\"...\" class=\"d-block w-100\" alt=\"...\">\r\n </div>\r\n </div>\r\n <button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleControls\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"visually-hidden\">Previous</span>\r\n </button>\r\n <button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleControls\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"visually-hidden\">Next</span>\r\n </button>\r\n</div>" }]
}], ctorParameters: () => [] });
class BootStrapDropdownsComponent {
constructor() { }
ngOnInit() {
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapDropdownsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStrapDropdownsComponent, selector: "boot-strap-dropdowns", ngImport: i0, template: "<!-- Example single danger button -->\r\n<div class=\"btn-group\">\r\n <button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n Action\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item\" href=\"#\">Action</a></li>\r\n <li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\r\n <li><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\r\n <li>\r\n <hr class=\"dropdown-divider\">\r\n </li>\r\n <li><a class=\"dropdown-item\" href=\"#\">Separated link</a></li>\r\n </ul>\r\n</div>", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapDropdownsComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-strap-dropdowns', template: "<!-- Example single danger button -->\r\n<div class=\"btn-group\">\r\n <button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n Action\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item\" href=\"#\">Action</a></li>\r\n <li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\r\n <li><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\r\n <li>\r\n <hr class=\"dropdown-divider\">\r\n </li>\r\n <li><a class=\"dropdown-item\" href=\"#\">Separated link</a></li>\r\n </ul>\r\n</div>" }]
}], ctorParameters: () => [] });
class BootStrapDynamicFormComponent {
form = new FormGroup({}); // Initialize with an empty FormGroup
formData = [];
event = new EventEmitter();
ngOnInit() {
}
ngOnChanges(changes) {
this.form = this.createFormGroup(this.formData);
}
createFormGroup(formData) {
const group = {};
formData.forEach(field => {
const control = new FormControl(field.value || '', field.required ? Validators.required : null);
group[field.name] = control;
});
return new FormGroup(group);
}
onSubmit() {
console.log(this.form?.value);
this.event.emit(this.form);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStrapDynamicFormComponent, selector: "boot-strap-dynamic-form", inputs: { formData: "formData" }, outputs: { event: "event" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n <div *ngFor=\"let field of formData\">\r\n <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n <mat-label>{{ field?.label }}</mat-label>\r\n <ng-container [ngSwitch]=\"field?.type\">\r\n <input *ngSwitchCase=\"'text'\" matInput [formControlName]=\"field.name\" type=\"text\" />\r\n <input *ngSwitchCase=\"'email'\" matInput [formControlName]=\"field.name\" type=\"email\" />\r\n <input *ngSwitchCase=\"'number'\" matInput [formControlName]=\"field.name\" type=\"number\" />\r\n <mat-select *ngSwitchCase=\"'select'\" [formControlName]=\"field.name\">\r\n <mat-option *ngFor=\"let option of field?.options\" [value]=\"option\">\r\n {{ option }}\r\n </mat-option>\r\n </mat-select>\r\n </ng-container>\r\n <mat-error *ngIf=\"form.get(field.name)?.invalid && form?.get(field.name)?.touched\">\r\n {{ field?.label }} is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form?.invalid\">\r\n Submit\r\n </button>\r\n</form>", styles: [".full-width{width:100%;margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapDynamicFormComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-strap-dynamic-form', template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n <div *ngFor=\"let field of formData\">\r\n <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n <mat-label>{{ field?.label }}</mat-label>\r\n <ng-container [ngSwitch]=\"field?.type\">\r\n <input *ngSwitchCase=\"'text'\" matInput [formControlName]=\"field.name\" type=\"text\" />\r\n <input *ngSwitchCase=\"'email'\" matInput [formControlName]=\"field.name\" type=\"email\" />\r\n <input *ngSwitchCase=\"'number'\" matInput [formControlName]=\"field.name\" type=\"number\" />\r\n <mat-select *ngSwitchCase=\"'select'\" [formControlName]=\"field.name\">\r\n <mat-option *ngFor=\"let option of field?.options\" [value]=\"option\">\r\n {{ option }}\r\n </mat-option>\r\n </mat-select>\r\n </ng-container>\r\n <mat-error *ngIf=\"form.get(field.name)?.invalid && form?.get(field.name)?.touched\">\r\n {{ field?.label }} is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form?.invalid\">\r\n Submit\r\n </button>\r\n</form>", styles: [".full-width{width:100%;margin-bottom:16px}\n"] }]
}], propDecorators: { formData: [{
type: Input,
args: ["formData"]
}], event: [{
type: Output,
args: ["event"]
}] } });
class BootStrapModalComponent {
ModalTitle = '';
constructor() { }
ngOnInit() {
}
get OpenModel() {
$$1('#CustomModel').removeClass("hide");
return $$1('#CustomModel').addClass("show");
}
get CloseModel() {
$$1('#CustomModel').removeClass("show");
return $$1('#CustomModel').addClass("hide");
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStrapModalComponent, selector: "boot-strap-modal", inputs: { ModalTitle: "ModalTitle" }, ngImport: i0, template: "<div class=\"modal\" tabindex=\"-1\" id=\"CustomModel\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{this.ModalTitle}}</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"this.CloseModel\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"this.CloseModel\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"this.CloseModel\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".modal.show{display:block}.modal.hide{display:none}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapModalComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-strap-modal', template: "<div class=\"modal\" tabindex=\"-1\" id=\"CustomModel\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{this.ModalTitle}}</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"this.CloseModel\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"this.CloseModel\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"this.CloseModel\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".modal.show{display:block}.modal.hide{display:none}\n"] }]
}], ctorParameters: () => [], propDecorators: { ModalTitle: [{
type: Input,
args: ["ModalTitle"]
}] } });
class BootStrapOffcanvasComponent {
TitleText = '';
TimeStamp = '';
constructor() { }
ngOnInit() {
}
get OpenModel() {
$('#customoffcanvas').removeClass('hide');
return $('#customoffcanvas').addClass('show');
}
get hideModel() {
$('#customoffcanvas').removeClass('show');
return $('#customoffcanvas').addClass('hide');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapOffcanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStrapOffcanvasComponent, selector: "boot-strap-offcanvas", inputs: { TitleText: "TitleText", TimeStamp: "TimeStamp" }, ngImport: i0, template: "<div class=\"custom-offcanvas\" id=\"customoffcanvas\">\r\n <button type=\"button\" class=\"btn-close text-reset\" aria-label=\"Close\" (click)=\"this.hideModel\"></button>\r\n <div class=\"offcanvas-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".custom-offcanvas{position:fixed;background:#0000;width:100vw;top:0;right:0;height:100vh;box-shadow:-6px 2px 12px 2px #f4f4f4;z-index:9999;display:none;transform:translate3d(-46px,0,0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.btn-close{position:absolute;right:5px;top:5px}.offcanvas-body{background:#fff;width:380px;margin:0 0 auto auto;height:100vh}.custom-offcanvas.show{display:block;transform:translateZ(0)}.custom-offcanvas.hide{display:none}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapOffcanvasComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-strap-offcanvas', template: "<div class=\"custom-offcanvas\" id=\"customoffcanvas\">\r\n <button type=\"button\" class=\"btn-close text-reset\" aria-label=\"Close\" (click)=\"this.hideModel\"></button>\r\n <div class=\"offcanvas-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".custom-offcanvas{position:fixed;background:#0000;width:100vw;top:0;right:0;height:100vh;box-shadow:-6px 2px 12px 2px #f4f4f4;z-index:9999;display:none;transform:translate3d(-46px,0,0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.btn-close{position:absolute;right:5px;top:5px}.offcanvas-body{background:#fff;width:380px;margin:0 0 auto auto;height:100vh}.custom-offcanvas.show{display:block;transform:translateZ(0)}.custom-offcanvas.hide{display:none}\n"] }]
}], ctorParameters: () => [], propDecorators: { TitleText: [{
type: Input,
args: ["TitleText"]
}], TimeStamp: [{
type: Input,
args: ["TimeStamp"]
}] } });
class BootStrapToastsComponent {
TitleText = '';
TimeStamp = '';
ShowTost = false;
SHOW = false;
constructor() { }
ngOnInit() {
}
ngOnChanges(changes) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
const change = changes[propName];
if (change.currentValue !== undefined) {
this[propName] = change.currentValue;
}
}
}
if (this.ShowTost == true) {
this.OpenModel;
}
}
get OpenModel() {
$$1('.toast').removeClass('hide');
return $$1('.toast').addClass('show');
}
get hideModel() {
$$1('.toast').removeClass('show');
return $$1('.toast').addClass('hide');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapToastsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStrapToastsComponent, selector: "boot-strap-toasts", inputs: { TitleText: "TitleText", TimeStamp: "TimeStamp", ShowTost: "ShowTost" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0 p-3\" style=\"z-index: 11\">\r\n <div id=\"liveToast\" class=\"toast\" [ngClass]=\"{'show':this.ShowTost==true,'hide':this.ShowTost==false}\" role=\"alert\"\r\n aria-live=\"assertive\" aria-atomic=\"true\">\r\n <div class=\"toast-header\">\r\n <strong class=\"me-auto\">{{this.TitleText}}</strong>\r\n <small style=\"margin-left: 20px;\">{{this.TimeStamp}}</small>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"hideModel\"></button>\r\n </div>\r\n <div class=\"toast-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: [".toast{max-width:450px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapToastsComponent, decorators: [{
type: Component,
args: [{ selector: 'boot-strap-toasts', template: "<div class=\"position-fixed bottom-0 end-0 p-3\" style=\"z-index: 11\">\r\n <div id=\"liveToast\" class=\"toast\" [ngClass]=\"{'show':this.ShowTost==true,'hide':this.ShowTost==false}\" role=\"alert\"\r\n aria-live=\"assertive\" aria-atomic=\"true\">\r\n <div class=\"toast-header\">\r\n <strong class=\"me-auto\">{{this.TitleText}}</strong>\r\n <small style=\"margin-left: 20px;\">{{this.TimeStamp}}</small>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"hideModel\"></button>\r\n </div>\r\n <div class=\"toast-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: [".toast{max-width:450px;width:100%}\n"] }]
}], ctorParameters: () => [], propDecorators: { TitleText: [{
type: Input,
args: ["TitleText"]
}], TimeStamp: [{
type: Input,
args: ["TimeStamp"]
}], ShowTost: [{
type: Input,
args: ["ShowTost"]
}] } });
class PopUpHeaderComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopUpHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PopUpHeaderComponent, selector: "popup-header", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopUpHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'popup-header', template: `<ng-content></ng-content>` }]
}] });
class ModalPopUpModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalPopUpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ModalPopUpModule, declarations: [BootStarpAccordionComponent,
BootStarpCarouselComponent,
BootStrapDropdownsComponent,
BootStrapDynamicFormComponent,
BootStrapModalComponent,
BootStrapOffcanvasComponent,
BootStrapToastsComponent,
AngularModalPopup,
ModalOpenComponent,
TemplateWrapperComponent,
PopUpHeaderComponent], imports: [CommonModule,
OverlayModule,
SharedHomeModule], exports: [BootStarpAccordionComponent,
BootStarpCarouselComponent,
BootStrapDropdownsComponent,
BootStrapDynamicFormComponent,
BootStrapModalComponent,
BootStrapOffcanvasComponent,
BootStrapToastsComponent,
AngularModalPopup,
ModalOpenComponent,
OverlayModule,
TemplateWrapperComponent,
PopUpHeaderComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalPopUpModule, imports: [CommonModule,
OverlayModule,
SharedHomeModule, OverlayModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalPopUpModule, decorators: [{
type: NgModule,
args: [{
declarations: [
BootStarpAccordionComponent,
BootStarpCarouselComponent,
BootStrapDropdownsComponent,
BootStrapDynamicFormComponent,
BootStrapModalComponent,
BootStrapOffcanvasComponent,
BootStrapToastsComponent,
AngularModalPopup,
ModalOpenComponent,
TemplateWrapperComponent,
PopUpHeaderComponent
],
imports: [
CommonModule,
OverlayModule,
SharedHomeModule
],
exports: [
BootStarpAccordionComponent,
BootStarpCarouselComponent,
BootStrapDropdownsComponent,
BootStrapDynamicFormComponent,
BootStrapModalComponent,
BootStrapOffcanvasComponent,
BootStrapToastsComponent,
AngularModalPopup,
ModalOpenComponent,
OverlayModule,
TemplateWrapperComponent,
PopUpHeaderComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
/*
* Public API Surface of modal-pop-up
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularModalPopup, BootStarpAccordionComponent, BootStarpCarouselComponent, BootStrapDropdownsComponent, BootStrapDynamicFormComponent, BootStrapModalComponent, BootStrapOffcanvasComponent, BootStrapToastsComponent, DATA_MODAL_DIALOG_DATA, ModalOpenComponent, ModalPopUpModule, ModalService, PopUpHeaderComponent, SharedHomeModule, TemplateWrapperComponent };
//# sourceMappingURL=yoursabhishekabhi7-modal-popup-ng-all.mjs.map