@esfaenza/forms-and-validations 15.2.36 → 15.2.37
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/esm2020/lib/forms/form-autocomplete/form-autocomplete.component.mjs +14 -6
- package/esm2020/lib/validations/validation-autocomplete-multi/validation-autocomplete-multi.component.mjs +42 -10
- package/fesm2015/esfaenza-forms-and-validations.mjs +54 -14
- package/fesm2015/esfaenza-forms-and-validations.mjs.map +1 -1
- package/fesm2020/esfaenza-forms-and-validations.mjs +54 -14
- package/fesm2020/esfaenza-forms-and-validations.mjs.map +1 -1
- package/lib/forms/form-autocomplete/form-autocomplete.component.d.ts +4 -2
- package/lib/validations/validation-autocomplete-multi/validation-autocomplete-multi.component.d.ts +8 -1
- package/package.json +1 -1
|
@@ -33,6 +33,7 @@ import { takeUntil } from 'rxjs/operators';
|
|
|
33
33
|
import * as i4$1 from '@angular/material/legacy-form-field';
|
|
34
34
|
import * as i1$1 from '@esfaenza/extensions';
|
|
35
35
|
import * as i8 from '@angular/material/legacy-core';
|
|
36
|
+
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
36
37
|
import * as i3 from '@esfaenza/access-control';
|
|
37
38
|
import { __awaiter } from 'tslib';
|
|
38
39
|
|
|
@@ -1564,6 +1565,14 @@ class ValidationAutocompleteMultiComponent extends BaseValidation {
|
|
|
1564
1565
|
super.ngOnInit();
|
|
1565
1566
|
this.registerFocusRequest();
|
|
1566
1567
|
this.checkRequiredness(this._validators);
|
|
1568
|
+
if (this.UnboundMode) {
|
|
1569
|
+
this.separatorKeysCodes = [ENTER, COMMA];
|
|
1570
|
+
this.addOnBlur = true;
|
|
1571
|
+
}
|
|
1572
|
+
else {
|
|
1573
|
+
this.separatorKeysCodes = [ENTER];
|
|
1574
|
+
this.addOnBlur = false;
|
|
1575
|
+
}
|
|
1567
1576
|
}
|
|
1568
1577
|
/** @ignore */
|
|
1569
1578
|
ngOnDestroy() {
|
|
@@ -1640,12 +1649,31 @@ class ValidationAutocompleteMultiComponent extends BaseValidation {
|
|
|
1640
1649
|
registerOnTouched(fn) {
|
|
1641
1650
|
this.onTouched = fn;
|
|
1642
1651
|
}
|
|
1652
|
+
addWhenUnbound(event) {
|
|
1653
|
+
let input = event.input;
|
|
1654
|
+
let toAdd = event.value;
|
|
1655
|
+
if (!this.value)
|
|
1656
|
+
this.value = [];
|
|
1657
|
+
if ((toAdd || '').trim()) {
|
|
1658
|
+
let array = toAdd.split(/[\s,;]+/).filter(f => f != null && f != "" && f != undefined);
|
|
1659
|
+
array = array.map(item => item.replace(',', '').replace(';', '').trim());
|
|
1660
|
+
array.forEach(a => {
|
|
1661
|
+
this.toggleSelection({ id: a, description: a });
|
|
1662
|
+
});
|
|
1663
|
+
this.value = [...this.value, ...array];
|
|
1664
|
+
this.propagateChange(this.value);
|
|
1665
|
+
}
|
|
1666
|
+
if (input) {
|
|
1667
|
+
input.value = '';
|
|
1668
|
+
}
|
|
1669
|
+
}
|
|
1643
1670
|
/** Rimuove un elemento selezionato */
|
|
1644
1671
|
removeChip(data) {
|
|
1645
1672
|
if (!data) {
|
|
1646
1673
|
this.selectData = [];
|
|
1647
|
-
this.FilteredSource
|
|
1648
|
-
|
|
1674
|
+
if (this.FilteredSource)
|
|
1675
|
+
this.FilteredSource.forEach(data => data.selected = false);
|
|
1676
|
+
this.onModelChange("", true);
|
|
1649
1677
|
this.onFinalize();
|
|
1650
1678
|
}
|
|
1651
1679
|
else
|
|
@@ -1666,24 +1694,26 @@ class ValidationAutocompleteMultiComponent extends BaseValidation {
|
|
|
1666
1694
|
if (this.HideChoicesOnSelection)
|
|
1667
1695
|
this.htmlInput.nativeElement.value = "";
|
|
1668
1696
|
else {
|
|
1669
|
-
this.
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1697
|
+
if (!this.UnboundMode) {
|
|
1698
|
+
this.autoTrigger.closePanel();
|
|
1699
|
+
requestAnimationFrame(() => {
|
|
1700
|
+
this.autoTrigger.openPanel();
|
|
1701
|
+
});
|
|
1702
|
+
}
|
|
1673
1703
|
}
|
|
1674
1704
|
this.onFinalize();
|
|
1675
1705
|
}
|
|
1676
1706
|
;
|
|
1677
1707
|
}
|
|
1678
1708
|
ValidationAutocompleteMultiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationAutocompleteMultiComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1679
|
-
ValidationAutocompleteMultiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ValidationAutocompleteMultiComponent, selector: "val-autocomplete-multi", inputs: { ChipThreshold: "ChipThreshold", FilteredSource: "FilteredSource", value: "value", label: "label", HideChoicesOnSelection: "HideChoicesOnSelection" }, outputs: { optionChange: "optionChange" }, providers: [
|
|
1709
|
+
ValidationAutocompleteMultiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ValidationAutocompleteMultiComponent, selector: "val-autocomplete-multi", inputs: { ChipThreshold: "ChipThreshold", FilteredSource: "FilteredSource", UnboundMode: "UnboundMode", value: "value", label: "label", HideChoicesOnSelection: "HideChoicesOnSelection" }, outputs: { optionChange: "optionChange" }, providers: [
|
|
1680
1710
|
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1681
1711
|
{
|
|
1682
1712
|
provide: NG_VALUE_ACCESSOR,
|
|
1683
1713
|
useExisting: forwardRef(() => ValidationAutocompleteMultiComponent),
|
|
1684
1714
|
multi: true
|
|
1685
1715
|
}
|
|
1686
|
-
], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatLegacyAutocompleteTrigger, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <mat-chip-list #chipList>\r\n <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(select)\">\r\n {{ select.description }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n\r\n <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(null)\">\r\n {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n\r\n <input matInput\r\n [matChipInputFor]=\"chipList\"\r\n #htmlInput\r\n #baseInput='ngModel'\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n [placeholder]=\"placeholder\"\r\n [matAutocomplete]=\"auto\"\r\n name=\"val-input\"\r\n id=\"{{id}}\"\r\n [(ngModel)]=\"value\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"Readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (click)=\"onFocus($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n </mat-chip-list>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\">\r\n <mat-option *ngFor=\"let data of FilteredSource\">\r\n <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n {{ data.description }}\r\n </mat-checkbox>\r\n </div>\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailedBind}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-infix{height:auto!important;min-height:36px!important}val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-wrapper{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i7$2.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$2.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1.LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1716
|
+
], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatLegacyAutocompleteTrigger, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <mat-chip-list #chipList>\r\n <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(select)\">\r\n {{ select.description }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n\r\n <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(null)\">\r\n {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n\r\n <input matInput\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n #htmlInput\r\n #baseInput='ngModel'\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n [placeholder]=\"placeholder\"\r\n [matAutocomplete]=\"auto\"\r\n name=\"val-input\"\r\n id=\"{{id}}\"\r\n [(ngModel)]=\"value\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"Readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (matChipInputTokenEnd)=\"addWhenUnbound($event)\"\r\n (click)=\"onFocus($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n </mat-chip-list>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\">\r\n <mat-option *ngFor=\"let data of FilteredSource\">\r\n <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n {{ data.description }}\r\n </mat-checkbox>\r\n </div>\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailedBind}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-infix{height:auto!important;min-height:36px!important}val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-wrapper{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i7$2.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$2.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1.LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1687
1717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationAutocompleteMultiComponent, decorators: [{
|
|
1688
1718
|
type: Component,
|
|
1689
1719
|
args: [{ selector: "val-autocomplete-multi", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -1693,7 +1723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1693
1723
|
useExisting: forwardRef(() => ValidationAutocompleteMultiComponent),
|
|
1694
1724
|
multi: true
|
|
1695
1725
|
}
|
|
1696
|
-
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <mat-chip-list #chipList>\r\n <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(select)\">\r\n {{ select.description }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n\r\n <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(null)\">\r\n {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n\r\n <input matInput\r\n [matChipInputFor]=\"chipList\"\r\n #htmlInput\r\n #baseInput='ngModel'\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n [placeholder]=\"placeholder\"\r\n [matAutocomplete]=\"auto\"\r\n name=\"val-input\"\r\n id=\"{{id}}\"\r\n [(ngModel)]=\"value\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"Readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (click)=\"onFocus($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n </mat-chip-list>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\">\r\n <mat-option *ngFor=\"let data of FilteredSource\">\r\n <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n {{ data.description }}\r\n </mat-checkbox>\r\n </div>\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailedBind}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-infix{height:auto!important;min-height:36px!important}val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-wrapper{height:auto!important}\n"] }]
|
|
1726
|
+
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <mat-chip-list #chipList>\r\n <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(select)\">\r\n {{ select.description }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n\r\n <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(Readonly || disabled) && removeChip(null)\">\r\n {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n </mat-chip>\r\n\r\n <input matInput\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n #htmlInput\r\n #baseInput='ngModel'\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n [placeholder]=\"placeholder\"\r\n [matAutocomplete]=\"auto\"\r\n name=\"val-input\"\r\n id=\"{{id}}\"\r\n [(ngModel)]=\"value\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"Readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (matChipInputTokenEnd)=\"addWhenUnbound($event)\"\r\n (click)=\"onFocus($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n </mat-chip-list>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\">\r\n <mat-option *ngFor=\"let data of FilteredSource\">\r\n <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n {{ data.description }}\r\n </mat-checkbox>\r\n </div>\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailedBind}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-infix{height:auto!important;min-height:36px!important}val-autocomplete-multi .mat-form-field-appearance-outline .mat-form-field-wrapper{height:auto!important}\n"] }]
|
|
1697
1727
|
}], ctorParameters: function () {
|
|
1698
1728
|
return [{ type: i0.ChangeDetectorRef }, { type: Array, decorators: [{
|
|
1699
1729
|
type: Optional
|
|
@@ -1710,6 +1740,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1710
1740
|
type: Input
|
|
1711
1741
|
}], FilteredSource: [{
|
|
1712
1742
|
type: Input
|
|
1743
|
+
}], UnboundMode: [{
|
|
1744
|
+
type: Input
|
|
1713
1745
|
}], value: [{
|
|
1714
1746
|
type: Input
|
|
1715
1747
|
}], label: [{
|
|
@@ -3696,6 +3728,8 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3696
3728
|
this.Multi = false;
|
|
3697
3729
|
/** Indica se usare la modalità multiselezione o no */
|
|
3698
3730
|
this.MultiElementsThreshold = 10;
|
|
3731
|
+
/** Indica il fatto che non c'è una Source da cui scegliere */
|
|
3732
|
+
this.UnboundMode = false;
|
|
3699
3733
|
/**
|
|
3700
3734
|
* Indica se ignorare il prossimo evento writeValue che normalmente dovrebbe richiedere la nuova source. Serve per quando l'utente seleziona un elemento:
|
|
3701
3735
|
* Subito dopo partirebbe un altro evento modelChange che ricaricherebbe nuovamente la source
|
|
@@ -3715,7 +3749,7 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3715
3749
|
writeValue(value) {
|
|
3716
3750
|
if (!value)
|
|
3717
3751
|
return;
|
|
3718
|
-
if (this.SearchFunction) {
|
|
3752
|
+
if (this.SearchFunction && !this.UnboundMode) {
|
|
3719
3753
|
this.doSearchProtected(value, true, this.SearchFunctionContext, (t) => {
|
|
3720
3754
|
this.Source = t;
|
|
3721
3755
|
this.tryBindSourceDisplay();
|
|
@@ -3732,7 +3766,7 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3732
3766
|
* @param {any} value Valore scritto nell'input di testo
|
|
3733
3767
|
*/
|
|
3734
3768
|
finalizeValue(value) {
|
|
3735
|
-
var val = this.BoundSource.find(t => t.id == value);
|
|
3769
|
+
var val = this.UnboundMode ? null : this.BoundSource.find(t => t.id == value);
|
|
3736
3770
|
this.propagateChange(val ? val.id : value);
|
|
3737
3771
|
// Alor... praticamente qui potrebbero arrivare degli switcheroni in cui il Model è uguale all'inizio e alla fine dello stack, per qualche motivo
|
|
3738
3772
|
// quindi per assicurarmi che il valore venga preso correttamente faccio il classico metti a null poi metti su
|
|
@@ -3750,6 +3784,8 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3750
3784
|
*/
|
|
3751
3785
|
evaluateIdResearch(onFailure) {
|
|
3752
3786
|
let tmpModel = this.Model;
|
|
3787
|
+
if (this.UnboundMode)
|
|
3788
|
+
return;
|
|
3753
3789
|
if (!tmpModel || !this.SearchFunction) {
|
|
3754
3790
|
onFailure === null || onFailure === void 0 ? void 0 : onFailure();
|
|
3755
3791
|
return;
|
|
@@ -3779,6 +3815,8 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3779
3815
|
});
|
|
3780
3816
|
}
|
|
3781
3817
|
doFilterSource(event) {
|
|
3818
|
+
if (this.UnboundMode)
|
|
3819
|
+
return;
|
|
3782
3820
|
if (this.ignoreNextWriteValue) {
|
|
3783
3821
|
this.ignoreNextWriteValue = false;
|
|
3784
3822
|
return;
|
|
@@ -3866,7 +3904,7 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3866
3904
|
if (forcedValue == "" && this.Multi)
|
|
3867
3905
|
this.Model = "";
|
|
3868
3906
|
var selecteds = forcedValue ? [forcedValue] : this.Model ? (this.Model.Multi ? this.Model.split(',') : [this.Model]) : [];
|
|
3869
|
-
this.EvaluatedModel = selecteds.map(s => { var _a; return this.BoundSource && this.BoundSource.length > 0 ? (_a = this.BoundSource.find(t => t.id == s)) === null || _a === void 0 ? void 0 : _a.description : ""; }).join(', ');
|
|
3907
|
+
this.EvaluatedModel = selecteds.map(s => { var _a; return this.BoundSource && this.BoundSource.length > 0 ? (_a = this.BoundSource.find(t => t.id == s)) === null || _a === void 0 ? void 0 : _a.description : this.UnboundMode ? s : ""; }).join(', ');
|
|
3870
3908
|
super.changed(forcedValue, markForCheck);
|
|
3871
3909
|
}
|
|
3872
3910
|
/** @ignore */
|
|
@@ -3881,10 +3919,10 @@ class FormAutocompleteComponent extends BaseFormControl {
|
|
|
3881
3919
|
}
|
|
3882
3920
|
}
|
|
3883
3921
|
FormAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i2.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i3.AccessControlService, optional: true }, { token: i3.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }, { token: FAV_DEBUG_MODE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3884
|
-
FormAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormAutocompleteComponent, selector: "form-autocomplete", inputs: { SelectLabel: "SelectLabel", SearchFunctionContext: "SearchFunctionContext", SearchFunction: "SearchFunction", MinChars: "MinChars", HideChoicesOnSelection: "HideChoicesOnSelection", RequiredPlaceholder: "RequiredPlaceholder", CaseSensitive: "CaseSensitive", Multi: "Multi", MultiElementsThreshold: "MultiElementsThreshold" }, providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n<!-- Form-Model: {{Model}} -->\r\n<ng-template #controlTemplate>\r\n <val-autocomplete *ngIf=\"!Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\">\r\n </val-autocomplete>\r\n\r\n <val-autocomplete-multi *ngIf=\"Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n [ChipThreshold]=\"MultiElementsThreshold\"\r\n [HideChoicesOnSelection]=\"HideChoicesOnSelection\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\">\r\n\r\n </val-autocomplete-multi>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ValidationAutocompleteComponent, selector: "val-autocomplete", inputs: ["FilteredSource", "value", "label"], outputs: ["optionChange"] }, { kind: "component", type: ValidationAutocompleteMultiComponent, selector: "val-autocomplete-multi", inputs: ["ChipThreshold", "FilteredSource", "value", "label", "HideChoicesOnSelection"], outputs: ["optionChange"] }, { kind: "pipe", type: i1.LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3922
|
+
FormAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormAutocompleteComponent, selector: "form-autocomplete", inputs: { SelectLabel: "SelectLabel", SearchFunctionContext: "SearchFunctionContext", SearchFunction: "SearchFunction", MinChars: "MinChars", HideChoicesOnSelection: "HideChoicesOnSelection", RequiredPlaceholder: "RequiredPlaceholder", CaseSensitive: "CaseSensitive", Multi: "Multi", MultiElementsThreshold: "MultiElementsThreshold", UnboundMode: "UnboundMode" }, providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n<!-- Form-Model: {{Model}} -->\r\n<ng-template #controlTemplate>\r\n <val-autocomplete *ngIf=\"!Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\">\r\n </val-autocomplete>\r\n\r\n <val-autocomplete-multi *ngIf=\"Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n [ChipThreshold]=\"MultiElementsThreshold\"\r\n [HideChoicesOnSelection]=\"HideChoicesOnSelection\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\"\r\n [UnboundMode]=\"UnboundMode\">\r\n\r\n </val-autocomplete-multi>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ValidationAutocompleteComponent, selector: "val-autocomplete", inputs: ["FilteredSource", "value", "label"], outputs: ["optionChange"] }, { kind: "component", type: ValidationAutocompleteMultiComponent, selector: "val-autocomplete-multi", inputs: ["ChipThreshold", "FilteredSource", "UnboundMode", "value", "label", "HideChoicesOnSelection"], outputs: ["optionChange"] }, { kind: "pipe", type: i1.LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3885
3923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormAutocompleteComponent, decorators: [{
|
|
3886
3924
|
type: Component,
|
|
3887
|
-
args: [{ selector: "form-autocomplete", providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n<!-- Form-Model: {{Model}} -->\r\n<ng-template #controlTemplate>\r\n <val-autocomplete *ngIf=\"!Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\">\r\n </val-autocomplete>\r\n\r\n <val-autocomplete-multi *ngIf=\"Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n [ChipThreshold]=\"MultiElementsThreshold\"\r\n [HideChoicesOnSelection]=\"HideChoicesOnSelection\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\">\r\n\r\n </val-autocomplete-multi>\r\n</ng-template>" }]
|
|
3925
|
+
args: [{ selector: "form-autocomplete", providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n<!-- Form-Model: {{Model}} -->\r\n<ng-template #controlTemplate>\r\n <val-autocomplete *ngIf=\"!Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\">\r\n </val-autocomplete>\r\n\r\n <val-autocomplete-multi *ngIf=\"Multi\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [Readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n [ChipThreshold]=\"MultiElementsThreshold\"\r\n [HideChoicesOnSelection]=\"HideChoicesOnSelection\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n [id]=\"GeneratedName\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (inputFocus)=\"focused($event);\"\r\n (inputFinalized)=\"finalized()\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : (('Seleziona' | localize : lc) + '...'))) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\"\r\n [UnboundMode]=\"UnboundMode\">\r\n\r\n </val-autocomplete-multi>\r\n</ng-template>" }]
|
|
3888
3926
|
}], ctorParameters: function () {
|
|
3889
3927
|
return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i2.NgControl, decorators: [{
|
|
3890
3928
|
type: Optional
|
|
@@ -3928,6 +3966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3928
3966
|
type: Input
|
|
3929
3967
|
}], MultiElementsThreshold: [{
|
|
3930
3968
|
type: Input
|
|
3969
|
+
}], UnboundMode: [{
|
|
3970
|
+
type: Input
|
|
3931
3971
|
}] } });
|
|
3932
3972
|
|
|
3933
3973
|
// Angular
|