pharedata-ng-components
Version:
Angular alert/dialog component library with Material Design support
1 lines • 14.7 kB
Source Map (JSON)
{"version":3,"file":"pharedata-ng-components.mjs","sources":["../../../projects/pharedata-ng-components/src/lib/alert/alert.service.ts","../../../projects/pharedata-ng-components/src/lib/alert/alert-custom.component.ts","../../../projects/pharedata-ng-components/src/lib/pharedata-ng-components.ts","../../../projects/pharedata-ng-components/src/public-api.ts","../../../projects/pharedata-ng-components/src/pharedata-ng-components.ts"],"sourcesContent":["import { Injectable, Injector } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\n\nexport interface AlertConfig {\n title?: string;\n content?: string;\n icon?: string;\n acceptLabel?: string;\n cancelLabel?: string;\n acceptFunc?: () => void;\n cancelFunc?: () => void;\n closeFunc?: () => void;\n showGreyBackground?: () => void;\n hideGreyBackground?: () => void;\n scrollTo?: (x: number, y: number) => void;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class CustomAlert {\n constructor(private dialog: MatDialog) {}\n\n /**\n * Show an alert using the Material Dialog approach\n */\n showAlert(\n acceptFunc?: () => void,\n cancelFunc?: () => void,\n closeFunc?: () => void,\n showGreyBackground?: () => void,\n hideGreyBackground?: () => void,\n scrollTo?: (x: number, y: number) => void,\n title: string = \"!Exito!\",\n content: string = \"Este es el contenido del modal\",\n icon: string = \"success\",\n acceptLabel: string = \"Aceptar\",\n cancelLabel: string = \"Cancelar\"\n ) {\n // For now, this method is kept for backward compatibility\n // but it's recommended to use the AlertCustomComponent instead\n console.warn('CustomAlert.showAlert() is deprecated. Please use AlertCustomComponent instead.');\n \n // You can implement a fallback here if needed\n return null;\n }\n\n /**\n * Show grey background overlay\n */\n showGreyBackground(): void {\n // This can be implemented if needed for standalone grey background\n }\n\n /**\n * Hide grey background overlay\n */\n hideGreyBackground(): void {\n // This can be implemented if needed for standalone grey background\n }\n}\n","import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnChanges, SimpleChanges, DoCheck } from '@angular/core';\n\n@Component({\n selector: 'lib-custom-alert',\n template: `\n @if (isVisible) {\n <div class=\"alert-overlay\">\n <div class=\"alert-container\">\n <div class=\"close-btn\" (click)=\"close()\"></div>\n <div [class]=\"imgClass\"></div>\n <div class=\"modal-title\">{{title}}</div>\n <div class=\"modal-content\">{{content}}</div>\n <div class=\"modal-hr\"></div>\n <div class=\"modal-actions\">\n <button class=\"modal-button\" (click)=\"accept()\">{{acceptLabel}}</button>\n @if (cancelFunc) {\n <button class=\"modal-button modal-button-hallow\" (click)=\"cancel()\">{{cancelLabel}}</button>\n }\n </div>\n </div>\n </div>\n }\n `,\n encapsulation: ViewEncapsulation.None,\n styles: [`\n .alert-overlay {\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n background-color: rgba(0, 0, 0, 0.5) !important;\n display: flex !important;\n justify-content: center !important;\n align-items: flex-start !important;\n z-index: 9999 !important;\n }\n\n .alert-container {\n width: 280px !important;\n padding: 30px 40px !important;\n background: white !important;\n border-radius: 9px !important;\n position: relative !important;\n max-width: 406px !important;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;\n margin-top: 50px !important;\n }\n\n .close-btn {\n position: absolute !important;\n top: 24px !important;\n right: 18px !important;\n background: url('../../assets/cross.svg') no-repeat center !important;\n border: none !important;\n cursor: pointer !important;\n width: 13px !important;\n height: 13px !important;\n z-index: 1 !important;\n }\n\n .img-container {\n width: 100% !important;\n display: inline-block !important;\n height: 200px !important;\n padding: 0 !important;\n margin: 0 !important;\n background-size: contain !important;\n background-position: center !important;\n }\n\n .img-container.success {\n background: url('../../assets/success.png') no-repeat center !important;\n }\n\n .img-container.important {\n background: url('../../assets/important.png') no-repeat center !important;\n }\n\n .img-container.error {\n background: url('../../assets/error.png') no-repeat center !important;\n }\n\n .modal-title {\n text-align: center !important;\n font-size: 22px !important;\n font-weight: 700 !important;\n margin-top: 0 !important;\n margin-bottom: 16px !important;\n color: #003965 !important;\n font-family: inherit !important;\n }\n\n .modal-content {\n font-size: 14px !important;\n margin-top: 0 !important;\n margin-bottom: 32px !important;\n letter-spacing: normal !important;\n text-align: center !important;\n padding: 0 20px !important;\n font-weight: 500 !important;\n color: #003965 !important;\n line-height: 1.71 !important;\n font-family: inherit !important;\n }\n\n .modal-button {\n background: #003965 !important;\n color: #fff !important;\n width: 280px !important;\n border-radius: 26px !important;\n border: 1px solid transparent !important;\n height: 45px !important;\n font-size: 16px !important;\n font-weight: 700 !important;\n cursor: pointer !important;\n margin-bottom: 15px !important;\n font-family: inherit !important;\n transition: all 0.3s ease !important;\n }\n\n .modal-button:hover {\n opacity: 0.9 !important;\n transform: translateY(-1px) !important;\n }\n\n .modal-button.modal-button-hallow {\n background: white !important;\n color: #003965 !important;\n border: 1px solid #003965 !important;\n }\n\n .modal-button.modal-button-hallow:hover {\n background: #f5f5f5 !important;\n }\n\n .modal-hr {\n width: 280px !important;\n height: 1px !important;\n background: #dee4ea !important;\n margin: 16px 0 !important;\n }\n\n .modal-actions {\n text-align: center !important;\n display: inline-block !important;\n width: 100% !important;\n }\n `]\n})\nexport class AlertCustomComponent implements OnChanges, DoCheck {\n @Input() title: string = \"!Exito!\";\n @Input() content: string = \"Este es el contenido del modal\";\n @Input() icon: string = \"success\";\n @Input() acceptLabel: string = \"Aceptar\";\n @Input() cancelLabel: string = \"Cancelar\";\n @Input() acceptFunc?: () => void;\n @Input() cancelFunc?: () => void;\n @Input() closeFunc?: () => void;\n @Input() showGreyBackground?: () => void;\n @Input() hideGreyBackground?: () => void;\n @Input() scrollTo?: (x: number, y: number) => void;\n @Input() isVisible: boolean = false;\n\n @Output() closed = new EventEmitter<void>();\n @Output() accepted = new EventEmitter<void>();\n @Output() canceled = new EventEmitter<void>();\n\n imgClass: string = \"img-container \";\n private previousIsVisible: boolean = false;\n\n ngOnInit() {\n this.imgClass += this.icon;\n this.previousIsVisible = this.isVisible;\n if (this.isVisible) {\n this.showGreyBackground?.();\n this.scrollTo?.(0, 0);\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n // Handle icon changes\n if (changes['icon']) {\n this.imgClass = \"img-container \" + this.icon;\n }\n \n // Handle isVisible changes\n if (changes['isVisible']) {\n this.handleVisibilityChange();\n }\n \n // Note: Other inputs (title, content, acceptLabel, cancelLabel, functions) \n // are automatically handled by Angular's change detection in the template\n }\n\n ngDoCheck() {\n // Check if isVisible has changed (even if ngOnChanges wasn't triggered)\n if (this.isVisible !== this.previousIsVisible) {\n this.handleVisibilityChange();\n }\n }\n\n private handleVisibilityChange() {\n console.log('Alert visibility changing:', { \n isVisible: this.isVisible, \n previousIsVisible: this.previousIsVisible \n });\n \n if (this.isVisible) {\n console.log('Opening alert modal');\n this.showGreyBackground?.();\n this.scrollTo?.(0, 0);\n } else {\n console.log('Closing alert modal');\n this.hideGreyBackground?.();\n }\n this.previousIsVisible = this.isVisible;\n }\n\n close() {\n this.closeFunc?.();\n this.hideGreyBackground?.();\n this.closed.emit();\n }\n \n cancel() {\n this.cancelFunc?.();\n this.hideGreyBackground?.();\n this.canceled.emit();\n }\n\n accept() {\n this.acceptFunc?.();\n this.hideGreyBackground?.();\n this.accepted.emit();\n }\n\n // Method to show the alert programmatically\n show() {\n this.showGreyBackground?.();\n this.scrollTo?.(0, 0);\n }\n\n // Method to hide the alert programmatically\n hide() {\n this.hideGreyBackground?.();\n }\n}\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'lib-pharedata-ng-components',\n imports: [],\n template: `\n <div>\n <p>pharedata-ng-components works!</p>\n </div>\n `,\n styles: ``\n})\nexport class PharedataNgComponents {\n\n}\n\n// Export alert components and services\nexport {\n CustomAlert,\n AlertCustomComponent\n} from './alert';\n","/*\n * Public API Surface of pharedata-ng-components\n */\n\nexport * from './lib/pharedata-ng-components';\nexport * from './lib/alert';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}