@taiga-ui/layout
Version:
A package with Taiga UI layout components
103 lines (99 loc) • 7.25 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { tuiInjectElement, tuiIsElement, tuiContainsOrAfter } from '@taiga-ui/cdk/utils/dom';
import { tuiGetClosestFocusable } from '@taiga-ui/cdk/utils/focus';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldComponent, TuiWithTextfield } from '@taiga-ui/core/components/textfield';
import { TuiIcons } from '@taiga-ui/core/directives/icons';
import { TuiPopupService } from '@taiga-ui/core/directives/popup';
import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import { tuiCellOptionsProvider } from '@taiga-ui/layout/components/cell';
import { TUI_INPUT_SEARCH } from '@taiga-ui/layout/tokens';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
class TuiInputSearch {
constructor() {
this.el = tuiInjectElement();
this.service = inject(TuiPopupService);
this.textfield = inject(TuiTextfieldComponent);
this.i18n = toSignal(inject(TUI_INPUT_SEARCH));
this.parent = this.textfield.el.parentElement;
this.neighbor = this.textfield.el.nextSibling;
this.placeholder = '';
this.icon = tuiDirectiveBinding(TuiIcons, 'iconStart', inject(TUI_COMMON_ICONS).search, {});
this.tuiInputSearchOpen = false;
this.tuiInputSearchOpenChange = new EventEmitter();
}
ngOnChanges() {
if (this.tuiInputSearchOpen) {
this.open();
}
else {
this.close();
}
}
open() {
if (this.ref?.destroyed === false || !this.template) {
return;
}
this.placeholder = this.el.placeholder;
this.parent = this.textfield.el.parentElement;
this.neighbor = this.textfield.el.nextSibling;
this.ref = this.service.addTemplate(this.template);
this.ref.rootNodes[0]?.insertAdjacentElement('afterbegin', this.textfield.el);
this.el.focus({ preventScroll: true });
this.el.placeholder = this.i18n()?.placeholder || this.el.placeholder;
this.tuiInputSearchOpen = true;
this.tuiInputSearchOpenChange.emit(true);
}
close() {
this.el.placeholder = this.placeholder || this.el.placeholder;
this.parent?.insertBefore(this.textfield.el, this.neighbor);
this.ref?.destroy();
this.tuiInputSearchOpen = false;
this.tuiInputSearchOpenChange.emit(false);
}
onArrow() {
tuiGetClosestFocusable({
initial: this.container?.nativeElement || this.el,
root: this.container?.nativeElement || this.el,
})?.focus();
}
onFocus({ target }) {
if (this.container &&
target !== this.el &&
tuiIsElement(target) &&
!tuiContainsOrAfter(this.container.nativeElement, target)) {
this.close();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputSearch, isStandalone: true, selector: "input[tuiInputSearch]", inputs: { tuiInputSearch: "tuiInputSearch", tuiInputSearchOpen: "tuiInputSearchOpen" }, outputs: { tuiInputSearchOpenChange: "tuiInputSearchOpenChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "focus": "open()", "keydown.tab.prevent": "0", "keydown.arrowDown.prevent": "onArrow()" } }, providers: [tuiCellOptionsProvider({ size: 'm' })], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.TuiWithTextfield }], ngImport: i0, template: "<ng-template>\n <div\n tuiTheme=\"dark\"\n class=\"t-container\"\n (document:focusin)=\"onFocus($event)\"\n (keydown.esc)=\"close()\"\n (pointerdown.self)=\"close()\"\n >\n <div\n #container\n class=\"t-content\"\n >\n <ng-container *polymorpheusOutlet=\"tuiInputSearch\" />\n </div>\n </div>\n</ng-template>\n", styles: [".t-container{position:fixed;top:0;left:0;bottom:0;right:0;display:grid;gap:.25rem;grid-template:-webkit-min-content / minmax(auto,50rem);grid-template:min-content / minmax(auto,50rem);place-content:start center;padding:.5rem;background:var(--tui-service-backdrop);box-shadow:0 0 0 5rem var(--tui-service-backdrop)}.t-container ::ng-deep>tui-textfield{background:var(--tui-background-base-alt)}.t-content{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputSearch, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[tuiInputSearch]', imports: [PolymorpheusOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiCellOptionsProvider({ size: 'm' })], hostDirectives: [TuiWithTextfield], host: {
ngSkipHydration: 'true',
'(focus)': 'open()',
'(keydown.tab.prevent)': '0',
'(keydown.arrowDown.prevent)': 'onArrow()',
}, template: "<ng-template>\n <div\n tuiTheme=\"dark\"\n class=\"t-container\"\n (document:focusin)=\"onFocus($event)\"\n (keydown.esc)=\"close()\"\n (pointerdown.self)=\"close()\"\n >\n <div\n #container\n class=\"t-content\"\n >\n <ng-container *polymorpheusOutlet=\"tuiInputSearch\" />\n </div>\n </div>\n</ng-template>\n", styles: [".t-container{position:fixed;top:0;left:0;bottom:0;right:0;display:grid;gap:.25rem;grid-template:-webkit-min-content / minmax(auto,50rem);grid-template:min-content / minmax(auto,50rem);place-content:start center;padding:.5rem;background:var(--tui-service-backdrop);box-shadow:0 0 0 5rem var(--tui-service-backdrop)}.t-container ::ng-deep>tui-textfield{background:var(--tui-background-base-alt)}.t-content{overflow:hidden}\n"] }]
}], propDecorators: { template: [{
type: ViewChild,
args: [TemplateRef]
}], container: [{
type: ViewChild,
args: ['container']
}], tuiInputSearch: [{
type: Input
}], tuiInputSearchOpen: [{
type: Input
}], tuiInputSearchOpenChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputSearch };
//# sourceMappingURL=taiga-ui-layout-components-input-search.mjs.map