@flywheel-io/vision 1.1.1 → 1.1.3
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/components/badge/badge.component.d.ts +4 -1
- package/esm2020/components/badge/badge.component.mjs +20 -3
- package/fesm2015/flywheel-io-vision.mjs +18 -2
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +18 -2
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -336,22 +336,38 @@ class FwBadgeComponent {
|
|
|
336
336
|
this.color = 'default';
|
|
337
337
|
this.variant = 'standard';
|
|
338
338
|
this.value = '';
|
|
339
|
+
this.hideZero = false;
|
|
340
|
+
this.hideEmpty = false;
|
|
339
341
|
}
|
|
340
342
|
get cssClass() {
|
|
341
343
|
return ['fw-badge', this.color, this.variant].join(' ');
|
|
342
344
|
}
|
|
345
|
+
showBadge() {
|
|
346
|
+
let show = true;
|
|
347
|
+
if (this.hideEmpty) {
|
|
348
|
+
show = !(this.value.length === 0);
|
|
349
|
+
}
|
|
350
|
+
if (this.hideZero) {
|
|
351
|
+
show = !(this.value && this.value === '0' || (this.hideEmpty && this.value.length === 0));
|
|
352
|
+
}
|
|
353
|
+
return show;
|
|
354
|
+
}
|
|
343
355
|
}
|
|
344
356
|
FwBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
345
|
-
FwBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwBadgeComponent, selector: "fw-badge", inputs: { color: "color", variant: "variant", value: "value" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
357
|
+
FwBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwBadgeComponent, selector: "fw-badge", inputs: { color: "color", variant: "variant", value: "value", hideZero: "hideZero", hideEmpty: "hideEmpty" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
346
358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwBadgeComponent, decorators: [{
|
|
347
359
|
type: Component,
|
|
348
|
-
args: [{ selector: 'fw-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"] }]
|
|
360
|
+
args: [{ selector: 'fw-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"] }]
|
|
349
361
|
}], propDecorators: { color: [{
|
|
350
362
|
type: Input
|
|
351
363
|
}], variant: [{
|
|
352
364
|
type: Input
|
|
353
365
|
}], value: [{
|
|
354
366
|
type: Input
|
|
367
|
+
}], hideZero: [{
|
|
368
|
+
type: Input
|
|
369
|
+
}], hideEmpty: [{
|
|
370
|
+
type: Input
|
|
355
371
|
}], cssClass: [{
|
|
356
372
|
type: HostBinding,
|
|
357
373
|
args: ['class']
|