@unifylib/ui-lib 1.2.23 → 1.2.25
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/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +1 -29
- package/esm2022/lib/components/auto-complete/auto-complete.component.mjs +3 -3
- package/fesm2022/iq-ui-lib.mjs +2 -30
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/lib/components/advanced-filter/filter-builder/filter-builder.component.d.ts +0 -2
- package/package.json +1 -1
package/fesm2022/iq-ui-lib.mjs
CHANGED
|
@@ -1918,7 +1918,7 @@ class AutoCompleteComponent {
|
|
|
1918
1918
|
this.destroy$.complete();
|
|
1919
1919
|
}
|
|
1920
1920
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: 'secretsManager' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\n\n <div class=\"label-and-asterisk-container\">\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\" (click)=\"openLookupPanel(); $event.stopPropagation()\">\n <input type=\"text\"\n [placeholder]=\"'search_placeholder' | translate\"\n [id]=\"getId()\"\n [formControl]=\"myControl\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [matAutocomplete]=\"auto\"\n (focus)=\"openLookupPanel(autocompleteTrigger)\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n matInput\n [required]=\"isRequired\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"matErrorDescribedBy\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [readonly]=\"readonly\"\n >\n\n <button mat-button matSuffix\n color=\"primary\"\n class=\"autocomplete-button\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\"
|
|
1921
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\n\n <div class=\"label-and-asterisk-container\">\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\" (click)=\"openLookupPanel(); $event.stopPropagation()\">\n <input type=\"text\"\n [placeholder]=\"'search_placeholder' | translate\"\n [id]=\"getId()\"\n [formControl]=\"myControl\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [matAutocomplete]=\"auto\"\n (focus)=\"openLookupPanel(autocompleteTrigger)\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n matInput\n [required]=\"isRequired\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"matErrorDescribedBy\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [readonly]=\"readonly\"\n >\n\n <button mat-button matSuffix\n color=\"primary\"\n class=\"autocomplete-button\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\"\n (optionSelected)=\"itemSelected($event.option.value)\"\n (closed)=\"closed()\">\n <ng-container *ngIf=\"!field.readonly\">\n <mat-option *ngIf=\"showNoneOption()\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\n {{ itemNameByLag(item) }}\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n\n </div>\n</ng-container>\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix{height:36px!important}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button.mat-mdc-button{min-height:36px!important;height:36px!important;--mdc-text-button-container-height: 36px;line-height:36px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button .mat-mdc-button-touch-target{height:36px!important}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1922
1922
|
}
|
|
1923
1923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
1924
1924
|
type: Component,
|
|
@@ -1937,7 +1937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1937
1937
|
NgForOf,
|
|
1938
1938
|
MatIconButton,
|
|
1939
1939
|
MatButton,
|
|
1940
|
-
], template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\n\n <div class=\"label-and-asterisk-container\">\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\" (click)=\"openLookupPanel(); $event.stopPropagation()\">\n <input type=\"text\"\n [placeholder]=\"'search_placeholder' | translate\"\n [id]=\"getId()\"\n [formControl]=\"myControl\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [matAutocomplete]=\"auto\"\n (focus)=\"openLookupPanel(autocompleteTrigger)\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n matInput\n [required]=\"isRequired\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"matErrorDescribedBy\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [readonly]=\"readonly\"\n >\n\n <button mat-button matSuffix\n color=\"primary\"\n class=\"autocomplete-button\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\"
|
|
1940
|
+
], template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\n\n <div class=\"label-and-asterisk-container\">\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\" (click)=\"openLookupPanel(); $event.stopPropagation()\">\n <input type=\"text\"\n [placeholder]=\"'search_placeholder' | translate\"\n [id]=\"getId()\"\n [formControl]=\"myControl\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [matAutocomplete]=\"auto\"\n (focus)=\"openLookupPanel(autocompleteTrigger)\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n matInput\n [required]=\"isRequired\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"matErrorDescribedBy\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [readonly]=\"readonly\"\n >\n\n <button mat-button matSuffix\n color=\"primary\"\n class=\"autocomplete-button\"\n (click)=\"openLookupPanel(autocompleteTrigger); $event.stopPropagation()\"\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\"\n (optionSelected)=\"itemSelected($event.option.value)\"\n (closed)=\"closed()\">\n <ng-container *ngIf=\"!field.readonly\">\n <mat-option *ngIf=\"showNoneOption()\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\n {{ itemNameByLag(item) }}\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n\n </div>\n</ng-container>\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix{height:36px!important}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button.mat-mdc-button{min-height:36px!important;height:36px!important;--mdc-text-button-container-height: 36px;line-height:36px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button .mat-mdc-button-touch-target{height:36px!important}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"] }]
|
|
1941
1941
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: undefined, decorators: [{
|
|
1942
1942
|
type: Inject,
|
|
1943
1943
|
args: ['secretsManager']
|
|
@@ -3190,10 +3190,6 @@ class FilterBuilderComponent {
|
|
|
3190
3190
|
clearTimeout(this.searchTimeout);
|
|
3191
3191
|
this.searchTimeout = null;
|
|
3192
3192
|
}
|
|
3193
|
-
if (this.autoApplyTimeout) {
|
|
3194
|
-
clearTimeout(this.autoApplyTimeout);
|
|
3195
|
-
this.autoApplyTimeout = null;
|
|
3196
|
-
}
|
|
3197
3193
|
}
|
|
3198
3194
|
onKeyDown(event) {
|
|
3199
3195
|
if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
|
|
@@ -3234,10 +3230,6 @@ class FilterBuilderComponent {
|
|
|
3234
3230
|
this.filterInformation.emit({ filters: filtersArray, searchStr });
|
|
3235
3231
|
}
|
|
3236
3232
|
onApplyFilter() {
|
|
3237
|
-
if (this.autoApplyTimeout) {
|
|
3238
|
-
clearTimeout(this.autoApplyTimeout);
|
|
3239
|
-
this.autoApplyTimeout = null;
|
|
3240
|
-
}
|
|
3241
3233
|
setTimeout(() => {
|
|
3242
3234
|
this.doSearch();
|
|
3243
3235
|
this.applyFilter.emit();
|
|
@@ -3245,16 +3237,6 @@ class FilterBuilderComponent {
|
|
|
3245
3237
|
void this.liveAnnouncer.announce(msg, 'polite');
|
|
3246
3238
|
}, 0);
|
|
3247
3239
|
}
|
|
3248
|
-
scheduleAutoApply() {
|
|
3249
|
-
if (this.autoApplyTimeout) {
|
|
3250
|
-
clearTimeout(this.autoApplyTimeout);
|
|
3251
|
-
this.autoApplyTimeout = null;
|
|
3252
|
-
}
|
|
3253
|
-
this.autoApplyTimeout = setTimeout(() => {
|
|
3254
|
-
this.onApplyFilter();
|
|
3255
|
-
this.autoApplyTimeout = null;
|
|
3256
|
-
}, 10000);
|
|
3257
|
-
}
|
|
3258
3240
|
scheduleSearch(delayMs = 800) {
|
|
3259
3241
|
if (this.searchTimeout) {
|
|
3260
3242
|
clearTimeout(this.searchTimeout);
|
|
@@ -3264,10 +3246,6 @@ class FilterBuilderComponent {
|
|
|
3264
3246
|
}, delayMs);
|
|
3265
3247
|
}
|
|
3266
3248
|
formChanges($event, index, fieldInfo) {
|
|
3267
|
-
if (this.autoApplyTimeout) {
|
|
3268
|
-
clearTimeout(this.autoApplyTimeout);
|
|
3269
|
-
this.autoApplyTimeout = null;
|
|
3270
|
-
}
|
|
3271
3249
|
const formatIfDate = (type, value) => {
|
|
3272
3250
|
if (!type || value === undefined || value === null || value === '')
|
|
3273
3251
|
return value;
|
|
@@ -3304,7 +3282,6 @@ class FilterBuilderComponent {
|
|
|
3304
3282
|
else {
|
|
3305
3283
|
this.doSearch();
|
|
3306
3284
|
}
|
|
3307
|
-
this.scheduleAutoApply();
|
|
3308
3285
|
return;
|
|
3309
3286
|
}
|
|
3310
3287
|
if (!this.filters) {
|
|
@@ -3338,7 +3315,6 @@ class FilterBuilderComponent {
|
|
|
3338
3315
|
else {
|
|
3339
3316
|
this.doSearch();
|
|
3340
3317
|
}
|
|
3341
|
-
this.scheduleAutoApply();
|
|
3342
3318
|
}
|
|
3343
3319
|
typeMap(colType) {
|
|
3344
3320
|
const t = (colType || '').toLowerCase();
|
|
@@ -3359,10 +3335,6 @@ class FilterBuilderComponent {
|
|
|
3359
3335
|
this.isEmpty.emit(true);
|
|
3360
3336
|
}
|
|
3361
3337
|
onClearFilters() {
|
|
3362
|
-
if (this.autoApplyTimeout) {
|
|
3363
|
-
clearTimeout(this.autoApplyTimeout);
|
|
3364
|
-
this.autoApplyTimeout = null;
|
|
3365
|
-
}
|
|
3366
3338
|
if (this.searchTimeout) {
|
|
3367
3339
|
clearTimeout(this.searchTimeout);
|
|
3368
3340
|
this.searchTimeout = null;
|