@sumaris-net/ngx-components 2.4.110 → 2.4.112
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/doc/changelog.md +3 -0
- package/esm2020/src/app/core/services/validator/local-settings.validator.mjs +2 -2
- package/esm2020/src/app/shared/material/badge/badge.directive.mjs +8 -3
- package/esm2020/src/app/shared/material/badge/badge.test.mjs +1 -1
- package/esm2020/src/app/shared/pipes/colors.pipe.mjs +3 -1
- package/fesm2015/sumaris-net.ngx-components.mjs +10 -4
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +10 -4
- package/fesm2020/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/badge/badge.directive.d.ts +1 -1
|
@@ -5217,6 +5217,8 @@ class MatColorPipe {
|
|
|
5217
5217
|
if (!color)
|
|
5218
5218
|
return undefined;
|
|
5219
5219
|
switch (color) {
|
|
5220
|
+
case 'tertiary':
|
|
5221
|
+
return 'primary';
|
|
5220
5222
|
case 'warning':
|
|
5221
5223
|
return 'warn';
|
|
5222
5224
|
default:
|
|
@@ -9731,6 +9733,9 @@ class BadgeDirective extends MatBadge {
|
|
|
9731
9733
|
else if (this.appBadgeIcon) {
|
|
9732
9734
|
html = `<ion-icon style="font-size: ${size}px; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
|
|
9733
9735
|
}
|
|
9736
|
+
else if (isNotNilOrBlank(this.content)) {
|
|
9737
|
+
html = '' + this.content;
|
|
9738
|
+
}
|
|
9734
9739
|
else {
|
|
9735
9740
|
hidden = true;
|
|
9736
9741
|
}
|
|
@@ -9793,13 +9798,14 @@ class BadgeDirective extends MatBadge {
|
|
|
9793
9798
|
}
|
|
9794
9799
|
}
|
|
9795
9800
|
BadgeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$4.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
9796
|
-
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { disabled: ["
|
|
9801
|
+
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { content: ["appBadge", "content"], disabled: ["appBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
9797
9802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeDirective, decorators: [{
|
|
9798
9803
|
type: Directive,
|
|
9799
9804
|
args: [{
|
|
9800
9805
|
selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
|
|
9801
9806
|
inputs: [
|
|
9802
|
-
'
|
|
9807
|
+
'content: appBadge',
|
|
9808
|
+
'disabled: appBadgeDisabled',
|
|
9803
9809
|
'color: appBadgeColor',
|
|
9804
9810
|
'size: appBadgeSize',
|
|
9805
9811
|
'fill: appBadgeFill',
|
|
@@ -24440,7 +24446,7 @@ class LocalSettingsValidatorService extends AppValidatorService {
|
|
|
24440
24446
|
getPropertyFormGroup(data) {
|
|
24441
24447
|
return this.formBuilder.group({
|
|
24442
24448
|
key: [data && data.key || null, Validators.compose([Validators.required, Validators.maxLength(50)])],
|
|
24443
|
-
value: [data && data.value || null, Validators.compose([Validators.required, Validators.maxLength(
|
|
24449
|
+
value: [data && data.value || null, Validators.compose([Validators.required, Validators.maxLength(2000)])]
|
|
24444
24450
|
});
|
|
24445
24451
|
}
|
|
24446
24452
|
/* -- protected methods -- */
|
|
@@ -34968,7 +34974,7 @@ class MatBadgeTestPage {
|
|
|
34968
34974
|
}
|
|
34969
34975
|
}
|
|
34970
34976
|
MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
34971
|
-
MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34977
|
+
MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34972
34978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatBadgeTestPage, decorators: [{
|
|
34973
34979
|
type: Component,
|
|
34974
34980
|
args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n" }]
|