@ziadshalaby/ngx-zs-component 3.2.6 → 3.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1438,6 +1438,8 @@ class Modal {
|
|
|
1438
1438
|
title = input('Modal Title', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1439
1439
|
modalStyle = input('primary', ...(ngDevMode ? [{ debugName: "modalStyle" }] : []));
|
|
1440
1440
|
showCancelIcon = input(true, ...(ngDevMode ? [{ debugName: "showCancelIcon" }] : []));
|
|
1441
|
+
showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
|
|
1442
|
+
showBody = input(true, ...(ngDevMode ? [{ debugName: "showBody" }] : []));
|
|
1441
1443
|
showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
|
|
1442
1444
|
cancelConfig = input(...(ngDevMode ? [undefined, { debugName: "cancelConfig" }] : []));
|
|
1443
1445
|
confirmConfig = input(...(ngDevMode ? [undefined, { debugName: "confirmConfig" }] : []));
|
|
@@ -1515,12 +1517,12 @@ class Modal {
|
|
|
1515
1517
|
this.close();
|
|
1516
1518
|
}
|
|
1517
1519
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1518
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n (click)=\"onOverlayClick($event)\"\n role=\"presentation\"\n [attr.inert]=\"isOpen() ? null : ''\"\n >\n\n <!-- ========================= Modal Container ========================= -->\n <div\n class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n [ngClass]=\"[\n 'zs:border', \n palette().border,\n palette().text,\n open() ? 'animate-modalIn' : 'animate-modalOut'\n ]\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'modal-title'\"\n [attr.aria-describedby]=\"'modal-body'\"\n tabindex=\"0\"\n (keydown.escape)=\"close()\"\n >\n\n <!-- ========================= Modal Header ========================= -->\n <div\n
|
|
1520
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showBody: { classPropertyName: "showBody", publicName: "showBody", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n (click)=\"onOverlayClick($event)\"\n role=\"presentation\"\n [attr.inert]=\"isOpen() ? null : ''\"\n >\n\n <!-- ========================= Modal Container ========================= -->\n <div\n class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n [ngClass]=\"[\n 'zs:border', \n palette().border,\n palette().text,\n open() ? 'animate-modalIn' : 'animate-modalOut'\n ]\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'modal-title'\"\n [attr.aria-describedby]=\"'modal-body'\"\n tabindex=\"0\"\n (keydown.escape)=\"close()\"\n >\n\n <!-- ========================= Modal Header ========================= -->\n @if(showHeader()) {\n <div\n class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n [class]=\"palette().border\"\n >\n <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n {{ title() }}\n </h3>\n @if(showCancelIcon()) {\n <button \n class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer\n zs:focus:outline-hidden zs:focus-visible:ring-2 \n zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n\n <!-- ========================= Modal Body ========================= -->\n @if(showBody()) {\n <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n <ng-content></ng-content>\n </div>\n }\n\n <!-- ========================= Modal Footer ========================= -->\n @if (showFooter()) {\n <div\n class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n [class]=\"palette().border\"\n >\n @if (cancelMerged().show) {\n <ZS-button\n [btnStyle]=\"cancelMerged().btnStyle\"\n variant=\"solid\"\n type=\"button\"\n (clickedEv)=\"cancelEv.emit()\"\n [icon]=\"cancelMerged().icon\"\n [disabled]=\"cancelMerged().disabled\"\n [size]=\"cancelMerged().size\"\n [variant]=\"cancelMerged().variant\"\n aria-label=\"Cancel\"\n >\n {{ cancelMerged().text}}\n </ZS-button>\n }\n @if (confirmMerged().show) {\n <ZS-button\n type=\"button\"\n [btnStyle]=\"confirmMerged().btnStyle\"\n (clickedEv)=\"confirmEv.emit()\"\n [icon]=\"confirmMerged().icon\"\n [disabled]=\"confirmMerged().disabled\"\n [size]=\"confirmMerged().size\"\n [variant]=\"confirmMerged().variant\"\n aria-label=\"Confirm\"\n >\n {{ confirmMerged().text}}\n </ZS-button>\n }\n </div>\n }\n </div>\n </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"], dependencies: [{ kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1519
1521
|
}
|
|
1520
1522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, decorators: [{
|
|
1521
1523
|
type: Component,
|
|
1522
|
-
args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n (click)=\"onOverlayClick($event)\"\n role=\"presentation\"\n [attr.inert]=\"isOpen() ? null : ''\"\n >\n\n <!-- ========================= Modal Container ========================= -->\n <div\n class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n [ngClass]=\"[\n 'zs:border', \n palette().border,\n palette().text,\n open() ? 'animate-modalIn' : 'animate-modalOut'\n ]\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'modal-title'\"\n [attr.aria-describedby]=\"'modal-body'\"\n tabindex=\"0\"\n (keydown.escape)=\"close()\"\n >\n\n <!-- ========================= Modal Header ========================= -->\n <div\n
|
|
1523
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalStyle", required: false }] }], showCancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelIcon", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], cancelConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelConfig", required: false }] }], confirmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmConfig", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlay", required: false }] }], confirmEv: [{ type: i0.Output, args: ["confirmEv"] }], cancelEv: [{ type: i0.Output, args: ["cancelEv"] }], closedEv: [{ type: i0.Output, args: ["closedEv"] }], onEscape: [{
|
|
1524
|
+
args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n (click)=\"onOverlayClick($event)\"\n role=\"presentation\"\n [attr.inert]=\"isOpen() ? null : ''\"\n >\n\n <!-- ========================= Modal Container ========================= -->\n <div\n class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n [ngClass]=\"[\n 'zs:border', \n palette().border,\n palette().text,\n open() ? 'animate-modalIn' : 'animate-modalOut'\n ]\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'modal-title'\"\n [attr.aria-describedby]=\"'modal-body'\"\n tabindex=\"0\"\n (keydown.escape)=\"close()\"\n >\n\n <!-- ========================= Modal Header ========================= -->\n @if(showHeader()) {\n <div\n class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n [class]=\"palette().border\"\n >\n <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n {{ title() }}\n </h3>\n @if(showCancelIcon()) {\n <button \n class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer\n zs:focus:outline-hidden zs:focus-visible:ring-2 \n zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n\n <!-- ========================= Modal Body ========================= -->\n @if(showBody()) {\n <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n <ng-content></ng-content>\n </div>\n }\n\n <!-- ========================= Modal Footer ========================= -->\n @if (showFooter()) {\n <div\n class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n [class]=\"palette().border\"\n >\n @if (cancelMerged().show) {\n <ZS-button\n [btnStyle]=\"cancelMerged().btnStyle\"\n variant=\"solid\"\n type=\"button\"\n (clickedEv)=\"cancelEv.emit()\"\n [icon]=\"cancelMerged().icon\"\n [disabled]=\"cancelMerged().disabled\"\n [size]=\"cancelMerged().size\"\n [variant]=\"cancelMerged().variant\"\n aria-label=\"Cancel\"\n >\n {{ cancelMerged().text}}\n </ZS-button>\n }\n @if (confirmMerged().show) {\n <ZS-button\n type=\"button\"\n [btnStyle]=\"confirmMerged().btnStyle\"\n (clickedEv)=\"confirmEv.emit()\"\n [icon]=\"confirmMerged().icon\"\n [disabled]=\"confirmMerged().disabled\"\n [size]=\"confirmMerged().size\"\n [variant]=\"confirmMerged().variant\"\n aria-label=\"Confirm\"\n >\n {{ confirmMerged().text}}\n </ZS-button>\n }\n </div>\n }\n </div>\n </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"] }]
|
|
1525
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalStyle", required: false }] }], showCancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelIcon", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBody", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], cancelConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelConfig", required: false }] }], confirmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmConfig", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlay", required: false }] }], confirmEv: [{ type: i0.Output, args: ["confirmEv"] }], cancelEv: [{ type: i0.Output, args: ["cancelEv"] }], closedEv: [{ type: i0.Output, args: ["closedEv"] }], onEscape: [{
|
|
1524
1526
|
type: HostListener,
|
|
1525
1527
|
args: ['document:keydown.escape']
|
|
1526
1528
|
}] } });
|