@flywheel-io/vision 21.6.2 → 21.7.1
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
|
/**
|
|
@@ -2730,11 +2737,13 @@ class FwChipComponent {
|
|
|
2730
2737
|
}
|
|
2731
2738
|
}
|
|
2732
2739
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2733
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwChipComponent, isStandalone: true, selector: "fw-chip", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, textWrap: { classPropertyName: "textWrap", publicName: "textWrap", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div\n [style.max-width]=\"maxWidth() + 'px'\"\n [ngClass]=\"['chip', variant(), 'chip-' + color()]\"\n [class.disabled]=\"disabled()\"\n [class.focused]=\"selected()\"\n [class.selectable]=\"selectable()\"\n (click)=\"selectable() ? select.emit(value()) : undefined\"\n fwClickableDiv\n [fwClickableDivDisabled]=\"!selectable() || disabled()\"\n [attr.aria-pressed]=\"selectable() ? selected() : null\"\n>\n @if (icon()) {\n <fw-icon class=\"chip-icon\">{{ icon() }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title()) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap()\" class=\"chip-text\">{{ title() }}</span>\n\n @if (description()) {\n <span class=\"description\">{{ description() }}</span>\n }\n </div>\n }\n\n @if (showClose()) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\" fwClickableDiv [attr.aria-label]=\"closeLabel()\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100%}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip-text{overflow:hidden;text-overflow:ellipsis}.chip-text.text-wrap{white-space:nowrap}.chip-text-container{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap;width:100%;overflow:hidden}.chip-text-container .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip:focus-visible{outline:2px dotted var(--primary-base)}.chip .close-icon:focus-visible{outline:2px dotted var(--primary-base)}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}:host::ng-deep fw-progress-spinner{width:16px!important;height:16px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "directive", type: FwClickableDivDirective, selector: "[fwClickableDiv]", inputs: ["fwClickableDivDisabled", "fwClickableDivRole"] }] }); }
|
|
2740
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwChipComponent, isStandalone: true, selector: "fw-chip", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, textWrap: { classPropertyName: "textWrap", publicName: "textWrap", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", select: "select" }, host: { properties: { "attr.title": "undefined" } }, ngImport: i0, template: "<div\n [style.max-width]=\"maxWidth() + 'px'\"\n [ngClass]=\"['chip', variant(), 'chip-' + color()]\"\n [class.disabled]=\"disabled()\"\n [class.focused]=\"selected()\"\n [class.selectable]=\"selectable()\"\n (click)=\"selectable() ? select.emit(value()) : undefined\"\n fwClickableDiv\n [fwClickableDivDisabled]=\"!selectable() || disabled()\"\n [attr.aria-pressed]=\"selectable() ? selected() : null\"\n>\n @if (icon()) {\n <fw-icon class=\"chip-icon\">{{ icon() }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title()) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap()\" class=\"chip-text\">{{ title() }}</span>\n\n @if (description()) {\n <span class=\"description\">{{ description() }}</span>\n }\n </div>\n }\n\n @if (showClose()) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\" fwClickableDiv [attr.aria-label]=\"closeLabel()\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100%}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip-text{overflow:hidden;text-overflow:ellipsis}.chip-text.text-wrap{white-space:nowrap}.chip-text-container{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap;width:100%;overflow:hidden}.chip-text-container .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip:focus-visible{outline:2px dotted var(--primary-base)}.chip .close-icon:focus-visible{outline:2px dotted var(--primary-base)}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}:host::ng-deep fw-progress-spinner{width:16px!important;height:16px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "directive", type: FwClickableDivDirective, selector: "[fwClickableDiv]", inputs: ["fwClickableDivDisabled", "fwClickableDivRole"] }] }); }
|
|
2734
2741
|
}
|
|
2735
2742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwChipComponent, decorators: [{
|
|
2736
2743
|
type: Component,
|
|
2737
|
-
args: [{ selector: 'fw-chip', imports: [NgClass, FwIconComponent, FwClickableDivDirective],
|
|
2744
|
+
args: [{ selector: 'fw-chip', imports: [NgClass, FwIconComponent, FwClickableDivDirective], host: {
|
|
2745
|
+
'[attr.title]': 'undefined',
|
|
2746
|
+
}, template: "<div\n [style.max-width]=\"maxWidth() + 'px'\"\n [ngClass]=\"['chip', variant(), 'chip-' + color()]\"\n [class.disabled]=\"disabled()\"\n [class.focused]=\"selected()\"\n [class.selectable]=\"selectable()\"\n (click)=\"selectable() ? select.emit(value()) : undefined\"\n fwClickableDiv\n [fwClickableDivDisabled]=\"!selectable() || disabled()\"\n [attr.aria-pressed]=\"selectable() ? selected() : null\"\n>\n @if (icon()) {\n <fw-icon class=\"chip-icon\">{{ icon() }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title()) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap()\" class=\"chip-text\">{{ title() }}</span>\n\n @if (description()) {\n <span class=\"description\">{{ description() }}</span>\n }\n </div>\n }\n\n @if (showClose()) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\" fwClickableDiv [attr.aria-label]=\"closeLabel()\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100%}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip-text{overflow:hidden;text-overflow:ellipsis}.chip-text.text-wrap{white-space:nowrap}.chip-text-container{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap;width:100%;overflow:hidden}.chip-text-container .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip:focus-visible{outline:2px dotted var(--primary-base)}.chip .close-icon:focus-visible{outline:2px dotted var(--primary-base)}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}:host::ng-deep fw-progress-spinner{width:16px!important;height:16px!important}\n"] }]
|
|
2738
2747
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], textWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "textWrap", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], close: [{
|
|
2739
2748
|
type: Output
|
|
2740
2749
|
}], select: [{
|