@taiga-ui/kit
Version:
Taiga UI Angular main components kit
152 lines (147 loc) • 7.05 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ContentChild, TemplateRef, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiNullableControl, TUI_DEFAULT_IDENTITY_MATCHER, isNativeFocused, setNativeFocused, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { TuiTextfieldCleanerDirective, TUI_TEXTFIELD_CLEANER, TuiDataListDirective, TuiPrimitiveTextfieldComponent, TuiHostedDropdownComponent, 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 TuiSelectComponent_1;
const ɵ0 = TUI_SELECT_OPTION;
let TuiSelectComponent = TuiSelectComponent_1 = class TuiSelectComponent extends AbstractTuiNullableControl {
constructor(control, changeDetectorRef, textfieldCleaner) {
super(control, changeDetectorRef);
this.textfieldCleaner = textfieldCleaner;
this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
this.valueContent = '';
this.arrow = TUI_ARROW;
this.datalist = '';
}
get nativeFocusableElement() {
return this.textfield ? this.textfield.nativeFocusableElement : null;
}
get focused() {
return (isNativeFocused(this.nativeFocusableElement) ||
(!!this.hostedDropdown && this.hostedDropdown.focused));
}
get computedValue() {
return this.value === null ? '' : String(this.value) || ' ';
}
get computedContent() {
return this.valueContent || this.computedValue;
}
get canOpen() {
return !this.computedDisabled && !this.readOnly;
}
onValueChange(value) {
if (!value) {
this.updateValue(null);
}
}
onActiveZone(active) {
this.updateFocused(active);
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onKeyDownDelete() {
if (this.textfieldCleaner.cleaner) {
this.updateValue(null);
}
}
handleOption(option) {
this.focusInput();
this.updateValue(option);
if (this.hostedDropdown) {
this.hostedDropdown.updateOpen(false);
}
}
computeContext($implicit, active) {
return {
$implicit,
active,
};
}
focusInput(preventScroll = false) {
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, preventScroll);
}
}
};
TuiSelectComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: TuiTextfieldCleanerDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_CLEANER,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiSelectComponent.prototype, "identityMatcher", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiSelectComponent.prototype, "valueContent", void 0);
__decorate([
ContentChild(TuiDataListDirective, { read: TemplateRef })
], TuiSelectComponent.prototype, "datalist", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiSelectComponent.prototype, "textfield", void 0);
__decorate([
ViewChild(TuiHostedDropdownComponent)
], TuiSelectComponent.prototype, "hostedDropdown", void 0);
__decorate([
tuiPure
], TuiSelectComponent.prototype, "computeContext", null);
TuiSelectComponent = TuiSelectComponent_1 = __decorate([
Component({
selector: 'tui-select',
template: "<tui-hosted-dropdown\n class=\"hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"datalist || ''\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-primitive-textfield\n automation-id=\"tui-select__textfield\"\n class=\"textfield\"\n [editable]=\"false\"\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]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (keydown.delete.prevent)=\"onKeyDownDelete()\"\n (keydown.backspace.prevent)=\"onKeyDownDelete()\"\n >\n <ng-content></ng-content>\n <div\n *ngIf=\"value !== null\"\n polymorpheus-outlet\n class=\"value\"\n automation-id=\"tui-select__value\"\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(() => TuiSelectComponent_1),
},
{
provide: TUI_DATA_LIST_HOST,
useExisting: forwardRef(() => TuiSelectComponent_1),
},
{
provide: TUI_OPTION_CONTENT,
useValue: ɵ0,
},
FIXED_DROPDOWN_CONTROLLER_PROVIDER,
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}:host:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}:host._readonly ::ng-deep input{cursor:default}.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)),
__param(2, Inject(TUI_TEXTFIELD_CLEANER))
], TuiSelectComponent);
let TuiSelectModule = class TuiSelectModule {
};
TuiSelectModule = __decorate([
NgModule({
imports: [
CommonModule,
PolymorpheusModule,
TuiActiveZoneModule,
TuiPrimitiveTextfieldModule,
TuiHostedDropdownModule,
TuiSelectOptionModule,
TuiArrowModule,
],
declarations: [TuiSelectComponent],
exports: [TuiSelectComponent],
})
], TuiSelectModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiSelectComponent, TuiSelectModule, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-select.js.map