@taiga-ui/kit
Version:
Taiga UI Angular main components kit
140 lines (135 loc) • 6.48 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { DOCUMENT, CommonModule } from '@angular/common';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, HostBinding, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiControl, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR } from '@taiga-ui/cdk';
import { TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent, TUI_VALUE_ACCESSOR_PROVIDER, TuiSvgModule, TuiHintModule, TuiPrimitiveTextfieldModule, TuiNotificationsModule } from '@taiga-ui/core';
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
import { Subject, merge, of, timer, Observable } from 'rxjs';
import { switchMap, mapTo, startWith } from 'rxjs/operators';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
var TuiInputCopyComponent_1;
// @dynamic
let TuiInputCopyComponent = TuiInputCopyComponent_1 = class TuiInputCopyComponent extends AbstractTuiControl {
constructor(control, changeDetectorRef, documentRef, textfieldSize, copyTexts$) {
super(control, changeDetectorRef);
this.documentRef = documentRef;
this.textfieldSize = textfieldSize;
this.copyTexts$ = copyTexts$;
this.successMessage = '';
this.messageDirection = 'bottom-left';
this.messageMode = null;
this.copy$ = new Subject();
}
get hasValue() {
return !!this.value;
}
get hintText$() {
return this.copyTexts$.pipe(switchMap(texts => this.copy$.pipe(switchMap(() => merge(of(this.successMessage || texts[1]), timer(3000).pipe(mapTo(texts[0])))), startWith(texts[0]))));
}
get nativeFocusableElement() {
return this.computedDisabled || !this.textfield
? null
: this.textfield.nativeFocusableElement;
}
get focused() {
return !!this.textfield && this.textfield.focused;
}
get icon() {
return this.textfieldSize.size === 's' ? 'tuiIconCopy' : 'tuiIconCopyLarge';
}
onValueChange(value) {
this.updateValue(value);
}
onFocused(focused) {
this.updateFocused(focused);
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onPressed(pressed) {
this.updatePressed(pressed);
}
copy() {
if (!this.textfield || !this.textfield.nativeFocusableElement) {
return;
}
this.textfield.nativeFocusableElement.select();
this.documentRef.execCommand('copy');
this.copy$.next();
}
getFallbackValue() {
return '';
}
};
TuiInputCopyComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: TuiTextfieldSizeDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_SIZE,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_COPY_TEXTS,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCopyComponent.prototype, "successMessage", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCopyComponent.prototype, "messageDirection", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCopyComponent.prototype, "messageMode", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputCopyComponent.prototype, "textfield", void 0);
__decorate([
HostBinding('class._has-value')
], TuiInputCopyComponent.prototype, "hasValue", null);
__decorate([
tuiPure
], TuiInputCopyComponent.prototype, "hintText$", null);
TuiInputCopyComponent = TuiInputCopyComponent_1 = __decorate([
Component({
selector: 'tui-input-copy',
template: "<tui-primitive-textfield\n class=\"textfield\"\n [pseudoFocused]=\"pseudoFocused\"\n [pseudoHovered]=\"pseudoHovered\"\n [pseudoPressed]=\"pseudoPressed\"\n [invalid]=\"computedInvalid\"\n [focusable]=\"focusable\"\n [nativeId]=\"nativeId\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [iconContent]=\"!disabled ? iconContent : null\"\n [value]=\"value\"\n (valueChange)=\"onValueChange($event)\"\n (focusedChange)=\"onFocused($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (pressedChange)=\"onPressed($event)\"\n>\n <ng-content></ng-content>\n</tui-primitive-textfield>\n\n<ng-template #iconContent>\n <tui-svg\n automation-id=\"tui-copy__icon\"\n class=\"icon\"\n tuiHintId=\"not_required\"\n [tuiHint]=\"hint\"\n [tuiHintDirection]=\"messageDirection\"\n [tuiHintMode]=\"messageMode\"\n [src]=\"icon\"\n (click)=\"copy()\"\n ></tui-svg>\n</ng-template>\n\n<ng-template #hint>\n <div polymorpheus-outlet [content]=\"hintText$ | async\"></div>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
TUI_VALUE_ACCESSOR_PROVIDER,
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputCopyComponent_1),
},
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}.icon{position:relative;cursor:pointer;pointer-events:auto;color:var(--tui-base-06)}:host:not(._has-value) .icon{pointer-events:none;opacity:var(--tui-disabled-opacity)}.textfield{border-radius:inherit}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(DOCUMENT)),
__param(3, Inject(TUI_TEXTFIELD_SIZE)),
__param(4, Inject(TUI_COPY_TEXTS))
], TuiInputCopyComponent);
let TuiInputCopyModule = class TuiInputCopyModule {
};
TuiInputCopyModule = __decorate([
NgModule({
imports: [
CommonModule,
PolymorpheusModule,
TuiSvgModule,
TuiHintModule,
TuiPrimitiveTextfieldModule,
TuiNotificationsModule,
],
declarations: [TuiInputCopyComponent],
exports: [TuiInputCopyComponent],
})
], TuiInputCopyModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputCopyComponent, TuiInputCopyModule };
//# sourceMappingURL=taiga-ui-kit-components-input-copy.js.map