@flywheel-io/vision 2.7.3 → 2.7.4
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/chip/chip.component.d.ts +2 -1
- package/components/icon/icon.component.d.ts +5 -1
- package/esm2022/components/chip/chip.component.mjs +6 -3
- package/esm2022/components/icon/icon.component.mjs +28 -20
- package/esm2022/components/paginator/paginator-advanced/paginator-advanced.component.mjs +2 -2
- package/esm2022/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +1 -1
- package/esm2022/components/typeahead/typeahead.component.mjs +2 -2
- package/fesm2022/flywheel-io-vision.mjs +35 -24
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -25,32 +25,27 @@ import * as i2 from '@angular/cdk/text-field';
|
|
|
25
25
|
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
|
|
26
26
|
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
27
27
|
|
|
28
|
+
const namedSizeToPxMap = {
|
|
29
|
+
large: 28,
|
|
30
|
+
medium: 24,
|
|
31
|
+
small: 22,
|
|
32
|
+
'extra-small': 18,
|
|
33
|
+
};
|
|
28
34
|
class FwIconComponent {
|
|
29
35
|
get style() {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
case 'small':
|
|
33
|
-
size = 'font-size: 22px; min-width: 22px; width: 22px;';
|
|
34
|
-
break;
|
|
35
|
-
case 'medium':
|
|
36
|
-
size = 'font-size: 24px; min-width: 24px; width: 24px;';
|
|
37
|
-
break;
|
|
38
|
-
case 'large':
|
|
39
|
-
size = 'font-size: 28px; min-width: 28px; width: 28px;';
|
|
40
|
-
break;
|
|
41
|
-
}
|
|
42
|
-
let color = '';
|
|
36
|
+
const sizeStyle = `font-size: ${this.size}px; min-width: ${this.size}px; width: ${this.size}px`;
|
|
37
|
+
let colorStyle = '';
|
|
43
38
|
if (this.color) {
|
|
44
39
|
if (this.color === 'muted') {
|
|
45
|
-
|
|
40
|
+
colorStyle = 'color: var(--typography-muted);';
|
|
46
41
|
}
|
|
47
42
|
else {
|
|
48
|
-
|
|
43
|
+
colorStyle = `color: var(--${this.color}-base);`;
|
|
49
44
|
}
|
|
50
45
|
}
|
|
51
46
|
return this.sanitizer.bypassSecurityTrustStyle(`
|
|
52
|
-
${
|
|
53
|
-
${
|
|
47
|
+
${sizeStyle}
|
|
48
|
+
${colorStyle}
|
|
54
49
|
`);
|
|
55
50
|
}
|
|
56
51
|
constructor(sanitizer) {
|
|
@@ -59,7 +54,12 @@ class FwIconComponent {
|
|
|
59
54
|
this.role = 'img';
|
|
60
55
|
}
|
|
61
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwIconComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.12", type: FwIconComponent, selector: "fw-icon", inputs: { size: ["size", "size", (input) => {
|
|
58
|
+
if (typeof input === 'string') {
|
|
59
|
+
return namedSizeToPxMap[input] || parseInt(input) || 24;
|
|
60
|
+
}
|
|
61
|
+
return input;
|
|
62
|
+
}], color: "color" }, host: { properties: { "class": "this.class", "role": "this.role", "style": "this.style" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwIconComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
@@ -69,7 +69,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
69
69
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
70
70
|
}]
|
|
71
71
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { size: [{
|
|
72
|
-
type: Input
|
|
72
|
+
type: Input,
|
|
73
|
+
args: [{
|
|
74
|
+
transform: (input) => {
|
|
75
|
+
if (typeof input === 'string') {
|
|
76
|
+
return namedSizeToPxMap[input] || parseInt(input) || 24;
|
|
77
|
+
}
|
|
78
|
+
return input;
|
|
79
|
+
}
|
|
80
|
+
}]
|
|
73
81
|
}], color: [{
|
|
74
82
|
type: Input
|
|
75
83
|
}], class: [{
|
|
@@ -2525,6 +2533,7 @@ class FwChipComponent {
|
|
|
2525
2533
|
constructor() {
|
|
2526
2534
|
this.variant = 'enabled';
|
|
2527
2535
|
this.color = 'slate';
|
|
2536
|
+
this.textWrap = true;
|
|
2528
2537
|
this.selectable = true;
|
|
2529
2538
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
2530
2539
|
this.close = new EventEmitter();
|
|
@@ -2538,11 +2547,11 @@ class FwChipComponent {
|
|
|
2538
2547
|
}
|
|
2539
2548
|
}
|
|
2540
2549
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwChipComponent, selector: "fw-chip", inputs: { value: "value", variant: "variant", color: "color", icon: "icon", title: "title", description: "description", showClose: "showClose", disabled: "disabled", selected: "selected", selectable: "selectable" }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\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=\"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)\">\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{
|
|
2550
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwChipComponent, selector: "fw-chip", inputs: { value: "value", variant: "variant", color: "color", icon: "icon", title: "title", description: "description", showClose: "showClose", disabled: "disabled", selected: "selected", textWrap: "textWrap", selectable: "selectable" }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\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)\">\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.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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
2542
2551
|
}
|
|
2543
2552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipComponent, decorators: [{
|
|
2544
2553
|
type: Component,
|
|
2545
|
-
args: [{ selector: 'fw-chip', template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\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=\"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)\">\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{
|
|
2554
|
+
args: [{ selector: 'fw-chip', template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\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)\">\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.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"] }]
|
|
2546
2555
|
}], propDecorators: { value: [{
|
|
2547
2556
|
type: Input
|
|
2548
2557
|
}], variant: [{
|
|
@@ -2561,6 +2570,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2561
2570
|
type: Input
|
|
2562
2571
|
}], selected: [{
|
|
2563
2572
|
type: Input
|
|
2573
|
+
}], textWrap: [{
|
|
2574
|
+
type: Input
|
|
2564
2575
|
}], selectable: [{
|
|
2565
2576
|
type: Input
|
|
2566
2577
|
}], close: [{
|
|
@@ -6017,7 +6028,7 @@ class FwMultiSelectMenuComponent {
|
|
|
6017
6028
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6018
6029
|
multi: true,
|
|
6019
6030
|
},
|
|
6020
|
-
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuFilter", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth || (wrapper.offsetWidth - 2) + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText\"\n [maxHeight]=\"maxOptionsHeight\"\n [minHeight]=\"minOptionsHeight\"\n [filterFn]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n <div class=\"filter-content\" *ngIf=\"showSelectionInfo()\">\n <p>{{value.length}} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\">\n <ng-container *ngIf=\"customMenuItems.length === 0\">\n <fw-menu-item\n *ngFor=\"let item of options; index as $index\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n [multiSelect]=\"true\"\n [selected]=\"value.includes(item[valueProperty])\"\n [showCheckbox]=\"useCheckbox\"\n (mouseenter)=\"setFocusedIndex(item)\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content ngProjectAs=\"custom-menu-items\" select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></ng-content>\n </fw-menu>\n </fw-menu-filter>\n </ng-template>\n</div>\n", styles: [":host .placeholder{color:var(--typography-light);font-size:14px;padding-left:4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid{min-height:36px;width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;justify-content:space-between;padding:4px;align-items:center;border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid.small{min-height:30px;padding:2px}:host .chip-grid.large{min-height:40px;padding:6px}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .selected-text{color:var(--typography-base);font-size:14px;padding:0 2px 0 4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid .max-exceeded{font-size:12px}.filter-content{display:flex;align-items:center;justify-content:space-between;padding-left:4px;padding-top:4px}.filter-content p{color:var(--typography-muted);width:fit-content;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
6031
|
+
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuFilter", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth || (wrapper.offsetWidth - 2) + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText\"\n [maxHeight]=\"maxOptionsHeight\"\n [minHeight]=\"minOptionsHeight\"\n [filterFn]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n <div class=\"filter-content\" *ngIf=\"showSelectionInfo()\">\n <p>{{value.length}} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\">\n <ng-container *ngIf=\"customMenuItems.length === 0\">\n <fw-menu-item\n *ngFor=\"let item of options; index as $index\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n [multiSelect]=\"true\"\n [selected]=\"value.includes(item[valueProperty])\"\n [showCheckbox]=\"useCheckbox\"\n (mouseenter)=\"setFocusedIndex(item)\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content ngProjectAs=\"custom-menu-items\" select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></ng-content>\n </fw-menu>\n </fw-menu-filter>\n </ng-template>\n</div>\n", styles: [":host .placeholder{color:var(--typography-light);font-size:14px;padding-left:4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid{min-height:36px;width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;justify-content:space-between;padding:4px;align-items:center;border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid.small{min-height:30px;padding:2px}:host .chip-grid.large{min-height:40px;padding:6px}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .selected-text{color:var(--typography-base);font-size:14px;padding:0 2px 0 4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid .max-exceeded{font-size:12px}.filter-content{display:flex;align-items:center;justify-content:space-between;padding-left:4px;padding-top:4px}.filter-content p{color:var(--typography-muted);width:fit-content;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
6021
6032
|
}
|
|
6022
6033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
6023
6034
|
type: Component,
|
|
@@ -6503,7 +6514,7 @@ class FwPaginatorAdvancedComponent {
|
|
|
6503
6514
|
this.page.emit(evt);
|
|
6504
6515
|
}
|
|
6505
6516
|
lastPage() {
|
|
6506
|
-
const evt = this.buildPageEvent(this.getNumberOfPages());
|
|
6517
|
+
const evt = this.buildPageEvent(this.getNumberOfPages() - 1);
|
|
6507
6518
|
this.pageIndex = this.getNumberOfPages() - 1;
|
|
6508
6519
|
this.page.emit(evt);
|
|
6509
6520
|
}
|
|
@@ -9031,7 +9042,7 @@ class FwTypeaheadComponent {
|
|
|
9031
9042
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9032
9043
|
multi: true,
|
|
9033
9044
|
},
|
|
9034
|
-
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu>\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of optionsSignal(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
9045
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu>\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of optionsSignal(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
9035
9046
|
}
|
|
9036
9047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9037
9048
|
type: Component,
|