@churchillliving/se-ui-toolkit 6.53.290 → 6.53.293

package/bundles/churchillliving-se-ui-toolkit.umd.js

@@ -9564,7 +9564,7 @@
   SeGlobalFilterComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-global-filters',
-                  template: "<div class=\"p-d-flex p-flex-wrap p-flex-row row\">\n  <div\n    [class]=\"globalFilter.hidden ? '' : globalFilter.column ? 'p-col-' + globalFilter.column : 'p-col-3'\"\n    *ngFor=\"let globalFilter of globalFilters\"\n  >\n    <div [ngSwitch]=\"globalFilter.type\">\n      <!-- Calender control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText: 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n              [placeholder]=\"'Select-Date'\"\n              [(ngModel)]=\"globalFilter.value\"\n              (keyup.enter)=\"applyFilters()\"\n              (onSelect)=\"selectDate(globalFilter, true)\"\n              [inputId]=\"globalFilter.field\"\n              [dateFormat]=\"calendarFormat\"\n              (onClose)=\"onFocusOutEvent(globalFilter)\"\n              appendTo=\"body\"\n              [showButtonBar]=\"true\"\n              [disabled]=\"globalFilter.disabled\"\n              (keyup)=\"calendarFocusEvent(globalFilter)\"\n            >\n            </p-calendar>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Calender Range -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"\n              [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n              class=\"custom-btn\"\n              (click)=\"showPrevious(globalFilter)\"\n              label=\"Previous {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} <<\"\n            ></button>\n            <label class=\"size-10\"\n              >\n              <span [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"></span>\n              <span *ngIf=\"globalFilter.prefix===true || globalFilter.prefix===undefined\">\n                {{  globalFilter.labelText ? globalFilter.labelText : '' }}\n              </span>\n              {{\n                startDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              to\n              {{\n                endDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              <span *ngIf=\"globalFilter.prefix===false\">\n                {{ globalFilter.labelText ? globalFilter.labelText : ''}}\n              </span></label\n            >\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"\n              [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n              class=\"custom-btn\"\n              (click)=\"showNext(globalFilter)\"\n              label=\"Next {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} >>\"\n            ></button>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Checkbox Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <p-checkbox\n          [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty': 'p-d-flex p-ai-center'\"\n            [binary]=\"true\"\n            (keyup.enter)=\"applyFilters()\"\n            [(ngModel)]=\"globalFilter.value\"\n            [disabled]=\"globalFilter.disabled\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n          ></p-checkbox>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Spacer Control -->\n      <span *ngIf=\"!globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.SPACER\"\n        >\n          <span\n            [class]=\"\n            globalFilter.column\n                ? 'p-col-' + globalFilter.column\n                : ''\n            \"\n          ></span>\n        </div>\n      </span>\n\n      <!-- Dropdown Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <p-dropdown\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [name]=\"globalFilter.displayText\"\n            [showClear]=\"true\"\n            [styleClass]=\"globalFilter.field\"\n            (keyup.Tab)=\"tabFocusEvent(globalFilter)\"\n            [placeholder]=\"globalFilter.displayText\"\n            [options]=\"globalFilter.data || []\"\n            [optionLabel]=\"globalFilter.optionLabel\"\n            [optionValue]=\"globalFilter.optionValue\"\n            [filter]=\"globalFilter.allowSearch\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (keyup.enter)=\"applyFilters()\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-dropdown>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Input control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.INPUT\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-flex-nowrap align-items-center\">\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1'\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- NumericInput control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <input\n              type=\"number\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n      \n      <!-- Date Range Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar \n            #rangeCalendar\n            [showButtonBar]=\"true\"\n\n            [inputId]=\"globalFilter.displayText\"\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText : 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n            [(ngModel)]=\"globalFilter.value\" \n            selectionMode=\"range\" \n            appendTo=\"body\"\n            (onSelect)=\"selectDate(globalFilter, true)\"\n            [dateFormat]=\"calendarFormat\"\n            (onClickOutside)=\"setDateRangeFilterValue(globalFilter)\"\n            (onBlur)=\"setDateRangeFilterValue(globalFilter)\"\n            (keyup)=\"calendarFocusEvent(globalFilter, $event)\"\n            (onClearClick)=\"clearDateRangeValue(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            (keyup.enter)=\"applyFilters(true, globalFilter)\"\n            \n            ></p-calendar>\n            <!-- todayButtonStyleClass=\"p-d-none\"\n            clearButtonStyleClass=\"p-ml-auto\" -->\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Numeric Range control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n        >\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex\">\n          <div class=\"p-d-flex flex-nowrap align-items-center p-mr-2\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.value\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              (onBlur)=\"setNumericRangeValueFrom(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueFrom(globalFilter,true)\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1  grow-1 input-number'\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n              globalFilter.errorMessage\n            }}</span>\n          </div>\n          <span class=\"to-numeric\">To</span>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.valueTwo\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1 input-number'\"\n              (onBlur)=\"setNumericRangeValueTwo(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueTwo(globalFilter,true)\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n        </div>\n        <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n          globalFilter.errorMessage\n        }}</span>\n        </div>\n      </span>\n\n      <!-- MultiSelect control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <p-multiSelect\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [options]=\"globalFilter.data\"\n            optionLabel=\"label\"\n            (keyup.enter)=\"applyFilters()\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            optionValue=\"value\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            [appendTo]=\"'body'\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-multiSelect>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Lookup Control Field -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <input\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [id]=\"globalFilter.field\"\n            type=\"text\"\n            pInputText\n            [(ngModel)]=\"globalFilter.value\"\n            (blur)=\"onFocusOutEvent(globalFilter)\"\n            [name]=\"globalFilter.field\"\n            (keyup.enter)=\"applyFilters()\"\n            (click)=\"selectLookupField(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            class=\"form-control\"\n          />\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Apply button -->\n\n<button\n*ngIf=\"searchGlobalFilterBtn\"\npButton\ntype=\"button\"\nicon=\"pi pi-search\"\nid=\"globalSearchbtn\"\n(click)=\"applyFilters()\"\nclass=\"p-button-success align-globalFilter-btn p-mb-2\"\n></button>\n\n<!-- Close button -->\n<button\n*ngIf=\"clearGlobalFilterBtn\"\npButton\nid=\"clearGlobalFilterBtn\"\ntype=\"button\"\nicon=\"pi pi-replay\"\n(click)=\"clearFilters()\"\n[class]=\"hideClearFilterBtn ? 'p-button-success p-mb-2 align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
+                  template: "<div class=\"p-d-flex p-flex-wrap p-flex-row row\">\n  <div\n    [class]=\"globalFilter.hidden ? '' : globalFilter.column ? 'p-col-' + globalFilter.column : 'p-col-3'\"\n    *ngFor=\"let globalFilter of globalFilters\"\n  >\n    <div [ngSwitch]=\"globalFilter.type\">\n      <!-- Calender control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText: 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n              [placeholder]=\"'Select-Date'\"\n              [(ngModel)]=\"globalFilter.value\"\n              (keyup.enter)=\"applyFilters()\"\n              (onSelect)=\"selectDate(globalFilter, true)\"\n              [inputId]=\"globalFilter.field\"\n              [dateFormat]=\"calendarFormat\"\n              (onClose)=\"onFocusOutEvent(globalFilter)\"\n              appendTo=\"body\"\n              [showButtonBar]=\"true\"\n              [disabled]=\"globalFilter.disabled\"\n              (keyup)=\"calendarFocusEvent(globalFilter)\"\n            >\n            </p-calendar>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Calender Range -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"\n              [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n              class=\"custom-btn\"\n              (click)=\"showPrevious(globalFilter)\"\n              label=\"Previous {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} <<\"\n            ></button>\n            <label class=\"size-10\"\n              >\n              <span [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"></span>\n              <span *ngIf=\"globalFilter.prefix===true || globalFilter.prefix===undefined\">\n                {{  globalFilter.labelText ? globalFilter.labelText : '' }}\n              </span>\n              {{\n                startDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              to\n              {{\n                endDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              <span *ngIf=\"globalFilter.prefix===false\">\n                {{ globalFilter.labelText ? globalFilter.labelText : ''}}\n              </span></label\n            >\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"\n              [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n              class=\"custom-btn\"\n              (click)=\"showNext(globalFilter)\"\n              label=\"Next {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} >>\"\n            ></button>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Checkbox Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <p-checkbox\n          [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty': 'p-d-flex p-ai-center'\"\n            [binary]=\"true\"\n            (keyup.enter)=\"applyFilters()\"\n            [(ngModel)]=\"globalFilter.value\"\n            [disabled]=\"globalFilter.disabled\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (click)=\"onFocusOutEvent(globalFilter)\"\n          ></p-checkbox>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Spacer Control -->\n      <span *ngIf=\"!globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.SPACER\"\n        >\n          <span\n            [class]=\"\n            globalFilter.column\n                ? 'p-col-' + globalFilter.column\n                : ''\n            \"\n          ></span>\n        </div>\n      </span>\n\n      <!-- Dropdown Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <p-dropdown\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [name]=\"globalFilter.displayText\"\n            [showClear]=\"true\"\n            [styleClass]=\"globalFilter.field\"\n            (keyup.Tab)=\"tabFocusEvent(globalFilter)\"\n            [placeholder]=\"globalFilter.displayText\"\n            [options]=\"globalFilter.data || []\"\n            [optionLabel]=\"globalFilter.optionLabel\"\n            [optionValue]=\"globalFilter.optionValue\"\n            [filter]=\"globalFilter.allowSearch\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (keyup.enter)=\"applyFilters()\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-dropdown>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Input control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.INPUT\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-flex-nowrap align-items-center\">\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1'\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- NumericInput control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <input\n              type=\"number\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n      \n      <!-- Date Range Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar \n            #rangeCalendar\n            [showButtonBar]=\"true\"\n\n            [inputId]=\"globalFilter.displayText\"\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText : 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n            [(ngModel)]=\"globalFilter.value\" \n            selectionMode=\"range\" \n            appendTo=\"body\"\n            (onSelect)=\"selectDate(globalFilter, true)\"\n            [dateFormat]=\"calendarFormat\"\n            (onClickOutside)=\"setDateRangeFilterValue(globalFilter)\"\n            (onBlur)=\"setDateRangeFilterValue(globalFilter)\"\n            (keyup)=\"calendarFocusEvent(globalFilter, $event)\"\n            (onClearClick)=\"clearDateRangeValue(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            (keyup.enter)=\"applyFilters(true, globalFilter)\"\n            \n            ></p-calendar>\n            <!-- todayButtonStyleClass=\"p-d-none\"\n            clearButtonStyleClass=\"p-ml-auto\" -->\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Numeric Range control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n        >\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex\">\n          <div class=\"p-d-flex flex-nowrap align-items-center p-mr-2\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.value\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              (onBlur)=\"setNumericRangeValueFrom(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueFrom(globalFilter,true)\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1  grow-1 input-number'\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n              globalFilter.errorMessage\n            }}</span>\n          </div>\n          <span class=\"to-numeric\">To</span>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.valueTwo\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1 input-number'\"\n              (onBlur)=\"setNumericRangeValueTwo(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueTwo(globalFilter,true)\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n        </div>\n        <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n          globalFilter.errorMessage\n        }}</span>\n        </div>\n      </span>\n\n      <!-- MultiSelect control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <p-multiSelect\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [options]=\"globalFilter.data\"\n            optionLabel=\"label\"\n            (keyup.enter)=\"applyFilters()\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            optionValue=\"value\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            [appendTo]=\"'body'\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-multiSelect>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Lookup Control Field -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <input\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [id]=\"globalFilter.field\"\n            type=\"text\"\n            pInputText\n            [(ngModel)]=\"globalFilter.value\"\n            (blur)=\"onFocusOutEvent(globalFilter)\"\n            [name]=\"globalFilter.field\"\n            (keyup.enter)=\"applyFilters()\"\n            (click)=\"selectLookupField(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            class=\"form-control\"\n          />\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Apply button -->\n\n<button\n*ngIf=\"searchGlobalFilterBtn\"\npButton\ntype=\"button\"\nicon=\"pi pi-search\"\nid=\"globalSearchbtn\"\n(click)=\"applyFilters()\"\nclass=\"p-button-success align-globalFilter-btn p-mb-2\"\n></button>\n\n<!-- Close button -->\n<button\n*ngIf=\"clearGlobalFilterBtn\"\npButton\nid=\"clearGlobalFilterBtn\"\ntype=\"button\"\nicon=\"pi pi-replay\"\n(click)=\"clearFilters()\"\n[class]=\"hideClearFilterBtn ? 'p-button-success p-mb-2 align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
                   styles: ["*{font-family:\"Lato\",sans-serif}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.size-10{font-size:10px}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.center-content+app-sidebar{position:relative}.row{margin-left:-.5rem;margin-right:-.5rem}p-calendar{display:flex;justify-content:stretch}p-checkbox{height:42px}.p-dialog .p-dialog-content{overflow:visible!important}:host ::ng-deep input,:host ::ng-deep p-calendar,:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .custom-btn button{background:#efefef;border:#eee;border-radius:0;padding:5px 15px;font-size:12px;color:#585858;margin:0 5px}:host ::ng-deep .custom-btn button:hover{background-color:#dad5d5;color:#000}:host ::ng-deep .input-number{border:0;border-radius:2px;padding:5px 6px}:host ::ng-deep .input-number input{margin:-8px -23px -8px -8px;border:0;padding-right:10px;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:6;border:0;background-color:#fff}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .input-number .p-inputnumber-button-group{visibility:hidden}:host ::ng-deep .input-number:hover .p-inputnumber-button-group{visibility:visible}:host ::ng-deep .to-numeric{font-size:13px;margin:3px;color:#636363;padding-top:4px}.error{color:red}.hide-Global-clear-filter-button{display:none}.align-globalFilter-btn{float:left;margin:10px 5px 0 0}\n"]
               },] }
   ];