@sumaris-net/ngx-components 1.20.13 → 1.20.16
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/bundles/sumaris-net.ngx-components.umd.js +37 -23
- package/bundles/sumaris-net.ngx-components.umd.js.map +1 -1
- package/bundles/sumaris-net.ngx-components.umd.min.js +1 -1
- package/bundles/sumaris-net.ngx-components.umd.min.js.map +1 -1
- package/doc/changelog.md +3 -0
- package/esm2015/src/app/core/menu/menu.component.js +11 -7
- package/esm2015/src/app/shared/material/chips/material.chips.js +4 -5
- package/esm2015/src/app/shared/material/chips/testing/chips.test.js +3 -2
- package/esm2015/src/app/shared/validator/validators.js +16 -6
- package/fesm2015/sumaris-net.ngx-components.js +29 -15
- package/fesm2015/sumaris-net.ngx-components.js.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/chips/testing/chips.test.d.ts +1 -0
- package/src/theme/_ngx-components.scss +3 -2
- package/sumaris-net.ngx-components.metadata.json +1 -1
|
@@ -3477,8 +3477,10 @@
|
|
|
3477
3477
|
var errorCode = msg ? 'msg' : 'dateRange';
|
|
3478
3478
|
var error = msg ? { msg: msg } : { dateRange: true };
|
|
3479
3479
|
return function (control) {
|
|
3480
|
-
|
|
3481
|
-
|
|
3480
|
+
// Form group not created yet: skip
|
|
3481
|
+
if (!control.parent)
|
|
3482
|
+
return null;
|
|
3483
|
+
var startControl = control.parent.get(startDateFieldName);
|
|
3482
3484
|
if (!startControl) {
|
|
3483
3485
|
console.warn("Cannot find brother control '" + startDateFieldName + "' in the parent form");
|
|
3484
3486
|
return null;
|
|
@@ -3498,8 +3500,10 @@
|
|
|
3498
3500
|
var errorCode = msg ? 'msg' : 'dateRange';
|
|
3499
3501
|
var error = msg ? { msg: msg } : { dateRange: true };
|
|
3500
3502
|
return function (control) {
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
+
// Form group not created yet: skip
|
|
3504
|
+
if (!control.parent)
|
|
3505
|
+
return null;
|
|
3506
|
+
var endDateControl = control.parent.get(endDateFieldName);
|
|
3503
3507
|
if (!endDateControl) {
|
|
3504
3508
|
console.warn("Cannot find control '" + endDateFieldName + "' in the parent form");
|
|
3505
3509
|
return null;
|
|
@@ -3520,7 +3524,13 @@
|
|
|
3520
3524
|
// Skip if control already has some errors
|
|
3521
3525
|
if (control.errors)
|
|
3522
3526
|
return null;
|
|
3523
|
-
|
|
3527
|
+
// Skip if parent form group not created yet
|
|
3528
|
+
if (!control.parent)
|
|
3529
|
+
return null;
|
|
3530
|
+
// Form group not created yet
|
|
3531
|
+
if (!control.parent)
|
|
3532
|
+
return null;
|
|
3533
|
+
var errors = control.parent.errors;
|
|
3524
3534
|
// No errors, or copy all errors
|
|
3525
3535
|
if (!errors || isEmptyArray(errorNames))
|
|
3526
3536
|
return errors;
|
|
@@ -3725,13 +3735,13 @@
|
|
|
3725
3735
|
*/
|
|
3726
3736
|
SharedFormArrayValidators.uniqueEntity = function (controlName) {
|
|
3727
3737
|
return function (array) {
|
|
3728
|
-
var e_1,
|
|
3738
|
+
var e_1, _a;
|
|
3729
3739
|
var controls = [];
|
|
3730
3740
|
if (array.length) {
|
|
3731
3741
|
try {
|
|
3732
3742
|
// gather controls in array with valid entity
|
|
3733
|
-
for (var
|
|
3734
|
-
var control =
|
|
3743
|
+
for (var _b = __values(array.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
3744
|
+
var control = _c.value;
|
|
3735
3745
|
var fromGroup = control;
|
|
3736
3746
|
if (fromGroup.controls[controlName]) {
|
|
3737
3747
|
var value = fromGroup.controls[controlName].value;
|
|
@@ -3743,7 +3753,7 @@
|
|
|
3743
3753
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3744
3754
|
finally {
|
|
3745
3755
|
try {
|
|
3746
|
-
if (
|
|
3756
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
3747
3757
|
}
|
|
3748
3758
|
finally { if (e_1) throw e_1.error; }
|
|
3749
3759
|
}
|
|
@@ -3788,12 +3798,12 @@
|
|
|
3788
3798
|
*/
|
|
3789
3799
|
SharedFormArrayValidators.validSumMaxValue = function (controlName, max) {
|
|
3790
3800
|
return function (array) {
|
|
3791
|
-
var e_2,
|
|
3801
|
+
var e_2, _a;
|
|
3792
3802
|
var controls = [];
|
|
3793
3803
|
if (array.length) {
|
|
3794
3804
|
try {
|
|
3795
|
-
for (var
|
|
3796
|
-
var control =
|
|
3805
|
+
for (var _b = __values(array.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
3806
|
+
var control = _c.value;
|
|
3797
3807
|
var fromGroup = control;
|
|
3798
3808
|
if (fromGroup.controls[controlName] && isNotNilOrNaN(fromGroup.controls[controlName].value)) {
|
|
3799
3809
|
controls.push(fromGroup.controls[controlName]);
|
|
@@ -3803,7 +3813,7 @@
|
|
|
3803
3813
|
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
3804
3814
|
finally {
|
|
3805
3815
|
try {
|
|
3806
|
-
if (
|
|
3816
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
3807
3817
|
}
|
|
3808
3818
|
finally { if (e_2) throw e_2.error; }
|
|
3809
3819
|
}
|
|
@@ -9039,15 +9049,14 @@
|
|
|
9039
9049
|
{ type: i0.Component, args: [{
|
|
9040
9050
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
9041
9051
|
selector: 'mat-chips-field',
|
|
9042
|
-
template: "<ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col class=\"ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel\"\n [appearance]=\"appearance\"\n class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <mat-label>{{placeholder}}</mat-label>\n <mat-chip-list #chipList\n (focus)=\"filterChipsFocusEvent($event)\" >\n <mat-chip\n *ngFor=\"let item of value\"\n [selectable]=\"false\"\n [removable]=\"!disabled\"\n (removed)=\"remove(item)\"\n [color]=\"chipColor\"\n >\n {{displayWith(item)}}\n <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n </mat-chip>\n\n <input #matInputText type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"matAutocompletePosition\"\n [formControl]=\"inputControl\"\n [appAutofocus]=\"autofocus\"\n [tabindex]=\"_tabindex\"\n [readonly]=\"disabled\"\n [hidden]=\"disabled\"\n [required]=\"required\"\n (click)=\"clicked.emit($event)\"\n (focus)=\"filterInputTextFocusEvent($event)\"\n (blur)=\"filterInputTextBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n [matChipInputFor]=\"chipList\"\n >\n </mat-chip-list>\n\n <!-- autocomplete -->\n <mat-autocomplete #autocomplete=\"matAutocomplete\"\n (optionSelected)=\"add($event)\"\n autoActiveFirstOption\n [displayWith]=\"displayWith\"\n [class]=\"classList\"\n [panelWidth]=\"panelWidth\">\n <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n </ion-row>\n\n <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n <!-- No item option -->\n <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n <ion-label>{{noResultMessage | translate}}</ion-label>\n </mat-option>\n\n <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n <ion-row [classList]=\"item.classList\">\n <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n [size]=\"displayColumnSizes[i]\">\n <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n </ion-col>\n </ion-row>\n </mat-option>\n\n <!-- More item -->\n <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n </ng-container>\n\n <!-- footer -->\n <ion-row *ngIf=\"itemCount as count\"\n class=\"mat-autocomplete-footer ion-no-padding\">\n <ion-col>\n <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n </ion-col>\n </ion-row>\n\n <!-- Loading spinner -->\n <ng-template #loadingTemplate>\n <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n </ng-template>\n\n <!-- Need more characters -->\n <ng-template #waitMoreCharacterTemplate>\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n </ion-label>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <ng-content select=\"[matError]\"></ng-content>\n\n </mat-form-field>\n\n </ion-col>\n <ion-col size=\"auto\" class=\"ion-align-self-center\">\n <ng-content select=\"[matAfter]\"></ng-content>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n <button mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"dropButtonClick.emit($event)\"\n [hidden]=\"disabled\">\n <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n </button>\n <button mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clearValue($event)\"\n [hidden]=\"disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
|
|
9052
|
+
template: "<ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col class=\"ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel\"\n [appearance]=\"appearance\"\n class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <mat-label>{{placeholder}}</mat-label>\n <mat-chip-list #chipList\n (focus)=\"filterChipsFocusEvent($event)\" >\n <mat-chip class=\"ion-no-margin\"\n *ngFor=\"let item of value\"\n [selectable]=\"false\"\n [removable]=\"!disabled\"\n (removed)=\"remove(item)\"\n [color]=\"chipColor\"\n >\n {{displayWith(item)}}\n <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n </mat-chip>\n\n <input #matInputText type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"matAutocompletePosition\"\n [formControl]=\"inputControl\"\n [appAutofocus]=\"autofocus\"\n [tabindex]=\"_tabindex\"\n [readonly]=\"disabled\"\n [hidden]=\"disabled\"\n [required]=\"required\"\n (click)=\"clicked.emit($event)\"\n (focus)=\"filterInputTextFocusEvent($event)\"\n (blur)=\"filterInputTextBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n [matChipInputFor]=\"chipList\"\n >\n </mat-chip-list>\n\n <!-- autocomplete -->\n <mat-autocomplete #autocomplete=\"matAutocomplete\"\n (optionSelected)=\"add($event)\"\n autoActiveFirstOption\n [displayWith]=\"displayWith\"\n [class]=\"classList\"\n [panelWidth]=\"panelWidth\">\n <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n </ion-row>\n\n <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n <!-- No item option -->\n <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n <ion-label>{{noResultMessage | translate}}</ion-label>\n </mat-option>\n\n <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n <ion-row [classList]=\"item.classList\">\n <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n [size]=\"displayColumnSizes[i]\">\n <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n </ion-col>\n </ion-row>\n </mat-option>\n\n <!-- More item -->\n <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n </ng-container>\n\n <!-- footer -->\n <ion-row *ngIf=\"itemCount as count\"\n class=\"mat-autocomplete-footer ion-no-padding\">\n <ion-col>\n <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n </ion-col>\n </ion-row>\n\n <!-- Loading spinner -->\n <ng-template #loadingTemplate>\n <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n </ng-template>\n\n <!-- Need more characters -->\n <ng-template #waitMoreCharacterTemplate>\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n </ion-label>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n\n <div matSuffix class=\"mat-form-field-suffix-bottom\">\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <ng-content select=\"[matError]\"></ng-content>\n\n </mat-form-field>\n\n </ion-col>\n <ion-col size=\"auto\" class=\"ion-align-self-center\">\n <ng-content select=\"[matAfter]\"></ng-content>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n <button mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"dropButtonClick.emit($event)\"\n [hidden]=\"disabled\">\n <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n </button>\n <button mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clearValue($event)\"\n [hidden]=\"disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
|
|
9043
9053
|
providers: [{
|
|
9044
9054
|
provide: i1.NG_VALUE_ACCESSOR,
|
|
9045
9055
|
multi: true,
|
|
9046
9056
|
useExisting: i0.forwardRef(function () { return MatChipsField; })
|
|
9047
9057
|
}],
|
|
9048
|
-
encapsulation: i0.ViewEncapsulation.None,
|
|
9049
9058
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
9050
|
-
styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.mat-
|
|
9059
|
+
styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-standard-chip.mat-chip-with-trailing-icon{padding:0 7px 0 12px}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.mat-chip.mat-standard-chip{margin:1px 0 0 2px!important;min-height:calc(32px - .5em - 1px)}.mat-chip.mat-standard-chip.mat-chip-with-trailing-icon{padding:0 7px 0 12px}.mat-chip.mat-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-chip.mat-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-chip.mat-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-chip.mat-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-chip.mat-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}.mat-form-field-appearance-legacy .mat-standard-chip{min-height:calc(32px - .4375em - 1px)}"]
|
|
9051
9060
|
},] }
|
|
9052
9061
|
];
|
|
9053
9062
|
MatChipsField.ctorParameters = function () { return [
|
|
@@ -24300,11 +24309,11 @@
|
|
|
24300
24309
|
.pipe(operators.distinctUntilChanged())
|
|
24301
24310
|
.subscribe(function (value) { return value ? _this.open() : _this.close(); });
|
|
24302
24311
|
// Update component when refresh is need (=login events or config changed)
|
|
24303
|
-
this._subscription.add(rxjs.merge(this.accountService.onLogin, this.accountService.onLogout
|
|
24304
|
-
.pipe(operators.tap(function (config) { return _this._config = config; })))
|
|
24312
|
+
this._subscription.add(rxjs.merge(rxjs.merge(this.accountService.onLogin, this.accountService.onLogout)
|
|
24305
24313
|
.pipe(
|
|
24306
24314
|
// Wait account service ready (can be restarted)
|
|
24307
|
-
operators.mergeMap(function () { return _this.accountService.ready(); }), operators.map(function () { return _this.accountService.isLogin(); }), operators.distinctUntilChanged())
|
|
24315
|
+
operators.mergeMap(function () { return _this.accountService.ready(); }), operators.map(function () { return _this.accountService.isLogin(); }), operators.distinctUntilChanged()), this.configService.config
|
|
24316
|
+
.pipe(operators.tap(function (config) { return _this._config = config; }), operators.mergeMap(function () { return _this.accountService.ready(); }), operators.map(function () { return _this.accountService.isLogin(); })))
|
|
24308
24317
|
.subscribe(function (login) {
|
|
24309
24318
|
if (login) {
|
|
24310
24319
|
_this.onLogin(_this.accountService.account);
|
|
@@ -24324,7 +24333,7 @@
|
|
|
24324
24333
|
return __generator(this, function (_a) {
|
|
24325
24334
|
switch (_a.label) {
|
|
24326
24335
|
case 0:
|
|
24327
|
-
console.info('[menu] Update
|
|
24336
|
+
console.info('[menu] Update (login)');
|
|
24328
24337
|
this.accountAvatar = account.avatar;
|
|
24329
24338
|
this.accountName = account.displayName;
|
|
24330
24339
|
this.accountEmail = account.email;
|
|
@@ -24346,8 +24355,12 @@
|
|
|
24346
24355
|
return __generator(this, function (_a) {
|
|
24347
24356
|
switch (_a.label) {
|
|
24348
24357
|
case 0:
|
|
24349
|
-
if (!skipRedirect)
|
|
24350
|
-
console.debug('[menu]
|
|
24358
|
+
if (!skipRedirect) {
|
|
24359
|
+
console.debug('[menu] Logout');
|
|
24360
|
+
}
|
|
24361
|
+
else {
|
|
24362
|
+
console.debug('[menu] Update (logout)');
|
|
24363
|
+
}
|
|
24351
24364
|
this.isLogin = false;
|
|
24352
24365
|
this.accountAvatar = null;
|
|
24353
24366
|
this.accountEmail = null;
|
|
@@ -31343,6 +31356,7 @@
|
|
|
31343
31356
|
this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
|
|
31344
31357
|
this._$items = new rxjs.BehaviorSubject(undefined);
|
|
31345
31358
|
this.autocompleteFields = new MatAutocompleteConfigHolder();
|
|
31359
|
+
this.appearance = 'legacy';
|
|
31346
31360
|
this.form = formBuilder.group({
|
|
31347
31361
|
entity: [null, SharedValidators.entity],
|
|
31348
31362
|
entityInitial: [null, SharedValidators.entity],
|
|
@@ -31452,7 +31466,7 @@
|
|
|
31452
31466
|
ChipsTestPage.decorators = [
|
|
31453
31467
|
{ type: i0.Component, args: [{
|
|
31454
31468
|
selector: 'app-chips-test',
|
|
31455
|
-
template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Chips field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <ion-grid>\n\n <ion-row>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">\n Suggest() function\n </ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <pre><small>suggestFn: (searchText, filter) => any[]</small></pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-chips-field formControlName=\"entity\"\n
|
|
31469
|
+
template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Chips field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <ion-grid>\n\n <ion-row>\n\n <ion-col size=\"12\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">\n Suggest() function\n </ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <pre><small>suggestFn: (searchText, filter) => any[]</small></pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n <mat-chips-field formControlName=\"entity\"\n placeholder=\"A chip field\" [appearance]=\"appearance\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [logPrefix]=\"'[mat-chips-empty] '\"\n chipColor=\"accent\"\n [debug]=\"false\"\n ></mat-chips-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field [appearance]=\"appearance\">\n <mat-label>Another field</mat-label>\n <input matInput type=\"text\">\n </mat-form-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n {{stringify(form.controls.entity.value)}}\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Suggest() function with initial value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <pre><small>suggestFn: (searchText, filter) => any[]</small></pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-chips-field formControlName=\"entityInitial\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [logPrefix]=\"'[mat-chips-initialized] '\"\n chipColor=\"primary\"\n [debug]=\"true\"\n ></mat-chips-field>\n {{stringify(form.controls.entityInitial.value)}}\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disabled control\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-chips-field formControlName=\"disableEntity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [equals]=\"equals\"\n [logPrefix]=\"'[mat-chips-disabled] '\"\n chipColor=\"warning\"\n [debug]=\"true\"\n ></mat-chips-field>\n {{stringify(form.controls.disableEntity.value)}}\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly control\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-chips-field formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [equals]=\"equals\"\n [logPrefix]=\"'[mat-chips-readonly] '\"\n [readonly]=\"true\"\n ></mat-chips-field>\n {{stringify(form.controls.entity.value)}}\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </form>\n\n</ion-content>\n"
|
|
31456
31470
|
},] }
|
|
31457
31471
|
];
|
|
31458
31472
|
ChipsTestPage.ctorParameters = function () { return [
|