sa-modals
Version:
Angular Modal Library: A versatile and accessible modal component for Angular applications, designed to enhance user experience with smooth animations and responsive design. This library leverages Angular's CDK to create dynamic overlays, ensuring seamles
27 lines • 5.81 kB
JavaScript
import { Component, Input } from '@angular/core';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class HeaderComponent {
constructor() {
this.custom = false;
this.hideCLoseBtn = false;
this.status = new Subject();
}
close() {
this.status.next(false);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: HeaderComponent, selector: "modal-header", inputs: { header: "header", custom: "custom", hideCLoseBtn: "hideCLoseBtn" }, ngImport: i0, template: "<div class=\"sa-modal-header\" *ngIf=\"!custom else customeHeader\">\r\n <h3>{{header}}</h3>\r\n <button *ngIf=\"!hideCLoseBtn\" role=\"button\" type=\"button\" (click)=\"close()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" hight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 18L18 6M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n</div>\r\n<ng-template #customeHeader>\r\n <ng-content />\r\n</ng-template>", styles: [".sa-modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--modal-border-color);padding:16px;background-color:var(--modal-bg-color)}.sa-modal-header h3{font-size:20px;font-weight:700}.sa-modal-header button{padding:4px;border:1px solid var(--modal-border-color);border-radius:var(--radius)}.sa-modal-header button:hover{background-color:var(--neutral-50)}.sa-modal-header button:active{background-color:var(--neutral-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'modal-header', template: "<div class=\"sa-modal-header\" *ngIf=\"!custom else customeHeader\">\r\n <h3>{{header}}</h3>\r\n <button *ngIf=\"!hideCLoseBtn\" role=\"button\" type=\"button\" (click)=\"close()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" hight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 18L18 6M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n</div>\r\n<ng-template #customeHeader>\r\n <ng-content />\r\n</ng-template>", styles: [".sa-modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--modal-border-color);padding:16px;background-color:var(--modal-bg-color)}.sa-modal-header h3{font-size:20px;font-weight:700}.sa-modal-header button{padding:4px;border:1px solid var(--modal-border-color);border-radius:var(--radius)}.sa-modal-header button:hover{background-color:var(--neutral-50)}.sa-modal-header button:active{background-color:var(--neutral-100)}\n"] }]
}], propDecorators: { header: [{
type: Input
}], custom: [{
type: Input
}], hideCLoseBtn: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NhLW1vZGFsL3NyYy9saWIvY29tcG9uZW50cy9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NhLW1vZGFsL3NyYy9saWIvY29tcG9uZW50cy9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7OztBQU8vQixNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQU9XLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFDeEIsaUJBQVksR0FBWSxLQUFLLENBQUM7UUFDdkMsV0FBTSxHQUFHLElBQUksT0FBTyxFQUFXLENBQUM7S0FJakM7SUFIQyxLQUFLO1FBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQzs4R0FQVSxlQUFlO2tHQUFmLGVBQWUsa0lDUjVCLDhpQkFXYzs7MkZESEQsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxjQUFjOzhCQUtmLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtb2RhbC1oZWFkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9oZWFkZXIuY29tcG9uZW50LnNjc3MnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgSGVhZGVyQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBoZWFkZXIhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgY3VzdG9tOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgaGlkZUNMb3NlQnRuOiBib29sZWFuID0gZmFsc2U7XHJcbiAgc3RhdHVzID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcclxuICBjbG9zZSgpIHtcclxuICAgIHRoaXMuc3RhdHVzLm5leHQoZmFsc2UpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwic2EtbW9kYWwtaGVhZGVyXCIgKm5nSWY9XCIhY3VzdG9tIGVsc2UgY3VzdG9tZUhlYWRlclwiPlxyXG4gIDxoMz57e2hlYWRlcn19PC9oMz5cclxuICA8YnV0dG9uICpuZ0lmPVwiIWhpZGVDTG9zZUJ0blwiIHJvbGU9XCJidXR0b25cIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cImNsb3NlKClcIj5cclxuICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMjRcIiBoaWdodD1cIjI0XCIgdmlld0JveD1cIjAgMCAyNCAyNFwiIGZpbGw9XCJub25lXCI+XHJcbiAgICAgIDxwYXRoIGQ9XCJNNiAxOEwxOCA2TTYgNkwxOCAxOFwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjEuNVwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIlxyXG4gICAgICAgIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgLz5cclxuICAgIDwvc3ZnPlxyXG4gIDwvYnV0dG9uPlxyXG48L2Rpdj5cclxuPG5nLXRlbXBsYXRlICNjdXN0b21lSGVhZGVyPlxyXG4gIDxuZy1jb250ZW50IC8+XHJcbjwvbmctdGVtcGxhdGU+Il19