@taiga-ui/layout
Version:
A package with Taiga UI layout components
155 lines (148 loc) • 14.7 kB
JavaScript
import { TuiItem } from '@taiga-ui/cdk/directives/item';
import * as i0 from '@angular/core';
import { signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, TemplateRef, ViewChild, computed, ElementRef, ContentChildren, Input } from '@angular/core';
import { tuiButtonOptionsProvider, TuiButton } from '@taiga-ui/core/components/button';
import * as i1$1 from '@taiga-ui/core/components/textfield';
import { tuiTextfieldOptionsProvider, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { tuiBlockOptionsProvider } from '@taiga-ui/kit/components/block';
import { tuiSwitchOptionsProvider } from '@taiga-ui/kit/components/switch';
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import { toSignal } from '@angular/core/rxjs-interop';
import { NgControl } from '@angular/forms';
import { ResizeObserverService } from '@ng-web-apis/resize-observer';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiZonefull, tuiQueryListChanges, tuiControlValue } from '@taiga-ui/cdk/observables';
import { tuiIsControlEmpty } from '@taiga-ui/cdk/utils/miscellaneous';
import { map, distinctUntilChanged, switchMap, merge } from 'rxjs';
import * as i1 from '@taiga-ui/core/directives/dropdown';
import { tuiDropdown, tuiDropdownOptionsProvider, TuiDropdownDirective, TuiWithDropdownOpen } from '@taiga-ui/core/directives/dropdown';
import { TUI_ICON_START } from '@taiga-ui/core/tokens';
import { TUI_COMMON_ICONS } from '@taiga-ui/layout/tokens';
class TuiSearchComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSearchComponent, isStandalone: true, selector: "search[tuiSearch]", providers: [
tuiButtonOptionsProvider({ size: 'm' }),
tuiBlockOptionsProvider({ size: 's' }),
tuiSwitchOptionsProvider({ size: 's' }),
tuiTextfieldOptionsProvider({ size: signal('m') }),
], ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["search[tuiSearch] form{display:flex;flex-direction:column;gap:.75rem}search[tuiSearch] form fieldset{display:flex;align-items:center;flex-wrap:wrap;gap:inherit;min-inline-size:0;padding:0;margin:0;border:0;color:var(--tui-text-secondary)}search[tuiSearch] form tui-items-with-more{min-inline-size:0;flex:1}search[tuiSearch] form tui-textfield,search[tuiSearch] form [tuiSearchField]{flex:1;min-inline-size:11.25rem;max-inline-size:22.5rem}search[tuiSearch] form tui-textfield:first-child,search[tuiSearch] form [tuiSearchField]:first-child{max-inline-size:unset}search[tuiSearch] form hr{inline-size:1px;block-size:1rem;background:var(--tui-border-normal)}search[tuiSearch] form tui-filter{white-space:nowrap}search[tuiSearch] form [tuiLabel]{font:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSearchComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'search[tuiSearch]', template: '<ng-content/>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiButtonOptionsProvider({ size: 'm' }),
tuiBlockOptionsProvider({ size: 's' }),
tuiSwitchOptionsProvider({ size: 's' }),
tuiTextfieldOptionsProvider({ size: signal('m') }),
], styles: ["search[tuiSearch] form{display:flex;flex-direction:column;gap:.75rem}search[tuiSearch] form fieldset{display:flex;align-items:center;flex-wrap:wrap;gap:inherit;min-inline-size:0;padding:0;margin:0;border:0;color:var(--tui-text-secondary)}search[tuiSearch] form tui-items-with-more{min-inline-size:0;flex:1}search[tuiSearch] form tui-textfield,search[tuiSearch] form [tuiSearchField]{flex:1;min-inline-size:11.25rem;max-inline-size:22.5rem}search[tuiSearch] form tui-textfield:first-child,search[tuiSearch] form [tuiSearchField]:first-child{max-inline-size:unset}search[tuiSearch] form hr{inline-size:1px;block-size:1rem;background:var(--tui-border-normal)}search[tuiSearch] form tui-filter{white-space:nowrap}search[tuiSearch] form [tuiLabel]{font:inherit}\n"] }]
}] });
class TuiSearchFilterComponent {
constructor() {
this.dropdown = tuiDropdown(null);
}
set template(template) {
this.dropdown.set(template);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSearchFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSearchFilterComponent, isStandalone: true, selector: "button[tuiSearchFilter]", providers: [
tuiDropdownOptionsProvider({ align: 'right' }),
{
provide: TUI_ICON_START,
useFactory: () => inject(TUI_COMMON_ICONS).filter,
},
], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], hostDirectives: [{ directive: i1.TuiDropdownDirective }, { directive: i1.TuiWithDropdownOpen }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>filters', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSearchFilterComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'button[tuiSearchFilter]',
template: '<ng-template><ng-content /></ng-template>filters',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
tuiDropdownOptionsProvider({ align: 'right' }),
{
provide: TUI_ICON_START,
useFactory: () => inject(TUI_COMMON_ICONS).filter,
},
],
hostDirectives: [TuiDropdownDirective, TuiWithDropdownOpen],
}]
}], propDecorators: { template: [{
type: ViewChild,
args: [TemplateRef]
}] } });
const WIDTH = 12;
class TuiSearchFiltersComponent {
constructor() {
this.children = EMPTY_QUERY;
this.controls = signal([]);
this.templates = EMPTY_QUERY;
this.overflown = toSignal(inject(ResizeObserverService, { self: true }).pipe(map((entry) => {
const width = entry[0]?.contentRect.width ?? 0;
return Math.floor((width - this.more) / WIDTH / this.unit);
}), distinctUntilChanged(), tuiZonefull()), { initialValue: 0 });
this.enabled = computed(() => this.controls().some(({ control }, index) => control && index >= this.overflown() && !tuiIsControlEmpty(control)));
this.size = 'm';
}
// TODO: Refactor to signal queries when Angular is updated
ngAfterContentInit() {
tuiQueryListChanges(this.children)
.pipe(switchMap((all) => merge(...all.map((c) => tuiControlValue(c)))), map(() => this.children.toArray()))
.subscribe((controls) => this.controls.set(controls));
}
onReset() {
this.children.forEach(({ control }, index) => {
if (control && index >= this.overflown()) {
control.setValue(null);
}
});
}
get unit() {
return this.rem?.nativeElement.offsetWidth || 16;
}
get more() {
return this.button?.nativeElement.clientWidth || 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSearchFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSearchFiltersComponent, isStandalone: true, selector: "tui-search-filters", inputs: { size: "size" }, providers: [
ResizeObserverService,
tuiButtonOptionsProvider({ size: 'xs', appearance: 'flat' }),
], queries: [{ propertyName: "children", predicate: NgControl, descendants: true }, { propertyName: "templates", predicate: TuiItem, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "rem", first: true, predicate: ["rem"], descendants: true }, { propertyName: "button", first: true, predicate: TuiButton, descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1$1.TuiTextfieldOptionsDirective, inputs: ["tuiTextfieldSize", "size"] }], ngImport: i0, template: "<ng-container *ngFor=\"let template of templates; let i = index\">\n <ng-container\n *ngIf=\"i < overflown()\"\n [ngTemplateOutlet]=\"template\"\n />\n</ng-container>\n<div\n #rem\n class=\"t-rem\"\n></div>\n<button\n *ngIf=\"overflown() < templates.length\"\n appearance=\"secondary\"\n tuiIconButton\n tuiSearchFilter\n type=\"button\"\n class=\"t-button\"\n [class._active]=\"enabled()\"\n [size]=\"size\"\n>\n <form\n class=\"t-form\"\n (reset)=\"onReset()\"\n >\n <fieldset\n class=\"t-header\"\n [disabled]=\"!enabled()\"\n >\n <ng-content />\n </fieldset>\n <ng-container *ngFor=\"let template of templates; let i = index\">\n <ng-container\n *ngIf=\"i >= overflown()\"\n [ngTemplateOutlet]=\"template\"\n />\n </ng-container>\n </form>\n</button>\n", styles: [":host{display:flex;flex:1;gap:inherit;justify-content:flex-end;min-inline-size:0}.t-rem{position:absolute;inline-size:1rem}.t-button{overflow:visible}.t-button._active:after{content:\"\";position:absolute;top:.25rem;right:.25rem;display:block;inline-size:.625rem;block-size:.625rem;background:var(--tui-status-warning);transform:translate(50%,-50%);border-radius:100%;margin:0}.t-form{display:flex;min-inline-size:25.5rem;max-inline-size:33rem;flex-direction:column;gap:.75rem;padding:0 1.5rem 1.5rem;box-sizing:border-box}.t-header{display:flex;justify-content:space-between;padding:1.25rem 0;margin:0 0 .5rem;border:none;box-shadow:inset 0 -1px var(--tui-border-normal);font:var(--tui-font-text-ui-l);font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiSearchFilterComponent, selector: "button[tuiSearchFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSearchFiltersComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-search-filters', imports: [NgForOf, NgIf, NgTemplateOutlet, TuiButton, TuiSearchFilterComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
ResizeObserverService,
tuiButtonOptionsProvider({ size: 'xs', appearance: 'flat' }),
], hostDirectives: [
{
directive: TuiTextfieldOptionsDirective,
inputs: ['tuiTextfieldSize: size'],
},
], template: "<ng-container *ngFor=\"let template of templates; let i = index\">\n <ng-container\n *ngIf=\"i < overflown()\"\n [ngTemplateOutlet]=\"template\"\n />\n</ng-container>\n<div\n #rem\n class=\"t-rem\"\n></div>\n<button\n *ngIf=\"overflown() < templates.length\"\n appearance=\"secondary\"\n tuiIconButton\n tuiSearchFilter\n type=\"button\"\n class=\"t-button\"\n [class._active]=\"enabled()\"\n [size]=\"size\"\n>\n <form\n class=\"t-form\"\n (reset)=\"onReset()\"\n >\n <fieldset\n class=\"t-header\"\n [disabled]=\"!enabled()\"\n >\n <ng-content />\n </fieldset>\n <ng-container *ngFor=\"let template of templates; let i = index\">\n <ng-container\n *ngIf=\"i >= overflown()\"\n [ngTemplateOutlet]=\"template\"\n />\n </ng-container>\n </form>\n</button>\n", styles: [":host{display:flex;flex:1;gap:inherit;justify-content:flex-end;min-inline-size:0}.t-rem{position:absolute;inline-size:1rem}.t-button{overflow:visible}.t-button._active:after{content:\"\";position:absolute;top:.25rem;right:.25rem;display:block;inline-size:.625rem;block-size:.625rem;background:var(--tui-status-warning);transform:translate(50%,-50%);border-radius:100%;margin:0}.t-form{display:flex;min-inline-size:25.5rem;max-inline-size:33rem;flex-direction:column;gap:.75rem;padding:0 1.5rem 1.5rem;box-sizing:border-box}.t-header{display:flex;justify-content:space-between;padding:1.25rem 0;margin:0 0 .5rem;border:none;box-shadow:inset 0 -1px var(--tui-border-normal);font:var(--tui-font-text-ui-l);font-weight:700}\n"] }]
}], propDecorators: { rem: [{
type: ViewChild,
args: ['rem']
}], button: [{
type: ViewChild,
args: [TuiButton, { read: ElementRef }]
}], children: [{
type: ContentChildren,
args: [NgControl, { descendants: true }]
}], templates: [{
type: ContentChildren,
args: [TuiItem, { descendants: true, read: TemplateRef }]
}], size: [{
type: Input
}] } });
const TuiSearch = [
TuiSearchComponent,
TuiSearchFiltersComponent,
TuiItem,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiSearch, TuiSearchComponent, TuiSearchFiltersComponent };
//# sourceMappingURL=taiga-ui-layout-components-search.mjs.map