UNPKG

@taiga-ui/kit

Version:
16 lines (14 loc) 15.9 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@taiga-ui/cdk"),require("@taiga-ui/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@taiga-ui/kit/components/text-area",["exports","@angular/core","@angular/forms","@taiga-ui/cdk","@taiga-ui/core","@angular/common"],t):t(((e=e||self)["taiga-ui"]=e["taiga-ui"]||{},e["taiga-ui"].kit=e["taiga-ui"].kit||{},e["taiga-ui"].kit.components=e["taiga-ui"].kit.components||{},e["taiga-ui"].kit.components["text-area"]={}),e.ng.core,e.ng.forms,e.cdk,e.core$1,e.ng.common)}(this,(function(e,t,o,n,i,a){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])})(e,t)};function l(e,t,o,n){var i,a=arguments.length,r=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(r=(a<3?i(r):a>3?i(t,o,r):i(t,o))||r);return a>3&&r&&Object.defineProperty(t,o,r),r}function s(e,t){return function(o,n){t(o,n,e)}}var u=function(e){function a(t,o,n,i,a,r,l){var s=e.call(this,t,o)||this;return s.appearance=n,s.modeDirective=a,s.controller=r,s.hintController=l,s.rows=20,s.expandable=!1,s.isIOS=i,s}var u;return function(e,t){function o(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}(a,e),u=a,Object.defineProperty(a.prototype,"labelOutside",{get:function(){return this.controller.labelOutside},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"nativeFocusableElement",{get:function(){return this.computedDisabled||!this.focusableElement?null:this.focusableElement.nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"focused",{get:function(){return n.isNativeFocused(this.nativeFocusableElement)},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"size",{get:function(){return this.controller.size},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hasTooltip",{get:function(){return!!this.hintController.content&&!this.disabled},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hasValue",{get:function(){return""!==this.value},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hasCounter",{get:function(){return!!this.controller.maxLength&&!this.disabled&&!this.readOnly},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hasPlaceholder",{get:function(){return!this.controller.labelOutside||!this.hasValue&&!this.hasExampleText},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hasExampleText",{get:function(){return!!this.controller.exampleText&&this.focused&&!this.hasValue&&!this.readOnly},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"computeMaxHeight",{get:function(){return this.expandable?this.rows*this.lineHeight:null},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hostMode",{get:function(){return this.modeDirective&&this.modeDirective.mode},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"placeholderRaised",{get:function(){return!this.controller.labelOutside&&(this.computedFocused&&!this.readOnly||this.hasValue)},enumerable:!0,configurable:!0}),a.prototype.onFocused=function(e){this.updateFocused(e)},a.prototype.onHovered=function(e){this.updateHovered(e)},a.prototype.onPressed=function(e){this.updatePressed(e)},a.prototype.onValue=function(e){this.updateValue(e)},a.prototype.onMouseDown=function(e){e.target!==this.nativeFocusableElement&&(e.preventDefault(),this.nativeFocusableElement&&n.setNativeFocused(this.nativeFocusableElement))},a.prototype.getFallbackValue=function(){return""},Object.defineProperty(a.prototype,"lineHeight",{get:function(){return"m"===this.controller.size?20:24},enumerable:!0,configurable:!0}),a.ctorParameters=function(){return[{type:o.NgControl,decorators:[{type:t.Optional},{type:t.Self},{type:t.Inject,args:[o.NgControl]}]},{type:t.ChangeDetectorRef,decorators:[{type:t.Inject,args:[t.ChangeDetectorRef]}]},{type:String,decorators:[{type:t.Inject,args:[i.TUI_TEXTFIELD_APPEARANCE]}]},{type:Boolean,decorators:[{type:t.Inject,args:[n.TUI_IS_IOS]}]},{type:i.TuiModeDirective,decorators:[{type:t.Optional},{type:t.Inject,args:[i.TuiModeDirective]}]},{type:i.TuiTextfieldController,decorators:[{type:t.Inject,args:[i.TUI_TEXTIFELD_WATCHED_CONTROLLER]}]},{type:i.TuiHintControllerDirective,decorators:[{type:t.Inject,args:[i.TUI_HINT_WATCHED_CONTROLLER]}]}]},l([t.Input(),n.tuiDefaultProp()],a.prototype,"rows",void 0),l([t.Input(),t.HostBinding("class._expandable"),n.tuiDefaultProp()],a.prototype,"expandable",void 0),l([t.HostBinding("class._ios")],a.prototype,"isIOS",void 0),l([t.ViewChild("focusableElement")],a.prototype,"focusableElement",void 0),l([t.HostBinding("class._label-outside")],a.prototype,"labelOutside",null),l([t.HostBinding("attr.data-tui-host-size")],a.prototype,"size",null),l([t.HostBinding("class._has-tooltip")],a.prototype,"hasTooltip",null),l([t.HostBinding("class._has-value")],a.prototype,"hasValue",null),l([t.HostBinding("class._has-counter")],a.prototype,"hasCounter",null),l([t.HostBinding("attr.data-mode")],a.prototype,"hostMode",null),a=u=l([t.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}}&nbsp;</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:t.ChangeDetectionStrategy.OnPush,providers:[{provide:n.TUI_FOCUSABLE_ITEM_ACCESSOR,useExisting:t.forwardRef((function(){return u}))},i.TEXTFIELD_CONTROLLER_PROVIDER,i.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)}"]}),s(0,t.Optional()),s(0,t.Self()),s(0,t.Inject(o.NgControl)),s(1,t.Inject(t.ChangeDetectorRef)),s(2,t.Inject(i.TUI_TEXTFIELD_APPEARANCE)),s(3,t.Inject(n.TUI_IS_IOS)),s(4,t.Optional()),s(4,t.Inject(i.TuiModeDirective)),s(5,t.Inject(i.TUI_TEXTIFELD_WATCHED_CONTROLLER)),s(6,t.Inject(i.TUI_HINT_WATCHED_CONTROLLER))],a)}(n.AbstractTuiControl),d=function(){function e(){}return e=l([t.NgModule({imports:[a.CommonModule,o.FormsModule,n.TuiFocusableModule,n.TuiFocusedModule,n.TuiHoveredModule,i.TuiScrollbarModule,i.TuiTooltipModule,i.TuiWrapperModule],declarations:[u],exports:[u]})],e)}();e.DEFAULT_ROWS=20,e.LINE_HEIGHT_L=24,e.LINE_HEIGHT_M=20,e.TuiTextAreaComponent=u,e.TuiTextAreaModule=d,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=taiga-ui-kit-components-text-area.umd.min.js.map