@taiga-ui/kit
Version:
Taiga UI Angular main components kit
187 lines (182 loc) • 15.5 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, HostBinding, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl, FormsModule } from '@angular/forms';
import { AbstractTuiControl, isNativeFocused, setNativeFocused, TUI_IS_IOS, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule } from '@taiga-ui/cdk';
import { TUI_TEXTFIELD_APPEARANCE, TuiModeDirective, TuiTextfieldController, TUI_TEXTIFELD_WATCHED_CONTROLLER, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER, TEXTFIELD_CONTROLLER_PROVIDER, HINT_CONTROLLER_PROVIDER, TuiScrollbarModule, TuiTooltipModule, TuiWrapperModule } from '@taiga-ui/core';
import { CommonModule } from '@angular/common';
var TuiTextAreaComponent_1;
const DEFAULT_ROWS = 20;
const LINE_HEIGHT_M = 20;
const LINE_HEIGHT_L = 24;
let TuiTextAreaComponent = TuiTextAreaComponent_1 = class TuiTextAreaComponent extends AbstractTuiControl {
constructor(control, changeDetectorRef, appearance, isIOS, modeDirective, controller, hintController) {
super(control, changeDetectorRef);
this.appearance = appearance;
this.modeDirective = modeDirective;
this.controller = controller;
this.hintController = hintController;
this.rows = DEFAULT_ROWS;
this.expandable = false;
this.isIOS = isIOS;
}
get labelOutside() {
return this.controller.labelOutside;
}
get nativeFocusableElement() {
return this.computedDisabled || !this.focusableElement
? null
: this.focusableElement.nativeElement;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
get size() {
return this.controller.size;
}
get hasTooltip() {
return !!this.hintController.content && !this.disabled;
}
get hasValue() {
return this.value !== '';
}
get hasCounter() {
return !!this.controller.maxLength && !this.disabled && !this.readOnly;
}
get hasPlaceholder() {
return !this.controller.labelOutside || (!this.hasValue && !this.hasExampleText);
}
get hasExampleText() {
return (!!this.controller.exampleText &&
this.focused &&
!this.hasValue &&
!this.readOnly);
}
get computeMaxHeight() {
return this.expandable ? this.rows * this.lineHeight : null;
}
get hostMode() {
return this.modeDirective && this.modeDirective.mode;
}
get placeholderRaised() {
return (!this.controller.labelOutside &&
((this.computedFocused && !this.readOnly) || this.hasValue));
}
onFocused(focused) {
this.updateFocused(focused);
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onPressed(pressed) {
this.updatePressed(pressed);
}
onValue(value) {
this.updateValue(value);
}
onMouseDown(event) {
if (event.target === this.nativeFocusableElement) {
return;
}
event.preventDefault();
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement);
}
}
getFallbackValue() {
return '';
}
get lineHeight() {
return this.controller.size === 'm' ? LINE_HEIGHT_M : LINE_HEIGHT_L;
}
};
TuiTextAreaComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_IOS,] }] },
{ type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] },
{ type: TuiTextfieldController, decorators: [{ type: Inject, args: [TUI_TEXTIFELD_WATCHED_CONTROLLER,] }] },
{ type: TuiHintControllerDirective, decorators: [{ type: Inject, args: [TUI_HINT_WATCHED_CONTROLLER,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiTextAreaComponent.prototype, "rows", void 0);
__decorate([
Input(),
HostBinding('class._expandable'),
tuiDefaultProp()
], TuiTextAreaComponent.prototype, "expandable", void 0);
__decorate([
HostBinding('class._ios')
], TuiTextAreaComponent.prototype, "isIOS", void 0);
__decorate([
ViewChild('focusableElement')
], TuiTextAreaComponent.prototype, "focusableElement", void 0);
__decorate([
HostBinding('class._label-outside')
], TuiTextAreaComponent.prototype, "labelOutside", null);
__decorate([
HostBinding('attr.data-tui-host-size')
], TuiTextAreaComponent.prototype, "size", null);
__decorate([
HostBinding('class._has-tooltip')
], TuiTextAreaComponent.prototype, "hasTooltip", null);
__decorate([
HostBinding('class._has-value')
], TuiTextAreaComponent.prototype, "hasValue", null);
__decorate([
HostBinding('class._has-counter')
], TuiTextAreaComponent.prototype, "hasCounter", null);
__decorate([
HostBinding('attr.data-mode')
], TuiTextAreaComponent.prototype, "hostMode", null);
TuiTextAreaComponent = TuiTextAreaComponent_1 = __decorate([
Component({
selector: 'tui-text-area',
template: "<tui-wrapper\n automation-id=\"tui-text-area__wrapper\"\n class=\"outline\"\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focused]=\"computedFocused\"\n [hovered]=\"computedHovered\"\n [readOnly]=\"readOnly\"\n [invalid]=\"computedInvalid\"\n>\n <div\n *ngIf=\"hasCounter\"\n automation-id=\"tui-text-area__counter\"\n class=\"counter\"\n >\n {{value.length}}/{{controller.maxLength}}\n </div>\n</tui-wrapper>\n\n<label\n class=\"content\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-text-area__placeholder\"\n class=\"placeholder\"\n [class.placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"hasExampleText\"\n automation-id=\"tui-text-area__example-text\"\n class=\"example-text\"\n >\n <span class=\"example-text-inner\"> {{controller.exampleText}} </span>\n </div>\n <tui-scrollbar\n automation-id=\"tui-text-area__scrollbar\"\n class=\"box\"\n [style.maxHeight.px]=\"computeMaxHeight\"\n >\n <div class=\"input-wrapper\">\n <div class=\"relative\">\n <div class=\"pseudo-content\">{{value}} </div>\n <textarea\n #focusableElement\n automation-id=\"tui-text-area__native\"\n class=\"input\"\n [attr.maxLength]=\"controller.maxLength\"\n [id]=\"id\"\n [tuiFocusable]=\"focusable\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [readOnly]=\"readOnly\"\n (tuiFocusedChange)=\"onFocused($event)\"\n (ngModelChange)=\"onValue($event)\"\n ></textarea>\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-text-area__tooltip\"\n class=\"tooltip\"\n describeId=\"placeholer_until_accesibility_is_added\"\n [direction]=\"hintController.direction\"\n [mode]=\"hintController.mode\"\n [content]=\"hintController.content\"\n ></tui-tooltip>\n</label>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiTextAreaComponent_1),
},
TEXTFIELD_CONTROLLER_PROVIDER,
HINT_CONTROLLER_PROVIDER,
],
styles: [":host{font:var(--tui-font-text-m);position:relative;z-index:0;display:flex;flex-direction:column;min-height:108px;border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-base-01)}:host[data-tui-host-size='m']{font:var(--tui-font-text-s);min-height:88px}:host[data-tui-host-size='m']._has-counter{min-height:106px}:host[data-tui-host-size='l']._has-counter{min-height:126px}.outline{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.content{margin-top:0;margin-bottom:0;min-height:inherit;width:100%;box-sizing:border-box;overflow:hidden;cursor:text}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.content::-webkit-scrollbar,.content::-webkit-scrollbar-thumb{width:16px;height:16px;border-radius:100px;background-clip:padding-box;border:6px solid transparent}.content::-webkit-scrollbar{background-color:transparent}.content::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.content::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.content::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._disabled .content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .content{bottom:27px}.wrapper{position:relative;width:100%;height:100%;min-height:inherit;padding-bottom:7px;box-sizing:border-box}:host[data-tui-host-size='m']._label-outside .wrapper{padding-top:12px}:host[data-tui-host-size='l']._label-outside .wrapper{padding-top:16px}:host[data-tui-host-size='m']:not(._label-outside) .wrapper{padding-top:22px}:host[data-tui-host-size='l']:not(._label-outside) .wrapper{padding-top:26px}.input-wrapper{min-height:inherit;width:100%;flex:1}.relative{position:relative;min-height:inherit}.box{display:flex;min-height:100%;width:100%}:host:not(._expandable) .box{height:100%}:host._has-counter._expandable .box{margin-bottom:20px}.pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;visibility:hidden;overflow:hidden}:host[data-tui-host-size='m'] .pseudo-content{padding:0 12px}:host[data-tui-host-size='l'] .pseudo-content{padding:0 16px}:host._focused._has-tooltip .pseudo-content,:host._has-value._has-tooltip .pseudo-content{margin-right:40px}.input{padding:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;box-sizing:border-box;height:100%;resize:none;overflow:hidden}.input:-webkit-autofill,.input:-webkit-autofill:focus,.input:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}.input:focus{outline:0}:host[data-tui-host-size='m'] .input{padding:0 12px}:host[data-tui-host-size='l'] .input{padding:0 16px}:host._focused._has-tooltip .input,:host._has-value._has-tooltip .input{padding-right:40px}:host._ios .input{padding-left:13px}:host[data-mode=onDark]._disabled .input{color:var(--tui-text-03-night)}.placeholder{transition-property:transform,min-width,color,letter-spacing;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;height:20px;font-size:13px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;color:var(--tui-text-02);transform-origin:left;letter-spacing:normal;text-transform:none;position:absolute;max-width:calc(100% - 24px)}.placeholder_raised{width:114%;transform:translateY(-10px) scale(.87);max-width:calc(113% - 32px)}:host[data-tui-host-size='m'] .placeholder_raised{width:118%;transform:translateY(-8px) scale(.85);letter-spacing:.4px}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-tui-host-size='l']._focused._label-outside .placeholder,:host[data-tui-host-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-tui-host-size='l']._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-tui-host-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='m'] .placeholder{top:12px;left:12px}:host[data-tui-host-size='l'] .placeholder{font-size:15px;top:16px;left:16px}:host._has-tooltip .placeholder{max-width:calc(100% - 52px)}.example-text{position:absolute;max-width:calc(100% - 24px);color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._has-tooltip._focused .example-text,:host._has-tooltip._has-value .example-text{max-width:calc(100% - 52px)}.tooltip{position:absolute;top:16px;right:12px}.counter{font:var(--tui-font-text-s);position:absolute;bottom:8px;right:12px;pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .counter{color:var(--tui-text-03-night)}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TUI_TEXTFIELD_APPEARANCE)),
__param(3, Inject(TUI_IS_IOS)),
__param(4, Optional()),
__param(4, Inject(TuiModeDirective)),
__param(5, Inject(TUI_TEXTIFELD_WATCHED_CONTROLLER)),
__param(6, Inject(TUI_HINT_WATCHED_CONTROLLER))
], TuiTextAreaComponent);
let TuiTextAreaModule = class TuiTextAreaModule {
};
TuiTextAreaModule = __decorate([
NgModule({
imports: [
CommonModule,
FormsModule,
TuiFocusableModule,
TuiFocusedModule,
TuiHoveredModule,
TuiScrollbarModule,
TuiTooltipModule,
TuiWrapperModule,
],
declarations: [TuiTextAreaComponent],
exports: [TuiTextAreaComponent],
})
], TuiTextAreaModule);
/**
* Generated bundle index. Do not edit.
*/
export { DEFAULT_ROWS, LINE_HEIGHT_L, LINE_HEIGHT_M, TuiTextAreaComponent, TuiTextAreaModule };
//# sourceMappingURL=taiga-ui-kit-components-text-area.js.map