@sumaris-net/ngx-components 0.17.9 → 0.17.13
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/ngx-sumaris-components.umd.js +22 -6
- package/bundles/ngx-sumaris-components.umd.js.map +1 -1
- package/bundles/ngx-sumaris-components.umd.min.js +1 -1
- package/bundles/ngx-sumaris-components.umd.min.js.map +1 -1
- package/esm2015/src/app/core/form/editor.class.js +3 -3
- package/esm2015/src/app/shared/material/boolean/material.boolean.js +21 -5
- package/esm2015/src/app/shared/material/swipe/material.swipe.js +2 -2
- package/fesm2015/ngx-sumaris-components.js +22 -6
- package/fesm2015/ngx-sumaris-components.js.map +1 -1
- package/ngx-sumaris-components.metadata.json +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/boolean/material.boolean.d.ts +7 -0
|
@@ -5283,6 +5283,11 @@
|
|
|
5283
5283
|
this.readonly = false;
|
|
5284
5284
|
this.required = false;
|
|
5285
5285
|
this.compact = false;
|
|
5286
|
+
this.yesLabel = 'COMMON.YES';
|
|
5287
|
+
this.noLabel = 'COMMON.NO';
|
|
5288
|
+
this.showButtonIcons = true;
|
|
5289
|
+
this.yesIcon = 'checkmark';
|
|
5290
|
+
this.noIcon = 'close';
|
|
5286
5291
|
this.onPressEnter = new i0.EventEmitter();
|
|
5287
5292
|
this.onBlur = new i0.EventEmitter();
|
|
5288
5293
|
}
|
|
@@ -5318,6 +5323,9 @@
|
|
|
5318
5323
|
if (!this.formControl)
|
|
5319
5324
|
throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-boolean-field>.');
|
|
5320
5325
|
this.style = this.style || (this.compact ? 'checkbox' : 'radio');
|
|
5326
|
+
if (this.style === 'button') {
|
|
5327
|
+
this.buttonsColCount = toNumber(this.buttonsColCount, 2);
|
|
5328
|
+
}
|
|
5321
5329
|
// Force show radio if label always on top
|
|
5322
5330
|
this.showRadio = this.showRadio || this.floatLabel === 'always';
|
|
5323
5331
|
this.updateTabIndex();
|
|
@@ -5346,9 +5354,10 @@
|
|
|
5346
5354
|
}
|
|
5347
5355
|
}
|
|
5348
5356
|
this._writing = false;
|
|
5349
|
-
if (this.style === 'button'
|
|
5357
|
+
if (this.style === 'button') {
|
|
5350
5358
|
if (value !== this.formControl.value) {
|
|
5351
5359
|
this.formControl.patchValue(value, { emitEvent: false });
|
|
5360
|
+
this._onChangeCallback(value);
|
|
5352
5361
|
}
|
|
5353
5362
|
if (event)
|
|
5354
5363
|
this.onPressEnter.emit(event);
|
|
@@ -5450,12 +5459,12 @@
|
|
|
5450
5459
|
MatBooleanField.decorators = [
|
|
5451
5460
|
{ type: i0.Component, args: [{
|
|
5452
5461
|
selector: 'mat-boolean-field',
|
|
5453
|
-
template: "<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel\"\n class=\"mat-form-field-disabled\">\n <input matInput hidden type=\"text\" readonly\n [placeholder]=\"placeholder\"\n [formControl]=\"formControl\">\n <ion-text>{{(formControl.value
|
|
5462
|
+
template: "<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel\"\n class=\"mat-form-field-disabled {{classList}}\">\n <input matInput hidden type=\"text\" readonly\n [placeholder]=\"placeholder\"\n [formControl]=\"formControl\">\n <ion-text>{{(formControl.value == null && 'COMMON.EMPTY_OPTION' || (formControl.value === true && yesLabel) || noLabel) | translate }}</ion-text>\n</mat-form-field>\n\n<ng-template #writable>\n <ng-container [ngSwitch]=\"style\">\n\n <!-- Radio -->\n <mat-form-field *ngSwitchCase=\"'radio'\"\n [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n {{placeholder}}\n <span [hidden]=\"showRadio\">({{yesLabel|translate}}/{{'COMMON.NO'|translate}})</span>\n </mat-label>\n\n <input matInput #fakeInput type=\"text\" readonly=\"true\"\n [formControl]=\"formControl\"\n (focus)=\"_onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\">\n\n <!-- radio button -->\n <mat-radio-group [hidden]=\"!showRadio\"\n [formControl]=\"formControl\"\n (change)=\"onRadioValueChanged($event)\">\n <mat-radio-button #yesButton [value]=\"true\">\n <span>{{yesLabel|translate}}</span>\n </mat-radio-button> \n <mat-radio-button #noButton [value]=\"false\">\n <span>{{noLabel|translate}}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n <div matSuffix #injectMatSuffix></div>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-form-field>\n\n <!-- Checkbox -->\n <mat-form-field *ngSwitchCase=\"'checkbox'\"\n [floatLabel]=\"floatLabel\"\n class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n <mat-label *ngIf=\"placeholder && !showRadio\">\n {{placeholder}}\n </mat-label>\n\n <input matInput #matInput\n [formControl]=\"formControl\"\n (focus)=\"_onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\">\n\n <ion-label> </ion-label>\n\n <!-- checkbox, when compact -->\n <mat-checkbox #checkboxButton\n [formControl]=\"formControl\"\n (change)=\"onCheckboxValueChanged($event)\"\n [indeterminate]=\"value===undefined\"\n [hidden]=\"!showRadio\"\n [tabindex]=\"tabindex\">\n </mat-checkbox>\n\n <div matSuffix #injectMatSuffix></div>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-form-field>\n\n <!-- Buttons -->\n <mat-form-field *ngSwitchCase=\"'button'\"\n [floatLabel]=\"floatLabel === 'never' ? 'never' : 'always'\"\n class=\"mat-boolean-field mat-boolean-field-button {{classList}}\">\n <input matInput type=\"text\" hidden\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n [required]=\"required\">\n <div class=\"mat-form-field-buttons\"\n [style.--buttons-col-count]=\"buttonsColCount\"\n *ngIf=\"!formControl.disabled; else disabledLabel\">\n <!-- yes -->\n <ion-button class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value == null ? 'tertiary' : (_value === true) ? 'accent' : 'light'\">\n <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{yesLabel|translate}}\n </ion-button>\n\n <!-- No button -->\n <ion-button class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex !== undefined ? (_tabindex + 1) : undefined\"\n (click)=\"writeValue(false, $event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value == null ? 'tertiary' : (_value === false) ? 'accent' : 'light'\">\n <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{noLabel|translate}}\n </ion-button>\n </div>\n <ng-template #disabledLabel>\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n </ng-template>\n\n <div matSuffix #injectMatSuffix></div>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-form-field>\n </ng-container>\n\n <div class=\"cdk-visually-hidden\">\n <div #suffix><ng-content select=\"[matSuffix]\"></ng-content></div>\n </div>\n\n</ng-template>\n\n\n",
|
|
5454
5463
|
providers: [
|
|
5455
5464
|
DEFAULT_VALUE_ACCESSOR$1
|
|
5456
5465
|
],
|
|
5457
5466
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
5458
|
-
styles: [":host{width:100%}"]
|
|
5467
|
+
styles: [":host{width:100%}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-form-field .mat-form-field-buttons .mat-form-field-button{--flex-basis:calc(100% / var(--buttons-col-count, 2));flex:0 1 var(--flex-basis);max-width:calc(min(var(--flex-basis), 150px));white-space:normal;margin:4px 0;height:40px}"]
|
|
5459
5468
|
},] }
|
|
5460
5469
|
];
|
|
5461
5470
|
MatBooleanField.ctorParameters = function () { return [
|
|
@@ -5474,6 +5483,13 @@
|
|
|
5474
5483
|
required: [{ type: i0.Input }],
|
|
5475
5484
|
compact: [{ type: i0.Input }],
|
|
5476
5485
|
style: [{ type: i0.Input }],
|
|
5486
|
+
buttonsColCount: [{ type: i0.Input }],
|
|
5487
|
+
classList: [{ type: i0.Input, args: ['class',] }],
|
|
5488
|
+
yesLabel: [{ type: i0.Input }],
|
|
5489
|
+
noLabel: [{ type: i0.Input }],
|
|
5490
|
+
showButtonIcons: [{ type: i0.Input }],
|
|
5491
|
+
yesIcon: [{ type: i0.Input }],
|
|
5492
|
+
noIcon: [{ type: i0.Input }],
|
|
5477
5493
|
onPressEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
|
|
5478
5494
|
onBlur: [{ type: i0.Output }],
|
|
5479
5495
|
tabindex: [{ type: i0.Input }],
|
|
@@ -6427,7 +6443,7 @@
|
|
|
6427
6443
|
MatSwipeField.decorators = [
|
|
6428
6444
|
{ type: i0.Component, args: [{
|
|
6429
6445
|
selector: 'mat-swipe-field',
|
|
6430
|
-
template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n [class.mat-form-field-disabled]=\"disabled\">\n <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n {{placeholder}}\n </mat-label>\n <input matInput #fakeInput type=\"text\"\n [formControl]=\"formControl\"\n [readonly]=\"true\"\n (focus)=\"_onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showSlides\"\n [tabindex]=\"tabindex\">\n\n <div class=\"slides-container\" [class.hidden]=\"!showSlides\">\n <ion-slides #slides\n [options]=\"slidesOptions\"\n (ionSlidesDidLoad)=\"slidesLoaded()\"\n (ionSlideReachStart)=\"reachStart(true)\"\n (ionSlideReachEnd)=\"reachEnd(true)\"\n (ionSlideNextEnd)=\"reachStart(false)\"\n (ionSlidePrevEnd)=\"reachEnd(false)\"\n (ionSlideDidChange)=\"slideChanged()\"\n >\n <ion-slide *ngFor=\"let item of $items | async\">\n <ion-label>{{ displayWith(item) }}</ion-label>\n </ion-slide>\n\n </ion-slides>\n </div>\n\n <button #prevButton\n mat-icon-button\n type=\"button\"\n class=\"button-prev\"\n [hidden]=\"!showSlides\"\n [disabled]=\"previousDisabled\"\n (click)=\"previous()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button #nextButton\n mat-icon-button\n type=\"button\"\n class=\"button-next\"\n [hidden]=\"!showSlides\"\n [disabled]=\"nextDisabled\"\n (click)=\"next()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button matSuffix 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 <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n",
|
|
6446
|
+
template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n [class]=\"classList\"\n [class.mat-form-field-disabled]=\"disabled\">\n <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n {{placeholder}}\n </mat-label>\n <input matInput #fakeInput type=\"text\"\n [formControl]=\"formControl\"\n [readonly]=\"true\"\n (focus)=\"_onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showSlides\"\n [tabindex]=\"tabindex\">\n\n <div class=\"slides-container\" [class.hidden]=\"!showSlides\">\n <ion-slides #slides\n [options]=\"slidesOptions\"\n (ionSlidesDidLoad)=\"slidesLoaded()\"\n (ionSlideReachStart)=\"reachStart(true)\"\n (ionSlideReachEnd)=\"reachEnd(true)\"\n (ionSlideNextEnd)=\"reachStart(false)\"\n (ionSlidePrevEnd)=\"reachEnd(false)\"\n (ionSlideDidChange)=\"slideChanged()\"\n >\n <ion-slide *ngFor=\"let item of $items | async\">\n <ion-label>{{ displayWith(item) }}</ion-label>\n </ion-slide>\n\n </ion-slides>\n </div>\n\n <button #prevButton\n mat-icon-button\n type=\"button\"\n class=\"button-prev\"\n [hidden]=\"!showSlides\"\n [disabled]=\"previousDisabled\"\n (click)=\"previous()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button #nextButton\n mat-icon-button\n type=\"button\"\n class=\"button-next\"\n [hidden]=\"!showSlides\"\n [disabled]=\"nextDisabled\"\n (click)=\"next()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button matSuffix 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 <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n",
|
|
6431
6447
|
providers: [DEFAULT_VALUE_ACCESSOR],
|
|
6432
6448
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
6433
6449
|
styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-next,.button-prev{position:absolute;top:calc(50% - 20px);z-index:10}.button-prev{left:0;right:auto}.button-next{left:auto;right:0}"]
|
|
@@ -24517,10 +24533,10 @@
|
|
|
24517
24533
|
this.toolbar = null;
|
|
24518
24534
|
this.formButtonsBar = null;
|
|
24519
24535
|
this.selectedTabIndexChange = new i0.EventEmitter();
|
|
24520
|
-
options = Object.assign({ tabCount: 1, enableSwipe: true }, options);
|
|
24536
|
+
options = Object.assign({ tabCount: 1, enableSwipe: true, tabGroupAnimationDuration: '200ms' }, options);
|
|
24521
24537
|
this.tabCount = options.tabCount;
|
|
24522
|
-
this.tabGroupAnimationDuration = options.tabGroupAnimationDuration;
|
|
24523
24538
|
this.enableSwipe = options.enableSwipe;
|
|
24539
|
+
this.tabGroupAnimationDuration = options.tabGroupAnimationDuration;
|
|
24524
24540
|
}
|
|
24525
24541
|
Object.defineProperty(AppTabEditor.prototype, "tables", {
|
|
24526
24542
|
get: function () {
|