@es.framework/ng.ui.core 2.0.64 → 2.0.66

package/fesm2022/es.framework-ng.ui.core-column-settings-popover.mjs

@@ -145,7 +145,7 @@ class ColumnSettingsPopoverComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnSettingsPopoverComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ColumnSettingsPopoverComponent, isStandalone: true, selector: "lib-column-settings-popover", inputs: { fixedColumns: "fixedColumns", toggleableColumns: "toggleableColumns", tableId: "tableId", selectedToggleableColumns: "selectedToggleableColumns" }, outputs: { selectedToggleableColumnsChange: "selectedToggleableColumnsChange" }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-popover #op appendTo=\"body\" styleClass=\"w-80\">\n\n\n\n\n    <!-- \u2B50 \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \"\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644\" \u2B50 -->\n    <div class=\"flex items-center mb-3\">\n        <p-checkbox\n            [(ngModel)]=\"allColumnsSelected\"\n            [binary]=\"true\"\n            inputId=\"selectAllColumns\"\n        ></p-checkbox>\n        <label for=\"selectAllColumns\" class=\"ml-2 cursor-pointer font-medium text-color-secondary\">\n            {{ 'COMMON.SELECT_ALL' | translate }}\n        </label>\n    </div>\n\n    <p-orderList\n      [value]=\"_displayOrderListColumns\"\n      header=\"{{ 'COMMON.REORDER_AND_SELECT_COLUMNS' | translate }}\"\n      [listStyle]=\"{'height':'250px'}\"\n      [responsive]=\"true\"\n      [dragdrop]=\"true\"\n      (onReorder)=\"onOrderListReorder($event)\"\n      styleClass=\"w-full\"\n    >\n      <ng-template let-col pTemplate=\"item\">\n        <div class=\"p-2 border rounded-md flex items-center justify-between w-full\">\n          <!-- \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \u0644\u0644\u062A\u062D\u0643\u0645 \u0641\u064A \u0627\u0644\u0631\u0624\u064A\u0629 -->\n          <p-checkbox\n            [(ngModel)]=\"col.isSelected\"\n            (ngModelChange)=\"onColumnVisibilityChange(col)\"\n            [binary]=\"true\"\n            class=\"mr-4\"\n          ></p-checkbox>\n          <span class=\"flex-grow\">{{ col.header | translate }}</span>\n          <i class=\"pi pi-bars text-surface-400 cursor-grab\"></i> <!-- \u0623\u064A\u0642\u0648\u0646\u0629 \u0627\u0644\u0633\u062D\u0628 -->\n        </div>\n      </ng-template>\n    </p-orderList>\n\n\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: OrderListModule }, { kind: "component", type: i5.OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ColumnSettingsPopoverComponent, isStandalone: true, selector: "lib-column-settings-popover", inputs: { fixedColumns: "fixedColumns", toggleableColumns: "toggleableColumns", tableId: "tableId", selectedToggleableColumns: "selectedToggleableColumns" }, outputs: { selectedToggleableColumnsChange: "selectedToggleableColumnsChange" }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-popover #op appendTo=\"body\" styleClass=\"w-80\">\r\n\r\n\r\n\r\n\r\n    <!-- \u2B50 \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \"\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644\" \u2B50 -->\r\n    <div class=\"flex items-center mb-3\">\r\n        <p-checkbox\r\n            [(ngModel)]=\"allColumnsSelected\"\r\n            [binary]=\"true\"\r\n            inputId=\"selectAllColumns\"\r\n        ></p-checkbox>\r\n        <label for=\"selectAllColumns\" class=\"ml-2 cursor-pointer font-medium text-color-secondary\">\r\n            {{ 'COMMON.SELECT_ALL' | translate }}\r\n        </label>\r\n    </div>\r\n\r\n    <p-orderList\r\n      [value]=\"_displayOrderListColumns\"\r\n      header=\"{{ 'COMMON.REORDER_AND_SELECT_COLUMNS' | translate }}\"\r\n      [listStyle]=\"{'height':'250px'}\"\r\n      [responsive]=\"true\"\r\n      [dragdrop]=\"true\"\r\n      (onReorder)=\"onOrderListReorder($event)\"\r\n      styleClass=\"w-full\"\r\n    >\r\n      <ng-template let-col pTemplate=\"item\">\r\n        <div class=\"p-2 border rounded-md flex items-center justify-between w-full\">\r\n          <!-- \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \u0644\u0644\u062A\u062D\u0643\u0645 \u0641\u064A \u0627\u0644\u0631\u0624\u064A\u0629 -->\r\n          <p-checkbox\r\n            [(ngModel)]=\"col.isSelected\"\r\n            (ngModelChange)=\"onColumnVisibilityChange(col)\"\r\n            [binary]=\"true\"\r\n            class=\"mr-4\"\r\n          ></p-checkbox>\r\n          <span class=\"flex-grow\">{{ col.header | translate }}</span>\r\n          <i class=\"pi pi-bars text-surface-400 cursor-grab\"></i> <!-- \u0623\u064A\u0642\u0648\u0646\u0629 \u0627\u0644\u0633\u062D\u0628 -->\r\n        </div>\r\n      </ng-template>\r\n    </p-orderList>\r\n\r\n\r\n</p-popover>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: OrderListModule }, { kind: "component", type: i5.OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnSettingsPopoverComponent, decorators: [{
             type: Component,
@@ -159,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         OrderListModule,
                         CheckboxModule,
                         Checkbox
