@ziadshalaby/ngx-zs-component 3.2.5 → 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.
@@ -1232,20 +1232,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
1232
1232
  }]
1233
1233
  }] });
1234
1234
 
1235
- // ==============================================
1236
- // Types
1237
- // ==============================================
1238
- // ==============================================
1239
- // Zform Class
1240
- // ==============================================
1241
1235
  class Form {
1242
1236
  fields;
1243
- touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
1237
+ initialValues;
1244
1238
  constructor(initial) {
1239
+ this.initialValues = { ...initial };
1245
1240
  this.fields = Object.keys(initial).reduce((acc, key) => {
1246
1241
  acc[key] = signal({
1247
1242
  value: initial[key],
1248
1243
  valid: false,
1244
+ touched: false,
1249
1245
  });
1250
1246
  return acc;
1251
1247
  }, {});
@@ -1253,8 +1249,9 @@ class Form {
1253
1249
  // ==============================================
1254
1250
  // Field Accessors
1255
1251
  // ==============================================
1256
- set(key, value, valid = true) {
1257
- this.fields[key].set({ value, valid });
1252
+ set(key, value, valid = true, touched = true) {
1253
+ const current = this.fields[key]();
1254
+ this.fields[key].set({ value, valid, touched: touched || current.touched });
1258
1255
  }
1259
1256
  patch(key, partial) {
1260
1257
  const current = this.fields[key]();
@@ -1266,18 +1263,26 @@ class Form {
1266
1263
  // ==============================================
1267
1264
  // Form State & Validation
1268
1265
  // ==============================================
1269
- allFilled() {
1270
- const result = {};
1266
+ markAllTouched() {
1271
1267
  for (const key in this.fields) {
1272
- if (this.fields.hasOwnProperty(key)) {
1273
- const val = this.fields[key]().value;
1274
- result[key] = val !== null && val !== undefined && val !== '';
1275
- }
1268
+ const field = this.fields[key]();
1269
+ this.fields[key].set({ ...field, touched: true });
1276
1270
  }
1277
- return result;
1278
1271
  }
1279
- markAllTouched() {
1280
- this.touched.set(true);
1272
+ allTouched() {
1273
+ return Object.keys(this.fields).every(key => this.fields[key]().touched);
1274
+ }
1275
+ // ==============================================
1276
+ // Reset
1277
+ // ==============================================
1278
+ reset() {
1279
+ for (const key in this.fields) {
1280
+ this.fields[key].set({
1281
+ value: this.initialValues[key],
1282
+ valid: false,
1283
+ touched: false,
1284
+ });
1285
+ }
1281
1286
  }
1282
1287
  // ==============================================
1283
1288
  // Data Extraction & Submission
@@ -1300,21 +1305,25 @@ class Form {
1300
1305
  }
1301
1306
  return result;
1302
1307
  }
1308
+ allFilled() {
1309
+ const result = {};
1310
+ for (const key in this.fields) {
1311
+ if (this.fields.hasOwnProperty(key)) {
1312
+ const val = this.fields[key]().value;
1313
+ result[key] = val !== null && val !== undefined && val !== '';
1314
+ }
1315
+ }
1316
+ return result;
1317
+ }
1303
1318
  submit(callback, allowEmptyFields = [], allowInvalidFields = []) {
1304
1319
  this.markAllTouched();
1305
1320
  const filled = this.allFilled();
1306
1321
  const validations = this.getValidations();
1307
- // =============================
1308
- // Check FILL
1309
- // =============================
1310
1322
  const allFilled = Object.keys(filled).every((key) => {
1311
1323
  if (allowEmptyFields.includes(key))
1312
1324
  return true;
1313
1325
  return filled[key];
1314
1326
  });
1315
- // =============================
1316
- // Check VALID
1317
- // =============================
1318
1327
  const allValid = Object.keys(validations).every((key) => {
1319
1328
  if (allowInvalidFields.includes(key))
1320
1329
  return true;
@@ -1429,6 +1438,8 @@ class Modal {
1429
1438
  title = input('Modal Title', ...(ngDevMode ? [{ debugName: "title" }] : []));
1430
1439
  modalStyle = input('primary', ...(ngDevMode ? [{ debugName: "modalStyle" }] : []));
1431
1440
  showCancelIcon = input(true, ...(ngDevMode ? [{ debugName: "showCancelIcon" }] : []));
1441
+ showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
1442
+ showBody = input(true, ...(ngDevMode ? [{ debugName: "showBody" }] : []));
1432
1443
  showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
1433
1444
  cancelConfig = input(...(ngDevMode ? [undefined, { debugName: "cancelConfig" }] : []));
1434
1445
  confirmConfig = input(...(ngDevMode ? [undefined, { debugName: "confirmConfig" }] : []));
@@ -1506,12 +1517,12 @@ class Modal {
1506
1517
  this.close();
1507
1518
  }
1508
1519
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
1509
- 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 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 <!-- ========================= Modal Body ========================= -->\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 <!-- ========================= 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"] }] });
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"] }] });
1510
1521
  }
1511
1522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, decorators: [{
1512
1523
  type: Component,
1513
- 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 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 <!-- ========================= Modal Body ========================= -->\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 <!-- ========================= 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"] }]
1514
- }], 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: [{
1515
1526
  type: HostListener,
1516
1527
  args: ['document:keydown.escape']
1517
1528
  }] } });