@ipi-soft/ng-components
Version:
Custom Angular Components
66 lines (62 loc) • 8.32 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ContentChild, ViewChild, Input, Output } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import * as i1 from '@ipi-soft/ng-components/services';
class IpiDialogComponent {
constructor(elementRef, overlayService) {
this.elementRef = elementRef;
this.overlayService = overlayService;
this.closeIcon = false;
this.closeIconClick = new EventEmitter();
}
ngAfterViewInit() {
this.overlayService.appendToOverlay(this.elementRef.nativeElement, true);
}
ngOnDestroy() {
this.overlayService.removeFromOverlay(this.elementRef.nativeElement);
}
onCloseIconClick() {
this.closeIconClick.emit();
}
handleKeydown(event) {
if (!(document.activeElement === this.closeIconTemplate?.nativeElement)) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.closeIconClick.emit();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiDialogComponent, deps: [{ token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiDialogComponent, isStandalone: true, selector: "ipi-dialog", inputs: { closeIcon: "closeIcon" }, outputs: { closeIconClick: "closeIconClick" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "closeIconTemplate", first: true, predicate: ["closeIcon"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--ipi-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--ipi-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--ipi-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--ipi-dialog-close-icon-hover-color, #000000)}.title{color:var(--ipi-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--ipi-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-dialog', imports: [
NgTemplateOutlet,
], template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"dialog\">\n @if (closeIcon) {\n <div #closeIcon tabindex=\"0\" class=\"close-icon\" (keydown)=\"handleKeydown($event)\" (click)=\"onCloseIconClick()\">\n <svg width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5 5 15M15 15 5 5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n \n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n \n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-dialog-backdrop-background, #0B1222);opacity:.5}.container{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;pointer-events:all;align-items:center;justify-content:center}.dialog{width:calc(100% - 48px);max-width:var(--ipi-dialog-max-width, 432px);max-height:calc(100% - 48px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;background-color:var(--ipi-dialog-background, #FFFFFF);padding:40px}.close-icon{width:20px;height:20px;position:absolute;top:20px;right:20px;cursor:pointer}.close-icon svg path{stroke:var(--ipi-dialog-close-icon-color, #000000)}.close-icon:hover svg path{stroke:var(--ipi-dialog-close-icon-hover-color, #000000)}.title{color:var(--ipi-dialog-title-color, #0B1222);text-align:center;font-size:28px;font-weight:600;margin-bottom:12px}.description{color:var(--ipi-dialog-description-color, #5D6068);text-align:center}.content{width:100%;overflow-y:auto}.description:not(:empty),.content:not(:empty){margin-bottom:24px}:host-context(.mobile) .dialog>.actions{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OverlayService }], propDecorators: { title: [{
type: ContentChild,
args: ['title']
}], description: [{
type: ContentChild,
args: ['description']
}], content: [{
type: ContentChild,
args: ['content']
}], actions: [{
type: ContentChild,
args: ['actions']
}], closeIconTemplate: [{
type: ViewChild,
args: ['closeIcon']
}], closeIcon: [{
type: Input
}], closeIconClick: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { IpiDialogComponent };
//# sourceMappingURL=ipi-soft-ng-components-dialog.mjs.map