cat-qw-lib 0.5.3 → 0.7.0

package/fesm2022/cat-qw-lib.mjs

@@ -3,7 +3,7 @@ import { EventEmitter, Component, Input, Output, Injectable, ViewEncapsulation,
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i3$3 from 'primeng/dropdown';
@@ -22,7 +22,7 @@ import * as i3$1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { EntityStore, StoreConfig, QueryEntity } from '@datorama/akita';
 import { __decorate } from 'tslib';
-import { BehaviorSubject, firstValueFrom, of, tap as tap$1, map } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, of, tap as tap$1, map, Subscription } from 'rxjs';
 import { DragDropModule } from 'primeng/dragdrop';
 import * as i4$2 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -358,11 +358,11 @@ class SidebarComponent {
         this.onClose.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: SidebarComponent, isStandalone: false, selector: "sidebar", inputs: { isSidebarVisible: "isSidebarVisible", title: "title" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div *ngIf=\"isSidebarVisible\" class=\"backdrop-shadow\" (click)=\"handleSidebarClose()\"></div>\n<div>\n<p-sidebar class=\"sidebar-panel-wrapper\" [(visible)]=\"isSidebarVisible\" (onShow)=\"onSidebarShow()\" (onHide)=\"handleSidebarClose()\" [position]=\"'right'\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center\">\n        <h2 class=\"sidebar-title-wrapper text-color mb-0\">\n            {{title}}\n        </h2>\n    </div>\n  </ng-template>\n  <p-divider class=\"sidebar-devider\"></p-divider>\n  <ng-content></ng-content>\n</p-sidebar>", styles: ["::ng-deep .custom-sidebar-overlay{z-index:0!important}::ng-deep .sidebar-panel-wrapper .p-sidebar-header{padding:1.4rem 1rem}::ng-deep .sidebar-panel-wrapper .p-sidebar-content{padding:0}::ng-deep .sidebar-panel-wrapper .p-sidebar-right{width:35%!important}::ng-deep .sidebar-devider .p-divider{margin:0}::ng-deep .p-component-overlay{background-color:#f4f4f7!important}.sidebar-title-wrapper{font-size:24px;font-weight:700}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: SidebarComponent, isStandalone: false, selector: "sidebar", inputs: { isSidebarVisible: "isSidebarVisible", title: "title" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div *ngIf=\"isSidebarVisible\" class=\"backdrop-shadow\" (click)=\"handleSidebarClose()\"></div>\n<div>\n<p-sidebar class=\"sidebar-panel-wrapper\" [(visible)]=\"isSidebarVisible\" (onShow)=\"onSidebarShow()\" (onHide)=\"handleSidebarClose()\" [position]=\"'right'\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center\">\n        <h2 class=\"sidebar-title-wrapper text-color mb-0\">\n            {{title}}\n        </h2>\n    </div>\n  </ng-template>\n  <p-divider class=\"sidebar-devider\"></p-divider>\n  <ng-content></ng-content>\n</p-sidebar>", styles: ["::ng-deep .custom-sidebar-overlay{z-index:0!important}::ng-deep .sidebar-panel-wrapper .p-sidebar-header{padding:1.4rem 1rem}::ng-deep .sidebar-panel-wrapper .p-sidebar-content{padding:0}::ng-deep .sidebar-panel-wrapper .p-sidebar-right{width:35%!important}::ng-deep .sidebar-devider .p-divider{margin:0}.sidebar-title-wrapper{font-size:24px;font-weight:700}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar', standalone: false, template: "<div *ngIf=\"isSidebarVisible\" class=\"backdrop-shadow\" (click)=\"handleSidebarClose()\"></div>\n<div>\n<p-sidebar class=\"sidebar-panel-wrapper\" [(visible)]=\"isSidebarVisible\" (onShow)=\"onSidebarShow()\" (onHide)=\"handleSidebarClose()\" [position]=\"'right'\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center\">\n        <h2 class=\"sidebar-title-wrapper text-color mb-0\">\n            {{title}}\n        </h2>\n    </div>\n  </ng-template>\n  <p-divider class=\"sidebar-devider\"></p-divider>\n  <ng-content></ng-content>\n</p-sidebar>", styles: ["::ng-deep .custom-sidebar-overlay{z-index:0!important}::ng-deep .sidebar-panel-wrapper .p-sidebar-header{padding:1.4rem 1rem}::ng-deep .sidebar-panel-wrapper .p-sidebar-content{padding:0}::ng-deep .sidebar-panel-wrapper .p-sidebar-right{width:35%!important}::ng-deep .sidebar-devider .p-divider{margin:0}::ng-deep .p-component-overlay{background-color:#f4f4f7!important}.sidebar-title-wrapper{font-size:24px;font-weight:700}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999}\n"] }]
+            args: [{ selector: 'sidebar', standalone: false, template: "<div *ngIf=\"isSidebarVisible\" class=\"backdrop-shadow\" (click)=\"handleSidebarClose()\"></div>\n<div>\n<p-sidebar class=\"sidebar-panel-wrapper\" [(visible)]=\"isSidebarVisible\" (onShow)=\"onSidebarShow()\" (onHide)=\"handleSidebarClose()\" [position]=\"'right'\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center\">\n        <h2 class=\"sidebar-title-wrapper text-color mb-0\">\n            {{title}}\n        </h2>\n    </div>\n  </ng-template>\n  <p-divider class=\"sidebar-devider\"></p-divider>\n  <ng-content></ng-content>\n</p-sidebar>", styles: ["::ng-deep .custom-sidebar-overlay{z-index:0!important}::ng-deep .sidebar-panel-wrapper .p-sidebar-header{padding:1.4rem 1rem}::ng-deep .sidebar-panel-wrapper .p-sidebar-content{padding:0}::ng-deep .sidebar-panel-wrapper .p-sidebar-right{width:35%!important}::ng-deep .sidebar-devider .p-divider{margin:0}.sidebar-title-wrapper{font-size:24px;font-weight:700}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isSidebarVisible: [{
                 type: Input
             }], title: [{
@@ -518,6 +518,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 type: Output
             }] } });
 
