@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
|
@@ -4683,6 +4683,11 @@ class MatBooleanField {
|
|
|
4683
4683
|
this.readonly = false;
|
|
4684
4684
|
this.required = false;
|
|
4685
4685
|
this.compact = false;
|
|
4686
|
+
this.yesLabel = 'COMMON.YES';
|
|
4687
|
+
this.noLabel = 'COMMON.NO';
|
|
4688
|
+
this.showButtonIcons = true;
|
|
4689
|
+
this.yesIcon = 'checkmark';
|
|
4690
|
+
this.noIcon = 'close';
|
|
4686
4691
|
this.onPressEnter = new EventEmitter();
|
|
4687
4692
|
this.onBlur = new EventEmitter();
|
|
4688
4693
|
}
|
|
@@ -4709,6 +4714,9 @@ class MatBooleanField {
|
|
|
4709
4714
|
if (!this.formControl)
|
|
4710
4715
|
throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-boolean-field>.');
|
|
4711
4716
|
this.style = this.style || (this.compact ? 'checkbox' : 'radio');
|
|
4717
|
+
if (this.style === 'button') {
|
|
4718
|
+
this.buttonsColCount = toNumber(this.buttonsColCount, 2);
|
|
4719
|
+
}
|
|
4712
4720
|
// Force show radio if label always on top
|
|
4713
4721
|
this.showRadio = this.showRadio || this.floatLabel === 'always';
|
|
4714
4722
|
this.updateTabIndex();
|
|
@@ -4735,9 +4743,10 @@ class MatBooleanField {
|
|
|
4735
4743
|
}
|
|
4736
4744
|
}
|
|
4737
4745
|
this._writing = false;
|
|
4738
|
-
if (this.style === 'button'
|
|
4746
|
+
if (this.style === 'button') {
|
|
4739
4747
|
if (value !== this.formControl.value) {
|
|
4740
4748
|
this.formControl.patchValue(value, { emitEvent: false });
|
|
4749
|
+
this._onChangeCallback(value);
|
|
4741
4750
|
}
|
|
4742
4751
|
if (event)
|
|
4743
4752
|
this.onPressEnter.emit(event);
|
|
@@ -4837,12 +4846,12 @@ class MatBooleanField {
|
|
|
4837
4846
|
MatBooleanField.decorators = [
|
|
4838
4847
|
{ type: Component, args: [{
|
|
4839
4848
|
selector: 'mat-boolean-field',
|
|
4840
|
-
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
|
|
4849
|
+
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",
|
|
4841
4850
|
providers: [
|
|
4842
4851
|
DEFAULT_VALUE_ACCESSOR$1
|
|
4843
4852
|
],
|
|
4844
4853
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4845
|
-
styles: [":host{width:100%}"]
|
|
4854
|
+
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}"]
|
|
4846
4855
|
},] }
|
|
4847
4856
|
];
|
|
4848
4857
|
MatBooleanField.ctorParameters = () => [
|
|
@@ -4861,6 +4870,13 @@ MatBooleanField.propDecorators = {
|
|
|
4861
4870
|
required: [{ type: Input }],
|
|
4862
4871
|
compact: [{ type: Input }],
|
|
4863
4872
|
style: [{ type: Input }],
|
|
4873
|
+
buttonsColCount: [{ type: Input }],
|
|
4874
|
+
classList: [{ type: Input, args: ['class',] }],
|
|
4875
|
+
yesLabel: [{ type: Input }],
|
|
4876
|
+
noLabel: [{ type: Input }],
|
|
4877
|
+
showButtonIcons: [{ type: Input }],
|
|
4878
|
+
yesIcon: [{ type: Input }],
|
|
4879
|
+
noIcon: [{ type: Input }],
|
|
4864
4880
|
onPressEnter: [{ type: Output, args: ['keyup.enter',] }],
|
|
4865
4881
|
onBlur: [{ type: Output }],
|
|
4866
4882
|
tabindex: [{ type: Input }],
|
|
@@ -5706,7 +5722,7 @@ class MatSwipeField {
|
|
|
5706
5722
|
MatSwipeField.decorators = [
|
|
5707
5723
|
{ type: Component, args: [{
|
|
5708
5724
|
selector: 'mat-swipe-field',
|
|
5709
|
-
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",
|
|
5725
|
+
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",
|
|
5710
5726
|
providers: [DEFAULT_VALUE_ACCESSOR],
|
|
5711
5727
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5712
5728
|
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}"]
|
|
@@ -21254,10 +21270,10 @@ class AppTabEditor {
|
|
|
21254
21270
|
this.toolbar = null;
|
|
21255
21271
|
this.formButtonsBar = null;
|
|
21256
21272
|
this.selectedTabIndexChange = new EventEmitter();
|
|
21257
|
-
options = Object.assign({ tabCount: 1, enableSwipe: true }, options);
|
|
21273
|
+
options = Object.assign({ tabCount: 1, enableSwipe: true, tabGroupAnimationDuration: '200ms' }, options);
|
|
21258
21274
|
this.tabCount = options.tabCount;
|
|
21259
|
-
this.tabGroupAnimationDuration = options.tabGroupAnimationDuration;
|
|
21260
21275
|
this.enableSwipe = options.enableSwipe;
|
|
21276
|
+
this.tabGroupAnimationDuration = options.tabGroupAnimationDuration;
|
|
21261
21277
|
}
|
|
21262
21278
|
get tables() {
|
|
21263
21279
|
return this._children && this._children.filter(c => c instanceof AppTable);
|