@taiga-ui/kit
Version:
Taiga UI Angular main components kit
233 lines (226 loc) • 16.6 kB
JavaScript
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, signal, computed, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, Directive } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TUI_IS_MOBILE, tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiDirectiveBinding, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiButton } from '@taiga-ui/core/components/button';
import * as i2$1 from '@taiga-ui/core/components/textfield';
import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldComponent, TuiTextfieldMultiComponent, tuiAsTextfieldAccessor, TuiTextfieldBase } from '@taiga-ui/core/components/textfield';
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
import { TuiHintDirective, TuiHintOverflow } from '@taiga-ui/core/directives/hint';
import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
import * as i1 from '@taiga-ui/kit/components/chip';
import { TuiChip } from '@taiga-ui/kit/components/chip';
import { TuiFade } from '@taiga-ui/kit/directives/fade';
import { tuiInjectValue } from '@taiga-ui/kit/utils';
import { injectContext } from '@taiga-ui/polymorpheus';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
import * as i1$1 from '@taiga-ui/cdk/directives/native-validator';
import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
import { tuiInjectElement, tuiGetClipboardDataText } from '@taiga-ui/cdk/utils/dom';
import { tuiDropdownOpen, TuiDropdownDirective, TuiDropdownOpen } from '@taiga-ui/core/directives/dropdown';
import { filter } from 'rxjs';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
class TuiInputChipComponent {
constructor() {
this.options = inject(TUI_TEXTFIELD_OPTIONS);
this.context = injectContext();
this.value = tuiInjectValue();
this.mobile = inject(TUI_IS_MOBILE);
this.internal = signal(this.context.$implicit.item);
this.editing = signal(false);
this.hint = inject(TuiHintDirective, { self: true, optional: true });
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.textfield = inject(TuiTextfieldComponent);
this.disabled = tuiDirectiveBinding(TuiAppearance, 'tuiAppearanceState', computed(() => this.handlers.disabledItemHandler()(this.context.$implicit.item)
? 'disabled'
: null));
this.size = tuiDirectiveBinding(TuiChip, 'size', computed(() => (this.options.size() === 'l' ? 's' : 'xs')));
this.editable = true;
}
get index() {
return this.context.$implicit.index;
}
delete() {
this.textfield.cva?.onChange(this.value().filter((_, i) => i !== this.index));
if (!this.mobile) {
this.textfield.input?.nativeElement.focus({ preventScroll: true });
}
}
save() {
if (!this.internal()) {
this.delete();
}
else if (this.handlers.disabledItemHandler()(this.internal())) {
return;
}
const value = this.value().map((item, index) => index === this.index ? this.internal() : item);
this.textfield.cva?.onChange(value);
this.editing.set(false);
this.textfield.input?.nativeElement.focus({ preventScroll: true });
}
cancel() {
this.editing.set(false);
this.internal.set(this.context.$implicit.item);
}
edit() {
if (!this.editable ||
!this.textfield.cva?.interactive() ||
!tuiIsString(this.internal())) {
return;
}
this.editing.set(true);
setTimeout(() => this.input?.nativeElement.focus());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputChipComponent, isStandalone: true, selector: "tui-input-chip", inputs: { editable: "editable" }, host: { attributes: { "tuiChip": "" }, listeners: { "click": "editing() && $event.stopPropagation()", "keydown.backspace.prevent": "delete()", "keydown.enter.prevent": "edit()", "dblclick": "edit()" }, properties: { "class._edit": "editing()", "attr.tabIndex": "disabled() ? null : -1" }, classAttribute: "tui-interactive" }, viewQueries: [{ propertyName: "input", first: true, predicate: TuiChip, descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.TuiChip }], ngImport: i0, template: "<input\n appearance=\"\"\n enterkeyhint=\"enter\"\n tuiChip\n class=\"t-input\"\n [disabled]=\"!editing()\"\n [ngModel]=\"internal()\"\n [ngModelOptions]=\"{standalone: true}\"\n (blur)=\"cancel()\"\n (keydown.enter)=\"save()\"\n (keydown.esc)=\"cancel()\"\n (keydown.stop)=\"(0)\"\n (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n tuiFade\n tuiFadeOffset=\"0.5rem\"\n class=\"t-text\"\n [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n (mousedown.prevent.zoneless)=\"(0)\"\n>\n {{ handlers.stringify()(internal()) }}\n</div>\n<button\n *ngIf=\"textfield.cva?.interactive() && !editing() && !disabled()\"\n iconStart=\"@tui.x\"\n tabIndex=\"-1\"\n tuiIconButton\n type=\"button\"\n (click.stop)=\"delete()\"\n (pointerdown.prevent.stop.zoneless)=\"(0)\"\n>\n Remove\n</button>\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem}:host[data-state=disabled]{pointer-events:none}:host .t-input{padding:0;text-indent:.375rem;transition:none;color:var(--tui-text-primary);cursor:text;outline:none}:host .t-input:disabled{visibility:hidden}:host._edit{background:transparent}:host._edit .t-text{pointer-events:none;visibility:hidden}:host._edit:before{color:transparent;transition:none}:host-context(tui-textfield[data-size=\"s\"]){left:-.375rem;inset-inline-start:-.375rem;margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){left:-.125rem;inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){left:-.25rem;inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiHintOverflow, selector: "[tuiHintOverflow]", inputs: ["tuiHintOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-input-chip', imports: [
FormsModule,
NgIf,
ReactiveFormsModule,
TuiButton,
TuiChip,
TuiFade,
TuiHintOverflow,
], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiChip], host: {
tuiChip: '',
class: 'tui-interactive',
'[class._edit]': 'editing()',
'[attr.tabIndex]': 'disabled() ? null : -1',
'(click)': 'editing() && $event.stopPropagation()',
'(keydown.backspace.prevent)': 'delete()',
'(keydown.enter.prevent)': 'edit()',
'(dblclick)': 'edit()',
}, template: "<input\n appearance=\"\"\n enterkeyhint=\"enter\"\n tuiChip\n class=\"t-input\"\n [disabled]=\"!editing()\"\n [ngModel]=\"internal()\"\n [ngModelOptions]=\"{standalone: true}\"\n (blur)=\"cancel()\"\n (keydown.enter)=\"save()\"\n (keydown.esc)=\"cancel()\"\n (keydown.stop)=\"(0)\"\n (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n tuiFade\n tuiFadeOffset=\"0.5rem\"\n class=\"t-text\"\n [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n (mousedown.prevent.zoneless)=\"(0)\"\n>\n {{ handlers.stringify()(internal()) }}\n</div>\n<button\n *ngIf=\"textfield.cva?.interactive() && !editing() && !disabled()\"\n iconStart=\"@tui.x\"\n tabIndex=\"-1\"\n tuiIconButton\n type=\"button\"\n (click.stop)=\"delete()\"\n (pointerdown.prevent.stop.zoneless)=\"(0)\"\n>\n Remove\n</button>\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem}:host[data-state=disabled]{pointer-events:none}:host .t-input{padding:0;text-indent:.375rem;transition:none;color:var(--tui-text-primary);cursor:text;outline:none}:host .t-input:disabled{visibility:hidden}:host._edit{background:transparent}:host._edit .t-text{pointer-events:none;visibility:hidden}:host._edit:before{color:transparent;transition:none}:host-context(tui-textfield[data-size=\"s\"]){left:-.375rem;inset-inline-start:-.375rem;margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){left:-.125rem;inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){left:-.25rem;inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"] }]
}], propDecorators: { input: [{
type: ViewChild,
args: [TuiChip, { read: ElementRef }]
}], editable: [{
type: Input
}] } });
const TUI_INPUT_CHIP_DEFAULT_OPTIONS = {
separator: ',',
unique: true,
};
const [TUI_INPUT_CHIP_OPTIONS, tuiInputChipOptionsProvider] = tuiCreateOptions(TUI_INPUT_CHIP_DEFAULT_OPTIONS);
class TuiInputChipDirective extends TuiControl {
constructor() {
super(...arguments);
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.options = inject(TUI_INPUT_CHIP_OPTIONS);
this.mobile = inject(TUI_IS_MOBILE);
this.textfield = inject(TuiTextfieldMultiComponent);
this.open = tuiDropdownOpen();
this.dropdown = inject(TuiDropdownDirective);
this.enabled = tuiDirectiveBinding(TuiDropdownOpen, 'tuiDropdownEnabled', this.interactive, {});
this.sub = inject(TuiActiveZone)
.tuiActiveZoneChange.pipe(filter((active) => !active && !this.el.matches('select')), takeUntilDestroyed())
.subscribe(() => {
this.onEnter();
this.textfield.value.set('');
});
this.separator = this.options.separator;
this.unique = this.options.unique;
this.el = tuiInjectElement();
}
setValue(value) {
this.textfield.value.set('');
this.onChange(this.unique ? Array.from(new Set(value.reverse())).reverse() : value);
}
onEnter() {
const value = this.textfield.value().trim();
const items = this.separator ? value.split(this.separator) : [value];
const valid = items.filter((item) => item && !this.handlers.disabledItemHandler()(item));
if (!value || !valid.length) {
return;
}
this.setValue([...this.value(), ...valid]);
this.scrollTo();
}
onInput() {
this.open.set(!!this.dropdown.content);
if (this.separator && this.textfield.value().match(this.separator)) {
this.onEnter();
}
else {
this.scrollTo();
}
}
onPaste(event) {
const value = 'dataTransfer' in event
? event.dataTransfer?.getData('text/plain') || ''
: tuiGetClipboardDataText(event);
this.textfield.value.set(value);
this.onEnter();
}
onBackspace(key) {
// (keydown.backspace) doesn't emit event on empty input in ios safari
if (key === 'Backspace' &&
!this.textfield.value() &&
this.interactive() &&
(this.mobile || !this.textfield.item)) {
this.onChange(this.value().slice(0, -1));
}
}
scrollTo() {
const sign = this.textfield.el.matches('[dir="rtl"] :scope') ? -1 : 1;
// Allow change detection to run and add new tag to DOM
setTimeout(() => {
this.textfield.el.scrollTo({
left: sign * Number.MAX_SAFE_INTEGER,
top: Number.MAX_SAFE_INTEGER,
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputChipDirective, isStandalone: true, selector: "input[tuiInputChip]", inputs: { separator: "separator", unique: "unique" }, host: { attributes: { "enterkeyhint": "enter" }, listeners: { "keydown.enter.prevent": "onEnter()", "keydown.zoneless": "onBackspace($event.key)", "input": "onInput()", "paste.prevent": "onPaste($event)", "drop.prevent": "onPaste($event)" }, properties: { "disabled": "disabled()" } }, providers: [
tuiAsControl(TuiInputChipDirective),
tuiFallbackValueProvider([]),
tuiAsTextfieldAccessor(TuiInputChipDirective),
], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiNativeValidator }, { directive: i2$1.TuiTextfieldBase, inputs: ["invalid", "invalid", "focused", "focused", "readOnly", "readOnly", "state", "state"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'input[tuiInputChip]',
providers: [
tuiAsControl(TuiInputChipDirective),
tuiFallbackValueProvider([]),
tuiAsTextfieldAccessor(TuiInputChipDirective),
],
hostDirectives: [
TuiNativeValidator,
{
directive: TuiTextfieldBase,
inputs: ['invalid', 'focused', 'readOnly', 'state'],
},
],
host: {
enterkeyhint: 'enter',
'[disabled]': 'disabled()',
'(keydown.enter.prevent)': 'onEnter()',
'(keydown.zoneless)': 'onBackspace($event.key)',
'(input)': 'onInput()',
'(paste.prevent)': 'onPaste($event)',
'(drop.prevent)': 'onPaste($event)',
},
}]
}], propDecorators: { separator: [{
type: Input
}], unique: [{
type: Input
}] } });
const TuiInputChip = [TuiInputChipDirective, TuiInputChipComponent];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_CHIP_DEFAULT_OPTIONS, TUI_INPUT_CHIP_OPTIONS, TuiInputChip, TuiInputChipComponent, TuiInputChipDirective, tuiInputChipOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-chip.mjs.map