@sumaris-net/ngx-components 1.6.14 → 1.6.18
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 +135 -38
- package/bundles/sumaris-net.ngx-components.umd.js.map +1 -1
- package/bundles/sumaris-net.ngx-components.umd.min.js +2 -2
- package/bundles/sumaris-net.ngx-components.umd.min.js.map +1 -1
- package/esm2015/src/app/shared/material/badge/badge-icon.directive.js +93 -20
- package/esm2015/src/app/shared/material/badge/badge-icon.test.js +9 -2
- package/esm2015/src/app/shared/material/latlong/material.latlong.js +20 -19
- package/fesm2015/sumaris-net.ngx-components.js +116 -38
- package/fesm2015/sumaris-net.ngx-components.js.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/badge/badge-icon.directive.d.ts +20 -7
- package/src/app/shared/material/badge/badge-icon.test.d.ts +7 -0
- package/sumaris-net.ngx-components.metadata.json +1 -1
|
@@ -4720,24 +4720,25 @@
|
|
|
4720
4720
|
this.pattern = 'DDMM';
|
|
4721
4721
|
this.mask = MASKS[this.type][this.pattern];
|
|
4722
4722
|
}
|
|
4723
|
-
if (this.maxDecimals) {
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4723
|
+
if (isNil(this.maxDecimals)) {
|
|
4724
|
+
this.maxDecimals = DEFAULT_MAX_DECIMALS;
|
|
4725
|
+
}
|
|
4726
|
+
// Remove max decimals in the DDMMSS format
|
|
4727
|
+
else if (this.pattern === 'DD') {
|
|
4728
|
+
console.warn("Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.");
|
|
4729
|
+
this.maxDecimals = 7;
|
|
4730
|
+
}
|
|
4731
|
+
else if (this.pattern === 'DDMMSS') {
|
|
4732
|
+
console.warn("Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.");
|
|
4733
|
+
this.maxDecimals = 0;
|
|
4734
|
+
}
|
|
4735
|
+
else if (this.maxDecimals < 0) {
|
|
4736
|
+
console.error('Invalid attribute \'maxDecimals\'. Must a positive value.');
|
|
4737
|
+
this.maxDecimals = DEFAULT_MAX_DECIMALS;
|
|
4738
|
+
}
|
|
4739
|
+
else if (this.maxDecimals !== DEFAULT_MAX_DECIMALS) {
|
|
4740
|
+
console.warn("Invalid attribute 'maxDecimals' - Expected value: " + DEFAULT_MAX_DECIMALS + ". Other value not implemented.");
|
|
4741
|
+
this.maxDecimals = DEFAULT_MAX_DECIMALS;
|
|
4741
4742
|
}
|
|
4742
4743
|
this.showSignControl = this.pattern !== 'DD';
|
|
4743
4744
|
this.formatFn = this.type === 'latitude' ? formatLatitude : formatLongitude;
|
|
@@ -8369,14 +8370,95 @@
|
|
|
8369
8370
|
var MatBadgeIconDirective = /** @class */ (function () {
|
|
8370
8371
|
function MatBadgeIconDirective(el) {
|
|
8371
8372
|
this.el = el;
|
|
8373
|
+
this._subscription = null;
|
|
8374
|
+
this._$update = new rxjs.Subject();
|
|
8372
8375
|
}
|
|
8376
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "size", {
|
|
8377
|
+
get: function () {
|
|
8378
|
+
return this._size;
|
|
8379
|
+
},
|
|
8380
|
+
set: function (value) {
|
|
8381
|
+
if (this._size !== value) {
|
|
8382
|
+
this._size = value;
|
|
8383
|
+
this.updateView();
|
|
8384
|
+
}
|
|
8385
|
+
},
|
|
8386
|
+
enumerable: false,
|
|
8387
|
+
configurable: true
|
|
8388
|
+
});
|
|
8389
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "color", {
|
|
8390
|
+
get: function () {
|
|
8391
|
+
return this._color;
|
|
8392
|
+
},
|
|
8393
|
+
set: function (value) {
|
|
8394
|
+
if (this._color !== value) {
|
|
8395
|
+
this._color = value;
|
|
8396
|
+
this.updateView();
|
|
8397
|
+
}
|
|
8398
|
+
},
|
|
8399
|
+
enumerable: false,
|
|
8400
|
+
configurable: true
|
|
8401
|
+
});
|
|
8402
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "fill", {
|
|
8403
|
+
get: function () {
|
|
8404
|
+
return this._fill;
|
|
8405
|
+
},
|
|
8406
|
+
set: function (value) {
|
|
8407
|
+
if (this._fill !== value) {
|
|
8408
|
+
this._fill = value;
|
|
8409
|
+
this.updateView();
|
|
8410
|
+
}
|
|
8411
|
+
},
|
|
8412
|
+
enumerable: false,
|
|
8413
|
+
configurable: true
|
|
8414
|
+
});
|
|
8415
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "matIcon", {
|
|
8416
|
+
set: function (icon) {
|
|
8417
|
+
if (this._matIcon !== icon) {
|
|
8418
|
+
this._matIcon = icon;
|
|
8419
|
+
this.updateView();
|
|
8420
|
+
}
|
|
8421
|
+
},
|
|
8422
|
+
enumerable: false,
|
|
8423
|
+
configurable: true
|
|
8424
|
+
});
|
|
8425
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "ionIcon", {
|
|
8426
|
+
set: function (icon) {
|
|
8427
|
+
if (this._ionIcon !== icon) {
|
|
8428
|
+
this._ionIcon = icon;
|
|
8429
|
+
this.updateView();
|
|
8430
|
+
}
|
|
8431
|
+
},
|
|
8432
|
+
enumerable: false,
|
|
8433
|
+
configurable: true
|
|
8434
|
+
});
|
|
8373
8435
|
MatBadgeIconDirective.prototype.ngOnInit = function () {
|
|
8374
|
-
|
|
8375
|
-
|
|
8376
|
-
|
|
8377
|
-
|
|
8436
|
+
var _this = this;
|
|
8437
|
+
// Default value
|
|
8438
|
+
this._size = this._size || 'medium';
|
|
8439
|
+
this._color = this._color || 'primary';
|
|
8440
|
+
if (this._color === 'warn')
|
|
8441
|
+
this._color = 'warning';
|
|
8442
|
+
this.updateView(true);
|
|
8443
|
+
this._subscription = this._$update
|
|
8444
|
+
.pipe(operators.debounceTime(100))
|
|
8445
|
+
.subscribe(function () { return _this.updateView(true); });
|
|
8446
|
+
};
|
|
8447
|
+
MatBadgeIconDirective.prototype.ngOnDestroy = function () {
|
|
8448
|
+
var _a;
|
|
8449
|
+
(_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
8450
|
+
};
|
|
8451
|
+
MatBadgeIconDirective.prototype.updateView = function (immediate) {
|
|
8452
|
+
// Async by default
|
|
8453
|
+
if (!immediate) {
|
|
8454
|
+
this._$update.next();
|
|
8455
|
+
return;
|
|
8456
|
+
}
|
|
8457
|
+
var badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
8458
|
+
if (!badge)
|
|
8459
|
+
return;
|
|
8378
8460
|
var fontSize;
|
|
8379
|
-
switch (this.
|
|
8461
|
+
switch (this._size) {
|
|
8380
8462
|
case 'large':
|
|
8381
8463
|
fontSize = '24px';
|
|
8382
8464
|
break;
|
|
@@ -8387,26 +8469,34 @@
|
|
|
8387
8469
|
fontSize = '16px';
|
|
8388
8470
|
break;
|
|
8389
8471
|
}
|
|
8390
|
-
var
|
|
8391
|
-
|
|
8392
|
-
|
|
8393
|
-
|
|
8472
|
+
var html = '';
|
|
8473
|
+
if (this._matIcon) {
|
|
8474
|
+
html = "<i class=\"material-icons\" style=\"font-size: " + fontSize + ";\">" + this._matIcon + "</i>";
|
|
8475
|
+
}
|
|
8476
|
+
else if (this._ionIcon) {
|
|
8477
|
+
html = "<ion-icon style=\"font-size: " + fontSize + "; pointer-events: none;\" name=\"" + this._ionIcon + "\"></ion-icon>";
|
|
8478
|
+
}
|
|
8479
|
+
if (this._html !== html) {
|
|
8480
|
+
this._html = html;
|
|
8481
|
+
badge.innerHTML = html;
|
|
8482
|
+
}
|
|
8483
|
+
// Update style
|
|
8394
8484
|
// fill: 'clear'
|
|
8395
|
-
if (this.
|
|
8396
|
-
badge.style.color = "var(--ion-color-" + this.
|
|
8485
|
+
if (this._fill === 'clear') {
|
|
8486
|
+
badge.style.color = "var(--ion-color-" + this._color + ")";
|
|
8397
8487
|
badge.style.background = 'transparent';
|
|
8398
8488
|
}
|
|
8399
8489
|
// fill: 'solid' (default value)
|
|
8400
8490
|
else {
|
|
8401
|
-
badge.style.background = "var(--ion-color-" + this.
|
|
8402
|
-
badge.style.color = "var(--ion-color-" + this.
|
|
8403
|
-
}
|
|
8404
|
-
if (this.matIcon) {
|
|
8405
|
-
badge.innerHTML = "<i class=\"material-icons\" style=\"font-size: " + fontSize + ";\">" + this.matIcon + "</i>";
|
|
8406
|
-
}
|
|
8407
|
-
else if (this.ionIcon) {
|
|
8408
|
-
badge.innerHTML = "<ion-icon style=\"font-size: " + fontSize + "; pointer-events: none;\" name=\"" + this.ionIcon + "\"></ion-icon>";
|
|
8491
|
+
badge.style.background = "var(--ion-color-" + this._color + ")";
|
|
8492
|
+
badge.style.color = "var(--ion-color-" + this._color + "-contrast)";
|
|
8409
8493
|
}
|
|
8494
|
+
if (badge.style.display !== 'inline-block')
|
|
8495
|
+
badge.style.display = 'inline-block';
|
|
8496
|
+
if (badge.style.alignItems !== 'center')
|
|
8497
|
+
badge.style.alignItems = 'center';
|
|
8498
|
+
if (badge.style.justifyContent !== 'center')
|
|
8499
|
+
badge.style.justifyContent = 'center';
|
|
8410
8500
|
};
|
|
8411
8501
|
return MatBadgeIconDirective;
|
|
8412
8502
|
}());
|
|
@@ -8424,6 +8514,9 @@
|
|
|
8424
8514
|
{ type: i0.ElementRef }
|
|
8425
8515
|
]; };
|
|
8426
8516
|
MatBadgeIconDirective.propDecorators = {
|
|
8517
|
+
size: [{ type: i0.Input, args: ['matBadgeSize',] }],
|
|
8518
|
+
color: [{ type: i0.Input, args: ['matBadgeColor',] }],
|
|
8519
|
+
fill: [{ type: i0.Input, args: ['matBadgeFill',] }],
|
|
8427
8520
|
matIcon: [{ type: i0.Input, args: ['matBadgeIcon',] }],
|
|
8428
8521
|
ionIcon: [{ type: i0.Input, args: ['ionBadgeIcon',] }]
|
|
8429
8522
|
};
|
|
@@ -19574,13 +19667,17 @@
|
|
|
19574
19667
|
|
|
19575
19668
|
var MatBadgeIconTestPage = /** @class */ (function () {
|
|
19576
19669
|
function MatBadgeIconTestPage() {
|
|
19670
|
+
this.$icon = new rxjs.BehaviorSubject('alert');
|
|
19671
|
+
this.$size = new rxjs.BehaviorSubject('small');
|
|
19672
|
+
this.$fill = new rxjs.BehaviorSubject('solid');
|
|
19673
|
+
this.$color = new rxjs.BehaviorSubject('danger');
|
|
19577
19674
|
}
|
|
19578
19675
|
return MatBadgeIconTestPage;
|
|
19579
19676
|
}());
|
|
19580
19677
|
MatBadgeIconTestPage.decorators = [
|
|
19581
19678
|
{ type: i0.Component, args: [{
|
|
19582
19679
|
selector: 'mat-badge-icon-test',
|
|
19583
|
-
template: "\n<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>matBadgeIcon directive</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- small badge -->\n <p>\n <ion-text color=\"tertiary\">\n <span matBadge matIcon=\"check\"\n matBadgeSize=\"small\"\n matBadgeColor=\"accent\"\n matBadgeOverlap=\"false\">Small badge</span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text matBadge matBadgeIcon=\"check\"\n matBadgeSize=\"medium\"\n matBadgeColor=\"tertiary\"\n matBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n matBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark\"\n matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark-circle\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n\n</ion-content>\n"
|
|
19680
|
+
template: "\n<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>matBadgeIcon directive</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- small badge -->\n <p>\n <ion-text color=\"tertiary\">\n <span matBadge matIcon=\"check\"\n matBadgeSize=\"small\"\n matBadgeColor=\"accent\"\n matBadgeOverlap=\"false\">Small badge</span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text matBadge matBadgeIcon=\"check\"\n matBadgeSize=\"medium\"\n matBadgeColor=\"tertiary\"\n matBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n matBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark\"\n matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark-circle\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n matBadge\n [ionBadgeIcon]=\"$icon|async\"\n [matBadgeColor]=\"$color|async\"\n [matBadgeFill]=\"$fill|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"false\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeColor\"\n [value]=\"$color.value\"\n (selectionChange)=\"this.$color.next($event.value)\">\n <mat-option [value]=\"'primary'\">primary</mat-option>\n <mat-option [value]=\"'secondary'\">secondary</mat-option>\n <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n <mat-option [value]=\"'danger'\">danger</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"ionBadgeIcon\"\n [value]=\"$icon.value\"\n (selectionChange)=\"this.$icon.next($event.value)\">\n <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n <mat-option [value]=\"'alert'\">alert</mat-option>\n <mat-option [value]=\"'flag'\">flag</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeSize\"\n [value]=\"$size.value\"\n (selectionChange)=\"this.$size.next($event.value)\">\n <mat-option [value]=\"'large'\">large</mat-option>\n <mat-option [value]=\"'medium'\">medium</mat-option>\n <mat-option [value]=\"'small'\">small</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeFill\"\n [value]=\"$fill.value\"\n (selectionChange)=\"this.$fill.next($event.value)\">\n <mat-option [value]=\"'clear'\">clear</mat-option>\n <mat-option [value]=\"'solid'\">solid</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n </ion-row>\n\n</ion-content>\n"
|
|
19584
19681
|
},] }
|
|
19585
19682
|
];
|
|
19586
19683
|
|