@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
409 lines (398 loc) • 30.2 kB
JavaScript
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Directive, ContentChild, ViewContainerRef, forwardRef, createComponent, EnvironmentInjector, INJECTOR, Input, signal, Component, ChangeDetectionStrategy, NgZone, DestroyRef, ChangeDetectorRef, isSignal, ViewEncapsulation, ContentChildren } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiQueryListChanges, tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsNativeFocused, tuiMoveFocus, tuiIsNativeFocusedIn } from '@taiga-ui/cdk/utils/focus';
import { tuiProvide, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAsAuxiliary, TUI_NOTHING_FOUND_MESSAGE } from '@taiga-ui/core/tokens';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { ReplaySubject, switchMap, combineLatest, map, startWith, timer } from 'rxjs';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
import * as i1 from '@taiga-ui/core/directives/icons';
import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
/**
* Accessor for data-list options
*/
const TUI_DATA_LIST_ACCESSOR = new InjectionToken(ngDevMode ? 'TUI_DATA_LIST_ACCESSOR' : '');
function tuiAsDataListAccessor(accessor) {
return [tuiProvide(TUI_DATA_LIST_ACCESSOR, accessor), tuiAsAuxiliary(accessor)];
}
/**
* DataList controller
*/
const TUI_DATA_LIST_HOST = new InjectionToken(ngDevMode ? 'TUI_DATA_LIST_HOST' : '');
function tuiAsDataListHost(host) {
return tuiProvide(TUI_DATA_LIST_HOST, host);
}
/**
* Content for tuiOption component
*/
const TUI_OPTION_CONTENT = new InjectionToken(ngDevMode ? 'TUI_OPTION_CONTENT' : '');
function tuiAsOptionContent(useValue) {
return {
provide: TUI_OPTION_CONTENT,
useValue,
};
}
class TuiWithOptionContent {
constructor() {
this.localContent = null;
this.globalContent = inject(TUI_OPTION_CONTENT, {
optional: true,
});
}
get content() {
return this.globalContent ?? this.localContent;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithOptionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiWithOptionContent, isStandalone: true, queries: [{ propertyName: "localContent", first: true, predicate: TUI_OPTION_CONTENT, descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithOptionContent, decorators: [{
type: Directive,
args: [{
standalone: true,
}]
}], propDecorators: { localContent: [{
type: ContentChild,
args: [TUI_OPTION_CONTENT, { descendants: true }]
}] } });
// TODO(v5): rename `TuiOptionNew` => `TuiOption` & remove [new] from selector
// TODO: Consider all use cases for aria roles
class TuiOptionNew {
constructor() {
this.vcr = inject(ViewContainerRef);
this.isMobile = inject(TUI_IS_MOBILE);
this.el = tuiInjectElement();
this.dataList = inject(forwardRef(() => TuiDataListComponent), { optional: true });
this.content = inject(TUI_OPTION_CONTENT, {
optional: true,
});
this.ref = this.content &&
createComponent(this.content, {
environmentInjector: inject(EnvironmentInjector),
elementInjector: inject(INJECTOR),
hostElement: tuiInjectElement(),
});
this.dropdown = inject(TuiDropdownDirective, {
self: true,
optional: true,
})?.ref;
this.disabled = false;
if (this.ref) {
this.vcr.insert(this.ref.hostView);
this.ref.changeDetectorRef.detectChanges();
}
}
// Preventing focus loss upon focused option removal
ngOnDestroy() {
this.dataList?.handleFocusLossIfNecessary(this.el);
}
onMouseMove() {
if (!this.isMobile &&
!tuiIsNativeFocused(this.el) &&
this.dataList &&
this.el.closest('[tuiDataListDropdownManager]')) {
this.el.focus({ preventScroll: true });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptionNew, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiOptionNew, isStandalone: true, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: { disabled: "disabled" }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptionNew, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]',
hostDirectives: [TuiWithIcons],
host: {
type: 'button',
role: 'option',
'[attr.disabled]': 'disabled || null',
'[class._with-dropdown]': 'dropdown?.()',
'(mousemove.zoneless)': 'onMouseMove()',
},
}]
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
type: Input
}] } });
// TODO(v5): remove [new] from selector
class TuiOptionWithValue {
constructor() {
this.host = inject(TUI_DATA_LIST_HOST, {
optional: true,
});
this.disabled = false;
this.value = signal(undefined);
}
// TODO(v5): use `input.required<T>()` to remove `undefined` from `this.value()`
set valueSetter(x) {
this.value.set(x);
}
onClick(value = this.value()) {
if (this.host?.handleOption && value !== undefined) {
this.host.handleOption(value);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptionWithValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiOptionWithValue, isStandalone: true, selector: "button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]", inputs: { disabled: "disabled", valueSetter: ["value", "valueSetter"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptionWithValue, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]',
host: {
'(click)': 'onClick()',
},
}]
}], propDecorators: { disabled: [{
type: Input
}], valueSetter: [{
type: Input,
args: [{ alias: 'value', required: true }]
}] } });
/**
* TODO(v5): delete
* @deprecated use `<button tuiOption new />` / `<a tuiOption new /> / `<label tuiOption new /> instead
*/
class TuiOption {
constructor() {
this.isMobile = inject(TUI_IS_MOBILE);
this.el = tuiInjectElement();
this.dataList = inject(forwardRef(() => TuiDataListComponent), { optional: true });
this.host = inject(TUI_DATA_LIST_HOST, {
optional: true,
});
this.content = inject(TUI_OPTION_CONTENT, { optional: true });
this.dropdown = inject(TuiDropdownDirective, {
self: true,
optional: true,
})?.ref;
this.disabled = false;
}
// Preventing focus loss upon focused option removal
ngOnDestroy() {
this.dataList?.handleFocusLossIfNecessary(this.el);
}
onClick() {
if (this.host?.handleOption && this.value !== undefined) {
this.host.handleOption(this.value);
}
}
onMouseMove() {
if (!this.isMobile &&
!tuiIsNativeFocused(this.el) &&
this.dataList &&
this.el.closest('[tuiDataListDropdownManager]')) {
this.el.focus({ preventScroll: true });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiOption, isStandalone: true, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: { disabled: "disabled", value: "value" }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "click": "onClick()", "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }], ngImport: i0, template: `
<ng-container *polymorpheusOutlet="content || t as text; context: {$implicit: t}">
{{ text }}
</ng-container>
<ng-template #t>
<ng-content />
</ng-template>
`, isInline: true, 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: TuiOption, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])',
imports: [PolymorpheusOutlet],
template: `
<ng-container *polymorpheusOutlet="content || t as text; context: {$implicit: t}">
{{ text }}
</ng-container>
<ng-template #t>
<ng-content />
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
hostDirectives: [TuiWithIcons],
host: {
type: 'button',
role: 'option',
'[attr.disabled]': 'disabled || null',
'[class._with-dropdown]': 'dropdown?.()',
'(click)': 'onClick()',
'(mousemove.zoneless)': 'onMouseMove()',
},
}]
}], propDecorators: { disabled: [{
type: Input
}], value: [{
type: Input
}] } });
function tuiInjectDataListSize() {
const sizes = ['s', 'm', 'l'];
const size = inject(TUI_DATA_LIST_HOST, { optional: true })?.size;
return size && sizes.includes(size) ? size : 'l';
}
// TODO: Consider aria-activedescendant for proper accessibility implementation
class TuiDataListComponent {
constructor() {
// TODO(v5): delete
this.legacyOptionsQuery = EMPTY_QUERY;
this.optionsQuery = EMPTY_QUERY;
this.ngZone = inject(NgZone);
this.destroyRef = inject(DestroyRef);
this.el = tuiInjectElement();
this.cdr = inject(ChangeDetectorRef);
this.contentReady$ = new ReplaySubject(1);
this.fallback = toSignal(inject(TUI_NOTHING_FOUND_MESSAGE));
this.empty = signal(false);
this.size = tuiInjectDataListSize();
// TODO(v5): use signal `contentChildren`
this.options = toSignal(this.contentReady$.pipe(switchMap(() => combineLatest([
tuiQueryListChanges(this.legacyOptionsQuery),
tuiQueryListChanges(this.optionsQuery),
])), map(([legacyOptions, options]) => [
...legacyOptions.map(({ value }) => value),
...options.map(({ value }) => value()),
].filter(tuiIsPresent)), startWith([])), { requireSync: true });
}
onKeyDownArrow(current, step) {
const { elements } = this;
tuiMoveFocus(elements.indexOf(current), elements, step);
}
handleFocusLossIfNecessary(element = this.el) {
if (tuiIsNativeFocusedIn(element)) {
this.origin?.focus({ preventScroll: true });
}
}
ngAfterContentInit() {
this.contentReady$.next(true);
}
// TODO: Refactor to :has after Safari support bumped to 15
ngAfterContentChecked() {
timer(0)
.pipe(tuiZonefree(this.ngZone), tuiTakeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.empty.set(!this.elements.length);
this.cdr.detectChanges();
});
}
// TODO(v5): delete
getOptions(includeDisabled = false) {
return [
...this.legacyOptionsQuery,
...this.optionsQuery,
]
.filter(({ disabled }) => includeDisabled || !disabled)
.map(({ value }) => (isSignal(value) ? value() : value))
.filter(tuiIsPresent);
}
onFocusIn(relatedTarget, currentTarget) {
if (!currentTarget.contains(relatedTarget) && !this.origin) {
this.origin = relatedTarget;
}
}
get elements() {
return Array.from(this.el.querySelectorAll('[tuiOption]'));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDataListComponent, isStandalone: true, selector: "tui-data-list", inputs: { emptyContent: "emptyContent", size: "size" }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "onFocusIn($event.relatedTarget, $event.currentTarget)", "mousedown.prevent": "(0)", "wheel.zoneless.passive": "handleFocusLossIfNecessary()", "mouseleave": "handleFocusLossIfNecessary($event.target)", "keydown.tab": "handleFocusLossIfNecessary()", "keydown.shift.tab": "handleFocusLossIfNecessary()", "keydown.arrowDown.prevent": "onKeyDownArrow($event.target, 1)", "keydown.arrowUp.prevent": "onKeyDownArrow($event.target, -1)" }, properties: { "attr.data-size": "size" } }, providers: [
tuiAsDataListAccessor(TuiDataListComponent),
{
provide: TUI_OPTION_CONTENT,
useFactory: () => inject(TuiWithOptionContent, { optional: true })?.content ??
// TODO(v5): remove when all legacy controls are deleted
inject(TUI_OPTION_CONTENT, {
host: true,
skipSelf: true,
optional: true,
}) ??
inject(TUI_OPTION_CONTENT, { skipSelf: true, optional: true }),
},
], queries: [{ propertyName: "legacyOptionsQuery", predicate: i0.forwardRef(function () { return TuiOption; }), descendants: true }, { propertyName: "optionsQuery", predicate: i0.forwardRef(function () { return TuiOptionWithValue; }), descendants: true }], ngImport: i0, template: "<ng-content />\n<div\n *ngIf=\"empty()\"\n class=\"t-empty\"\n>\n <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n {{ text }}\n </ng-container>\n</div>\n", styles: ["tui-data-list{--tui-data-list-padding: .25rem;--tui-data-list-margin: .0625rem;display:flex;font:var(--tui-font-text-m);flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding);color:var(--tui-text-tertiary)}tui-data-list:focus-within .t-trap{display:none}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background-color:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem}tui-data-list[data-size=s] [tuiOption][new]:not([tuiCell]){gap:.5rem}tui-data-list[data-size=s]>.t-empty,tui-data-list[data-size=s] [tuiOption]{--t-option-padding-inline: .375rem;font:var(--tui-font-text-s);min-block-size:2rem;padding-block-start:.3125rem;padding-block-end:.3125rem}tui-data-list[data-size=s]>.t-empty:before,tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m] [tuiOption][new]:not([tuiCell]){gap:.75rem}tui-data-list[data-size=m]>.t-empty,tui-data-list[data-size=m] [tuiOption]{--t-option-padding-inline: .5rem;font:var(--tui-font-text-s);min-block-size:2.5rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list[data-size=l]{--tui-data-list-padding: .375rem;--tui-data-list-margin: .125rem}tui-data-list[data-size=l] [tuiOption][new]:not([tuiCell]){gap:1rem}tui-data-list[data-size=l]>.t-empty,tui-data-list[data-size=l] [tuiOption]{--t-option-padding-inline: .625rem;font:var(--tui-font-text-m);min-block-size:2.75rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list>.t-empty{display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0}tui-data-list [tuiOption]:not([new]){justify-content:space-between}tui-data-list [tuiOption]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;text-align:start;color:var(--tui-text-primary);border-radius:var(--tui-radius-s);outline:none;cursor:pointer;background-clip:padding-box}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background-color:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background-color:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:not([new]):before{margin-inline-end:.5rem}tui-data-list [tuiOption]:after{font-size:1rem;margin:0 -.625rem 0 auto;border-inline-start:.5rem solid;border-inline-end:.5rem solid}tui-data-list>.t-empty,tui-data-list [tuiOption]{padding-inline-start:var(--t-option-padding-inline);padding-inline-end:var(--t-option-padding-inline)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline-start:.625rem;padding-inline-end:.625rem}tui-data-list[data-size=l] tui-opt-group:after{left:.625rem;right:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem var(--tui-data-list-padding);margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-opt-group:after{position:absolute;left:.5rem;right:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before,tui-opt-group:not(:empty)~tui-opt-group:not([data-label]):before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before,tui-opt-group:not([data-label]):before{content:\"\";padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-data-list', imports: [NgIf, PolymorpheusOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiAsDataListAccessor(TuiDataListComponent),
{
provide: TUI_OPTION_CONTENT,
useFactory: () => inject(TuiWithOptionContent, { optional: true })?.content ??
// TODO(v5): remove when all legacy controls are deleted
inject(TUI_OPTION_CONTENT, {
host: true,
skipSelf: true,
optional: true,
}) ??
inject(TUI_OPTION_CONTENT, { skipSelf: true, optional: true }),
},
], host: {
role: 'listbox',
'[attr.data-size]': 'size',
'(focusin)': 'onFocusIn($event.relatedTarget, $event.currentTarget)',
'(mousedown.prevent)': '(0)',
'(wheel.zoneless.passive)': 'handleFocusLossIfNecessary()',
'(mouseleave)': 'handleFocusLossIfNecessary($event.target)',
'(keydown.tab)': 'handleFocusLossIfNecessary()',
'(keydown.shift.tab)': 'handleFocusLossIfNecessary()',
'(keydown.arrowDown.prevent)': 'onKeyDownArrow($event.target, 1)',
'(keydown.arrowUp.prevent)': 'onKeyDownArrow($event.target, -1)',
}, template: "<ng-content />\n<div\n *ngIf=\"empty()\"\n class=\"t-empty\"\n>\n <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n {{ text }}\n </ng-container>\n</div>\n", styles: ["tui-data-list{--tui-data-list-padding: .25rem;--tui-data-list-margin: .0625rem;display:flex;font:var(--tui-font-text-m);flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding);color:var(--tui-text-tertiary)}tui-data-list:focus-within .t-trap{display:none}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background-color:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem}tui-data-list[data-size=s] [tuiOption][new]:not([tuiCell]){gap:.5rem}tui-data-list[data-size=s]>.t-empty,tui-data-list[data-size=s] [tuiOption]{--t-option-padding-inline: .375rem;font:var(--tui-font-text-s);min-block-size:2rem;padding-block-start:.3125rem;padding-block-end:.3125rem}tui-data-list[data-size=s]>.t-empty:before,tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m] [tuiOption][new]:not([tuiCell]){gap:.75rem}tui-data-list[data-size=m]>.t-empty,tui-data-list[data-size=m] [tuiOption]{--t-option-padding-inline: .5rem;font:var(--tui-font-text-s);min-block-size:2.5rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list[data-size=l]{--tui-data-list-padding: .375rem;--tui-data-list-margin: .125rem}tui-data-list[data-size=l] [tuiOption][new]:not([tuiCell]){gap:1rem}tui-data-list[data-size=l]>.t-empty,tui-data-list[data-size=l] [tuiOption]{--t-option-padding-inline: .625rem;font:var(--tui-font-text-m);min-block-size:2.75rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list>.t-empty{display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0}tui-data-list [tuiOption]:not([new]){justify-content:space-between}tui-data-list [tuiOption]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;text-align:start;color:var(--tui-text-primary);border-radius:var(--tui-radius-s);outline:none;cursor:pointer;background-clip:padding-box}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background-color:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background-color:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:not([new]):before{margin-inline-end:.5rem}tui-data-list [tuiOption]:after{font-size:1rem;margin:0 -.625rem 0 auto;border-inline-start:.5rem solid;border-inline-end:.5rem solid}tui-data-list>.t-empty,tui-data-list [tuiOption]{padding-inline-start:var(--t-option-padding-inline);padding-inline-end:var(--t-option-padding-inline)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline-start:.625rem;padding-inline-end:.625rem}tui-data-list[data-size=l] tui-opt-group:after{left:.625rem;right:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem var(--tui-data-list-padding);margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-opt-group:after{position:absolute;left:.5rem;right:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before,tui-opt-group:not(:empty)~tui-opt-group:not([data-label]):before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before,tui-opt-group:not([data-label]):before{content:\"\";padding:0;margin:0}\n"] }]
}], propDecorators: { legacyOptionsQuery: [{
type: ContentChildren,
args: [forwardRef(() => TuiOption), { descendants: true }]
}], optionsQuery: [{
type: ContentChildren,
args: [forwardRef(() => TuiOptionWithValue), { descendants: true }]
}], emptyContent: [{
type: Input
}], size: [{
type: Input
}] } });
class TuiDataListDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDataListDirective, isStandalone: true, selector: "ng-template[tuiDataList]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'ng-template[tuiDataList]',
}]
}] });
function tuiAsDataList(list) {
return tuiProvide(TuiDataListDirective, list);
}
class TuiOptGroup {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiOptGroup, isStandalone: true, selector: "tui-opt-group", inputs: { label: "label" }, host: { attributes: { "role": "group" }, properties: { "attr.data-label": "label" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptGroup, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'tui-opt-group',
host: {
role: 'group',
'[attr.data-label]': 'label',
},
}]
}], propDecorators: { label: [{
type: Input
}] } });
const TuiDataList = [
TuiDataListComponent,
TuiDataListDirective,
TuiOption,
TuiOptionNew,
TuiOptionWithValue,
TuiOptGroup,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_DATA_LIST_ACCESSOR, TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiDataList, TuiDataListComponent, TuiDataListDirective, TuiOptGroup, TuiOption, TuiOptionNew, TuiOptionWithValue, TuiWithOptionContent, tuiAsDataList, tuiAsDataListAccessor, tuiAsDataListHost, tuiAsOptionContent, tuiInjectDataListSize };
//# sourceMappingURL=taiga-ui-core-components-data-list.mjs.map