-                    ], template: "<p-popover #op appendTo=\"body\" styleClass=\"w-80\">\n\n\n\n\n    <!-- \u2B50 \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \"\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644\" \u2B50 -->\n    <div class=\"flex items-center mb-3\">\n        <p-checkbox\n            [(ngModel)]=\"allColumnsSelected\"\n            [binary]=\"true\"\n            inputId=\"selectAllColumns\"\n        ></p-checkbox>\n        <label for=\"selectAllColumns\" class=\"ml-2 cursor-pointer font-medium text-color-secondary\">\n            {{ 'COMMON.SELECT_ALL' | translate }}\n        </label>\n    </div>\n\n    <p-orderList\n      [value]=\"_displayOrderListColumns\"\n      header=\"{{ 'COMMON.REORDER_AND_SELECT_COLUMNS' | translate }}\"\n      [listStyle]=\"{'height':'250px'}\"\n      [responsive]=\"true\"\n      [dragdrop]=\"true\"\n      (onReorder)=\"onOrderListReorder($event)\"\n      styleClass=\"w-full\"\n    >\n      <ng-template let-col pTemplate=\"item\">\n        <div class=\"p-2 border rounded-md flex items-center justify-between w-full\">\n          <!-- \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \u0644\u0644\u062A\u062D\u0643\u0645 \u0641\u064A \u0627\u0644\u0631\u0624\u064A\u0629 -->\n          <p-checkbox\n            [(ngModel)]=\"col.isSelected\"\n            (ngModelChange)=\"onColumnVisibilityChange(col)\"\n            [binary]=\"true\"\n            class=\"mr-4\"\n          ></p-checkbox>\n          <span class=\"flex-grow\">{{ col.header | translate }}</span>\n          <i class=\"pi pi-bars text-surface-400 cursor-grab\"></i> <!-- \u0623\u064A\u0642\u0648\u0646\u0629 \u0627\u0644\u0633\u062D\u0628 -->\n        </div>\n      </ng-template>\n    </p-orderList>\n\n\n</p-popover>\n" }]
+                    ], template: "<p-popover #op appendTo=\"body\" styleClass=\"w-80\">\r\n\r\n\r\n\r\n\r\n    <!-- \u2B50 \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \"\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644\" \u2B50 -->\r\n    <div class=\"flex items-center mb-3\">\r\n        <p-checkbox\r\n            [(ngModel)]=\"allColumnsSelected\"\r\n            [binary]=\"true\"\r\n            inputId=\"selectAllColumns\"\r\n        ></p-checkbox>\r\n        <label for=\"selectAllColumns\" class=\"ml-2 cursor-pointer font-medium text-color-secondary\">\r\n            {{ 'COMMON.SELECT_ALL' | translate }}\r\n        </label>\r\n    </div>\r\n\r\n    <p-orderList\r\n      [value]=\"_displayOrderListColumns\"\r\n      header=\"{{ 'COMMON.REORDER_AND_SELECT_COLUMNS' | translate }}\"\r\n      [listStyle]=\"{'height':'250px'}\"\r\n      [responsive]=\"true\"\r\n      [dragdrop]=\"true\"\r\n      (onReorder)=\"onOrderListReorder($event)\"\r\n      styleClass=\"w-full\"\r\n    >\r\n      <ng-template let-col pTemplate=\"item\">\r\n        <div class=\"p-2 border rounded-md flex items-center justify-between w-full\">\r\n          <!-- \u0645\u0631\u0628\u0639 \u0627\u062E\u062A\u064A\u0627\u0631 \u0644\u0644\u062A\u062D\u0643\u0645 \u0641\u064A \u0627\u0644\u0631\u0624\u064A\u0629 -->\r\n          <p-checkbox\r\n            [(ngModel)]=\"col.isSelected\"\r\n            (ngModelChange)=\"onColumnVisibilityChange(col)\"\r\n            [binary]=\"true\"\r\n            class=\"mr-4\"\r\n          ></p-checkbox>\r\n          <span class=\"flex-grow\">{{ col.header | translate }}</span>\r\n          <i class=\"pi pi-bars text-surface-400 cursor-grab\"></i> <!-- \u0623\u064A\u0642\u0648\u0646\u0629 \u0627\u0644\u0633\u062D\u0628 -->\r\n        </div>\r\n      </ng-template>\r\n    </p-orderList>\r\n\r\n\r\n</p-popover>\r\n" }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { op: [{
                 type: ViewChild,
                 args: ['op']

package/fesm2022/es.framework-ng.ui.core-column-settings-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"es.framework-ng.ui.core-column-settings-popover.mjs","sources":["../../../../libs/ng.ui.core/column-settings-popover/src/lib/column-settings-popover-module.ts","../../../../libs/ng.ui.core/column-settings-popover/src/lib/column-settings-popover.ts","../../../../libs/ng.ui.core/column-settings-popover/src/lib/column-settings-popover.html","../../../../libs/ng.ui.core/column-settings-popover/src/es.framework-ng.ui.core-column-settings-popover.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n})\nexport class ColumnSettingsPopoverModule {}\n","// src/app/shared/column-settings-popover/column-settings-popover.component.ts\nimport { Component, Input, Output, EventEmitter, ViewChild, OnInit, OnChanges, SimpleChanges, inject } from '@angular/core';\n\nimport { FormsModule } from '@angular/forms';\nimport { PopoverModule } from 'primeng/popover';\nimport { DividerModule } from 'primeng/divider';\nimport { ButtonModule } from 'primeng/button';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { TranslatePipe } from '@es.framework/ng.core/pipes';\nimport { ColumnDef } from '@es.framework/ng.core/models';\nimport { OrderListModule } from 'primeng/orderlist';\nimport { CheckboxModule, Checkbox } from 'primeng/checkbox';\nimport { LocalizationService } from '@es.framework/ng.core/services';\n\ntype PopoverColumnDef<T> = ColumnDef<T> & { isSelected?: boolean };\n\n@Component({\n selector: 'lib-column-settings-popover',\n standalone: true,\n imports: [\n    FormsModule,\n    PopoverModule,\n    DividerModule,\n    ButtonModule,\n    TooltipModule,\n    TranslatePipe,\n    OrderListModule,\n    CheckboxModule,\n    Checkbox\n],\n templateUrl: './column-settings-popover.html',\n styleUrls: ['./column-settings-popover.css']\n})\nexport class ColumnSettingsPopoverComponent<T extends { [key: string]: any }> implements OnInit, OnChanges {\n @ViewChild('op') op: any;\n\n @Input() fixedColumns: ColumnDef<T>[] = [];\n @Input() toggleableColumns: ColumnDef<T>[] = [];\n\n // تم إزالة @Input() tableId لأنه لن يستخدم هنا للحفظ\n @Input() tableId = 'defaultTable';\n\n\n _displayOrderListColumns: PopoverColumnDef<T>[] = [];\n private _selectedToggleableColumns: ColumnDef<T>[] = [];\n\n @Input()\n get selectedToggleableColumns(): ColumnDef<T>[] {\n  return this._selectedToggleableColumns;\n }\n set selectedToggleableColumns(val: ColumnDef<T>[]) {\n  if (!this.areColumnsEqual(this._selectedToggleableColumns, val)) {\n   this._selectedToggleableColumns = val;\n   this.syncDisplayColumnsWithSelectedInput();\n  }\n }\n\n @Output() selectedToggleableColumnsChange = new EventEmitter<ColumnDef<T>[]>();\n\n // تم إزالة @Output() columnRemoved و @Output() popoverHidden لأن selectedToggleableColumnsChange يغني عنهما\n\n constructor(private translate: LocalizationService) {}\n\n ngOnInit(): void {\n  console.log('ColumnSettingsPopoverComponent: ngOnInit called.');\n  // في ngOnInit، نقوم فقط بتهيئة الأعمدة للعرض بناءً على المدخلات\n  this.initializeDisplayColumns();\n  this.syncDisplayColumnsWithSelectedInput();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n  // عند تغير toggleableColumns، نعيد تهيئة القائمة للعرض\n  if (changes['toggleableColumns']) {\n   console.log('ColumnSettingsPopoverComponent: toggleableColumns input changed.');\n   this.initializeDisplayColumns();\n  }\n  // عند تغير selectedToggleableColumns من المكون الأب، نقوم بمزامنة حالتها\n  if (changes['selectedToggleableColumns']) {\n   console.log('ColumnSettingsPopoverComponent: selectedToggleableColumns input changed (from parent).');\n   this.syncDisplayColumnsWithSelectedInput();\n  }\n }\n  // ⭐ Getter/Setter لمربع الاختيار \"تحديد الكل\" ⭐\n get allColumnsSelected(): boolean {\n  if (!this._displayOrderListColumns || this._displayOrderListColumns.length === 0) {\n   return false;\n  }\n  return this._displayOrderListColumns.every(col => col.isSelected);\n }\n\n set allColumnsSelected(value: boolean) {\n  this._displayOrderListColumns.forEach(col => col.isSelected = value);\n  this.emitCurrentSelection();\n }\n\n // ⭐ دالة لتهيئة _displayOrderListColumns من toggleableColumns ⭐\n private initializeDisplayColumns(): void {\n  this._displayOrderListColumns = this.toggleableColumns.map(col => ({\n   ...col,\n   isSelected: false // نترك isSelected كـ false مؤقتاً\n  }));\n }\n\n // دالة لمزامنة حالة العرض مع الأعمدة المحددة من المكون الأب\n private syncDisplayColumnsWithSelectedInput(): void {\n  if (!this._displayOrderListColumns || this._displayOrderListColumns.length === 0) {\n   return;\n  }\n\n  const selectedFieldsSet = new Set(this._selectedToggleableColumns.map(col => col.field));\n\n  // تحديث خاصية isSelected بناءً على selectedFieldsSet\n  this._displayOrderListColumns.forEach(col => {\n   col.isSelected = selectedFieldsSet.has(col.field);\n  });\n\n  // إعادة ترتيب القائمة لتكون الأعمدة المحددة في الأعلى\n  const orderedSelected = this._displayOrderListColumns\n   .filter(col => selectedFieldsSet.has(col.field))\n   .sort((a, b) => {\n    return Array.from(selectedFieldsSet).indexOf(a.field) - Array.from(selectedFieldsSet).indexOf(b.field);\n   });\n\n  const orderedUnselected = this._displayOrderListColumns.filter(col => !selectedFieldsSet.has(col.field));\n\n  this._displayOrderListColumns = [...orderedSelected, ...orderedUnselected];\n  console.log('ColumnSettingsPopoverComponent: _displayOrderListColumns synced with selectedToggleableColumns input:', this._displayOrderListColumns);\n }\n\n toggle(event: Event): void {\n  this.op.toggle(event);\n }\n\n hide(): void {\n  this.op.hide();\n }\n\n // عند تغيير حالة أي مربع اختيار\n onColumnVisibilityChange(column: PopoverColumnDef<T>): void {\n  this.emitCurrentSelection();\n }\n\n // عند إعادة ترتيب القائمة\n onOrderListReorder(event: any): void {\n  this.emitCurrentSelection();\n }\n\n // دالة لإرسال التغييرات إلى المكون الأب\n private emitCurrentSelection(): void {\n  const currentSelected = this._displayOrderListColumns\n   .filter(col => col.isSelected)\n   .map(col => {\n    const { isSelected, ...rest } = col;\n    return rest as ColumnDef<T>;\n   });\n\n  this.selectedToggleableColumnsChange.emit(currentSelected);\n }\n\n private areColumnsEqual(cols1: ColumnDef<T>[], cols2: ColumnDef<T>[]): boolean {\n  if (cols1.length !== cols2.length) {\n   return false;\n  }\n  // التحقق من أن العناصر هي نفسها وبنفس الترتيب\n  for (let i = 0; i < cols1.length; i++) {\n   if (cols1[i].field !== cols2[i].field) {\n    return false;\n   }\n  }\n  return true;\n }\n}\n","<p-popover #op appendTo=\"body\" styleClass=\"w-80\">\n\n\n\n\n    <!-- ⭐ مربع اختيار \"تحديد الكل\" ⭐ -->\n    <div class=\"flex items-center mb-3\">\n        <p-checkbox\n            [(ngModel)]=\"allColumnsSelected\"\n            [binary]=\"true\"\n            inputId=\"selectAllColumns\"\n        ></p-checkbox>\n        <label for=\"selectAllColumns\" class=\"ml-2 cursor-pointer font-medium text-color-secondary\">\n            {{ 'COMMON.SELECT_ALL' | translate }}\n        </label>\n    </div>\n\n    <p-orderList\n      [value]=\"_displayOrderListColumns\"\n      header=\"{{ 'COMMON.REORDER_AND_SELECT_COLUMNS' | translate }}\"\n      [listStyle]=\"{'height':'250px'}\"\n      [responsive]=\"true\"\n      [dragdrop]=\"true\"\n      (onReorder)=\"onOrderListReorder($event)\"\n      styleClass=\"w-full\"\n    >\n      <ng-template let-col pTemplate=\"item\">\n        <div class=\"p-2 border rounded-md flex items-center justify-between w-full\">\n          <!-- مربع اختيار للتحكم في الرؤية -->\n          <p-checkbox\n            [(ngModel)]=\"col.isSelected\"\n            (ngModelChange)=\"onColumnVisibilityChange(col)\"\n            [binary]=\"true\"\n            class=\"mr-4\"\n          ></p-checkbox>\n          <span class=\"flex-grow\">{{ col.header | translate }}</span>\n          <i class=\"pi pi-bars text-surface-400 cursor-grab\"></i> <!-- أيقونة السحب -->\n        </div>\n      </ng-template>\n    </p-orderList>\n\n\n</p-popover>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"es.framework-ng.ui.core-column-settings-popover.mjs","sources":["../../../../libs/ng.ui.core/column-settings-popover/src/lib/column-settings-popover-module.ts","../../../../libs/ng.ui.core/column-settings-popover/src/lib/column-settings-popover.ts","../../../../libs/ng.ui.core/column-settings-popover/src/lib/column-settings-popover.html","../../../../libs/ng.ui.core/column-settings-popover/src/es.framework-ng.ui.core-column-settings-popover.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@NgModule({\r\n  imports: [CommonModule],\r\n})\r\nexport class ColumnSettingsPopoverModule {}\r\n","// src/app/shared/column-settings-popover/column-settings-popover.component.ts\r\nimport { Component, Input, Output, EventEmitter, ViewChild, OnInit, OnChanges, SimpleChanges, inject } from '@angular/core';\r\n\r\nimport { FormsModule } from '@angular/forms';\r\nimport { PopoverModule } from 'primeng/popover';\r\nimport { DividerModule } from 'primeng/divider';\r\nimport { ButtonModule } from 'primeng/button';\r\nimport { TooltipModule } from 'primeng/tooltip';\r\nimport { TranslatePipe } from '@es.framework/ng.core/pipes';\r\nimport { ColumnDef } from '@es.framework/ng.core/models';\r\nimport { OrderListModule } from 'primeng/orderlist';\r\nimport { CheckboxModule, Checkbox } from 'primeng/checkbox';\r\nimport { LocalizationService } from '@es.framework/ng.core/services';\r\n\r\ntype PopoverColumnDef<T> = ColumnDef<T> & { isSelected?: boolean };\r\n\r\n@Component({\r\n selector: 'lib-column-settings-popover',\r\n standalone: true,\r\n imports: [\r\n    FormsModule,\r\n    PopoverModule,\r\n    DividerModule,\r\n    ButtonModule,\r\n    TooltipModule,\r\n    TranslatePipe,\r\n    OrderListModule,\r\n    CheckboxModule,\r\n    Checkbox\r\n],\r\n templateUrl: './column-settings-popover.html',\r\n styleUrls: ['./column-settings-popover.css']\r\n})\r\nexport class ColumnSettingsPopoverComponent<T extends { [key: string]: any }> implements OnInit, OnChanges {\r\n @ViewChild('op') op: any;\r\n\r\n @Input() fixedColumns: ColumnDef<T>[] = [];\r\n @Input() toggleableColumns: ColumnDef<T>[] = [];\r\n\r\n // تم إزالة @Input() tableId لأنه لن يستخدم هنا للحفظ\r\n @Input() tableId = 'defaultTable';\r\n\r\n\r\n _displayOrderListColumns: PopoverColumnDef<T>[] = [];\r\n private _selectedToggleableColumns: ColumnDef<T>[] = [];\r\n\r\n @Input()\r\n get selectedToggleableColumns(): ColumnDef<T>[] {\r\n  return this._selectedToggleableColumns;\r\n }\r\n set selectedToggleableColumns(val: ColumnDef<T>[]) {\r\n  if (!this.areColumnsEqual(this._selectedToggleableColumns, val)) {\r\n   this._selectedToggleableColumns = val;\r\n   this.syncDisplayColumnsWithSelectedInput();\r\n  }\r\n }\r\n\r\n @Output() selectedToggleableColumnsChange = new EventEmitter<ColumnDef<T>[]>();\r\n\r\n // تم إزالة @Output() columnRemoved و @Output() popoverHidden لأن selectedToggleableColumnsChange يغني عنهما\r\n\r\n constructor(private translate: LocalizationService) {}\r\n\r\n ngOnInit(): void {\r\n  console.log('ColumnSettingsPopoverComponent: ngOnInit called.');\r\n  // في ngOnInit، نقوم فقط بتهيئة الأعمدة للعرض بناءً على المدخلات\r\n  this.initializeDisplayColumns();\r\n  this.syncDisplayColumnsWithSelectedInput();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n  // عند تغير toggleableColumns، نعيد تهيئة القائمة للعرض\r\n  if (changes['toggleableColumns']) {\r\n   console.log('ColumnSettingsPopoverComponent: toggleableColumns input changed.');\r\n   this.initializeDisplayColumns();\r\n  }\r\n  // عند تغير selectedToggleableColumns من المكون الأب، نقوم بمزامنة حالتها\r\n  if (changes['selectedToggleableColumns']) {\r\n   console.log('ColumnSettingsPopoverComponent: selectedToggleableColumns input changed (from parent).');\r\n   this.syncDisplayColumnsWithSelectedInput();\r\n  }\r\n }\r\n  // ⭐ Getter/Setter لمربع الاختيار \"تحديد الكل\" ⭐\r\n get allColumnsSelected(): boolean {\r\n  if (!this._displayOrderListColumns || this._displayOrderListColumns.length === 0) {\r\n   return false;\r\n  }\r\n  return this._displayOrderListColumns.every(col => col.isSelected);\r\n }\r\n\r\n set allColumnsSelected(value: boolean) {\r\n  this._displayOrderListColumns.forEach(col => col.isSelected = value);\r\n  this.emitCurrentSelection();\r\n }\r\n\r\n // ⭐ دالة لتهيئة _displayOrderListColumns من toggleableColumns ⭐\r\n private initializeDisplayColumns(): void {\r\n  this._displayOrderListColumns = this.toggleableColumns.map(col => ({\r\n   ...col,\r\n   isSelected: false // نترك isSelected كـ false مؤقتاً\r\n  }));\r\n }\r\n\r\n // دالة لمزامنة حالة العرض مع الأعمدة المحددة من المكون الأب\r\n private syncDisplayColumnsWithSelectedInput(): void {\r\n  if (!this._displayOrderListColumns || this._displayOrderListColumns.length === 0) {\r\n   return;\r\n  }\r\n\r\n  const selectedFieldsSet = new Set(this._selectedToggleableColumns.map(col => col.field));\r\n\r\n  // تحديث خاصية isSelected بناءً على selectedFieldsSet\r\n  this._displayOrderListColumns.forEach(col => {\r\n   col.isSelected = selectedFieldsSet.has(col.field);\r\n  });\r\n\r\n  // إعادة ترتيب القائمة لتكون الأعمدة المحددة في الأعلى\r\n  const orderedSelected = this._displayOrderListColumns\r\n   .filter(col => selectedFieldsSet.has(col.field))\r\n   .sort((a, b) => {\r\n    return Array.from(selectedFieldsSet).indexOf(a.field) - Array.from(selectedFieldsSet).indexOf(b.field);\r\n   });\r\n\r\n  const orderedUnselected = this._displayOrderListColumns.filter(col => !selectedFieldsSet.has(col.field));\r\n\r\n  this._displayOrderListColumns = [...orderedSelected, ...orderedUnselected];\r\n  console.log('ColumnSettingsPopoverComponent: _displayOrderListColumns synced with selectedToggleableColumns input:', this._displayOrderListColumns);\r\n }\r\n\r\n toggle(event: Event): void {\r\n  this.op.toggle(event);\r\n }\r\n\r\n hide(): void {\r\n  this.op.hide();\r\n }\r\n\r\n // عند تغيير حالة أي مربع اختيار\r\n onColumnVisibilityChange(column: PopoverColumnDef<T>): void {\r\n  this.emitCurrentSelection();\r\n }\r\n\r\n // عند إعادة ترتيب القائمة\r\n onOrderListReorder(event: any): void {\r\n  this.emitCurrentSelection();\r\n }\r\n\r\n // دالة لإرسال التغييرات إلى المكون الأب\r\n private emitCurrentSelection(): void {\r\n  const currentSelected = this._displayOrderListColumns\r\n   .filter(col => col.isSelected)\r\n   .map(col => {\r\n    const { isSelected, ...rest } = col;\r\n    return rest as ColumnDef<T>;\r\n   });\r\n\r\n  this.selectedToggleableColumnsChange.emit(currentSelected);\r\n }\r\n\r\n private areColumnsEqual(cols1: ColumnDef<T>[], cols2: ColumnDef<T>[]): boolean {\r\n  if (cols1.length !== cols2.length) {\r\n   return false;\r\n  }\r\n  // التحقق من أن العناصر هي نفسها وبنفس الترتيب\r\n  for (let i = 0; i < cols1.length; i++) {\r\n   if (cols1[i].field !== cols2[i].field) {\r\n    return false;\r\n   }\r\n  }\r\n  return true;\r\n }\r\n}\r\n","<p-popover #op appendTo=\"body\" styleClass=\"w-80\">\r\n\r\n\r\n\r\n\r\n    <!-- ⭐ مربع اختيار \"تحديد الكل\" ⭐ -->\r\n    <div class=\"flex items-center mb-3\">\r\n        <p-checkbox\r\n            [(ngModel)]=\"allColumnsSelected\"\r\n            [binary]=\"true\"\r\n            inputId=\"selectAllColumns\"\r\n        ></p-checkbox>\r\n        <label for=\"selectAllColumns\" class=\"ml-2 cursor-pointer font-medium text-color-secondary\">\r\n            {{ 'COMMON.SELECT_ALL' | translate }}\r\n        </label>\r\n    </div>\r\n\r\n    <p-orderList\r\n      [value]=\"_displayOrderListColumns\"\r\n      header=\"{{ 'COMMON.REORDER_AND_SELECT_COLUMNS' | translate }}\"\r\n      [listStyle]=\"{'height':'250px'}\"\r\n      [responsive]=\"true\"\r\n      [dragdrop]=\"true\"\r\n      (onReorder)=\"onOrderListReorder($event)\"\r\n      styleClass=\"w-full\"\r\n    >\r\n      <ng-template let-col pTemplate=\"item\">\r\n        <div class=\"p-2 border rounded-md flex items-center justify-between w-full\">\r\n          <!-- مربع اختيار للتحكم في الرؤية -->\r\n          <p-checkbox\r\n            [(ngModel)]=\"col.isSelected\"\r\n            (ngModelChange)=\"onColumnVisibilityChange(col)\"\r\n            [binary]=\"true\"\r\n            class=\"mr-4\"\r\n          ></p-checkbox>\r\n          <span class=\"flex-grow\">{{ col.header | translate }}</span>\r\n          <i class=\"pi pi-bars text-surface-400 cursor-grab\"></i> <!-- أيقونة السحب -->\r\n        </div>\r\n      </ng-template>\r\n    </p-orderList>\r\n\r\n\r\n</p-popover>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/es.framework-ng.ui.core-custom-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"es.framework-ng.ui.core-custom-switch.mjs","sources":["../../../../libs/ng.ui.core/custom-switch/src/lib/custom-switch-module.ts","../../../../libs/ng.ui.core/custom-switch/src/lib/custom-switch.ts","../../../../libs/ng.ui.core/custom-switch/src/es.framework-ng.ui.core-custom-switch.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n})\nexport class CustomSwitchModule {}\n","\r\nimport { AfterViewInit, ChangeDetectionStrategy, Component } from '@angular/core';\r\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\r\nimport { FieldType, FieldTypeConfig, FormlyAttributes } from '@ngx-formly/core';\r\nimport { TranslatePipe } from '@es.framework/ng.core/pipes';\r\nimport { ToggleSwitch } from 'primeng/toggleswitch';\r\nimport { TooltipModule, Tooltip } from 'primeng/tooltip';\r\n\r\n@Component({\r\n  selector: 'formly-field-custom-switch',\r\n    standalone: true,\r\n  imports: [ReactiveFormsModule, FormsModule, ToggleSwitch, TranslatePipe, TooltipModule, Tooltip],\r\n  template: `\r\n <div class=\"flex items-center justify-between rtl:flex-row-reverse w-full px-2 py-1\"\r\n   style=\"    border-radius: var(--p-inputtext-border-radius);\">\r\n \r\n \r\n   <label [for]=\"id\" class=\"font-bold text-lg text-gray-800\">\r\n     {{ (to.label ?? '') | translate }}\r\n \r\n     @if (to.required) {\r\n       <span class=\"text-red-500\">*</span>\r\n     }\r\n   </label>\r\n \r\n   <!-- التبديل نفسه -->\r\n   <p-toggleSwitch\r\n     [formControl]=\"formControl\"\r\n     [inputId]=\"id\"\r\n     [disabled]=\"to.disabled || false\"\r\n     [pTooltip]=\"field.props['tooltip']\"\r\n     [styleClass]=\"''\"\r\n     (onChange)=\"updateModel($event.checked)\"\r\n   ></p-toggleSwitch>\r\n \r\n </div>\r\n \r\n `,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class CustomSwitchFieldComponent   extends FieldType<FieldTypeConfig>  implements AfterViewInit {\r\n\r\n  updateModel(value: boolean) {\r\n    this.formControl.setValue(value);\r\n\r\n    // التحويل الآمن للمفتاح\r\n    const key = Array.isArray(this.key) ? this.key.join('.') : this.key;\r\n\r\n    if (this.model && key) {\r\n      this.model[key] = value ? 1 : 2;\r\n    }\r\n  }\r\n\r\n ngAfterViewInit() {\r\n  const key = Array.isArray(this.key) ? this.key.join('.') : this.key;\r\n\r\n  if (!key) return;\r\n\r\n  if (this.model[key] === undefined) {\r\n    this.model[key] = 1;\r\n    this.formControl.setValue(true);\r\n  }\r\n  else if (this.model[key] === 1) {\r\n    this.formControl.setValue(true);\r\n  }\r\n  else if (this.model[key] === 2) {\r\n    this.formControl.setValue(false);\r\n  }\r\n\r\n  // ✅ تأكد أن الموديل دائماً رقم 1 أو 2\r\n  this.model[key] = this.formControl.value ? 1 : 2;\r\n}\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAMa,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAFnB,YAAY,CAAA,EAAA,CAAA;AAEX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAFnB,YAAY,CAAA,EAAA,CAAA;;2FAEX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,iBAAA;;;ACmCK,MAAO,0BAA6B,SAAQ,SAA0B,CAAA;AAE1E,IAAA,WAAW,CAAC,KAAc,EAAA;AACxB,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;;QAGhC,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG;AAEnE,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE;AACrB,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC;QACjC;IACF;IAED,eAAe,GAAA;QACd,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG;AAEnE,QAAA,IAAI,CAAC,GAAG;YAAE;QAEV,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE;AACjC,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjC;aACK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjC;aACK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;QAClC;;AAGA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;IAClD;uGA/Ba,0BAA0B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA5B3B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBV,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EA1BU,mBAAmB,yTAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,EAAA,QAAA,EAAA,iDAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAiB,aAAa,8XAA5B,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA6B5D,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAhCtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4BAA4B;AACpC,oBAAA,UAAU,EAAE,IAAI;AAClB,oBAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC;AAChG,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBV,CAAA,CAAA;oBACA,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAChD,iBAAA;;;ACvCD;;AAEG;;;;"}
+{"version":3,"file":"es.framework-ng.ui.core-custom-switch.mjs","sources":["../../../../libs/ng.ui.core/custom-switch/src/lib/custom-switch-module.ts","../../../../libs/ng.ui.core/custom-switch/src/lib/custom-switch.ts","../../../../libs/ng.ui.core/custom-switch/src/es.framework-ng.ui.core-custom-switch.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@NgModule({\r\n  imports: [CommonModule],\r\n})\r\nexport class CustomSwitchModule {}\r\n","\r\nimport { AfterViewInit, ChangeDetectionStrategy, Component } from '@angular/core';\r\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\r\nimport { FieldType, FieldTypeConfig, FormlyAttributes } from '@ngx-formly/core';\r\nimport { TranslatePipe } from '@es.framework/ng.core/pipes';\r\nimport { ToggleSwitch } from 'primeng/toggleswitch';\r\nimport { TooltipModule, Tooltip } from 'primeng/tooltip';\r\n\r\n@Component({\r\n  selector: 'formly-field-custom-switch',\r\n    standalone: true,\r\n  imports: [ReactiveFormsModule, FormsModule, ToggleSwitch, TranslatePipe, TooltipModule, Tooltip],\r\n  template: `\r\n <div class=\"flex items-center justify-between rtl:flex-row-reverse w-full px-2 py-1\"\r\n   style=\"    border-radius: var(--p-inputtext-border-radius);\">\r\n \r\n \r\n   <label [for]=\"id\" class=\"font-bold text-lg text-gray-800\">\r\n     {{ (to.label ?? '') | translate }}\r\n \r\n     @if (to.required) {\r\n       <span class=\"text-red-500\">*</span>\r\n     }\r\n   </label>\r\n \r\n   <!-- التبديل نفسه -->\r\n   <p-toggleSwitch\r\n     [formControl]=\"formControl\"\r\n     [inputId]=\"id\"\r\n     [disabled]=\"to.disabled || false\"\r\n     [pTooltip]=\"field.props['tooltip']\"\r\n     [styleClass]=\"''\"\r\n     (onChange)=\"updateModel($event.checked)\"\r\n   ></p-toggleSwitch>\r\n \r\n </div>\r\n \r\n `,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class CustomSwitchFieldComponent   extends FieldType<FieldTypeConfig>  implements AfterViewInit {\r\n\r\n  updateModel(value: boolean) {\r\n    this.formControl.setValue(value);\r\n\r\n    // التحويل الآمن للمفتاح\r\n    const key = Array.isArray(this.key) ? this.key.join('.') : this.key;\r\n\r\n    if (this.model && key) {\r\n      this.model[key] = value ? 1 : 2;\r\n    }\r\n  }\r\n\r\n ngAfterViewInit() {\r\n  const key = Array.isArray(this.key) ? this.key.join('.') : this.key;\r\n\r\n  if (!key) return;\r\n\r\n  if (this.model[key] === undefined) {\r\n    this.model[key] = 1;\r\n    this.formControl.setValue(true);\r\n  }\r\n  else if (this.model[key] === 1) {\r\n    this.formControl.setValue(true);\r\n  }\r\n  else if (this.model[key] === 2) {\r\n    this.formControl.setValue(false);\r\n  }\r\n\r\n  // ✅ تأكد أن الموديل دائماً رقم 1 أو 2\r\n  this.model[key] = this.formControl.value ? 1 : 2;\r\n}\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/es.framework-ng.ui.core-datepicker.mjs

@@ -267,95 +267,95 @@ class FormlyFieldDatepicker extends FieldType {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyFieldDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FormlyFieldDatepicker, isStandalone: true, selector: "formly-field-primeng-datepicker", viewQueries: [{ propertyName: "datepickerComp", first: true, predicate: ["datepickerComp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-
-  <p-inputGroup class="w-full">
-    <!-- [inputStyle]="{'border-left':'0'}" -->
-      @if (mode !== 'time') {
-        <!-- [(ngModel)]="dateControl.value" -->
-  <p-datepicker
-    #datepickerComp
-    [formControl]="dateControl"
-     dateFormat="dd-mm-yy"
-     dataType="string"
-    placeholder="DD-MM-YYYY"
-    [showIcon]="false"
-    inputId="buttondisplay"
-    [showOnFocus]="true"
-    appendTo="body"
-    class="w-full rounded-none"
-    inputStyleClass="rtl:border-r-0 ltr:border-l-0"
-    dropdownMode="current"
-    [formlyAttributes]="field"
-    [disabled]="!!props.disabled"
-    (onSelect)="onDateChange(true)"
-    (onInput)="onDateChange(true)"
-    [selectionMode]="props['selectionMode'] || 'single'"
-  ></p-datepicker>
-  <!-- (onInput)="autoFixDate($event)" -->
-
-      }
-
-  @if (mode !== 'date') {
-    <input
-      pInputText
-      type="text"
-      placeholder="00:00"
-      maxlength="5"
-      [formControl]="timeControl"
-      (input)="onTimeInput($event)"
-      (blur)="onTimeChange()"
-      class="w-20"
-      [ngStyle]="{
-    'border-radius': mode == 'time' ? '':'0px',
-    'width': '53px !important',
-    'padding-left': mode == 'time' ? '':'2px',
-    'padding-right': mode == 'time' ? '':'2px',
-    'border-left':mode == 'time' ? '': '0px',
-    'border-right': mode == 'time' ? '': '0px'
-  }"
-  [classList]="mode == 'time' ? 'p-autocomplete-input p-component p-inputtext' : ''"
-    />
-
-    <p-inputGroupAddon [style]="{'padding': 'initial'}">
-     <select
-    (change)="toggleAmPm()"
-    [disabled]="!!props.disabled"
-    style="       padding-top: 0.4rem;
-    padding-bottom: 0.5rem; padding-left: 0.5rem;
-    padding-right: 0.5rem;
-        background: var(--p-button-secondary-background);
-    "
-    class="  pr-8  bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed appearance-none"
-  >
-    <option value="AM" [selected]="ampmControl.value === 'AM'">{{'AM' | translate}}</option>
-    <option value="PM" [selected]="ampmControl.value === 'PM'">{{'PM' | translate}}</option>
-  </select>
-    </p-inputGroupAddon>
-  }
-   @if (mode == 'time') {
-  <p-inputGroupAddon>
-    <p-button
-      tabindex="-1"
-      [disabled]="!!props.disabled"
-      icon="pi pi-clock"
-      severity="primary"
-    />
-  </p-inputGroupAddon>
-}
- @if (mode !== 'time') {
-  <p-inputGroupAddon>
-    <p-button
-      tabindex="-1"
-      [disabled]="!!props.disabled"
-      icon="pi pi-calendar"
-      (click)="datepickerComp.toggle()"
-      severity="primary"
-    />
-  </p-inputGroupAddon>
-}
-</p-inputGroup>
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FormlyFieldDatepicker, isStandalone: true, selector: "formly-field-primeng-datepicker", viewQueries: [{ propertyName: "datepickerComp", first: true, predicate: ["datepickerComp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+
+  <p-inputGroup class="w-full">
+    <!-- [inputStyle]="{'border-left':'0'}" -->
+      @if (mode !== 'time') {
+        <!-- [(ngModel)]="dateControl.value" -->
+  <p-datepicker
+    #datepickerComp
+    [formControl]="dateControl"
+     dateFormat="dd-mm-yy"
+     dataType="string"
+    placeholder="DD-MM-YYYY"
+    [showIcon]="false"
+    inputId="buttondisplay"
+    [showOnFocus]="true"
+    appendTo="body"
+    class="w-full rounded-none"
+    inputStyleClass="rtl:border-r-0 ltr:border-l-0"
+    dropdownMode="current"
+    [formlyAttributes]="field"
+    [disabled]="!!props.disabled"
+    (onSelect)="onDateChange(true)"
+    (onInput)="onDateChange(true)"
+    [selectionMode]="props['selectionMode'] || 'single'"
+  ></p-datepicker>
+  <!-- (onInput)="autoFixDate($event)" -->
+
+      }
+
+  @if (mode !== 'date') {
+    <input
+      pInputText
+      type="text"
+      placeholder="00:00"
+      maxlength="5"
+      [formControl]="timeControl"
+      (input)="onTimeInput($event)"
+      (blur)="onTimeChange()"
+      class="w-20"
+      [ngStyle]="{
+    'border-radius': mode == 'time' ? '':'0px',
+    'width': '53px !important',
+    'padding-left': mode == 'time' ? '':'2px',
+    'padding-right': mode == 'time' ? '':'2px',
+    'border-left':mode == 'time' ? '': '0px',
+    'border-right': mode == 'time' ? '': '0px'
+  }"
+  [classList]="mode == 'time' ? 'p-autocomplete-input p-component p-inputtext' : ''"
+    />
+
+    <p-inputGroupAddon [style]="{'padding': 'initial'}">
+     <select
+    (change)="toggleAmPm()"
+    [disabled]="!!props.disabled"
+    style="       padding-top: 0.4rem;
+    padding-bottom: 0.5rem; padding-left: 0.5rem;
+    padding-right: 0.5rem;
+        background: var(--p-button-secondary-background);
+    "
+    class="  pr-8  bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed appearance-none"
+  >
+    <option value="AM" [selected]="ampmControl.value === 'AM'">{{'AM' | translate}}</option>
+    <option value="PM" [selected]="ampmControl.value === 'PM'">{{'PM' | translate}}</option>
+  </select>
+    </p-inputGroupAddon>
+  }
+   @if (mode == 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-clock"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+ @if (mode !== 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-calendar"
+      (click)="datepickerComp.toggle()"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+</p-inputGroup>
+
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i3.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: SelectModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormlyFieldDatepicker, decorators: [{
@@ -377,95 +377,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         FormlyAttributes,
                         SelectModule,
                     ],
-                    template: `
-
-  <p-inputGroup class="w-full">
-    <!-- [inputStyle]="{'border-left':'0'}" -->
-      @if (mode !== 'time') {
-        <!-- [(ngModel)]="dateControl.value" -->
-  <p-datepicker
-    #datepickerComp
-    [formControl]="dateControl"
-     dateFormat="dd-mm-yy"
-     dataType="string"
-    placeholder="DD-MM-YYYY"
-    [showIcon]="false"
-    inputId="buttondisplay"
-    [showOnFocus]="true"
-    appendTo="body"
-    class="w-full rounded-none"
-    inputStyleClass="rtl:border-r-0 ltr:border-l-0"
-    dropdownMode="current"
-    [formlyAttributes]="field"
-    [disabled]="!!props.disabled"
-    (onSelect)="onDateChange(true)"
-    (onInput)="onDateChange(true)"
-    [selectionMode]="props['selectionMode'] || 'single'"
-  ></p-datepicker>
-  <!-- (onInput)="autoFixDate($event)" -->
-
-      }
-
-  @if (mode !== 'date') {
-    <input
-      pInputText
-      type="text"
-      placeholder="00:00"
-      maxlength="5"
-      [formControl]="timeControl"
-      (input)="onTimeInput($event)"
-      (blur)="onTimeChange()"
-      class="w-20"
-      [ngStyle]="{
-    'border-radius': mode == 'time' ? '':'0px',
-    'width': '53px !important',
-    'padding-left': mode == 'time' ? '':'2px',
-    'padding-right': mode == 'time' ? '':'2px',
-    'border-left':mode == 'time' ? '': '0px',
-    'border-right': mode == 'time' ? '': '0px'
-  }"
-  [classList]="mode == 'time' ? 'p-autocomplete-input p-component p-inputtext' : ''"
-    />
-
-    <p-inputGroupAddon [style]="{'padding': 'initial'}">
-     <select
-    (change)="toggleAmPm()"
-    [disabled]="!!props.disabled"
-    style="       padding-top: 0.4rem;
-    padding-bottom: 0.5rem; padding-left: 0.5rem;
-    padding-right: 0.5rem;
-        background: var(--p-button-secondary-background);
-    "
-    class="  pr-8  bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed appearance-none"
-  >
-    <option value="AM" [selected]="ampmControl.value === 'AM'">{{'AM' | translate}}</option>
-    <option value="PM" [selected]="ampmControl.value === 'PM'">{{'PM' | translate}}</option>
-  </select>
-    </p-inputGroupAddon>
-  }
-   @if (mode == 'time') {
-  <p-inputGroupAddon>
-    <p-button
-      tabindex="-1"
-      [disabled]="!!props.disabled"
-      icon="pi pi-clock"
-      severity="primary"
-    />
-  </p-inputGroupAddon>
-}
- @if (mode !== 'time') {
-  <p-inputGroupAddon>
-    <p-button
-      tabindex="-1"
-      [disabled]="!!props.disabled"
-      icon="pi pi-calendar"
-      (click)="datepickerComp.toggle()"
-      severity="primary"
-    />
-  </p-inputGroupAddon>
-}
-</p-inputGroup>
-
+                    template: `
+
+  <p-inputGroup class="w-full">
+    <!-- [inputStyle]="{'border-left':'0'}" -->
+      @if (mode !== 'time') {
+        <!-- [(ngModel)]="dateControl.value" -->
+  <p-datepicker
+    #datepickerComp
+    [formControl]="dateControl"
+     dateFormat="dd-mm-yy"
+     dataType="string"
+    placeholder="DD-MM-YYYY"
+    [showIcon]="false"
+    inputId="buttondisplay"
+    [showOnFocus]="true"
+    appendTo="body"
+    class="w-full rounded-none"
+    inputStyleClass="rtl:border-r-0 ltr:border-l-0"
+    dropdownMode="current"
+    [formlyAttributes]="field"
+    [disabled]="!!props.disabled"
+    (onSelect)="onDateChange(true)"
+    (onInput)="onDateChange(true)"
+    [selectionMode]="props['selectionMode'] || 'single'"
+  ></p-datepicker>
+  <!-- (onInput)="autoFixDate($event)" -->
+
+      }
+
+  @if (mode !== 'date') {
+    <input
+      pInputText
+      type="text"
+      placeholder="00:00"
+      maxlength="5"
+      [formControl]="timeControl"
+      (input)="onTimeInput($event)"
+      (blur)="onTimeChange()"
+      class="w-20"
+      [ngStyle]="{
+    'border-radius': mode == 'time' ? '':'0px',
+    'width': '53px !important',
+    'padding-left': mode == 'time' ? '':'2px',
+    'padding-right': mode == 'time' ? '':'2px',
+    'border-left':mode == 'time' ? '': '0px',
+    'border-right': mode == 'time' ? '': '0px'
+  }"
+  [classList]="mode == 'time' ? 'p-autocomplete-input p-component p-inputtext' : ''"
+    />
+
+    <p-inputGroupAddon [style]="{'padding': 'initial'}">
+     <select
+    (change)="toggleAmPm()"
+    [disabled]="!!props.disabled"
+    style="       padding-top: 0.4rem;
+    padding-bottom: 0.5rem; padding-left: 0.5rem;
+    padding-right: 0.5rem;
+        background: var(--p-button-secondary-background);
+    "
+    class="  pr-8  bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed appearance-none"
+  >
+    <option value="AM" [selected]="ampmControl.value === 'AM'">{{'AM' | translate}}</option>
+    <option value="PM" [selected]="ampmControl.value === 'PM'">{{'PM' | translate}}</option>
+  </select>
+    </p-inputGroupAddon>
+  }
+   @if (mode == 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-clock"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+ @if (mode !== 'time') {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-calendar"
+      (click)="datepickerComp.toggle()"
+      severity="primary"
+    />
+  </p-inputGroupAddon>
+}
+</p-inputGroup>
+
   `,
                 }]
         }], propDecorators: { datepickerComp: [{