@flywheel-io/vision 21.6.2 → 21.7.0
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.
|
@@ -120,9 +120,16 @@ class FwAlertComponent {
|
|
|
120
120
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
121
121
|
this.close = output();
|
|
122
122
|
this.role = computed(() => this.severity() === 'error' || this.severity() === 'warning' ? 'alert' : 'status', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
|
|
123
|
+
this.closeColor = computed(() => {
|
|
124
|
+
if (this.variant() === 'filled') {
|
|
125
|
+
return 'overlay';
|
|
126
|
+
}
|
|
127
|
+
const severity = this.severity();
|
|
128
|
+
return severity === 'discover' ? 'secondary' : severity;
|
|
129
|
+
}, ...(ngDevMode ? [{ debugName: "closeColor" }] : /* istanbul ignore next */ []));
|
|
123
130
|
}
|
|
124
131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwAlertComponent, isStandalone: true, selector: "fw-alert", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['fw-alert', variant(), severity()]\" [attr.role]=\"role()\">\n @if (icon()) {\n <fw-icon class=\"fw-alert-icon\">{{ icon() }}</fw-icon>\n }\n <div class=\"fw-alert-text\">\n @if (title()) {\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n }\n @if (description()) {\n <p class=\"vision-p2\">{{ description() }}</p>\n }\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\" size=\"small\"\n [color]=\"
|
|
132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwAlertComponent, isStandalone: true, selector: "fw-alert", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['fw-alert', variant(), severity()]\" [attr.role]=\"role()\">\n @if (icon()) {\n <fw-icon class=\"fw-alert-icon\">{{ icon() }}</fw-icon>\n }\n <div class=\"fw-alert-text\">\n @if (title()) {\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n }\n @if (description()) {\n <p class=\"vision-p2\">{{ description() }}</p>\n }\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\" size=\"small\"\n [color]=\"closeColor()\"\n [ariaLabel]=\"closeLabel()\"\n (click)=\"close ? close.emit() : undefined\">\n </fw-icon-button>\n }\n </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.discover{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.fw-alert.standard.discover h4{color:var(--secondary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.discover{color:var(--secondary-base);border:1px solid var(--secondary-base)}.fw-alert.outlined.discover h4{color:var(--secondary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.discover{color:var(--typography-contrast);background-color:var(--secondary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border", "focusInitial", "ariaLabel"] }] }); }
|
|
126
133
|
}
|
|
127
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwAlertComponent, decorators: [{
|
|
128
135
|
type: Component,
|
|
@@ -130,7 +137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
130
137
|
NgClass,
|
|
131
138
|
FwIconComponent,
|
|
132
139
|
FwIconButtonComponent,
|
|
133
|
-
], template: "<div [ngClass]=\"['fw-alert', variant(), severity()]\" [attr.role]=\"role()\">\n @if (icon()) {\n <fw-icon class=\"fw-alert-icon\">{{ icon() }}</fw-icon>\n }\n <div class=\"fw-alert-text\">\n @if (title()) {\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n }\n @if (description()) {\n <p class=\"vision-p2\">{{ description() }}</p>\n }\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\" size=\"small\"\n [color]=\"
|
|
140
|
+
], template: "<div [ngClass]=\"['fw-alert', variant(), severity()]\" [attr.role]=\"role()\">\n @if (icon()) {\n <fw-icon class=\"fw-alert-icon\">{{ icon() }}</fw-icon>\n }\n <div class=\"fw-alert-text\">\n @if (title()) {\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n }\n @if (description()) {\n <p class=\"vision-p2\">{{ description() }}</p>\n }\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\" size=\"small\"\n [color]=\"closeColor()\"\n [ariaLabel]=\"closeLabel()\"\n (click)=\"close ? close.emit() : undefined\">\n </fw-icon-button>\n }\n </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.discover{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.fw-alert.standard.discover h4{color:var(--secondary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.discover{color:var(--secondary-base);border:1px solid var(--secondary-base)}.fw-alert.outlined.discover h4{color:var(--secondary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.discover{color:var(--typography-contrast);background-color:var(--secondary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
|
|
134
141
|
}], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
135
142
|
|
|
136
143
|
/**
|