@flywheel-io/vision 2.8.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/button-toggle/button-toggle-item/button-toggle-item.component.d.ts +1 -1
- package/components/chip-list/chip-list.component.d.ts +2 -1
- package/components/typeahead/typeahead.component.d.ts +3 -1
- package/esm2022/components/button-toggle/button-toggle-item/button-toggle-item.component.mjs +6 -4
- package/esm2022/components/chip/chip.component.mjs +2 -2
- package/esm2022/components/chip-list/chip-list.component.mjs +7 -3
- package/esm2022/components/typeahead/typeahead.component.mjs +6 -4
- package/fesm2022/flywheel-io-vision.mjs +18 -10
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1928,14 +1928,16 @@ class FwButtonToggleItemComponent {
|
|
|
1928
1928
|
this.click = new EventEmitter();
|
|
1929
1929
|
}
|
|
1930
1930
|
handleClick() {
|
|
1931
|
-
|
|
1931
|
+
if (this.value) {
|
|
1932
|
+
this.click.emit(this.value);
|
|
1933
|
+
}
|
|
1932
1934
|
}
|
|
1933
1935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwButtonToggleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwButtonToggleItemComponent, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", selectedIcon: "selectedIcon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor", selectedStyle: "selectedStyle" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n [
|
|
1936
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwButtonToggleItemComponent, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", selectedIcon: "selectedIcon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor", selectedStyle: "selectedStyle" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n", dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
|
|
1935
1937
|
}
|
|
1936
1938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwButtonToggleItemComponent, decorators: [{
|
|
1937
1939
|
type: Component,
|
|
1938
|
-
args: [{ selector: 'fw-button-toggle-item', template: "<fw-button\n [
|
|
1940
|
+
args: [{ selector: 'fw-button-toggle-item', template: "<fw-button\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n" }]
|
|
1939
1941
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1940
1942
|
type: Input
|
|
1941
1943
|
}], icon: [{
|
|
@@ -2547,11 +2549,11 @@ class FwChipComponent {
|
|
|
2547
2549
|
}
|
|
2548
2550
|
}
|
|
2549
2551
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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
|
|
2552
|
+
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%;max-width:180px}.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"] }] }); }
|
|
2551
2553
|
}
|
|
2552
2554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipComponent, decorators: [{
|
|
2553
2555
|
type: Component,
|
|
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
|
|
2556
|
+
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%;max-width:180px}.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"] }]
|
|
2555
2557
|
}], propDecorators: { value: [{
|
|
2556
2558
|
type: Input
|
|
2557
2559
|
}], variant: [{
|
|
@@ -8801,6 +8803,7 @@ class FwChipListComponent {
|
|
|
8801
8803
|
}).join(', ');
|
|
8802
8804
|
});
|
|
8803
8805
|
this.resizeDebounceMs = input(100);
|
|
8806
|
+
this.disableOverflow = input(false);
|
|
8804
8807
|
this.childrenChanged = effect(() => {
|
|
8805
8808
|
this.childChipElementRefs();
|
|
8806
8809
|
this.calcChipOverflow();
|
|
@@ -8822,6 +8825,9 @@ class FwChipListComponent {
|
|
|
8822
8825
|
this.subscriptions.push(sub);
|
|
8823
8826
|
}
|
|
8824
8827
|
calcChipOverflow() {
|
|
8828
|
+
if (this.disableOverflow()) {
|
|
8829
|
+
return;
|
|
8830
|
+
}
|
|
8825
8831
|
const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
8826
8832
|
const chipElements = this.childChipElementRefs().map(ref => ref.nativeElement);
|
|
8827
8833
|
const moreTextElement = this.moreText().nativeElement;
|
|
@@ -8853,14 +8859,14 @@ class FwChipListComponent {
|
|
|
8853
8859
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
8854
8860
|
}
|
|
8855
8861
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
8862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwChipListComponent, isStandalone: true, selector: "fw-chip-list", inputs: { resizeDebounceMs: { classPropertyName: "resizeDebounceMs", publicName: "resizeDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, disableOverflow: { classPropertyName: "disableOverflow", publicName: "disableOverflow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "childChipElementRefs", predicate: FwChipComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n@if(!disableOverflow()) {\n <fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n </fw-tooltip>\n}\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwChipModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
|
|
8857
8863
|
}
|
|
8858
8864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, decorators: [{
|
|
8859
8865
|
type: Component,
|
|
8860
8866
|
args: [{ selector: 'fw-chip-list', standalone: true, imports: [
|
|
8861
8867
|
FwChipModule,
|
|
8862
8868
|
FwTooltipModule,
|
|
8863
|
-
], template: "<ng-content></ng-content>\n<fw-tooltip [title]=\"hiddenLabels()\">\n
|
|
8869
|
+
], template: "<ng-content></ng-content>\n@if(!disableOverflow()) {\n <fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n </fw-tooltip>\n}\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"] }]
|
|
8864
8870
|
}] });
|
|
8865
8871
|
|
|
8866
8872
|
/**
|
|
@@ -8884,6 +8890,7 @@ class FwTypeaheadComponent {
|
|
|
8884
8890
|
this.maxOptionsHeight = input('400px');
|
|
8885
8891
|
this.minOptionsHeight = input('0px');
|
|
8886
8892
|
this.optionsWidth = input('');
|
|
8893
|
+
this.maxHeight = input('');
|
|
8887
8894
|
this.notifyOnValueChanges = effect(() => {
|
|
8888
8895
|
this.onChange(this.value());
|
|
8889
8896
|
});
|
|
@@ -8891,6 +8898,7 @@ class FwTypeaheadComponent {
|
|
|
8891
8898
|
this.searchValueChanges$ = toObservable(this.searchValue);
|
|
8892
8899
|
this.allowNew = input(true);
|
|
8893
8900
|
this.placeholder = input('Enter tags...');
|
|
8901
|
+
this.showPlaceholder = computed(() => this.value().length === 0);
|
|
8894
8902
|
/**
|
|
8895
8903
|
* Options after they've been both filtered for matching the search and already selected
|
|
8896
8904
|
*/
|
|
@@ -9070,13 +9078,13 @@ class FwTypeaheadComponent {
|
|
|
9070
9078
|
newlyFocused.scrollIntoView();
|
|
9071
9079
|
}
|
|
9072
9080
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9073
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" } }, providers: [
|
|
9081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" } }, providers: [
|
|
9074
9082
|
{
|
|
9075
9083
|
provide: NG_VALUE_ACCESSOR,
|
|
9076
9084
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9077
9085
|
multi: true,
|
|
9078
9086
|
},
|
|
9079
|
-
], 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 (focusout)=\"onFocusLoss($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 filteredOptions(); 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", inputs: ["resizeDebounceMs"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9087
|
+
], 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 [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\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]=\"showPlaceholder() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($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 filteredOptions(); 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;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}: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", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9080
9088
|
}
|
|
9081
9089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9082
9090
|
type: Component,
|
|
@@ -9096,7 +9104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9096
9104
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9097
9105
|
multi: true,
|
|
9098
9106
|
},
|
|
9099
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, 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 (focusout)=\"onFocusLoss($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 filteredOptions(); 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"] }]
|
|
9107
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\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]=\"showPlaceholder() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($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 filteredOptions(); 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;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}: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"] }]
|
|
9100
9108
|
}], propDecorators: { outsideClick: [{
|
|
9101
9109
|
type: HostListener,
|
|
9102
9110
|
args: ['document:click']
|