@bnsights/bbsf-controls 1.0.166 → 1.0.168
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/esm2022/lib/Shared/Models/PagingOptions.mjs +3 -1
- package/esm2022/lib/controls/DateTimePicker/DateTimePicker.component.mjs +2 -4
- package/esm2022/lib/controls/DropdownList/DropdownList.component.mjs +11 -4
- package/esm2022/lib/controls/MapAutoComplete/MapAutoComplete.component.mjs +5 -2
- package/esm2022/lib/controls/Paging/Paging.component.mjs +295 -11
- package/esm2022/lib/controls/TextArea/TextArea.component.mjs +41 -25
- package/esm2022/lib/controls/page-header-component/page-header-component.component.mjs +1 -1
- package/fesm2022/bnsights-bbsf-controls.mjs +350 -40
- package/fesm2022/bnsights-bbsf-controls.mjs.map +1 -1
- package/lib/Shared/Models/PagingOptions.d.ts +2 -0
- package/lib/controls/DropdownList/DropdownList.component.d.ts +2 -1
- package/lib/controls/MapAutoComplete/MapAutoComplete.component.d.ts +1 -0
- package/lib/controls/Paging/Paging.component.d.ts +56 -4
- package/lib/controls/TextArea/TextArea.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ import { CommonModule, DatePipe } from '@angular/common';
|
|
|
31
31
|
import * as i1 from '@angular/common/http';
|
|
32
32
|
import { HttpHeaders, HttpParams, HttpEventType, HttpClientModule } from '@angular/common/http';
|
|
33
33
|
import * as i0 from '@angular/core';
|
|
34
|
-
import { forwardRef, EventEmitter, Output, Input, Component, Directive, Pipe, Optional, Injectable, ViewChild, ViewEncapsulation, ViewContainerRef, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
|
|
34
|
+
import { forwardRef, EventEmitter, Output, Input, Component, Directive, Pipe, Optional, Injectable, ViewChild, ViewEncapsulation, HostListener, ViewContainerRef, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
|
|
35
35
|
import * as i2 from '@angular/forms';
|
|
36
36
|
import { NG_VALUE_ACCESSOR, Validators, FormControl, FormGroup, ReactiveFormsModule, FormsModule, FormGroupDirective } from '@angular/forms';
|
|
37
37
|
import * as i6$2 from '@angular/material/slide-toggle';
|
|
@@ -1806,10 +1806,8 @@ class DateInputComponent {
|
|
|
1806
1806
|
});
|
|
1807
1807
|
}
|
|
1808
1808
|
checkIsPickerInFilter() {
|
|
1809
|
-
if (this.DropdownTemplateVariable)
|
|
1810
|
-
this.DropdownTemplateVariable.toggle();
|
|
1809
|
+
if (this.DropdownTemplateVariable)
|
|
1811
1810
|
this.DropdownTemplateVariable.toggle();
|
|
1812
|
-
}
|
|
1813
1811
|
}
|
|
1814
1812
|
//#region helpers
|
|
1815
1813
|
translateByKey(key) {
|
|
@@ -1891,7 +1889,6 @@ class DropdownListComponent {
|
|
|
1891
1889
|
this.options.dataSource = dataSource;
|
|
1892
1890
|
};
|
|
1893
1891
|
DropdownListComponent.controlContainerstatic = this.controlContainer;
|
|
1894
|
-
//console.log(environment["BBSF_AdminUrl"]);
|
|
1895
1892
|
}
|
|
1896
1893
|
ngOnInit() {
|
|
1897
1894
|
if (this.options.forceDirection)
|
|
@@ -1981,6 +1978,12 @@ class DropdownListComponent {
|
|
|
1981
1978
|
this.dropdownListFormControl.setValue(this.selectedItems);
|
|
1982
1979
|
this.onChangeService.ChangeValue(this.options.name);
|
|
1983
1980
|
this.onChange.emit();
|
|
1981
|
+
if (this.DropdownTemplateVariable) {
|
|
1982
|
+
setTimeout(() => {
|
|
1983
|
+
this.DropdownTemplateVariable.toggle();
|
|
1984
|
+
this.DropdownTemplateVariable.open();
|
|
1985
|
+
}, 0);
|
|
1986
|
+
}
|
|
1984
1987
|
}
|
|
1985
1988
|
onSelectAll(items) {
|
|
1986
1989
|
this.selectedItems = items;
|
|
@@ -2007,17 +2010,19 @@ class DropdownListComponent {
|
|
|
2007
2010
|
}
|
|
2008
2011
|
}
|
|
2009
2012
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownListComponent, deps: [{ token: OnPagingFiltersChangeService }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange", onClear: "onClear" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\" aria-required=\"true\">*</span>\r\n </label>\r\n\r\n\r\n <div class=\"bbsf-input-container\">\r\n <!--input enabled bootstrap select-->\r\n <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n
|
|
2013
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: { group: "group", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange", onClear: "onClear" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\" aria-required=\"true\">*</span>\r\n </label>\r\n\r\n\r\n <div class=\"bbsf-input-container\">\r\n <!--input enabled bootstrap select-->\r\n <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" [bindValue]=\"options.itemTempletkey\" groupBy=\"group\"\r\n [bindLabel]=\"options.itemTempletvalue\" [items]=\"options.dataSource\" [notFoundText]=\"options.notFoundText\"\r\n [maxSelectedItems]=\"options.limitSelection\" [searchable]=\"options.allowSearchFilter\"\r\n [multiple]=\"!options.singleSelection\" [readonly]=\"options.isDisabled\" [clearable]=\"true\"\r\n placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" [selectableGroup]=\"true\"\r\n [selectableGroupAsModel]=\"false\" formControlName=\"{{options.name}}\" [(ngModel)]=\"options.selectedItems\"\r\n (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n [class.is-invalid]=\"dropdownListFormControl.invalid && dropdownListFormControl.touched\"\r\n [closeOnSelect]=\"options.singleSelection ? true : false\">\r\n <!--No checkbox, Customize item template-->\r\n <ng-template *ngIf=\"!options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <label class=\"bbsf-label\" title=\"{{item.disabled ? options.disabledItemsTooltipValue : ''}}\"\r\n id={{item.key}}>{{item.value}}</label>\r\n </ng-template>\r\n <!--checkbox, Customize item template-->\r\n <ng-template *ngIf=\"options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <div class=\" bbsf-checkbox\">\r\n <div class=\"bbsf-input-container align-items-center\">\r\n <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\"\r\n [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n <div class=\"label-subtext-container\">\r\n <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!--Has group, Customize group template-->\r\n <ng-template *ngIf=\"options.hasGroup\" ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\">\r\n <label class=\"bbsf-label bbsf-group-label\">{{item.group}}</label>\r\n </ng-template>\r\n\r\n </ng-select>\r\n\r\n <!--input disabled bootstrap select-->\r\n <select *ngIf=\"options.disableBootstrapSelect&&!options.isReadonly\" class=\"form-control\"\r\n [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" (change)=\"onItemSelect()\"\r\n [(ngModel)]=\"options.selectedItems\" [disabled]=\"options.isDisabled\" formControlName=\"{{options.name}}\">\r\n <option value=\"\" disabled>--{{utilityService.getResourceValue(\"select\")}}--</option>\r\n <option *ngFor=\"let item of options.dataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n {{item.value}}\r\n </option>\r\n </select>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.isReadonly\">\r\n <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(dropdownListFormControl.invalid && dropdownListFormControl.touched)\">\r\n {{getErrorValidation(dropdownListFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}</div>\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7$1.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i7$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
|
|
2011
2014
|
}
|
|
2012
2015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownListComponent, decorators: [{
|
|
2013
2016
|
type: Component,
|
|
2014
|
-
args: [{ selector: 'BBSF-DropdownList', template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\" aria-required=\"true\">*</span>\r\n </label>\r\n\r\n\r\n <div class=\"bbsf-input-container\">\r\n <!--input enabled bootstrap select-->\r\n <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n
|
|
2017
|
+
args: [{ selector: 'BBSF-DropdownList', template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\" aria-required=\"true\">*</span>\r\n </label>\r\n\r\n\r\n <div class=\"bbsf-input-container\">\r\n <!--input enabled bootstrap select-->\r\n <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" [bindValue]=\"options.itemTempletkey\" groupBy=\"group\"\r\n [bindLabel]=\"options.itemTempletvalue\" [items]=\"options.dataSource\" [notFoundText]=\"options.notFoundText\"\r\n [maxSelectedItems]=\"options.limitSelection\" [searchable]=\"options.allowSearchFilter\"\r\n [multiple]=\"!options.singleSelection\" [readonly]=\"options.isDisabled\" [clearable]=\"true\"\r\n placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" [selectableGroup]=\"true\"\r\n [selectableGroupAsModel]=\"false\" formControlName=\"{{options.name}}\" [(ngModel)]=\"options.selectedItems\"\r\n (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n [class.is-invalid]=\"dropdownListFormControl.invalid && dropdownListFormControl.touched\"\r\n [closeOnSelect]=\"options.singleSelection ? true : false\">\r\n <!--No checkbox, Customize item template-->\r\n <ng-template *ngIf=\"!options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <label class=\"bbsf-label\" title=\"{{item.disabled ? options.disabledItemsTooltipValue : ''}}\"\r\n id={{item.key}}>{{item.value}}</label>\r\n </ng-template>\r\n <!--checkbox, Customize item template-->\r\n <ng-template *ngIf=\"options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <div class=\" bbsf-checkbox\">\r\n <div class=\"bbsf-input-container align-items-center\">\r\n <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\"\r\n [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n <div class=\"label-subtext-container\">\r\n <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!--Has group, Customize group template-->\r\n <ng-template *ngIf=\"options.hasGroup\" ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\">\r\n <label class=\"bbsf-label bbsf-group-label\">{{item.group}}</label>\r\n </ng-template>\r\n\r\n </ng-select>\r\n\r\n <!--input disabled bootstrap select-->\r\n <select *ngIf=\"options.disableBootstrapSelect&&!options.isReadonly\" class=\"form-control\"\r\n [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" (change)=\"onItemSelect()\"\r\n [(ngModel)]=\"options.selectedItems\" [disabled]=\"options.isDisabled\" formControlName=\"{{options.name}}\">\r\n <option value=\"\" disabled>--{{utilityService.getResourceValue(\"select\")}}--</option>\r\n <option *ngFor=\"let item of options.dataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n {{item.value}}\r\n </option>\r\n </select>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.isReadonly\">\r\n <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(dropdownListFormControl.invalid && dropdownListFormControl.touched)\">\r\n {{getErrorValidation(dropdownListFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}</div>\r\n </div>\r\n </div>\r\n</div>" }]
|
|
2015
2018
|
}], ctorParameters: () => [{ type: OnPagingFiltersChangeService }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
|
|
2016
2019
|
type: Optional
|
|
2017
2020
|
}] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
|
|
2018
2021
|
type: Input
|
|
2019
2022
|
}], options: [{
|
|
2020
2023
|
type: Input
|
|
2024
|
+
}], DropdownTemplateVariable: [{
|
|
2025
|
+
type: Input
|
|
2021
2026
|
}], onChange: [{
|
|
2022
2027
|
type: Output
|
|
2023
2028
|
}], onClear: [{
|
|
@@ -3738,7 +3743,7 @@ class MapAutoCompleteComponent {
|
|
|
3738
3743
|
this.closeMapModal();
|
|
3739
3744
|
}
|
|
3740
3745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i5$2.ScriptService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3741
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MapAutoCompleteComponent, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n\r\n <!--#region input-->\r\n <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n <span class=\"svg-icon svg-icon-1\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </button>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region readonly -->\r\n <div *ngIf=\"options.isReadonly\">\r\n <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n {{resetError()}} </div>\r\n\r\n </div>\r\n\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n [ngStyle]=\"{'display': modalIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{translateValue('SetLocationOnMap')}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n placeholder=\"{{translateValue('SetLocation')}}\">\r\n <div class=\"google-map-container\">\r\n <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n {{translateValue(\"Cancel\")}}\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n {{translateValue('Confirm')}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MapAutoCompleteComponent, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }, { propertyName: "setLocationSearch", first: true, predicate: ["setLocationSearch"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n\r\n <!--#region input-->\r\n <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n <span class=\"svg-icon svg-icon-1\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </button>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region readonly -->\r\n <div *ngIf=\"options.isReadonly\">\r\n <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n {{resetError()}} </div>\r\n\r\n </div>\r\n\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n [ngStyle]=\"{'display': modalIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{translateValue('SetLocationOnMap')}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n placeholder=\"{{translateValue('SetLocation')}}\">\r\n <div class=\"google-map-container\">\r\n <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n {{translateValue(\"Cancel\")}}\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n {{translateValue('Confirm')}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3742
3747
|
}
|
|
3743
3748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
|
|
3744
3749
|
type: Component,
|
|
@@ -3757,6 +3762,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3757
3762
|
}], advancedMapModal: [{
|
|
3758
3763
|
type: ViewChild,
|
|
3759
3764
|
args: ["advancedMapModal", { static: false }]
|
|
3765
|
+
}], setLocationSearch: [{
|
|
3766
|
+
type: ViewChild,
|
|
3767
|
+
args: ["setLocationSearch", { static: false }]
|
|
3760
3768
|
}] } });
|
|
3761
3769
|
|
|
3762
3770
|
// import { Expose, Type } from 'class-transformer';
|
|
@@ -5748,7 +5756,7 @@ class PageHeaderComponentComponent {
|
|
|
5748
5756
|
this.EN = this.utilityService.isCurrentLanguageEnglish();
|
|
5749
5757
|
}
|
|
5750
5758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponentComponent, deps: [{ token: i3$2.Router }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageHeaderComponentComponent, selector: "bbsf-page-header-component", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n <div class=\"container-xxl\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n options.titleValue }}</h3>\r\n <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n {{translate(options.subTitleKey)}}\r\n </p>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n </li>\r\n <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n <span>{{ item.label }}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n {{item.text}}\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"page-subheader\">\r\n <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n [group]=\"group\">\r\n </BBSF-TextBox>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n (click)=\"options.gridView.toggleFunction()\">\r\n <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n </span>\r\n </div>\r\n <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n (click)=\"options.gridView.toggleFunction()\">\r\n <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n </span>\r\n </div>\r\n </div>\r\n <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n {{translate(options.exportButton.buttonTextKey)}}\r\n </button>\r\n\r\n\r\n <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n class=\"btn btn-light btn-sm filters-btn\">\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n {{translate(options.filtersButton.buttonTextKey)}}\r\n </button>\r\n <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n <div class=\"filter-select\">\r\n <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n <span [ngSwitch]=\"control.key\">\r\n <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DropdownList>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DropdownList>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DateTimePicker>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DateTimePicker>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DateTimePicker>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-Toggleslide>\r\n </span>\r\n <span *ngSwitchDefault>\r\n <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-TagsInput>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"dropdown-menu-buttons\">\r\n <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n {{translate(\"Reset\")}}\r\n </button>\r\n <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n {{translate(\"Apply\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n {{translate(options.addButton.buttonTextKey)}}\r\n </button>\r\n <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n {{translate(options.editButton.buttonTextKey)}}\r\n </button>\r\n <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n {{translate(options.deleteButton.buttonTextKey)}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!--End toolbar-->", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: DateInputComponent, selector: "BBSF-DateTimePicker", inputs: ["group", "options", "DropdownTemplateVariable"], outputs: ["onChange"] }, { kind: "component", type: TextboxComponent, selector: "BBSF-TextBox", inputs: ["group", "options"], outputs: ["onChange", "onBlur"] }, { kind: "component", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: ["group", "options"], outputs: ["onChange", "onClear"] }, { kind: "component", type: ToggleslideComponent, selector: "BBSF-Toggleslide", inputs: ["group", "options"], outputs: ["onChange"] }, { kind: "component", type: TagsInputComponent, selector: "BBSF-TagsInput", inputs: ["group", "name", "options", "DropdownTemplateVariable"], outputs: ["onChange"] }] }); }
|
|
5759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageHeaderComponentComponent, selector: "bbsf-page-header-component", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n <div class=\"container-xxl\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n options.titleValue }}</h3>\r\n <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n {{translate(options.subTitleKey)}}\r\n </p>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n </li>\r\n <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n <span>{{ item.label }}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n {{item.text}}\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"page-subheader\">\r\n <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n [group]=\"group\">\r\n </BBSF-TextBox>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n (click)=\"options.gridView.toggleFunction()\">\r\n <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n </span>\r\n </div>\r\n <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n (click)=\"options.gridView.toggleFunction()\">\r\n <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n </span>\r\n </div>\r\n </div>\r\n <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n {{translate(options.exportButton.buttonTextKey)}}\r\n </button>\r\n\r\n\r\n <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n class=\"btn btn-light btn-sm filters-btn\">\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n {{translate(options.filtersButton.buttonTextKey)}}\r\n </button>\r\n <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n <div class=\"filter-select\">\r\n <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n <span [ngSwitch]=\"control.key\">\r\n <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DropdownList>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DropdownList>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DateTimePicker>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DateTimePicker>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-DateTimePicker>\r\n </span>\r\n <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-Toggleslide>\r\n </span>\r\n <span *ngSwitchDefault>\r\n <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n </BBSF-TagsInput>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"dropdown-menu-buttons\">\r\n <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n {{translate(\"Reset\")}}\r\n </button>\r\n <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n {{translate(\"Apply\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n {{translate(options.addButton.buttonTextKey)}}\r\n </button>\r\n <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n {{translate(options.editButton.buttonTextKey)}}\r\n </button>\r\n <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n {{translate(options.deleteButton.buttonTextKey)}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!--End toolbar-->", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: DateInputComponent, selector: "BBSF-DateTimePicker", inputs: ["group", "options", "DropdownTemplateVariable"], outputs: ["onChange"] }, { kind: "component", type: TextboxComponent, selector: "BBSF-TextBox", inputs: ["group", "options"], outputs: ["onChange", "onBlur"] }, { kind: "component", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: ["group", "options", "DropdownTemplateVariable"], outputs: ["onChange", "onClear"] }, { kind: "component", type: ToggleslideComponent, selector: "BBSF-Toggleslide", inputs: ["group", "options"], outputs: ["onChange"] }, { kind: "component", type: TagsInputComponent, selector: "BBSF-TagsInput", inputs: ["group", "name", "options", "DropdownTemplateVariable"], outputs: ["onChange"] }] }); }
|
|
5752
5760
|
}
|
|
5753
5761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponentComponent, decorators: [{
|
|
5754
5762
|
type: Component,
|
|
@@ -5936,14 +5944,16 @@ var FilterType;
|
|
|
5936
5944
|
FilterType[FilterType["Other"] = 7] = "Other";
|
|
5937
5945
|
})(FilterType || (FilterType = {}));
|
|
5938
5946
|
|
|
5939
|
-
// tslint:disable-next-line: no-conflicting-lifecycle
|
|
5940
5947
|
class PagingComponent {
|
|
5941
|
-
constructor(utilityService, http, router, onChangeService, requestHandlerService) {
|
|
5948
|
+
constructor(utilityService, http, router, route, location, onChangeService, requestHandlerService, cdr) {
|
|
5942
5949
|
this.utilityService = utilityService;
|
|
5943
5950
|
this.http = http;
|
|
5944
5951
|
this.router = router;
|
|
5952
|
+
this.route = route;
|
|
5953
|
+
this.location = location;
|
|
5945
5954
|
this.onChangeService = onChangeService;
|
|
5946
5955
|
this.requestHandlerService = requestHandlerService;
|
|
5956
|
+
this.cdr = cdr;
|
|
5947
5957
|
this.items = [];
|
|
5948
5958
|
this.result = [];
|
|
5949
5959
|
this.pagerConfig = null;
|
|
@@ -5962,9 +5972,17 @@ class PagingComponent {
|
|
|
5962
5972
|
this.isFirstCall = true;
|
|
5963
5973
|
this.previousFilters = {};
|
|
5964
5974
|
this.Items = new EventEmitter();
|
|
5975
|
+
this.pageStateRestored = new EventEmitter();
|
|
5965
5976
|
this.subscriptions = new Subscription();
|
|
5977
|
+
// Browser navigation support
|
|
5978
|
+
this.isNavigatingBack = false;
|
|
5979
|
+
this.isRestoringFilters = false;
|
|
5980
|
+
this.pageHistory = [];
|
|
5981
|
+
this.currentHistoryIndex = -1;
|
|
5966
5982
|
this.reinitializePaging = () => {
|
|
5967
5983
|
this.isFirstCall = true;
|
|
5984
|
+
this.currentPage = 1;
|
|
5985
|
+
this.clearHistoryState();
|
|
5968
5986
|
this.getItemList(1, true);
|
|
5969
5987
|
};
|
|
5970
5988
|
this.updatePaging = () => {
|
|
@@ -5976,6 +5994,10 @@ class PagingComponent {
|
|
|
5976
5994
|
this.subscriptions.unsubscribe();
|
|
5977
5995
|
}
|
|
5978
5996
|
ngOnInit() {
|
|
5997
|
+
// Initialize browser navigation support if enabled
|
|
5998
|
+
if (this.options.enableBrowserNavigation) {
|
|
5999
|
+
this.initializeBrowserNavigation();
|
|
6000
|
+
}
|
|
5979
6001
|
if (this.options.isLoadMoreControl)
|
|
5980
6002
|
this.sum = this.options.pageSize;
|
|
5981
6003
|
if (this.options.dropdownFiltersControlNames != null && this.options.dropdownFiltersControlNames.length > 0) {
|
|
@@ -5985,6 +6007,7 @@ class PagingComponent {
|
|
|
5985
6007
|
if (result.length > 0) {
|
|
5986
6008
|
this.isFirstCall = true;
|
|
5987
6009
|
this.currentPage = 1;
|
|
6010
|
+
this.updateHistoryState();
|
|
5988
6011
|
this.getItemList(this.currentPage, true);
|
|
5989
6012
|
}
|
|
5990
6013
|
}));
|
|
@@ -5996,6 +6019,7 @@ class PagingComponent {
|
|
|
5996
6019
|
if (result.length > 0) {
|
|
5997
6020
|
this.isFirstCall = true;
|
|
5998
6021
|
this.currentPage = 1;
|
|
6022
|
+
this.updateHistoryState();
|
|
5999
6023
|
this.getItemList(this.currentPage, true);
|
|
6000
6024
|
}
|
|
6001
6025
|
}));
|
|
@@ -6003,6 +6027,181 @@ class PagingComponent {
|
|
|
6003
6027
|
this.isFirstCall = true;
|
|
6004
6028
|
this.getItemList(this.currentPage, true);
|
|
6005
6029
|
}
|
|
6030
|
+
/**
|
|
6031
|
+
* Initialize browser navigation support
|
|
6032
|
+
*/
|
|
6033
|
+
initializeBrowserNavigation() {
|
|
6034
|
+
// Try to restore state from browser history on initial load
|
|
6035
|
+
this.restoreStateFromBrowserHistory();
|
|
6036
|
+
}
|
|
6037
|
+
/**
|
|
6038
|
+
* Restore state from browser history on initial load
|
|
6039
|
+
*/
|
|
6040
|
+
restoreStateFromBrowserHistory() {
|
|
6041
|
+
try {
|
|
6042
|
+
// Get the current history state
|
|
6043
|
+
const currentState = history.state;
|
|
6044
|
+
if (currentState && currentState.pagingState) {
|
|
6045
|
+
const savedState = currentState.pagingState;
|
|
6046
|
+
// Check if the saved state has valid data
|
|
6047
|
+
if (savedState.page && savedState.pageSize && savedState.filters) {
|
|
6048
|
+
// Restore filter values to form controls
|
|
6049
|
+
this.restoreFilterValues(savedState.filters);
|
|
6050
|
+
// Get current filters after restoration
|
|
6051
|
+
const currentFilters = this.getFiltersValue();
|
|
6052
|
+
// Only restore if filters match (same search context)
|
|
6053
|
+
if (JSON.stringify(savedState.filters) === JSON.stringify(currentFilters)) {
|
|
6054
|
+
let pageChanged = false;
|
|
6055
|
+
let pageSizeChanged = false;
|
|
6056
|
+
if (savedState.page !== this.currentPage) {
|
|
6057
|
+
this.currentPage = savedState.page;
|
|
6058
|
+
pageChanged = true;
|
|
6059
|
+
}
|
|
6060
|
+
if (savedState.pageSize !== this.options.pageSize) {
|
|
6061
|
+
this.options.pageSize = savedState.pageSize;
|
|
6062
|
+
pageSizeChanged = true;
|
|
6063
|
+
}
|
|
6064
|
+
// If page or page size changed, reload data
|
|
6065
|
+
if (pageChanged || pageSizeChanged) {
|
|
6066
|
+
this.getItemList(this.currentPage, pageSizeChanged);
|
|
6067
|
+
}
|
|
6068
|
+
// Add the restored state to our local history
|
|
6069
|
+
this.pageHistory.push(savedState);
|
|
6070
|
+
this.currentHistoryIndex = this.pageHistory.length - 1;
|
|
6071
|
+
// Emit event to notify that page state was restored
|
|
6072
|
+
this.pageStateRestored.emit({
|
|
6073
|
+
page: this.currentPage,
|
|
6074
|
+
pageSize: this.options.pageSize
|
|
6075
|
+
});
|
|
6076
|
+
// Force change detection to update the UI
|
|
6077
|
+
this.cdr.detectChanges();
|
|
6078
|
+
console.log(`Initial page state restored: Page ${this.currentPage}, PageSize ${this.options.pageSize}, Filters restored`);
|
|
6079
|
+
}
|
|
6080
|
+
}
|
|
6081
|
+
}
|
|
6082
|
+
}
|
|
6083
|
+
catch (error) {
|
|
6084
|
+
console.warn('Failed to restore browser history state:', error);
|
|
6085
|
+
}
|
|
6086
|
+
}
|
|
6087
|
+
/**
|
|
6088
|
+
* Listen to browser back/forward navigation
|
|
6089
|
+
*/
|
|
6090
|
+
onPopState(event) {
|
|
6091
|
+
if (!this.options.enableBrowserNavigation) {
|
|
6092
|
+
return;
|
|
6093
|
+
}
|
|
6094
|
+
console.log('Browser back/forward navigation detected');
|
|
6095
|
+
this.isNavigatingBack = true;
|
|
6096
|
+
this.restorePageStateFromHistory();
|
|
6097
|
+
this.isNavigatingBack = false;
|
|
6098
|
+
}
|
|
6099
|
+
/**
|
|
6100
|
+
* Restore page state from browser history
|
|
6101
|
+
*/
|
|
6102
|
+
restorePageStateFromHistory() {
|
|
6103
|
+
try {
|
|
6104
|
+
// Get the current history state from browser
|
|
6105
|
+
const currentState = history.state;
|
|
6106
|
+
if (currentState && currentState.pagingState) {
|
|
6107
|
+
const savedState = currentState.pagingState;
|
|
6108
|
+
// Check if the saved state has valid data
|
|
6109
|
+
if (savedState.page && savedState.pageSize && savedState.filters) {
|
|
6110
|
+
// Restore filter values to form controls
|
|
6111
|
+
this.restoreFilterValues(savedState.filters);
|
|
6112
|
+
// Get current filters after restoration
|
|
6113
|
+
const currentFilters = this.getFiltersValue();
|
|
6114
|
+
// Only restore if filters match (same search context)
|
|
6115
|
+
if (JSON.stringify(savedState.filters) === JSON.stringify(currentFilters)) {
|
|
6116
|
+
let pageChanged = false;
|
|
6117
|
+
let pageSizeChanged = false;
|
|
6118
|
+
if (savedState.page !== this.currentPage) {
|
|
6119
|
+
this.currentPage = savedState.page;
|
|
6120
|
+
pageChanged = true;
|
|
6121
|
+
}
|
|
6122
|
+
if (savedState.pageSize !== this.options.pageSize) {
|
|
6123
|
+
this.options.pageSize = savedState.pageSize;
|
|
6124
|
+
pageSizeChanged = true;
|
|
6125
|
+
}
|
|
6126
|
+
// If page or page size changed, reload data
|
|
6127
|
+
if (pageChanged || pageSizeChanged) {
|
|
6128
|
+
this.getItemList(this.currentPage, pageSizeChanged);
|
|
6129
|
+
}
|
|
6130
|
+
// Update our local history index to match the browser state
|
|
6131
|
+
this.updateLocalHistoryIndex(savedState);
|
|
6132
|
+
// Emit event to notify that page state was restored
|
|
6133
|
+
this.pageStateRestored.emit({
|
|
6134
|
+
page: this.currentPage,
|
|
6135
|
+
pageSize: this.options.pageSize
|
|
6136
|
+
});
|
|
6137
|
+
// Force change detection to update the UI
|
|
6138
|
+
this.cdr.detectChanges();
|
|
6139
|
+
console.log(`Page state restored from browser navigation: Page ${this.currentPage}, PageSize ${this.options.pageSize}, Filters restored`);
|
|
6140
|
+
}
|
|
6141
|
+
}
|
|
6142
|
+
}
|
|
6143
|
+
}
|
|
6144
|
+
catch (error) {
|
|
6145
|
+
console.warn('Failed to restore page state from history:', error);
|
|
6146
|
+
}
|
|
6147
|
+
}
|
|
6148
|
+
/**
|
|
6149
|
+
* Update local history index to match browser state
|
|
6150
|
+
*/
|
|
6151
|
+
updateLocalHistoryIndex(savedState) {
|
|
6152
|
+
// Find the matching state in our local history
|
|
6153
|
+
const index = this.pageHistory.findIndex(state => state.page === savedState.page &&
|
|
6154
|
+
state.pageSize === savedState.pageSize &&
|
|
6155
|
+
JSON.stringify(state.filters) === JSON.stringify(savedState.filters));
|
|
6156
|
+
if (index !== -1) {
|
|
6157
|
+
this.currentHistoryIndex = index;
|
|
6158
|
+
}
|
|
6159
|
+
else {
|
|
6160
|
+
// If not found, add it to our history
|
|
6161
|
+
this.pageHistory.push(savedState);
|
|
6162
|
+
this.currentHistoryIndex = this.pageHistory.length - 1;
|
|
6163
|
+
}
|
|
6164
|
+
}
|
|
6165
|
+
/**
|
|
6166
|
+
* Update browser history state with current page and page size
|
|
6167
|
+
*/
|
|
6168
|
+
updateHistoryState() {
|
|
6169
|
+
if (!this.options.enableBrowserNavigation) {
|
|
6170
|
+
return;
|
|
6171
|
+
}
|
|
6172
|
+
const currentFilters = this.getFiltersValue();
|
|
6173
|
+
const currentState = {
|
|
6174
|
+
page: this.currentPage,
|
|
6175
|
+
pageSize: this.options.pageSize,
|
|
6176
|
+
filters: currentFilters
|
|
6177
|
+
};
|
|
6178
|
+
// Only update history if we're not already navigating back
|
|
6179
|
+
if (!this.isNavigatingBack) {
|
|
6180
|
+
// Add current state to local history
|
|
6181
|
+
this.pageHistory.push(currentState);
|
|
6182
|
+
this.currentHistoryIndex = this.pageHistory.length - 1;
|
|
6183
|
+
// Limit history size to prevent memory issues
|
|
6184
|
+
if (this.pageHistory.length > 50) {
|
|
6185
|
+
this.pageHistory.shift();
|
|
6186
|
+
this.currentHistoryIndex--;
|
|
6187
|
+
}
|
|
6188
|
+
// Update browser history state
|
|
6189
|
+
const historyState = {
|
|
6190
|
+
pagingState: currentState,
|
|
6191
|
+
timestamp: Date.now()
|
|
6192
|
+
};
|
|
6193
|
+
try {
|
|
6194
|
+
// Use history.pushState to add a new history entry
|
|
6195
|
+
// This allows proper back/forward navigation
|
|
6196
|
+
history.pushState(historyState, '', this.location.path());
|
|
6197
|
+
}
|
|
6198
|
+
catch (error) {
|
|
6199
|
+
console.warn('Failed to update browser history state:', error);
|
|
6200
|
+
// Fallback to replaceState if pushState fails
|
|
6201
|
+
this.location.replaceState(this.location.path(), '', JSON.stringify(historyState));
|
|
6202
|
+
}
|
|
6203
|
+
}
|
|
6204
|
+
}
|
|
6006
6205
|
ngAfterViewInit() {
|
|
6007
6206
|
if (this.options.onClickFiltersControlNames != null && this.options.onClickFiltersControlNames.length > 0) {
|
|
6008
6207
|
const OnClickFiltersControlNames = this.options.onClickFiltersControlNames;
|
|
@@ -6011,6 +6210,7 @@ class PagingComponent {
|
|
|
6011
6210
|
document.getElementById(OnClickFiltersControlName).addEventListener("click", () => {
|
|
6012
6211
|
this.currentPage = 1;
|
|
6013
6212
|
this.isFirstCall = true;
|
|
6213
|
+
this.updateHistoryState();
|
|
6014
6214
|
this.getItemList(this.currentPage, true);
|
|
6015
6215
|
}, false);
|
|
6016
6216
|
}
|
|
@@ -6024,6 +6224,7 @@ class PagingComponent {
|
|
|
6024
6224
|
if (e.key == "Enter") {
|
|
6025
6225
|
this.currentPage = 1;
|
|
6026
6226
|
this.isFirstCall = true;
|
|
6227
|
+
this.updateHistoryState();
|
|
6027
6228
|
this.getItemList(this.currentPage, true);
|
|
6028
6229
|
}
|
|
6029
6230
|
}, false);
|
|
@@ -6047,6 +6248,7 @@ class PagingComponent {
|
|
|
6047
6248
|
if (e.key == "Enter") {
|
|
6048
6249
|
this.currentPage = 1;
|
|
6049
6250
|
this.isFirstCall = true;
|
|
6251
|
+
this.updateHistoryState();
|
|
6050
6252
|
this.getItemList(this.currentPage, true);
|
|
6051
6253
|
}
|
|
6052
6254
|
}, false);
|
|
@@ -6057,6 +6259,7 @@ class PagingComponent {
|
|
|
6057
6259
|
if (result) {
|
|
6058
6260
|
this.currentPage = 1;
|
|
6059
6261
|
this.isFirstCall = true;
|
|
6262
|
+
this.updateHistoryState();
|
|
6060
6263
|
this.getItemList(this.currentPage, true);
|
|
6061
6264
|
}
|
|
6062
6265
|
}
|
|
@@ -6069,6 +6272,7 @@ class PagingComponent {
|
|
|
6069
6272
|
return;
|
|
6070
6273
|
}
|
|
6071
6274
|
this.currentPage = Page;
|
|
6275
|
+
this.updateHistoryState();
|
|
6072
6276
|
this.getItemList(Page);
|
|
6073
6277
|
}
|
|
6074
6278
|
}
|
|
@@ -6076,6 +6280,7 @@ class PagingComponent {
|
|
|
6076
6280
|
this.options.pageSize = e.target.value;
|
|
6077
6281
|
this.currentPage = 1;
|
|
6078
6282
|
this.isFirstCall = true;
|
|
6283
|
+
this.updateHistoryState();
|
|
6079
6284
|
this.getItemList(this.currentPage, true);
|
|
6080
6285
|
}
|
|
6081
6286
|
onScrollDown() {
|
|
@@ -6090,7 +6295,8 @@ class PagingComponent {
|
|
|
6090
6295
|
this.options.startPagingCallback.call(null);
|
|
6091
6296
|
let filters = {};
|
|
6092
6297
|
filters = this.getFiltersValue();
|
|
6093
|
-
|
|
6298
|
+
// Skip filter change detection if we're restoring filters from browser history
|
|
6299
|
+
if (!this.isRestoringFilters && !IsFilterUpdated && Object.keys(this.previousFilters).length != 0 && JSON.stringify(this.previousFilters) != JSON.stringify(filters)) {
|
|
6094
6300
|
//Reinitialize if filters changed
|
|
6095
6301
|
page = 1;
|
|
6096
6302
|
IsFilterUpdated = true;
|
|
@@ -6130,6 +6336,74 @@ class PagingComponent {
|
|
|
6130
6336
|
this.router.navigate(["/Admin/account/login"]);
|
|
6131
6337
|
});
|
|
6132
6338
|
}
|
|
6339
|
+
/**
|
|
6340
|
+
* Force update the current page (useful for external components)
|
|
6341
|
+
*/
|
|
6342
|
+
setCurrentPage(page) {
|
|
6343
|
+
if (page > 0 && page !== this.currentPage) {
|
|
6344
|
+
this.currentPage = page;
|
|
6345
|
+
this.updateHistoryState();
|
|
6346
|
+
this.getItemList(page);
|
|
6347
|
+
this.cdr.detectChanges();
|
|
6348
|
+
}
|
|
6349
|
+
}
|
|
6350
|
+
/**
|
|
6351
|
+
* Get the current page number
|
|
6352
|
+
*/
|
|
6353
|
+
getCurrentPage() {
|
|
6354
|
+
return this.currentPage;
|
|
6355
|
+
}
|
|
6356
|
+
/**
|
|
6357
|
+
* Restore filter values to form controls
|
|
6358
|
+
*/
|
|
6359
|
+
restoreFilterValues(savedFilters) {
|
|
6360
|
+
if (!this.options.filters || !this.group) {
|
|
6361
|
+
return;
|
|
6362
|
+
}
|
|
6363
|
+
this.isRestoringFilters = true;
|
|
6364
|
+
try {
|
|
6365
|
+
for (let index = 0; index < this.options.filters.length; index++) {
|
|
6366
|
+
const filter = this.options.filters[index];
|
|
6367
|
+
if (filter.formControlName && filter.formControlName !== "") {
|
|
6368
|
+
const formControlName = filter.formControlName;
|
|
6369
|
+
const actionParameterName = filter.actionParameterName;
|
|
6370
|
+
// Check if we have a saved value for this filter
|
|
6371
|
+
if (savedFilters.hasOwnProperty(actionParameterName)) {
|
|
6372
|
+
const savedValue = savedFilters[actionParameterName];
|
|
6373
|
+
// Only restore if the value is not null/undefined/empty
|
|
6374
|
+
if (savedValue !== null && savedValue !== undefined && savedValue !== "") {
|
|
6375
|
+
// Set the value to the form control
|
|
6376
|
+
this.group.controls[formControlName].setValue(savedValue);
|
|
6377
|
+
console.log(`Restored filter ${formControlName} with value:`, savedValue);
|
|
6378
|
+
}
|
|
6379
|
+
}
|
|
6380
|
+
}
|
|
6381
|
+
else if (filter.jQuerySelector) {
|
|
6382
|
+
// Handle jQuery selector based filters
|
|
6383
|
+
const actionParameterName = filter.actionParameterName;
|
|
6384
|
+
if (savedFilters.hasOwnProperty(actionParameterName)) {
|
|
6385
|
+
const savedValue = savedFilters[actionParameterName];
|
|
6386
|
+
if (savedValue !== null && savedValue !== undefined && savedValue !== "") {
|
|
6387
|
+
const element = document.querySelector(filter.jQuerySelector);
|
|
6388
|
+
if (element) {
|
|
6389
|
+
element.value = savedValue;
|
|
6390
|
+
console.log(`Restored jQuery filter ${filter.jQuerySelector} with value:`, savedValue);
|
|
6391
|
+
}
|
|
6392
|
+
}
|
|
6393
|
+
}
|
|
6394
|
+
}
|
|
6395
|
+
}
|
|
6396
|
+
}
|
|
6397
|
+
catch (error) {
|
|
6398
|
+
console.warn('Failed to restore filter values:', error);
|
|
6399
|
+
}
|
|
6400
|
+
finally {
|
|
6401
|
+
// Reset the flag after a short delay to allow form controls to update
|
|
6402
|
+
setTimeout(() => {
|
|
6403
|
+
this.isRestoringFilters = false;
|
|
6404
|
+
}, 100);
|
|
6405
|
+
}
|
|
6406
|
+
}
|
|
6133
6407
|
castItems(objectArr) {
|
|
6134
6408
|
let originalArray = [];
|
|
6135
6409
|
for (let index = 0; index < objectArr.length; index++) {
|
|
@@ -6181,9 +6455,22 @@ class PagingComponent {
|
|
|
6181
6455
|
this.group.controls[FormControlName].setValue(null);
|
|
6182
6456
|
}
|
|
6183
6457
|
}
|
|
6458
|
+
// Clear history state when filters are reset
|
|
6459
|
+
this.clearHistoryState();
|
|
6184
6460
|
this.reinitializePaging();
|
|
6185
6461
|
}
|
|
6186
6462
|
}
|
|
6463
|
+
/**
|
|
6464
|
+
* Clear page history state
|
|
6465
|
+
*/
|
|
6466
|
+
clearHistoryState() {
|
|
6467
|
+
if (!this.options.enableBrowserNavigation) {
|
|
6468
|
+
return;
|
|
6469
|
+
}
|
|
6470
|
+
// Clear the page history
|
|
6471
|
+
this.pageHistory = [];
|
|
6472
|
+
this.currentHistoryIndex = -1;
|
|
6473
|
+
}
|
|
6187
6474
|
getFiltersValue() {
|
|
6188
6475
|
let filters = {};
|
|
6189
6476
|
if (this.options.filters != null) {
|
|
@@ -6227,18 +6514,23 @@ class PagingComponent {
|
|
|
6227
6514
|
}
|
|
6228
6515
|
return filters;
|
|
6229
6516
|
}
|
|
6230
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$2.Router }, { token: OnPagingFiltersChangeService }, { token: i3.RequestHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6231
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"
|
|
6517
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3.RequestHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6518
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n </div>\r\n <!--page count-->\r\n <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n <option>10</option>\r\n <option>20</option>\r\n <option>50</option>\r\n <option>100</option>\r\n <option>200</option>\r\n </select>\r\n <div class=\"bssf-items\">\r\n <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n {{Pages}}</strong> {{pagesText}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--load more-->\r\n <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n </div>\r\n <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
|
|
6232
6519
|
}
|
|
6233
6520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, decorators: [{
|
|
6234
6521
|
type: Component,
|
|
6235
|
-
args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"
|
|
6236
|
-
}], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$2.Router }, { type: OnPagingFiltersChangeService }, { type: i3.RequestHandlerService }], propDecorators: { Items: [{
|
|
6522
|
+
args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n </div>\r\n <!--page count-->\r\n <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n <option>10</option>\r\n <option>20</option>\r\n <option>50</option>\r\n <option>100</option>\r\n <option>200</option>\r\n </select>\r\n <div class=\"bssf-items\">\r\n <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n {{Pages}}</strong> {{pagesText}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--load more-->\r\n <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n </div>\r\n <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n </div>\r\n</div>" }]
|
|
6523
|
+
}], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3.RequestHandlerService }, { type: i0.ChangeDetectorRef }], propDecorators: { Items: [{
|
|
6524
|
+
type: Output
|
|
6525
|
+
}], pageStateRestored: [{
|
|
6237
6526
|
type: Output
|
|
6238
6527
|
}], options: [{
|
|
6239
6528
|
type: Input
|
|
6240
6529
|
}], group: [{
|
|
6241
6530
|
type: Input
|
|
6531
|
+
}], onPopState: [{
|
|
6532
|
+
type: HostListener,
|
|
6533
|
+
args: ['window:popstate', ['$event']]
|
|
6242
6534
|
}] } });
|
|
6243
6535
|
|
|
6244
6536
|
class PhoneComponent {
|
|
@@ -7140,7 +7432,7 @@ class TextAreaComponent {
|
|
|
7140
7432
|
this.showCharsLimitMsg = false;
|
|
7141
7433
|
this.hasCharsLimitValidationError = false;
|
|
7142
7434
|
this.minCharsLimit = -1; //To disable chars limit feature by default
|
|
7143
|
-
this.maxLimitWarningMsg =
|
|
7435
|
+
this.maxLimitWarningMsg = '';
|
|
7144
7436
|
this.isMicOn = false;
|
|
7145
7437
|
this.resetError = () => {
|
|
7146
7438
|
this.controlValidationService.removeGlobalError();
|
|
@@ -7182,7 +7474,7 @@ class TextAreaComponent {
|
|
|
7182
7474
|
this.options.maxLength = this.globalSettings.maxLengthTextArea;
|
|
7183
7475
|
if (!this.options.viewType)
|
|
7184
7476
|
this.options.viewType = this.globalSettings.viewType;
|
|
7185
|
-
if (this.options.labelKey != null && this.options.labelKey !=
|
|
7477
|
+
if (this.options.labelKey != null && this.options.labelKey != '')
|
|
7186
7478
|
this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
|
|
7187
7479
|
if (this.options.enableSpeechRecognition) {
|
|
7188
7480
|
// Initialize language form control
|
|
@@ -7190,7 +7482,7 @@ class TextAreaComponent {
|
|
|
7190
7482
|
this.group.addControl(languageControlName, new FormControl(this.options.selectedSpeechLanguage || ''));
|
|
7191
7483
|
//Get all languages if not set
|
|
7192
7484
|
if (!this.options.speechLanguages) {
|
|
7193
|
-
this.languageService.getLanguages().subscribe(result => {
|
|
7485
|
+
this.languageService.getLanguages().subscribe((result) => {
|
|
7194
7486
|
this.options.speechLanguages = result;
|
|
7195
7487
|
this.setSpeechLanguage();
|
|
7196
7488
|
});
|
|
@@ -7256,16 +7548,18 @@ class TextAreaComponent {
|
|
|
7256
7548
|
this.controlUtility.CopyInputMessage(inputElement);
|
|
7257
7549
|
}
|
|
7258
7550
|
onTextChange() {
|
|
7259
|
-
if (this.textAreaFormControl.value ==
|
|
7551
|
+
if (this.textAreaFormControl.value == '') {
|
|
7260
7552
|
this.wordCountArray = 0;
|
|
7261
7553
|
this.wordCount = 0;
|
|
7262
7554
|
}
|
|
7263
7555
|
else {
|
|
7264
|
-
this.wordCountArray = this.textAreaFormControl.value.split(
|
|
7556
|
+
this.wordCountArray = this.textAreaFormControl.value.split(' ').length;
|
|
7265
7557
|
if (this.wordCountArray > 0) {
|
|
7266
7558
|
if (this.wordCountArray > this.options.maxWordCount) {
|
|
7267
7559
|
this.wordCount = this.options.maxWordCount;
|
|
7268
|
-
this.textAreaFormControl.setErrors({
|
|
7560
|
+
this.textAreaFormControl.setErrors({
|
|
7561
|
+
errorMassage: ` Word count must be less then or equal ${this.options.maxWordCount}`
|
|
7562
|
+
});
|
|
7269
7563
|
this.textAreaFormControl.markAsTouched();
|
|
7270
7564
|
this.textAreaFormControl.invalid;
|
|
7271
7565
|
}
|
|
@@ -7282,9 +7576,9 @@ class TextAreaComponent {
|
|
|
7282
7576
|
this.showCharsLimitMsg = true;
|
|
7283
7577
|
this.hasCharsLimitValidationError = true;
|
|
7284
7578
|
if (this.currentCharsCount == this.options.maxLength)
|
|
7285
|
-
this.charsLimitMsgClass =
|
|
7579
|
+
this.charsLimitMsgClass = 'danger';
|
|
7286
7580
|
else
|
|
7287
|
-
this.charsLimitMsgClass =
|
|
7581
|
+
this.charsLimitMsgClass = 'warning';
|
|
7288
7582
|
}
|
|
7289
7583
|
else {
|
|
7290
7584
|
this.showCharsLimitMsg = false;
|
|
@@ -7292,9 +7586,11 @@ class TextAreaComponent {
|
|
|
7292
7586
|
}
|
|
7293
7587
|
let max = this.options.maxLength;
|
|
7294
7588
|
let current = this.currentCharsCount;
|
|
7295
|
-
let msg = this.utilityService.getResourceValue(
|
|
7589
|
+
let msg = this.utilityService.getResourceValue('MaxLengthLimitWarning');
|
|
7296
7590
|
// Replace placeholders with actual values
|
|
7297
|
-
this.maxLimitWarningMsg = msg
|
|
7591
|
+
this.maxLimitWarningMsg = msg
|
|
7592
|
+
.replace('${max}', max.toString())
|
|
7593
|
+
.replace('${current}', current.toString());
|
|
7298
7594
|
}
|
|
7299
7595
|
this.onChange.emit(this.textAreaFormControl.value);
|
|
7300
7596
|
}
|
|
@@ -7302,38 +7598,41 @@ class TextAreaComponent {
|
|
|
7302
7598
|
this.isShowWordCount = isFocus;
|
|
7303
7599
|
//onFocus
|
|
7304
7600
|
if (isFocus) {
|
|
7305
|
-
if (this.hasCharsLimitValidationError)
|
|
7601
|
+
if (this.hasCharsLimitValidationError)
|
|
7602
|
+
//check if there was previous validation error
|
|
7306
7603
|
this.showCharsLimitMsg = true;
|
|
7307
|
-
}
|
|
7308
|
-
else
|
|
7604
|
+
} //onFocusOut
|
|
7605
|
+
else
|
|
7309
7606
|
this.showCharsLimitMsg = false;
|
|
7310
7607
|
}
|
|
7311
7608
|
//region Speech Recognition
|
|
7312
7609
|
setSpeechLanguage() {
|
|
7313
7610
|
const languageControlName = 'Language_' + this.options.name;
|
|
7314
7611
|
if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
|
|
7315
|
-
let savedLanguage = localStorage.getItem(
|
|
7612
|
+
let savedLanguage = localStorage.getItem('speechLanguage');
|
|
7316
7613
|
if (savedLanguage) {
|
|
7317
7614
|
this.options.selectedSpeechLanguage = savedLanguage;
|
|
7318
7615
|
}
|
|
7319
7616
|
else {
|
|
7320
7617
|
this.loadSelectedSpeechLanguage();
|
|
7321
|
-
localStorage.setItem(
|
|
7618
|
+
localStorage.setItem('speechLanguage', this.options.selectedSpeechLanguage);
|
|
7322
7619
|
}
|
|
7323
7620
|
}
|
|
7324
7621
|
else {
|
|
7325
7622
|
this.loadSelectedSpeechLanguage();
|
|
7326
7623
|
}
|
|
7327
7624
|
this.group.get(languageControlName).setValue(this.options.selectedSpeechLanguage);
|
|
7328
|
-
this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find(l => l.dialect == this.options.selectedSpeechLanguage).prefix;
|
|
7625
|
+
this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find((l) => l.dialect == this.options.selectedSpeechLanguage).prefix;
|
|
7329
7626
|
}
|
|
7330
7627
|
loadSelectedSpeechLanguage() {
|
|
7331
7628
|
if (!this.options.selectedSpeechLanguage) {
|
|
7332
|
-
if (this.currentLanguage ==
|
|
7333
|
-
this.options.
|
|
7629
|
+
if (this.currentLanguage == 'en' &&
|
|
7630
|
+
this.options.speechLanguages.some((language) => language.englishName === 'English')) {
|
|
7631
|
+
this.options.selectedSpeechLanguage = this.options.speechLanguages.find((language) => language.englishName === 'English').dialect;
|
|
7334
7632
|
}
|
|
7335
|
-
else if (this.currentLanguage ==
|
|
7336
|
-
this.options.
|
|
7633
|
+
else if (this.currentLanguage == 'ar' &&
|
|
7634
|
+
this.options.speechLanguages.some((language) => language.englishName === 'Arabic')) {
|
|
7635
|
+
this.options.selectedSpeechLanguage = this.options.speechLanguages.find((language) => language.englishName === 'Arabic').dialect;
|
|
7337
7636
|
}
|
|
7338
7637
|
else {
|
|
7339
7638
|
this.options.selectedSpeechLanguage = this.options.speechLanguages[0].dialect;
|
|
@@ -7342,21 +7641,25 @@ class TextAreaComponent {
|
|
|
7342
7641
|
}
|
|
7343
7642
|
startSpeechRecognition() {
|
|
7344
7643
|
if (!this.speechRecognitionService.isSupported) {
|
|
7345
|
-
this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue(
|
|
7644
|
+
this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue('BrowserNotSupportSpeechRecognition'));
|
|
7346
7645
|
return;
|
|
7347
7646
|
}
|
|
7348
7647
|
//Disable Select Language
|
|
7349
7648
|
this.enableOrDisableLanguageSelect(false);
|
|
7350
7649
|
this.isMicOn = true;
|
|
7351
|
-
this.subscription = this.speechRecognitionService
|
|
7650
|
+
this.subscription = this.speechRecognitionService
|
|
7651
|
+
.startListening(this.options.selectedSpeechLanguage)
|
|
7652
|
+
.subscribe({
|
|
7352
7653
|
next: (transcript) => {
|
|
7353
7654
|
if (transcript) {
|
|
7354
7655
|
if (this.options.value) {
|
|
7355
7656
|
this.options.value += ' ';
|
|
7657
|
+
this.fireOnChange(this.options.value);
|
|
7356
7658
|
}
|
|
7357
7659
|
let charIndex = 0;
|
|
7358
7660
|
const interval = setInterval(() => {
|
|
7359
7661
|
this.options.value += transcript[charIndex];
|
|
7662
|
+
this.fireOnChange(this.options.value);
|
|
7360
7663
|
charIndex++;
|
|
7361
7664
|
if (charIndex === transcript.length) {
|
|
7362
7665
|
clearInterval(interval);
|
|
@@ -7386,6 +7689,11 @@ class TextAreaComponent {
|
|
|
7386
7689
|
this.subscription.unsubscribe();
|
|
7387
7690
|
}
|
|
7388
7691
|
}
|
|
7692
|
+
fireOnChange(text) {
|
|
7693
|
+
if (this.onChange) {
|
|
7694
|
+
this.onChange.emit(text);
|
|
7695
|
+
}
|
|
7696
|
+
}
|
|
7389
7697
|
ngOnDestroy() {
|
|
7390
7698
|
if (this.options.enableSpeechRecognition) {
|
|
7391
7699
|
this.stopSpeechRecognition();
|
|
@@ -7393,13 +7701,13 @@ class TextAreaComponent {
|
|
|
7393
7701
|
}
|
|
7394
7702
|
onSpeechLanguageChange(event) {
|
|
7395
7703
|
let selectedLang_Dialect = event.target.value;
|
|
7396
|
-
this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find(l => l.dialect == selectedLang_Dialect).prefix;
|
|
7704
|
+
this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find((l) => l.dialect == selectedLang_Dialect).prefix;
|
|
7397
7705
|
this.options.selectedSpeechLanguage = selectedLang_Dialect;
|
|
7398
7706
|
const languageControlName = 'Language_' + this.options.name;
|
|
7399
7707
|
let select = this.group.get(languageControlName);
|
|
7400
7708
|
select.setValue(selectedLang_Dialect);
|
|
7401
7709
|
if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
|
|
7402
|
-
localStorage.setItem(
|
|
7710
|
+
localStorage.setItem('speechLanguage', selectedLang_Dialect);
|
|
7403
7711
|
}
|
|
7404
7712
|
}
|
|
7405
7713
|
enableOrDisableLanguageSelect(isEnabled = true) {
|
|
@@ -9451,6 +9759,8 @@ class PagingOptions {
|
|
|
9451
9759
|
this.resetFilterButtonName = null;
|
|
9452
9760
|
this.disableBlockUI = false;
|
|
9453
9761
|
this.startPagingCallback = null;
|
|
9762
|
+
/** Enable browser back/forward navigation support for paging state */
|
|
9763
|
+
this.enableBrowserNavigation = false;
|
|
9454
9764
|
}
|
|
9455
9765
|
}
|
|
9456
9766
|
|