@ddiazr/modal-generic 0.0.1

package/README.md

@@ -0,0 +1,79 @@
+# Generic Modal
+
+Modal dinamico Angular 21+
+
+## Instalación
+
+```bash
+npm install @ddiazr/modal-generic
+```
+
+## Peer Dependencies
+
+```bash
+npm i bootstrap @fortawesome/fontawesome-free
+```
+
+## Campos
+
+| Propiedad    | Tipo      | Obligatorio | Descripción                                                          |
+| ------------ | --------- | ----------- | -------------------------------------------------------------------- |
+| `textTitle`  | `string`  | ❌ No       | Campo para darle un titulo al modal                                  |
+| `modalSize`  | `string`  | ❌ No       | Por defecto lg pero le puedes mandar sm,md,xl                        |
+| `showFooter` | `boolean` | ❌ No       | Muestra el footer por si quieres agregar algo en el footer del modal |
+
+## Uso básico
+
+```typescript
+import { ModalGeneric } from '@ddiazr/modal-generic';
+
+@Component({
+  imports: [ModalGeneric],
+  template: `
+    @if (showModal()) {
+      <mdl-modal-generic
+        textTitle="Mi titulo"
+        [showFooter]="false"
+        modalSize="md"
+      >
+        <ng-container buttonclose>
+          <button type="button" class="btn-close py-0" (click)="showModal.set(false)"></button>
+        </ng-container>
+
+        <ng-container body>
+          INCRUSTA TU HTML QUE NECESITES
+        </ng-container>
+
+        <ng-container footer>
+          INCRUSTA TU HTML QUE NECESITES SI ES SHOWFOOTER VA TRUE
+        </ng-container>
+      </mdl-modal-generic>
+    }
+  `,
+})
+export class AppComponent {
+  showModal signal<boolean>(false)
+
+}
+```
+
+## Configuración de estilos
+
+En tu `angular.json`:
+
+```json
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.min.css",
+  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+]
+```
+
+## Licencia
+
+MIT
+
+# Source files
+
+src/
+_.ts
+!_.d.ts

