@sumaris-net/ngx-components 1.6.15 → 1.6.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 +81 -24
- 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 +65 -19
- package/esm2015/src/app/shared/material/badge/badge-icon.test.js +6 -7
- package/fesm2015/sumaris-net.ngx-components.js +68 -24
- 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 +15 -5
- package/src/app/shared/material/badge/badge-icon.test.d.ts +6 -3
- package/sumaris-net.ngx-components.metadata.json +1 -1
|
@@ -8369,7 +8369,48 @@
|
|
|
8369
8369
|
var MatBadgeIconDirective = /** @class */ (function () {
|
|
8370
8370
|
function MatBadgeIconDirective(el) {
|
|
8371
8371
|
this.el = el;
|
|
8372
|
+
this._subscription = null;
|
|
8373
|
+
this._$update = new rxjs.Subject();
|
|
8372
8374
|
}
|
|
8375
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "size", {
|
|
8376
|
+
get: function () {
|
|
8377
|
+
return this._size;
|
|
8378
|
+
},
|
|
8379
|
+
set: function (value) {
|
|
8380
|
+
if (this._size !== value) {
|
|
8381
|
+
this._size = value;
|
|
8382
|
+
this.updateView();
|
|
8383
|
+
}
|
|
8384
|
+
},
|
|
8385
|
+
enumerable: false,
|
|
8386
|
+
configurable: true
|
|
8387
|
+
});
|
|
8388
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "color", {
|
|
8389
|
+
get: function () {
|
|
8390
|
+
return this._color;
|
|
8391
|
+
},
|
|
8392
|
+
set: function (value) {
|
|
8393
|
+
if (this._color !== value) {
|
|
8394
|
+
this._color = value;
|
|
8395
|
+
this.updateView();
|
|
8396
|
+
}
|
|
8397
|
+
},
|
|
8398
|
+
enumerable: false,
|
|
8399
|
+
configurable: true
|
|
8400
|
+
});
|
|
8401
|
+
Object.defineProperty(MatBadgeIconDirective.prototype, "fill", {
|
|
8402
|
+
get: function () {
|
|
8403
|
+
return this._fill;
|
|
8404
|
+
},
|
|
8405
|
+
set: function (value) {
|
|
8406
|
+
if (this._fill !== value) {
|
|
8407
|
+
this._fill = value;
|
|
8408
|
+
this.updateView();
|
|
8409
|
+
}
|
|
8410
|
+
},
|
|
8411
|
+
enumerable: false,
|
|
8412
|
+
configurable: true
|
|
8413
|
+
});
|
|
8373
8414
|
Object.defineProperty(MatBadgeIconDirective.prototype, "matIcon", {
|
|
8374
8415
|
set: function (icon) {
|
|
8375
8416
|
if (this._matIcon !== icon) {
|
|
@@ -8391,18 +8432,26 @@
|
|
|
8391
8432
|
configurable: true
|
|
8392
8433
|
});
|
|
8393
8434
|
MatBadgeIconDirective.prototype.ngOnInit = function () {
|
|
8435
|
+
var _this = this;
|
|
8436
|
+
this._size = this._size || 'medium';
|
|
8437
|
+
this._color = this._color || 'primary';
|
|
8438
|
+
if (this._color === 'warn')
|
|
8439
|
+
this._color = 'warning';
|
|
8394
8440
|
this.updateView();
|
|
8441
|
+
this._subscription = this._$update
|
|
8442
|
+
//.pipe(debounceTime(10000))
|
|
8443
|
+
.subscribe(function () { return _this.updateView(); });
|
|
8444
|
+
};
|
|
8445
|
+
MatBadgeIconDirective.prototype.ngOnDestroy = function () {
|
|
8446
|
+
var _a;
|
|
8447
|
+
(_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
8395
8448
|
};
|
|
8396
8449
|
MatBadgeIconDirective.prototype.updateView = function () {
|
|
8397
|
-
this.size = this.size || 'medium';
|
|
8398
|
-
this.color = this.color || 'primary';
|
|
8399
|
-
if (this.color === 'warn')
|
|
8400
|
-
this.color = 'warning';
|
|
8401
8450
|
var badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
8402
8451
|
if (!badge)
|
|
8403
8452
|
return;
|
|
8404
8453
|
var fontSize;
|
|
8405
|
-
switch (this.
|
|
8454
|
+
switch (this._size) {
|
|
8406
8455
|
case 'large':
|
|
8407
8456
|
fontSize = '24px';
|
|
8408
8457
|
break;
|
|
@@ -8413,25 +8462,31 @@
|
|
|
8413
8462
|
fontSize = '16px';
|
|
8414
8463
|
break;
|
|
8415
8464
|
}
|
|
8416
|
-
|
|
8417
|
-
|
|
8418
|
-
|
|
8465
|
+
var html = '';
|
|
8466
|
+
if (this._matIcon) {
|
|
8467
|
+
html = "<i class=\"material-icons\" style=\"font-size: " + fontSize + ";\">" + this._matIcon + "</i>";
|
|
8468
|
+
}
|
|
8469
|
+
else if (this._ionIcon) {
|
|
8470
|
+
html = "<ion-icon style=\"font-size: " + fontSize + "; pointer-events: none;\" name=\"" + this._ionIcon + "\"></ion-icon>";
|
|
8471
|
+
}
|
|
8472
|
+
if (this._html !== html) {
|
|
8473
|
+
this._html = html;
|
|
8474
|
+
badge.innerHTML = html;
|
|
8475
|
+
}
|
|
8476
|
+
// Update style
|
|
8419
8477
|
// fill: 'clear'
|
|
8420
|
-
if (this.
|
|
8421
|
-
badge.style.color = "var(--ion-color-" + this.
|
|
8478
|
+
if (this._fill === 'clear') {
|
|
8479
|
+
badge.style.color = "var(--ion-color-" + this._color + ")";
|
|
8422
8480
|
badge.style.background = 'transparent';
|
|
8423
8481
|
}
|
|
8424
8482
|
// fill: 'solid' (default value)
|
|
8425
8483
|
else {
|
|
8426
|
-
badge.style.background = "var(--ion-color-" + this.
|
|
8427
|
-
badge.style.color = "var(--ion-color-" + this.
|
|
8428
|
-
}
|
|
8429
|
-
if (this._matIcon) {
|
|
8430
|
-
badge.innerHTML = "<i class=\"material-icons\" style=\"font-size: " + fontSize + ";\">" + this._matIcon + "</i>";
|
|
8431
|
-
}
|
|
8432
|
-
else if (this._ionIcon) {
|
|
8433
|
-
badge.innerHTML = "<ion-icon style=\"font-size: " + fontSize + "; pointer-events: none;\" name=\"" + this._ionIcon + "\"></ion-icon>";
|
|
8484
|
+
badge.style.background = "var(--ion-color-" + this._color + ")";
|
|
8485
|
+
badge.style.color = "var(--ion-color-" + this._color + "-contrast)";
|
|
8434
8486
|
}
|
|
8487
|
+
badge.style.alignItems = 'center';
|
|
8488
|
+
badge.style.justifyContent = 'center';
|
|
8489
|
+
badge.style.display = 'flex';
|
|
8435
8490
|
};
|
|
8436
8491
|
return MatBadgeIconDirective;
|
|
8437
8492
|
}());
|
|
@@ -8449,6 +8504,9 @@
|
|
|
8449
8504
|
{ type: i0.ElementRef }
|
|
8450
8505
|
]; };
|
|
8451
8506
|
MatBadgeIconDirective.propDecorators = {
|
|
8507
|
+
size: [{ type: i0.Input, args: ['matBadgeSize',] }],
|
|
8508
|
+
color: [{ type: i0.Input, args: ['matBadgeColor',] }],
|
|
8509
|
+
fill: [{ type: i0.Input, args: ['matBadgeFill',] }],
|
|
8452
8510
|
matIcon: [{ type: i0.Input, args: ['matBadgeIcon',] }],
|
|
8453
8511
|
ionIcon: [{ type: i0.Input, args: ['ionBadgeIcon',] }]
|
|
8454
8512
|
};
|
|
@@ -19599,18 +19657,17 @@
|
|
|
19599
19657
|
|
|
19600
19658
|
var MatBadgeIconTestPage = /** @class */ (function () {
|
|
19601
19659
|
function MatBadgeIconTestPage() {
|
|
19602
|
-
this.$
|
|
19660
|
+
this.$icon = new rxjs.BehaviorSubject('alert');
|
|
19661
|
+
this.$size = new rxjs.BehaviorSubject('small');
|
|
19662
|
+
this.$fill = new rxjs.BehaviorSubject('solid');
|
|
19663
|
+
this.$color = new rxjs.BehaviorSubject('danger');
|
|
19603
19664
|
}
|
|
19604
|
-
MatBadgeIconTestPage.prototype.changeIcon = function (event) {
|
|
19605
|
-
console.info(event);
|
|
19606
|
-
this.$dynamicIcon.next(event.value);
|
|
19607
|
-
};
|
|
19608
19665
|
return MatBadgeIconTestPage;
|
|
19609
19666
|
}());
|
|
19610
19667
|
MatBadgeIconTestPage.decorators = [
|
|
19611
19668
|
{ type: i0.Component, args: [{
|
|
19612
19669
|
selector: 'mat-badge-icon-test',
|
|
19613
|
-
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 <ion-
|
|
19670
|
+
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"
|
|
19614
19671
|
},] }
|
|
19615
19672
|
];
|
|
19616
19673
|
|