@taiga-ui/kit
Version:
Taiga UI Angular main components kit
255 lines (250 loc) • 11.2 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { EventEmitter, Optional, Self, Inject, ChangeDetectorRef, Input, Output, ContentChild, TemplateRef, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { TUI_DEFAULT_STRINGIFY, TUI_STRICT_MATCHER, TUI_DEFAULT_IDENTITY_MATCHER, isNativeFocused, isPresent, setNativeFocused, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { TuiDataListDirective, TUI_DATA_LIST_ACCESSOR, TuiHostedDropdownComponent, TuiPrimitiveTextfieldComponent, TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiPrimitiveTextfieldModule, TuiHostedDropdownModule } from '@taiga-ui/core';
import { TUI_ARROW, TuiArrowModule } from '@taiga-ui/kit/components/arrow';
import { TUI_SELECT_OPTION, TuiSelectOptionModule } from '@taiga-ui/kit/components/select-option';
import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { CommonModule } from '@angular/common';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
var ɵ0 = TUI_SELECT_OPTION;
var TuiComboBoxComponent = /** @class */ (function (_super) {
__extends(TuiComboBoxComponent, _super);
function TuiComboBoxComponent(control, changeDetectorRef) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.stringify = TUI_DEFAULT_STRINGIFY;
_this.strictMatcher = TUI_STRICT_MATCHER;
_this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
_this.valueContent = '';
_this.strict = true;
_this.search = '';
_this.searchChange = new EventEmitter();
_this.arrow = TUI_ARROW;
_this.open = false;
_this.datalist = '';
return _this;
}
TuiComboBoxComponent_1 = TuiComboBoxComponent;
Object.defineProperty(TuiComboBoxComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.textfield ? this.textfield.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiComboBoxComponent.prototype, "focused", {
get: function () {
return (isNativeFocused(this.nativeFocusableElement) ||
(!!this.hostedDropdown && this.hostedDropdown.focused));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiComboBoxComponent.prototype, "nativeValue", {
get: function () {
return this.value === null ? this.search || '' : this.stringify(this.value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiComboBoxComponent.prototype, "showValueTemplate", {
get: function () {
return isPresent(this.value) && !this.focused;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiComboBoxComponent.prototype, "canOpen", {
get: function () {
return !this.computedDisabled && !this.readOnly;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiComboBoxComponent.prototype, "computedContent", {
get: function () {
return this.valueContent || this.nativeValue;
},
enumerable: true,
configurable: true
});
TuiComboBoxComponent.prototype.onActiveZone = function (active) {
this.updateFocused(active);
};
TuiComboBoxComponent.prototype.checkOption = function (option) {
if (!this.isStrictMatch(option)) {
return;
}
this.updateValue(option);
this.updateSearch(null);
};
TuiComboBoxComponent.prototype.handleOption = function (item) {
this.focusInput();
this.close();
this.updateSearch(null);
this.updateValue(item);
};
TuiComboBoxComponent.prototype.onFieldKeyDownEnter = function (event) {
if (this.open) {
event.preventDefault();
}
var options = this.accessor ? this.accessor.getOptions() : [];
if (options.length !== 1) {
return;
}
this.updateValue(options[0]);
this.updateSearch(null);
this.close();
};
TuiComboBoxComponent.prototype.onInput = function (value) {
var _this = this;
this.updateSearch(value);
var match = this.accessor &&
this.accessor.getOptions().find(function (item) { return _this.isStrictMatch(item); });
if (match !== undefined) {
this.updateValue(match);
this.updateSearch(null);
return;
}
this.updateValue(this.strict || this.search === '' ? null : this.search);
if (this.search && this.hostedDropdown) {
this.hostedDropdown.updateOpen(true);
}
};
TuiComboBoxComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiComboBoxComponent.prototype.computeContext = function ($implicit, active) {
return {
$implicit: $implicit,
active: active,
};
};
TuiComboBoxComponent.prototype.toggle = function () {
if (this.hostedDropdown) {
this.hostedDropdown.updateOpen(!this.open);
}
};
TuiComboBoxComponent.prototype.isStrictMatch = function (item) {
return this.strictMatcher(item, this.search || '', this.stringify);
};
TuiComboBoxComponent.prototype.close = function () {
if (this.hostedDropdown) {
this.hostedDropdown.updateOpen(false);
}
};
TuiComboBoxComponent.prototype.updateSearch = function (search) {
if (this.search === search) {
return;
}
this.search = search;
this.searchChange.emit(search);
};
TuiComboBoxComponent.prototype.focusInput = function (preventScroll) {
if (preventScroll === void 0) { preventScroll = false; }
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, preventScroll);
}
};
var TuiComboBoxComponent_1;
TuiComboBoxComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
]; };
__decorate([
Input(),
tuiDefaultProp()
], TuiComboBoxComponent.prototype, "stringify", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiComboBoxComponent.prototype, "strictMatcher", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiComboBoxComponent.prototype, "identityMatcher", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiComboBoxComponent.prototype, "valueContent", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiComboBoxComponent.prototype, "strict", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiComboBoxComponent.prototype, "search", void 0);
__decorate([
Output()
], TuiComboBoxComponent.prototype, "searchChange", void 0);
__decorate([
ContentChild(TuiDataListDirective, { read: TemplateRef })
], TuiComboBoxComponent.prototype, "datalist", void 0);
__decorate([
ContentChild(TUI_DATA_LIST_ACCESSOR)
], TuiComboBoxComponent.prototype, "accessor", void 0);
__decorate([
ViewChild(TuiHostedDropdownComponent)
], TuiComboBoxComponent.prototype, "hostedDropdown", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiComboBoxComponent.prototype, "textfield", void 0);
__decorate([
tuiPure
], TuiComboBoxComponent.prototype, "computeContext", null);
TuiComboBoxComponent = TuiComboBoxComponent_1 = __decorate([
Component({
selector: 'tui-combo-box',
template: "<tui-hosted-dropdown\n class=\"hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"datalist || ''\"\n [(open)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-primitive-textfield\n automation-id=\"tui-combo-box__textfield\"\n class=\"textfield\"\n [pseudoFocused]=\"computedFocused\"\n [pseudoHovered]=\"computedHovered\"\n [invalid]=\"computedInvalid\"\n [nativeId]=\"nativeId\"\n [readOnly]=\"readOnly\"\n [iconContent]=\"arrow\"\n [disabled]=\"computedDisabled\"\n [focusable]=\"computedFocusable\"\n [value]=\"nativeValue\"\n (valueChange)=\"onInput($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (click)=\"toggle()\"\n (keydown.enter)=\"onFieldKeyDownEnter($event)\"\n >\n <ng-content></ng-content>\n <div\n polymorpheus-outlet\n *ngIf=\"showValueTemplate\"\n class=\"value\"\n automation-id=\"tui-combo-box__template\"\n [content]=\"computedContent\"\n [context]=\"computeContext(value, computedFocused)\"\n ></div>\n </tui-primitive-textfield>\n</tui-hosted-dropdown>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiComboBoxComponent_1; }),
},
{
provide: TUI_DATA_LIST_HOST,
useExisting: forwardRef(function () { return TuiComboBoxComponent_1; }),
},
{
provide: TUI_OPTION_CONTENT,
useValue: ɵ0,
},
FIXED_DROPDOWN_CONTROLLER_PROVIDER,
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}.hosted{display:block;border-radius:inherit}.textfield{border-radius:inherit}.value{display:flex;width:100%;align-items:center}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef))
], TuiComboBoxComponent);
return TuiComboBoxComponent;
}(AbstractTuiNullableControl));
var TuiComboBoxModule = /** @class */ (function () {
function TuiComboBoxModule() {
}
TuiComboBoxModule = __decorate([
NgModule({
imports: [
CommonModule,
PolymorpheusModule,
TuiActiveZoneModule,
TuiPrimitiveTextfieldModule,
TuiHostedDropdownModule,
TuiSelectOptionModule,
TuiArrowModule,
],
declarations: [TuiComboBoxComponent],
exports: [TuiComboBoxComponent],
})
], TuiComboBoxModule);
return TuiComboBoxModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiComboBoxComponent, TuiComboBoxModule, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-combo-box.js.map