package/fesm2022/ddiazr-modal-generic.mjs

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+import { input, inject, ViewChild, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
+
+class ModalGeneric {
+    textTitle = input('', ...(ngDevMode ? [{ debugName: "textTitle" }] : []));
+    modalSize = input('lg', ...(ngDevMode ? [{ debugName: "modalSize" }] : []));
+    showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    FullScreen = input(false, ...(ngDevMode ? [{ debugName: "FullScreen" }] : []));
+    modal;
+    modalService = inject(NgbModal);
+    config = inject(NgbModalConfig);
+    contentTemplate;
+    constructor() {
+        this.config.backdrop = 'static';
+        this.config.keyboard = false;
+    }
+    ngAfterViewInit() {
+        this.modal = this.modalService.open(this.contentTemplate, {
+            size: this.modalSize(),
+            fullscreen: this.FullScreen(),
+        });
+    }
+    ngOnDestroy() {
+        if (this.modal) {
+            this.modal.close(); // Cierra el modal
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalGeneric, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ModalGeneric, isStandalone: true, selector: "mdl-modal-generic", inputs: { textTitle: { classPropertyName: "textTitle", publicName: "textTitle", isSignal: true, isRequired: false, transformFunction: null }, modalSize: { classPropertyName: "modalSize", publicName: "modalSize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, FullScreen: { classPropertyName: "FullScreen", publicName: "FullScreen", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<ng-template #content let-modal>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header\">\r\n      <h1 class=\"modal-title fs-5\" id=\"xlModalLabel\">{{ textTitle() }}</h1>\r\n      <ng-content select=\"[buttonclose]\"></ng-content>\r\n    </div>\r\n    <div class=\"modal-body dark-modal\">\r\n      <ng-content select=\"[body]\"></ng-content>\r\n    </div>\r\n    @if (showFooter()) {\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[footer]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalGeneric, decorators: [{
+            type: Component,
+            args: [{ selector: 'mdl-modal-generic', imports: [CommonModule], template: "<ng-template #content let-modal>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header\">\r\n      <h1 class=\"modal-title fs-5\" id=\"xlModalLabel\">{{ textTitle() }}</h1>\r\n      <ng-content select=\"[buttonclose]\"></ng-content>\r\n    </div>\r\n    <div class=\"modal-body dark-modal\">\r\n      <ng-content select=\"[body]\"></ng-content>\r\n    </div>\r\n    @if (showFooter()) {\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[footer]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { textTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "textTitle", required: false }] }], modalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalSize", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], FullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "FullScreen", required: false }] }], contentTemplate: [{
+                type: ViewChild,
+                args: ['content']
+            }] } });
+
+/*
+ * Public API Surface of modal-generic
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ModalGeneric };
+//# sourceMappingURL=ddiazr-modal-generic.mjs.map

package/fesm2022/ddiazr-modal-generic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ddiazr-modal-generic.mjs","sources":["../../../projects/modal-generic/src/lib/modal-generic.ts","../../../projects/modal-generic/src/lib/modal-generic.html","../../../projects/modal-generic/src/public-api.ts","../../../projects/modal-generic/src/ddiazr-modal-generic.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewChild,\r\n  TemplateRef,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { NgbModal, NgbModalRef, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';\r\n@Component({\r\n  selector: 'mdl-modal-generic',\r\n  imports: [CommonModule],\r\n  templateUrl: './modal-generic.html',\r\n  styles: ``,\r\n})\r\nexport class ModalGeneric {\r\n  textTitle = input<string>('');\r\n  modalSize = input<string>('lg');\r\n  showFooter = input<boolean>(true);\r\n  FullScreen = input<boolean>(false);\r\n\r\n  modal?: NgbModalRef;\r\n\r\n  modalService = inject(NgbModal);\r\n  config = inject(NgbModalConfig);\r\n  @ViewChild('content') contentTemplate!: TemplateRef<any>;\r\n  constructor() {\r\n    this.config.backdrop = 'static';\r\n    this.config.keyboard = false;\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.modal = this.modalService.open(this.contentTemplate, {\r\n      size: this.modalSize(),\r\n      fullscreen: this.FullScreen(),\r\n    });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.modal) {\r\n      this.modal.close(); // Cierra el modal\r\n    }\r\n  }\r\n}\r\n","<ng-template #content let-modal>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header\">\r\n      <h1 class=\"modal-title fs-5\" id=\"xlModalLabel\">{{ textTitle() }}</h1>\r\n      <ng-content select=\"[buttonclose]\"></ng-content>\r\n    </div>\r\n    <div class=\"modal-body dark-modal\">\r\n      <ng-content select=\"[body]\"></ng-content>\r\n    </div>\r\n    @if (showFooter()) {\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[footer]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n","/*\r\n * Public API Surface of modal-generic\r\n */\r\n\r\nexport * from './lib/modal-generic';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAea,YAAY,CAAA;AACvB,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,qDAAC;AAC7B,IAAA,SAAS,GAAG,KAAK,CAAS,IAAI,qDAAC;AAC/B,IAAA,UAAU,GAAG,KAAK,CAAU,IAAI,sDAAC;AACjC,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,sDAAC;AAElC,IAAA,KAAK;AAEL,IAAA,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC/B,IAAA,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC;AACT,IAAA,eAAe;AACrC,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK;IAC9B;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACxD,YAAA,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE;AACtB,YAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC9B,SAAA,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACrB;IACF;uGA3BW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfzB,4iBAgBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDLY,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,SAAS;+BACE,mBAAmB,EAAA,OAAA,EACpB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,4iBAAA,EAAA;;sBActB,SAAS;uBAAC,SAAS;;;AEzBtB;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ddiazr/modal-generic",
+  "version": "0.0.1",
+  "description": "Modal generico donde puedes agregar header, body o footer a tu gusto",
+  "author": {
+    "name": "Dany Díaz",
+    "email": "danylen1@hotmail.com"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "bootstrap": "^5.3.8",
+    "@fortawesome/fontawesome-free": "^7.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ddiazr-modal-generic.mjs",
+  "typings": "types/ddiazr-modal-generic.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ddiazr-modal-generic.d.ts",
+      "default": "./fesm2022/ddiazr-modal-generic.mjs"
+    }
+  }
+}

package/types/ddiazr-modal-generic.d.ts

@@ -0,0 +1,21 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { NgbModalRef, NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
+
+declare class ModalGeneric {
+    textTitle: _angular_core.InputSignal<string>;
+    modalSize: _angular_core.InputSignal<string>;
+    showFooter: _angular_core.InputSignal<boolean>;
+    FullScreen: _angular_core.InputSignal<boolean>;
+    modal?: NgbModalRef;
+    modalService: NgbModal;
+    config: NgbModalConfig;
+    contentTemplate: TemplateRef<any>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalGeneric, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalGeneric, "mdl-modal-generic", never, { "textTitle": { "alias": "textTitle"; "required": false; "isSignal": true; }; "modalSize": { "alias": "modalSize"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "FullScreen": { "alias": "FullScreen"; "required": false; "isSignal": true; }; }, {}, never, ["[buttonclose]", "[body]", "[footer]"], true, never>;
+}
+
+export { ModalGeneric };