@3kles/kles-material-dynamicforms 21.5.0 → 21.5.1
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.
|
@@ -6562,97 +6562,93 @@ class KlesFormChipGridComponent extends KlesFieldAbstract {
|
|
|
6562
6562
|
}
|
|
6563
6563
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormChipGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6564
6564
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormChipGridComponent, isStandalone: true, selector: "kles-form-chip-grid", usesInheritance: true, ngImport: i0, template: `
|
|
6565
|
-
<
|
|
6566
|
-
<mat-
|
|
6567
|
-
|
|
6568
|
-
|
|
6569
|
-
|
|
6570
|
-
|
|
6571
|
-
|
|
6572
|
-
<
|
|
6573
|
-
|
|
6574
|
-
|
|
6575
|
-
|
|
6576
|
-
|
|
6577
|
-
|
|
6578
|
-
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6584
|
-
|
|
6585
|
-
|
|
6586
|
-
|
|
6587
|
-
|
|
6588
|
-
/>
|
|
6565
|
+
<mat-form-field [formGroup]="group" [matTooltip]="tooltip()" [appearance]="appearance()">
|
|
6566
|
+
<mat-label>{{ label() }}</mat-label>
|
|
6567
|
+
<mat-chip-grid #reactiveChipGrid [formControl]="group.controls[field.name]">
|
|
6568
|
+
@for (value of group.controls[field.name].value ?? []; track value) {
|
|
6569
|
+
<mat-chip-row (removed)="removeChip(value)">
|
|
6570
|
+
{{ value | klesTransform: field.pipeTransform }}
|
|
6571
|
+
<button matChipRemove>
|
|
6572
|
+
<mat-icon>cancel</mat-icon>
|
|
6573
|
+
</button>
|
|
6574
|
+
</mat-chip-row>
|
|
6575
|
+
}
|
|
6576
|
+
</mat-chip-grid>
|
|
6577
|
+
<input
|
|
6578
|
+
#search
|
|
6579
|
+
[formControl]="searchControl"
|
|
6580
|
+
[placeholder]="placeholder()"
|
|
6581
|
+
[matChipInputFor]="reactiveChipGrid"
|
|
6582
|
+
(matChipInputTokenEnd)="onTokenEnd($event)"
|
|
6583
|
+
[matAutocomplete]="auto"
|
|
6584
|
+
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
|
6585
|
+
(focus)="onFocus()"
|
|
6586
|
+
(blur)="onBlur()"
|
|
6587
|
+
/>
|
|
6589
6588
|
|
|
6590
|
-
|
|
6591
|
-
|
|
6592
|
-
|
|
6593
|
-
|
|
6594
|
-
|
|
6595
|
-
|
|
6596
|
-
|
|
6597
|
-
|
|
6598
|
-
|
|
6599
|
-
|
|
6600
|
-
|
|
6601
|
-
|
|
6602
|
-
}
|
|
6589
|
+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); search.value = ''">
|
|
6590
|
+
@if (filteredOption$ | async; as filteredOption) {
|
|
6591
|
+
@if (filteredOption.loading) {
|
|
6592
|
+
<mat-option disabled>
|
|
6593
|
+
<div class="loadingSelect">
|
|
6594
|
+
{{ intl.loading }}...
|
|
6595
|
+
<mat-spinner class="spinner" diameter="20"></mat-spinner>
|
|
6596
|
+
</div>
|
|
6597
|
+
</mat-option>
|
|
6598
|
+
} @else {
|
|
6599
|
+
@for (item of filteredOption.options; track item) {
|
|
6600
|
+
<mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
|
|
6603
6601
|
}
|
|
6604
6602
|
}
|
|
6605
|
-
|
|
6606
|
-
</mat-
|
|
6607
|
-
</
|
|
6603
|
+
}
|
|
6604
|
+
</mat-autocomplete>
|
|
6605
|
+
</mat-form-field>
|
|
6608
6606
|
`, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.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: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
6609
6607
|
}
|
|
6610
6608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormChipGridComponent, decorators: [{
|
|
6611
6609
|
type: Component,
|
|
6612
6610
|
args: [{ selector: 'kles-form-chip-grid', template: `
|
|
6613
|
-
<
|
|
6614
|
-
<mat-
|
|
6615
|
-
|
|
6616
|
-
|
|
6617
|
-
|
|
6618
|
-
|
|
6619
|
-
|
|
6620
|
-
<
|
|
6621
|
-
|
|
6622
|
-
|
|
6623
|
-
|
|
6624
|
-
|
|
6625
|
-
|
|
6626
|
-
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
/>
|
|
6611
|
+
<mat-form-field [formGroup]="group" [matTooltip]="tooltip()" [appearance]="appearance()">
|
|
6612
|
+
<mat-label>{{ label() }}</mat-label>
|
|
6613
|
+
<mat-chip-grid #reactiveChipGrid [formControl]="group.controls[field.name]">
|
|
6614
|
+
@for (value of group.controls[field.name].value ?? []; track value) {
|
|
6615
|
+
<mat-chip-row (removed)="removeChip(value)">
|
|
6616
|
+
{{ value | klesTransform: field.pipeTransform }}
|
|
6617
|
+
<button matChipRemove>
|
|
6618
|
+
<mat-icon>cancel</mat-icon>
|
|
6619
|
+
</button>
|
|
6620
|
+
</mat-chip-row>
|
|
6621
|
+
}
|
|
6622
|
+
</mat-chip-grid>
|
|
6623
|
+
<input
|
|
6624
|
+
#search
|
|
6625
|
+
[formControl]="searchControl"
|
|
6626
|
+
[placeholder]="placeholder()"
|
|
6627
|
+
[matChipInputFor]="reactiveChipGrid"
|
|
6628
|
+
(matChipInputTokenEnd)="onTokenEnd($event)"
|
|
6629
|
+
[matAutocomplete]="auto"
|
|
6630
|
+
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
|
6631
|
+
(focus)="onFocus()"
|
|
6632
|
+
(blur)="onBlur()"
|
|
6633
|
+
/>
|
|
6637
6634
|
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
|
|
6641
|
-
|
|
6642
|
-
|
|
6643
|
-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
|
|
6647
|
-
|
|
6648
|
-
|
|
6649
|
-
|
|
6650
|
-
}
|
|
6635
|
+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); search.value = ''">
|
|
6636
|
+
@if (filteredOption$ | async; as filteredOption) {
|
|
6637
|
+
@if (filteredOption.loading) {
|
|
6638
|
+
<mat-option disabled>
|
|
6639
|
+
<div class="loadingSelect">
|
|
6640
|
+
{{ intl.loading }}...
|
|
6641
|
+
<mat-spinner class="spinner" diameter="20"></mat-spinner>
|
|
6642
|
+
</div>
|
|
6643
|
+
</mat-option>
|
|
6644
|
+
} @else {
|
|
6645
|
+
@for (item of filteredOption.options; track item) {
|
|
6646
|
+
<mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
|
|
6651
6647
|
}
|
|
6652
6648
|
}
|
|
6653
|
-
|
|
6654
|
-
</mat-
|
|
6655
|
-
</
|
|
6649
|
+
}
|
|
6650
|
+
</mat-autocomplete>
|
|
6651
|
+
</mat-form-field>
|
|
6656
6652
|
`, standalone: true, imports: [MatIconModule, KlesTransformPipe, MatChipsModule, MatTooltip, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, AsyncPipe, MatProgressSpinnerModule], styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
|
|
6657
6653
|
}] });
|
|
6658
6654
|
|