+/**
+ * CheckBoxComponent
+ */
 class CheckBoxComponent extends BaseControlComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: CheckBoxComponent, isStandalone: true, selector: "check-box", usesInheritance: true, ngImport: i0, template: "<div class=\"checkBoxContainer\">\n   \n  <div class=\"checkBox\">\n    <p-checkbox\n      [disabled]=\"attributeModel.readonly ?? false\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [label]=\"attributeModel.displayText ?? ''\"\n      class=\"dynamic-checkbox\"\n      #checkBox=\"ngModel\"\n      [ngModel]=\"this.record[this.attributeModel.name]\"\n      [style]=\"{\n        '--checkbox-size': attributeModel.customColumnWidth || '20px',\n        '--checkbox-height': attributeModel.customHeight || '20px'\n      }\"\n      [required]=\"attributeModel.isRequired ?? false\" \n      (ngModelChange)=\"handleModelChange($event, checkBox.valid)\"\n    >\n    </p-checkbox>\n    <span class=\"asterisk ml-1\" *ngIf=\"attributeModel.isRequired\">*</span>\n  </div>\n</div>", styles: [".asterisk{color:red}.checkBoxContainer{max-height:100%;display:flex;align-items:center;font-family:var(--font-family);position:relative}.checkBox{position:relative;max-width:100%;max-height:100%;word-wrap:break-word}::ng-deep .dynamic-checkbox .p-checkbox{width:var(--checkbox-size)!important;height:var(--checkbox-height)!important}::ng-deep .dynamic-checkbox .p-checkbox .p-checkbox-box{width:var(--checkbox-size)!important;height:var(--checkbox-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
@@ -549,11 +552,11 @@ class TextBoxComponent extends BaseControlComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: TextBoxComponent, isStandalone: true, selector: "text-box", usesInheritance: true, ngImport: i0, template: "<ng-container >\n  <div class=\"\">\n\n  <div *ngIf=\"attributeModel.displayText\" class=\"mb-2\">\n    <label>{{ attributeModel.displayText }}</label>\n    <span class=\"asterisk ml-1\" *ngIf=\"attributeModel.isRequired\">*</span>\n  </div>\n   @if (attributeModel.readonly) {\n    <div class=\"mb-2\" [ngStyle]=\"{'font-size':'14px', 'color':'#0F1729', 'font-weight':'600' }\">\n      <label [for]=\"attributeModel.name ?? 'textBox'\" class=\"text-value-wrapper\" [ngStyle]=\"{color: attributeModel.textColorOnReadonly}\">{{ getValue() }}</label>\n    </div>\n  } @else {\n    <div  class=\"inputTextBox\">\n\n      <input\n        pInputText\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"attributeModel.placeholder ?? ''\"\n        class=\"block p-inputtext w-full\"\n        [pTooltip]=\"attributeModel.tooltip ?? ''\"\n        [tooltipPosition]=\"attributeModel.toolTipPosition ?? '' \"\n        [ngModel]=\"record?.[attributeModel.name] ?? ''\"\n        [disabled]=\"attributeModel?.readonly ?? false\" \n        [name]=\"attributeModel.name ?? 'textBox'\"\n        [id]=\"attributeModel.name ?? 'textBox'\"\n        [required]=\"attributeModel.isRequired ?? false\" \n        [ngStyle]=\"{\n          width: attributeModel.customColumnWidth\n            ? attributeModel.customColumnWidth\n            : '',\n          padding: attributeModel.customPadding ? attributeModel.customPadding : ''\n        }\"\n        #textboxField=\"ngModel\"\n        (ngModelChange)=\"handleModelChange($event, textboxField.valid)\"\n        [ngClass]=\"{\n          'ng-dirty ng-invalid':\n            (!textboxField.valid && error)\n        }\"\n      />\n    </div>\n  }\n  </div>\n    \n</ng-container>\n", styles: [".asterisk{color:red}.inputTextBox{position:relative}.textCount{position:absolute;bottom:23%;right:1%;color:#bcbcbc}.markRed{color:red}.text-value-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: TextBoxComponent, isStandalone: true, selector: "text-box", usesInheritance: true, ngImport: i0, template: "<ng-container >\n  <div class=\"\">\n\n  <div *ngIf=\"attributeModel.displayText\" class=\"mb-2\">\n    <label>{{ attributeModel.displayText }}</label>\n    <span class=\"asterisk ml-1\" *ngIf=\"attributeModel.isRequired\">*</span>\n  </div>\n   @if (attributeModel.readonly) {\n    <div class=\"mb-2\" [ngStyle]=\"{'font-size':'14px', 'color':'#0F1729', 'font-weight':'600' }\">\n      <label [for]=\"attributeModel.name ?? 'textBox'\" class=\"text-value-wrapper\" [ngStyle]=\"{color: attributeModel.textColorOnReadonly}\">{{ getValue() }}</label>\n    </div>\n  } @else {\n    <div  class=\"inputTextBox\">\n\n      <input\n        pInputText\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"attributeModel.placeholder ?? ''\"\n        class=\"block p-inputtext w-full\"\n        [pTooltip]=\"attributeModel.tooltip ?? ''\"\n        [tooltipPosition]=\"attributeModel.toolTipPosition ?? '' \"\n        [ngModel]=\"record?.[attributeModel.name] ?? ''\"\n        [disabled]=\"attributeModel.disable ?? false\" \n        [name]=\"attributeModel.name ?? 'textBox'\"\n        [id]=\"attributeModel.name ?? 'textBox'\"\n        [required]=\"attributeModel.isRequired ?? false\" \n        [ngStyle]=\"{\n          width: attributeModel.customColumnWidth\n            ? attributeModel.customColumnWidth\n            : '',\n          padding: attributeModel.customPadding ? attributeModel.customPadding : ''\n        }\"\n        #textboxField=\"ngModel\"\n        (ngModelChange)=\"handleModelChange($event, textboxField.valid)\"\n        [ngClass]=\"{\n          'ng-dirty ng-invalid':\n            (!textboxField.valid && error)\n        }\"\n      />\n    </div>\n  }\n  </div>\n    \n</ng-container>\n", styles: [".asterisk{color:red}.inputTextBox{position:relative}.textCount{position:absolute;bottom:23%;right:1%;color:#bcbcbc}.markRed{color:red}.text-value-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'text-box', standalone: true, imports: [CommonModule, InputTextModule, FormsModule, TooltipModule], template: "<ng-container >\n  <div class=\"\">\n\n  <div *ngIf=\"attributeModel.displayText\" class=\"mb-2\">\n    <label>{{ attributeModel.displayText }}</label>\n    <span class=\"asterisk ml-1\" *ngIf=\"attributeModel.isRequired\">*</span>\n  </div>\n   @if (attributeModel.readonly) {\n    <div class=\"mb-2\" [ngStyle]=\"{'font-size':'14px', 'color':'#0F1729', 'font-weight':'600' }\">\n      <label [for]=\"attributeModel.name ?? 'textBox'\" class=\"text-value-wrapper\" [ngStyle]=\"{color: attributeModel.textColorOnReadonly}\">{{ getValue() }}</label>\n    </div>\n  } @else {\n    <div  class=\"inputTextBox\">\n\n      <input\n        pInputText\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"attributeModel.placeholder ?? ''\"\n        class=\"block p-inputtext w-full\"\n        [pTooltip]=\"attributeModel.tooltip ?? ''\"\n        [tooltipPosition]=\"attributeModel.toolTipPosition ?? '' \"\n        [ngModel]=\"record?.[attributeModel.name] ?? ''\"\n        [disabled]=\"attributeModel?.readonly ?? false\" \n        [name]=\"attributeModel.name ?? 'textBox'\"\n        [id]=\"attributeModel.name ?? 'textBox'\"\n        [required]=\"attributeModel.isRequired ?? false\" \n        [ngStyle]=\"{\n          width: attributeModel.customColumnWidth\n            ? attributeModel.customColumnWidth\n            : '',\n          padding: attributeModel.customPadding ? attributeModel.customPadding : ''\n        }\"\n        #textboxField=\"ngModel\"\n        (ngModelChange)=\"handleModelChange($event, textboxField.valid)\"\n        [ngClass]=\"{\n          'ng-dirty ng-invalid':\n            (!textboxField.valid && error)\n        }\"\n      />\n    </div>\n  }\n  </div>\n    \n</ng-container>\n", styles: [".asterisk{color:red}.inputTextBox{position:relative}.textCount{position:absolute;bottom:23%;right:1%;color:#bcbcbc}.markRed{color:red}.text-value-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}\n"] }]
+            args: [{ selector: 'text-box', standalone: true, imports: [CommonModule, InputTextModule, FormsModule, TooltipModule], template: "<ng-container >\n  <div class=\"\">\n\n  <div *ngIf=\"attributeModel.displayText\" class=\"mb-2\">\n    <label>{{ attributeModel.displayText }}</label>\n    <span class=\"asterisk ml-1\" *ngIf=\"attributeModel.isRequired\">*</span>\n  </div>\n   @if (attributeModel.readonly) {\n    <div class=\"mb-2\" [ngStyle]=\"{'font-size':'14px', 'color':'#0F1729', 'font-weight':'600' }\">\n      <label [for]=\"attributeModel.name ?? 'textBox'\" class=\"text-value-wrapper\" [ngStyle]=\"{color: attributeModel.textColorOnReadonly}\">{{ getValue() }}</label>\n    </div>\n  } @else {\n    <div  class=\"inputTextBox\">\n\n      <input\n        pInputText\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"attributeModel.placeholder ?? ''\"\n        class=\"block p-inputtext w-full\"\n        [pTooltip]=\"attributeModel.tooltip ?? ''\"\n        [tooltipPosition]=\"attributeModel.toolTipPosition ?? '' \"\n        [ngModel]=\"record?.[attributeModel.name] ?? ''\"\n        [disabled]=\"attributeModel.disable ?? false\" \n        [name]=\"attributeModel.name ?? 'textBox'\"\n        [id]=\"attributeModel.name ?? 'textBox'\"\n        [required]=\"attributeModel.isRequired ?? false\" \n        [ngStyle]=\"{\n          width: attributeModel.customColumnWidth\n            ? attributeModel.customColumnWidth\n            : '',\n          padding: attributeModel.customPadding ? attributeModel.customPadding : ''\n        }\"\n        #textboxField=\"ngModel\"\n        (ngModelChange)=\"handleModelChange($event, textboxField.valid)\"\n        [ngClass]=\"{\n          'ng-dirty ng-invalid':\n            (!textboxField.valid && error)\n        }\"\n      />\n    </div>\n  }\n  </div>\n    \n</ng-container>\n", styles: [".asterisk{color:red}.inputTextBox{position:relative}.textCount{position:absolute;bottom:23%;right:1%;color:#bcbcbc}.markRed{color:red}.text-value-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}\n"] }]
         }] });
 
 class FormContainerComponent {
@@ -1245,6 +1248,7 @@ class AttributeModel {
     lookupName;
     textColorOnReadonly;
     hideLabelOnForm = false;
+    disable = false;
 }
 
 class BaseModel {
@@ -1359,7 +1363,8 @@ class BaseFormComponent {
         let id = this.activatedRoute ? this.activatedRoute.snapshot.params[SHARED.ID] : '';
         if ((id !== SHARED.ZERO.toString()) && id) {
             this.service.getById(id).subscribe((res) => {
-                this.record = res;
+                // To make the object immutable
+                this.record = JSON.parse(JSON.stringify(res));
                 this.baseStore?.setRecordChange(res);
                 this.recordChange.next(res);
             });
@@ -1499,6 +1504,14 @@ class LISTCONFIG {
             listLabelProperty: "name"
         }
     ];
+    static QUEUECONFIG = [
+        {
+            name: "queueID",
+            dataSource: "queues",
+            listValueProperty: "_id",
+            listLabelProperty: "name"
+        }
+    ];
 }
 
 let ApiAdminStore = class ApiAdminStore extends BaseStore {
@@ -1836,6 +1849,7 @@ class WidgetItemModel extends BaseModel {
     isMain;
     isEditable;
     linkedWidgetID;
+    isActive;
 }
 
 /**
@@ -1922,11 +1936,11 @@ class WidgetAdminFormComponent extends BaseFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminFormComponent, deps: [{ token: WidgetAdminService }, { token: ValidatorService }, { token: WidgetAdminStore }, { token: WidgetAdminQuery }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetAdminFormComponent, isStandalone: false, selector: "lib-widget-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'queueID',\n                displayText : 'Select Queue 2',\n                isRequired:true,\n              }\" (onInput)=\"handleQueueChange($event)\">\n                </dropdown>\n            </div>\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"flex\">\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'key',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'key',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\n            <div class=\"card m-0 p-0 mb-2\">\n                <div class=\"mt-3 w-full flex\">\n                    <button pButton pRipple label=\"Add Field\" routerLinkActive=\"router-link-active\"\n                        icon=\"pi pi-plus font-semibold\"\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                        (click)=\"handleWidgetItemAddBtnClick()\">Add Widget Item</button>\n                </div>\n\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'key',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'linkedWidgetID',\n                                        listLabelProperty:'widgetName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Linked Widget',\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 m-0 flex justify-content-around md:col-3 mt-4\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isMain',\n                                          displayText : 'Add to Main ?',\n                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isEditable',\n                                          displayText : 'Is Editable ?',\n                                        }\">\n                    </check-box>\n                </div>\n            </div>\n        </div>\n    </div>\n</form-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["isDisable", "messages", "record", "headerText", "showSave", "disableButton", "disableSubmitButton", "disableSaveButton", "overrideNavigate"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetAdminFormComponent, isStandalone: false, selector: "lib-widget-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'queueID',\n                displayText : 'Select Queue 2',\n                isRequired:true,\n              }\" (onInput)=\"handleQueueChange($event)\">\n                </dropdown>\n            </div>\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"flex\">\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'key',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'key',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\n            <div class=\"card m-0 p-0 mb-2\">\n                <div class=\"mt-3 w-full flex\">\n                    <button pButton pRipple label=\"Add Field\" routerLinkActive=\"router-link-active\"\n                        icon=\"pi pi-plus font-semibold\"\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                        (click)=\"handleWidgetItemAddBtnClick()\">Add Widget Item</button>\n                </div>\n\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'key',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'linkedWidgetID',\n                                        listLabelProperty:'widgetName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Linked Widget',\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 m-0 flex justify-content-around md:col-3 mt-4\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isMain',\n                                          displayText : 'Add to Main ?',\n                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isEditable',\n                                          displayText : 'Is Editable ?',\n                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                          name:'isActive',\n                                                          displayText : 'Is Active ?',\n                                                        }\">\n                    </check-box>\n                </div>\n            </div>\n        </div>\n    </div>\n</form-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["isDisable", "messages", "record", "headerText", "showSave", "disableButton", "disableSubmitButton", "disableSaveButton", "overrideNavigate"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-admin-form', standalone: false, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'queueID',\n                displayText : 'Select Queue 2',\n                isRequired:true,\n              }\" (onInput)=\"handleQueueChange($event)\">\n                </dropdown>\n            </div>\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"flex\">\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'key',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'key',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\n            <div class=\"card m-0 p-0 mb-2\">\n                <div class=\"mt-3 w-full flex\">\n                    <button pButton pRipple label=\"Add Field\" routerLinkActive=\"router-link-active\"\n                        icon=\"pi pi-plus font-semibold\"\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                        (click)=\"handleWidgetItemAddBtnClick()\">Add Widget Item</button>\n                </div>\n\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'key',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'linkedWidgetID',\n                                        listLabelProperty:'widgetName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Linked Widget',\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 m-0 flex justify-content-around md:col-3 mt-4\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isMain',\n                                          displayText : 'Add to Main ?',\n                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isEditable',\n                                          displayText : 'Is Editable ?',\n                                        }\">\n                    </check-box>\n                </div>\n            </div>\n        </div>\n    </div>\n</form-container>" }]
+            args: [{ selector: 'lib-widget-admin-form', standalone: false, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'queueID',\n                displayText : 'Select Queue 2',\n                isRequired:true,\n              }\" (onInput)=\"handleQueueChange($event)\">\n                </dropdown>\n            </div>\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"flex\">\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'key',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-6 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'key',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\n            <div class=\"card m-0 p-0 mb-2\">\n                <div class=\"mt-3 w-full flex\">\n                    <button pButton pRipple label=\"Add Field\" routerLinkActive=\"router-link-active\"\n                        icon=\"pi pi-plus font-semibold\"\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                        (click)=\"handleWidgetItemAddBtnClick()\">Add Widget Item</button>\n                </div>\n\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'key',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'linkedWidgetID',\n                                        listLabelProperty:'widgetName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Linked Widget',\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-3 m-0 flex justify-content-around md:col-3 mt-4\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isMain',\n                                          displayText : 'Add to Main ?',\n                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                          name:'isEditable',\n                                          displayText : 'Is Editable ?',\n                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                          name:'isActive',\n                                                          displayText : 'Is Active ?',\n                                                        }\">\n                    </check-box>\n                </div>\n            </div>\n        </div>\n    </div>\n</form-container>" }]
         }], ctorParameters: () => [{ type: WidgetAdminService }, { type: ValidatorService }, { type: WidgetAdminStore }, { type: WidgetAdminQuery }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }] });
 
 /**
@@ -2077,37 +2091,276 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 }]
         }] });
 
-class DdAdminModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, imports: [CommonModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, imports: [CommonModule] });
+class DdAdminModel extends BaseModel {
+    name;
+    queueID;
+    dictionaryItems = [];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
+class DdItemModel extends BaseModel {
+    itemName;
+    itemExpression;
+    styleExpression;
+    isActive;
+}
+
+let DictionaryStore = class DictionaryStore extends BaseStore {
+    setPropertiesData(value) {
+        this.update({ propertyData: value });
+    }
+    setSidebarVisible(value) {
+        this.update({ isSideBarVisible: value });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryStore, providedIn: 'root' });
+};
+DictionaryStore = __decorate([
+    StoreConfig({ name: 'dictionary' })
+], DictionaryStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class DdAdminFormComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: DdAdminFormComponent, isStandalone: true, selector: "lib-dd-admin-form", ngImport: i0, template: "<p>dd-admin-form works!</p>\n", styles: [""] });
+class DictionaryService extends BaseService {
+    dictionaryStore;
+    constructor(dictionaryStore, http, appConfigService, listService) {
+        super(http, dictionaryStore, appConfigService, listService);
+        this.dictionaryStore = dictionaryStore;
+        this._pathName = DATASOURCES.DICTIONARY;
+    }
+    list = LISTCONFIG.QUEUECONFIG;
+    getAllApiProperties(name, id) {
+        return this.http.get(`${this.apiUrl + name}/${id}`).pipe(tap$1((propertiesData) => this.dictionaryStore.setPropertiesData(propertiesData)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryService, deps: [{ token: DictionaryStore }, { token: i1$1.HttpClient }, { token: AppConfigService }, { token: ListService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: DictionaryStore }, { type: i1$1.HttpClient }, { type: AppConfigService }, { type: ListService }] });
+
+class DictionaryQuery extends BaseQuery {
+    store;
+    constructor(store) {
+        super(store);
+        this.store = store;
+    }
+    selectPropertyData() {
+        return this.select((state) => state['propertyData']);
+    }
+    getPropertyData() {
+        return this.getValue()['propertyData'];
+    }
+    selectSidebarVisible() {
+        return this.select((state) => state['isSideBarVisible']);
+    }
+    getSidebarVisible() {
+        return this.getValue()['isSideBarVisible'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryQuery, deps: [{ token: DictionaryStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryQuery, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DictionaryQuery, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: DictionaryStore }] });
+
+class DdAttributeSidebarViewModel {
+    mappingInfo = SHARED.EMPTY;
+    propertyList = SHARED.EMPTY;
+}
+
+class DdAdminItemFormComponent {
+    dictionaryStore;
+    dictionaryQuery;
+    ddItemRecord = { itemName: SHARED.EMPTY, itemExpression: SHARED.EMPTY, styleExpression: SHARED.EMPTY, isActive: SHARED.FALSE };
+    isItemExpression;
+    isSidebarVisible;
+    saveClick = new EventEmitter();
+    attributeRecord;
+    dictionaryItemName = SHARED.EMPTY;
+    condition = SHARED.EMPTY;
+    propertyOptions = [];
+    subscriptions = new Subscription();
+    constructor(dictionaryStore, dictionaryQuery) {
+        this.dictionaryStore = dictionaryStore;
+        this.dictionaryQuery = dictionaryQuery;
+        this.attributeRecord = new DdAttributeSidebarViewModel();
+    }
+    ngOnChanges(changes) {
+        this.subscriptions.add(this.dictionaryQuery.selectPropertyData().subscribe((res) => {
+            if (res) {
+                res.properties.forEach((property) => {
+                    this.propertyOptions.push({ label: `${res.name}.${property}`, value: `${res.name}.${property}` });
+                });
+                res?.childApis.forEach((childApi) => {
+                    childApi.properties.forEach((property) => {
+                        this.propertyOptions.push({ label: `${res.name}.${childApi.name}.${property}`, value: `${res.name}.${childApi.name}.${property}` });
+                    });
+                });
+            }
+        }));
+        if (changes['isItemExpression']) {
+            this.attributeRecord.mappingInfo = (this.isItemExpression ? this.ddItemRecord.itemExpression : this.ddItemRecord.styleExpression) ?? SHARED.EMPTY;
+        }
+    }
+    handleSaveBtnClick(event) {
+        if (this.isItemExpression) {
+            this.ddItemRecord.itemExpression = this.attributeRecord.mappingInfo;
+        }
+        else {
+            this.ddItemRecord.styleExpression = this.attributeRecord.mappingInfo;
+        }
+        this.attributeRecord.propertyList = SHARED.EMPTY;
+        this.saveClick.emit(false);
+    }
+    handleAddExpressionClick(event) {
+        if (this.attributeRecord.propertyList) {
+            const formattedProperty = `\${${this.attributeRecord.propertyList}}`;
+            this.attributeRecord.mappingInfo += this.attributeRecord.mappingInfo
+                ? `${formattedProperty}`
+                : formattedProperty;
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminItemFormComponent, deps: [{ token: DictionaryStore }, { token: DictionaryQuery }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: DdAdminItemFormComponent, isStandalone: false, selector: "lib-dd-admin-item-form", inputs: { ddItemRecord: "ddItemRecord", isItemExpression: "isItemExpression", isSidebarVisible: "isSidebarVisible" }, outputs: { saveClick: "saveClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dicitonary-edit-action px-3\">\n    <div class=\"flex align-items-center justify-content-end mt-3\">\n        <lib-button\n        [store]=\"dictionaryStore\"\n        [record]=\"attributeRecord\"\n        [attributeModel]=\"{\n          buttonLabel: 'Save',\n          isDisabled: false,\n        }\"\n        (onBtnClick)=\"handleSaveBtnClick($event)\"\n        >\n      </lib-button>\n    </div>\n\n    <div class=\"col-12 md:col-12 mt-5\">\n        <text-area\n            [store]=\"dictionaryStore\"\n            [record]=\"attributeRecord\"\n            [attributeModel]=\"{\n              displayText: 'Expression',\n              readonly : false,\n              name : 'mappingInfo',\n              isRequired : false,\n              placeholder : 'Enter Text',\n              customPadding: '12px',\n            }\"\n            ></text-area>\n    </div>\n    <div class=\"col-12 md:col-12\">\n        <div class=\"p-field queue-list-wrapper\">\n            <dropdown [store]=\"dictionaryStore\" [record]=\"attributeRecord\" [attributeModel]=\"{\n            name:'propertyList',\n            displayText : 'Select properties',\n            isRequired:false,\n            options : propertyOptions\n        }\">\n            </dropdown>\n        </div>\n    </div>\n    <div class=\"col-12 md:col-3\">\n        <lib-button\n        [store]=\"dictionaryStore\"\n        [record]=\"attributeRecord\"\n        [attributeModel]=\"{\n          buttonLabel: 'Add to expression',\n          isDisabled: false,\n        }\"\n        (onBtnClick)=\"handleAddExpressionClick($event)\"\n        >\n      </lib-button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: ButtonComponent, selector: "lib-button" }, { kind: "component", type: TextAreaComponent, selector: "text-area", inputs: ["rowspan"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminItemFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dd-admin-item-form', standalone: false, template: "<div class=\"dicitonary-edit-action px-3\">\n    <div class=\"flex align-items-center justify-content-end mt-3\">\n        <lib-button\n        [store]=\"dictionaryStore\"\n        [record]=\"attributeRecord\"\n        [attributeModel]=\"{\n          buttonLabel: 'Save',\n          isDisabled: false,\n        }\"\n        (onBtnClick)=\"handleSaveBtnClick($event)\"\n        >\n      </lib-button>\n    </div>\n\n    <div class=\"col-12 md:col-12 mt-5\">\n        <text-area\n            [store]=\"dictionaryStore\"\n            [record]=\"attributeRecord\"\n            [attributeModel]=\"{\n              displayText: 'Expression',\n              readonly : false,\n              name : 'mappingInfo',\n              isRequired : false,\n              placeholder : 'Enter Text',\n              customPadding: '12px',\n            }\"\n            ></text-area>\n    </div>\n    <div class=\"col-12 md:col-12\">\n        <div class=\"p-field queue-list-wrapper\">\n            <dropdown [store]=\"dictionaryStore\" [record]=\"attributeRecord\" [attributeModel]=\"{\n            name:'propertyList',\n            displayText : 'Select properties',\n            isRequired:false,\n            options : propertyOptions\n        }\">\n            </dropdown>\n        </div>\n    </div>\n    <div class=\"col-12 md:col-3\">\n        <lib-button\n        [store]=\"dictionaryStore\"\n        [record]=\"attributeRecord\"\n        [attributeModel]=\"{\n          buttonLabel: 'Add to expression',\n          isDisabled: false,\n        }\"\n        (onBtnClick)=\"handleAddExpressionClick($event)\"\n        >\n      </lib-button>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [{ type: DictionaryStore }, { type: DictionaryQuery }], propDecorators: { ddItemRecord: [{
+                type: Input
+            }], isItemExpression: [{
+                type: Input
+            }], isSidebarVisible: [{
+                type: Input
+            }], saveClick: [{
+                type: Output
+            }] } });
+
+class DdAdminFormComponent extends BaseFormComponent {
+    service;
+    dictionaryQuery;
+    validatorService;
+    router;
+    activatedRoute;
+    ddAdminStore;
+    baseStore;
+    baseQuery;
+    sidebarVisibility = [];
+    dictionaryItem;
+    dictionaryName = SHARED.EMPTY;
+    isItemExpression = SHARED.FALSE;
+    constructor(service, dictionaryQuery, validatorService, router, activatedRoute, ddAdminStore, baseStore, baseQuery) {
+        super(service, validatorService, router, activatedRoute);
+        this.service = service;
+        this.dictionaryQuery = dictionaryQuery;
+        this.validatorService = validatorService;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.ddAdminStore = ddAdminStore;
+        this.baseStore = baseStore;
+        this.baseQuery = baseQuery;
+        this.record = new DdAdminModel();
+        this.dictionaryItem = new DdItemModel();
+    }
+    ngOnInit() {
+        this.init();
+        this.sidebarVisibility = new Array(this.record.dictionaryItems.length).fill(false);
+    }
+    handleDictionaryItemAddBtnClick() {
+        this.record.dictionaryItems = [...this.record.dictionaryItems, new DdItemModel()];
+    }
+    handleItemExpression(i, event) {
+        this.sidebarVisibility[i] = true;
+        this.isItemExpression = SHARED.TRUE;
+    }
+    handleStyleExpression(i, event) {
+        this.sidebarVisibility[i] = true;
+        this.isItemExpression = SHARED.FALSE;
+    }
+    handleGetProperties(event) {
+        this.service.getAllApiProperties(ROUTES.APIPROPERTIES, event).subscribe();
+    }
+    onSidebarClose(isVisible) {
+        this.sidebarVisibility = this.sidebarVisibility.map(() => isVisible);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminFormComponent, deps: [{ token: DictionaryService }, { token: DictionaryQuery }, { token: ValidatorService }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: DictionaryStore }, { token: BaseStore }, { token: BaseQuery }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: DdAdminFormComponent, isStandalone: false, selector: "lib-dd-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [headerText]=\"'Dictionary Form'\" [showSave]=\"true\" (onCancel)=\"handleCancel()\"\n    (onSave)=\"handleSubmit()\">\n    <div class=\"card p-fluid p-formgrid grid\">\n        <div class=\"col-12 md:col-12 flex align-items-center justify-content-between\">\n            <div class=\"col-12 md:col-6 p-field\">\n                <div class=\"dictionary-name\">\n                    <text-box [store]=\"ddAdminStore\" [record]=\"record\" [attributeModel]=\"{\n                  readonly : false,\n                  name : 'name',\n                  isRequired : true,\n                  displayText: 'Dictionary Name',\n                  placeholder : 'Enter Text',\n                }\"></text-box>\n                </div>\n            </div>\n            <div class=\"col-12 md:col-6\">\n                <div class=\"p-field queue-list-wrapper\">\n                    <dropdown [store]=\"ddAdminStore\" [record]=\"record\" [attributeModel]=\"{\n              name: 'queueID',\n              dataSource: 'queues',\n              listLabelProperty: 'name',\n              listValueProperty: '_id',\n              displayText: 'Queue',\n              placeholder: 'Select Queue',\n              isRequired: true\n            }\" (onInput)=\"handleGetProperties($event)\">\n                    </dropdown>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 ml-3 col-12 md:col-2\">\n            <div class=\"card m-0 p-0 mb-2\">\n                <div class=\"mt-3 w-full flex\">\n                    <button pButton pRipple routerLinkActive=\"router-link-active\"\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                        (click)=\"handleDictionaryItemAddBtnClick()\">\n                        Add New Item\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- dictionary Items -->\n        <div class=\"col-12 md:col-12 flex justify-content-between\"\n            *ngFor=\"let ddItem of record.dictionaryItems; let i = index\">\n            <div class=\"field col-12 md:col-3 mt-2\">\n                <text-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                                                        name : 'itemName',\n                                                        readonly : false,\n                                                        displayText : 'Item Name',\n                                                        isRequired : true,\n                                                    }\"></text-box>\n            </div>\n            <div class=\"field flex align-items-center justify-content-center col-12 md:col-3\">\n                <div class=\"col-12 md:col-12\">\n                    <text-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                name : 'itemExpression',\n                readonly : false,\n                disable : true,\n                displayText : 'Item Expression',\n                isRequired : true,\n            }\">\n                    </text-box>\n                </div>\n                <span class=\"pi pi-cog mt-4 cursor-pointer text-xl\" (click)=\"handleItemExpression(i, $event )\"></span>\n            </div>\n\n            <div class=\"field col-12 md:col-3 flex align-items-center justify-content-center\">\n                <div class=\"col-12 md:col-12\">\n                    <text-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                        name : 'styleExpression',\n                        readonly : false,\n                        disable : true,\n                        displayText : 'Style Expression',\n                        isRequired : true,\n                    }\">\n                    </text-box>\n                </div>\n                <span class=\"pi pi-cog mt-4 text-xl cursor-pointer text-color\"\n                    (click)=\"handleStyleExpression(i, $event)\"></span>\n            </div>\n\n            <div class=\"field col-12 md:col-2 flex align-items-center mt-4\">\n                <check-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                              name:'isActive',\n                              displayText : 'Is Active',\n                            }\">\n                </check-box>\n            </div>\n            <sidebar [isSidebarVisible]=\"sidebarVisibility[i]\" [title]=\"'Edit Expression'\"\n                (onClose)=\"onSidebarClose($event)\">\n                <lib-dd-admin-item-form [ddItemRecord]=\"ddItem\" [isItemExpression]=\"isItemExpression\"\n                    (saveClick)=\"onSidebarClose($event)\"></lib-dd-admin-item-form>\n            </sidebar>\n        </div>\n\n    </div>\n</form-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["isDisable", "messages", "record", "headerText", "showSave", "disableButton", "disableSubmitButton", "disableSaveButton", "overrideNavigate"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isSidebarVisible", "title"], outputs: ["onClose"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: DdAdminItemFormComponent, selector: "lib-dd-admin-item-form", inputs: ["ddItemRecord", "isItemExpression", "isSidebarVisible"], outputs: ["saveClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dd-admin-form', imports: [], template: "<p>dd-admin-form works!</p>\n" }]
-        }] });
+            args: [{ selector: 'lib-dd-admin-form', standalone: false, template: "<form-container [record]=\"record\" [headerText]=\"'Dictionary Form'\" [showSave]=\"true\" (onCancel)=\"handleCancel()\"\n    (onSave)=\"handleSubmit()\">\n    <div class=\"card p-fluid p-formgrid grid\">\n        <div class=\"col-12 md:col-12 flex align-items-center justify-content-between\">\n            <div class=\"col-12 md:col-6 p-field\">\n                <div class=\"dictionary-name\">\n                    <text-box [store]=\"ddAdminStore\" [record]=\"record\" [attributeModel]=\"{\n                  readonly : false,\n                  name : 'name',\n                  isRequired : true,\n                  displayText: 'Dictionary Name',\n                  placeholder : 'Enter Text',\n                }\"></text-box>\n                </div>\n            </div>\n            <div class=\"col-12 md:col-6\">\n                <div class=\"p-field queue-list-wrapper\">\n                    <dropdown [store]=\"ddAdminStore\" [record]=\"record\" [attributeModel]=\"{\n              name: 'queueID',\n              dataSource: 'queues',\n              listLabelProperty: 'name',\n              listValueProperty: '_id',\n              displayText: 'Queue',\n              placeholder: 'Select Queue',\n              isRequired: true\n            }\" (onInput)=\"handleGetProperties($event)\">\n                    </dropdown>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 ml-3 col-12 md:col-2\">\n            <div class=\"card m-0 p-0 mb-2\">\n                <div class=\"mt-3 w-full flex\">\n                    <button pButton pRipple routerLinkActive=\"router-link-active\"\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                        (click)=\"handleDictionaryItemAddBtnClick()\">\n                        Add New Item\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- dictionary Items -->\n        <div class=\"col-12 md:col-12 flex justify-content-between\"\n            *ngFor=\"let ddItem of record.dictionaryItems; let i = index\">\n            <div class=\"field col-12 md:col-3 mt-2\">\n                <text-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                                                        name : 'itemName',\n                                                        readonly : false,\n                                                        displayText : 'Item Name',\n                                                        isRequired : true,\n                                                    }\"></text-box>\n            </div>\n            <div class=\"field flex align-items-center justify-content-center col-12 md:col-3\">\n                <div class=\"col-12 md:col-12\">\n                    <text-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                name : 'itemExpression',\n                readonly : false,\n                disable : true,\n                displayText : 'Item Expression',\n                isRequired : true,\n            }\">\n                    </text-box>\n                </div>\n                <span class=\"pi pi-cog mt-4 cursor-pointer text-xl\" (click)=\"handleItemExpression(i, $event )\"></span>\n            </div>\n\n            <div class=\"field col-12 md:col-3 flex align-items-center justify-content-center\">\n                <div class=\"col-12 md:col-12\">\n                    <text-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                        name : 'styleExpression',\n                        readonly : false,\n                        disable : true,\n                        displayText : 'Style Expression',\n                        isRequired : true,\n                    }\">\n                    </text-box>\n                </div>\n                <span class=\"pi pi-cog mt-4 text-xl cursor-pointer text-color\"\n                    (click)=\"handleStyleExpression(i, $event)\"></span>\n            </div>\n\n            <div class=\"field col-12 md:col-2 flex align-items-center mt-4\">\n                <check-box [store]=\"ddAdminStore\" [record]=\"ddItem\" [attributeModel]=\"{\n                              name:'isActive',\n                              displayText : 'Is Active',\n                            }\">\n                </check-box>\n            </div>\n            <sidebar [isSidebarVisible]=\"sidebarVisibility[i]\" [title]=\"'Edit Expression'\"\n                (onClose)=\"onSidebarClose($event)\">\n                <lib-dd-admin-item-form [ddItemRecord]=\"ddItem\" [isItemExpression]=\"isItemExpression\"\n                    (saveClick)=\"onSidebarClose($event)\"></lib-dd-admin-item-form>\n            </sidebar>\n        </div>\n\n    </div>\n</form-container>" }]
+        }], ctorParameters: () => [{ type: DictionaryService }, { type: DictionaryQuery }, { type: ValidatorService }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: DictionaryStore }, { type: BaseStore }, { type: BaseQuery }] });
 
-class DdAdminListComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: DdAdminListComponent, isStandalone: true, selector: "lib-dd-admin-list", ngImport: i0, template: "<p>dd-admin-list works!</p>\n", styles: [""] });
+class DdAdminListComponent extends BaseListComponent {
+    tableBuilder;
+    constructor(service, tableBuilder) {
+        super(service, tableBuilder);
+        this.tableBuilder = tableBuilder;
+    }
+    ngOnInit() {
+        this.init();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminListComponent, deps: [{ token: DictionaryService }, { token: TableBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: DdAdminListComponent, isStandalone: false, selector: "lib-dd-admin-list", usesInheritance: true, ngImport: i0, template: "<div class=\"dicitonary-list-wrapper\">\n    @if(table){\n            <lib-table-primary [title]=\"'Dictionary'\" [table]=\"table\"></lib-table-primary>\n    }\n</div>", styles: [""], dependencies: [{ kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["table", "title", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dd-admin-list', imports: [], template: "<p>dd-admin-list works!</p>\n" }]
+            args: [{ selector: 'lib-dd-admin-list', standalone: false, template: "<div class=\"dicitonary-list-wrapper\">\n    @if(table){\n            <lib-table-primary [title]=\"'Dictionary'\" [table]=\"table\"></lib-table-primary>\n    }\n</div>" }]
+        }], ctorParameters: () => [{ type: DictionaryService }, { type: TableBuilder }] });
+
+class DdAdminModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, declarations: [DdAdminFormComponent, DdAdminListComponent, DdAdminItemFormComponent], imports: [CommonModule,
+            SharedModule,
+            DropdownModule,
+            ButtonComponent,
+            InputTextareaModule,
+            ReactiveFormsModule,
+            FormsModule,
+            TablePrimaryComponent,
+            CheckBoxComponent,
+            ButtonModule,
+            TextAreaComponent,
+            FormContainerComponent], exports: [DdAdminFormComponent, DdAdminListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, imports: [CommonModule,
+            SharedModule,
+            DropdownModule,
+            ButtonComponent,
+            InputTextareaModule,
+            ReactiveFormsModule,
+            FormsModule,
+            TablePrimaryComponent,
+            CheckBoxComponent,
+            ButtonModule,
+            TextAreaComponent,
+            FormContainerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DdAdminModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DdAdminFormComponent, DdAdminListComponent, DdAdminItemFormComponent],
+                    imports: [
+                        CommonModule,
+                        SharedModule,
+                        DropdownModule,
+                        ButtonComponent,
+                        InputTextareaModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TablePrimaryComponent,
+                        CheckBoxComponent,
+                        ButtonModule,
+                        TextAreaComponent,
+                        FormContainerComponent
+                    ],
+                    exports: [DdAdminFormComponent, DdAdminListComponent]
+                }]
         }] });
 
 /*