UNPKG

@taiga-ui/kit

Version:
16 lines (14 loc) 13.8 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@taiga-ui/cdk"),require("@taiga-ui/core"),require("@taiga-ui/kit/utils/format"),require("rxjs"),require("@angular/common"),require("@angular/forms"),require("@tinkoff/ng-polymorpheus")):"function"==typeof define&&define.amd?define("@taiga-ui/kit/components/tag",["exports","@angular/core","@taiga-ui/cdk","@taiga-ui/core","@taiga-ui/kit/utils/format","rxjs","@angular/common","@angular/forms","@tinkoff/ng-polymorpheus"],e):e(((t=t||self)["taiga-ui"]=t["taiga-ui"]||{},t["taiga-ui"].kit=t["taiga-ui"].kit||{},t["taiga-ui"].kit.components=t["taiga-ui"].kit.components||{},t["taiga-ui"].kit.components.tag={}),t.ng.core,t.cdk,t.core$1,t["taiga-ui"].kit.utils.format,t.rxjs,t.ng.common,t.ng.forms,t.ngPolymorpheus)}(this,(function(t,e,o,i,a,r,n,s,u){"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. ***************************************************************************** */function d(t,e,o,i){var a,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(r<3?a(n):r>3?a(e,o,n):a(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n}function h(t,e){return function(o,i){e(o,i,t)}}var l=new RegExp(",|[\\s]"),c=function(){function t(t,o){this.elementRef=t,this.mode$=o,this.value="",this.editable=!1,this.allowSpaces=!0,this.maxLength=null,this.size="m",this.showLoader=!1,this.status="default",this.hoverable=!1,this.removable=!1,this.disabled=!1,this.autoColor=!1,this.leftContent=null,this.edited=new e.EventEmitter,this.editing=!1,this.editedText=null}return Object.defineProperty(t.prototype,"input",{set:function(t){t&&o.setNativeFocused(t.nativeElement)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"backgroundColor",{get:function(){return this.autoColor?a.stringHashToHsl(this.value):null},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"canRemove",{get:function(){return this.removable&&!this.disabled&&!this.showLoader},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"displayText",{get:function(){return null===this.editedText?this.value:this.editedText},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"loaderSize",{get:function(){return i.sizeBigger(this.size)?"s":"xs"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"hasIcon",{get:function(){return this.showLoader||this.removable},enumerable:!0,configurable:!0}),t.prototype.edit=function(t){this.canEdit&&(t.preventDefault(),this.editing=!0,this.editedText=this.value)},t.prototype.remove=function(t){this.canRemove&&(t.preventDefault(),t.stopPropagation(),this.edited.emit(""))},t.prototype.onInput=function(t){var e=this.allowSpaces?t.split(","):t.split(l);e.length>1?this.save(e.toString()):this.editedText=t},t.prototype.onKeyDown=function(t){switch(t.stopPropagation(),t.key.toLowerCase()){case"enter":t.preventDefault(),this.save(this.editedText||"");break;case"escape":case"esc":t.preventDefault(),this.stopEditing(),o.setNativeFocused(this.elementRef.nativeElement)}},t.prototype.onBlur=function(){null!==this.editedText&&this.save(this.editedText)},Object.defineProperty(t.prototype,"canEdit",{get:function(){return this.editable&&!this.disabled&&!this.showLoader},enumerable:!0,configurable:!0}),t.prototype.stopEditing=function(){this.editing=!1,this.editedText=null},t.prototype.save=function(t){this.stopEditing(),this.edited.emit(t.trim())},t.ctorParameters=function(){return[{type:e.ElementRef,decorators:[{type:e.Inject,args:[e.ElementRef]}]},{type:r.Observable,decorators:[{type:e.Inject,args:[i.TUI_MODE]}]}]},d([e.Input(),o.tuiDefaultProp()],t.prototype,"value",void 0),d([e.Input(),o.tuiDefaultProp()],t.prototype,"editable",void 0),d([e.Input(),o.tuiDefaultProp()],t.prototype,"allowSpaces",void 0),d([e.Input(),o.tuiDefaultProp()],t.prototype,"maxLength",void 0),d([e.Input(),e.HostBinding("attr.data-tui-host-size"),o.tuiDefaultProp()],t.prototype,"size",void 0),d([e.Input(),o.tuiDefaultProp()],t.prototype,"showLoader",void 0),d([e.Input(),e.HostBinding("attr.data-tui-host-status"),o.tuiDefaultProp()],t.prototype,"status",void 0),d([e.Input(),e.HostBinding("class._hoverable"),o.tuiDefaultProp()],t.prototype,"hoverable",void 0),d([e.Input(),o.tuiDefaultProp()],t.prototype,"removable",void 0),d([e.Input(),e.HostBinding("class._disabled"),o.tuiDefaultProp()],t.prototype,"disabled",void 0),d([e.Input(),e.HostBinding("class._autocolor"),o.tuiDefaultProp()],t.prototype,"autoColor",void 0),d([e.Input(),o.tuiDefaultProp()],t.prototype,"leftContent",void 0),d([e.Output()],t.prototype,"edited",void 0),d([e.HostBinding("class._editing")],t.prototype,"editing",void 0),d([e.ViewChild("input",{read:e.ElementRef})],t.prototype,"input",null),d([e.HostBinding("class._has-icon")],t.prototype,"hasIcon",null),d([e.HostListener("keydown.enter",["$event"])],t.prototype,"edit",null),d([e.HostListener("keydown.delete",["$event"]),e.HostListener("keydown.backspace",["$event"])],t.prototype,"remove",null),t=d([e.Component({selector:"tui-tag, a[tuiTag]",changeDetection:e.ChangeDetectionStrategy.OnPush,template:'<div\n class="tag"\n [style.backgroundColor]="backgroundColor"\n (dblclick)="edit($event)"\n>\n <div\n polymorpheus-outlet\n *ngIf="leftContent"\n class="left-content"\n [content]="leftContent"\n ></div>\n <span automation-id="tui-tag__text" class="text">{{displayText}}</span>\n <tui-loader\n *ngIf="showLoader"\n class="icon icon_loader"\n [inheritColor]="true"\n [size]="loaderSize"\n ></tui-loader>\n <tui-svg\n *ngIf="canRemove"\n tuiPreventDefault="mousedown"\n automation-id="tui-tag__remove"\n class="icon"\n src="tuiIconCloseLarge"\n (click)="remove($event)"\n ></tui-svg>\n</div>\n<input\n *ngIf="editing"\n #input\n automation-id="tui-tag__edit"\n class="edit"\n type="text"\n [attr.maxLength]="maxLength"\n [ngModel]="editedText"\n (ngModelChange)="onInput($event)"\n (blur)="onBlur()"\n (keydown)="onKeyDown($event)"\n/>\n',providers:[i.MODE_PROVIDER],host:{"($.data-mode.attr)":"mode$"},styles:[":host{transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);position:relative;display:inline-block;border-radius:var(--tui-radius-s);max-width:100%;cursor:default;outline:0;text-decoration:none}:host:after{transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;top:0;left:0;width:100%;height:100%;content:'';box-sizing:border-box;border-radius:inherit;pointer-events:none}:host._hoverable:active[data-tui-host-status=custom]:after,:host._hoverable:hover[data-tui-host-status=custom]:after{background-color:var(--tui-clear)}:host:focus:after{border:2px solid var(--tui-focus)}:host[data-tui-host-status=primary]{background-color:var(--tui-primary);color:var(--tui-primary-text)}:host[data-tui-host-status=primary]._hoverable:hover{background-color:var(--tui-primary-hover)}:host[data-tui-host-status=primary]._hoverable:active{background-color:var(--tui-primary-active)}:host[data-tui-host-status=error]{background-color:var(--tui-error-bg);color:var(--tui-text-01)}:host[data-tui-host-status=error]._hoverable:active,:host[data-tui-host-status=error]._hoverable:hover{background-color:var(--tui-error-bg-hover)}:host[data-tui-host-status=error][data-mode=onDark]{background-color:var(--tui-error-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=error][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=error][data-mode=onDark]._hoverable:hover{background-color:var(--tui-error-bg-night-hover)}:host[data-tui-host-status=success]{background-color:var(--tui-success-bg);color:var(--tui-text-01)}:host[data-tui-host-status=success]._hoverable:active,:host[data-tui-host-status=success]._hoverable:hover{background-color:var(--tui-success-bg-hover)}:host[data-tui-host-status=success][data-mode=onDark]{background-color:var(--tui-success-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=success][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=success][data-mode=onDark]._hoverable:hover{background-color:var(--tui-success-bg-night-hover)}:host[data-tui-host-status=warning]{background-color:var(--tui-warning-bg);color:var(--tui-text-01)}:host[data-tui-host-status=warning]._hoverable:active,:host[data-tui-host-status=warning]._hoverable:hover{background-color:var(--tui-warning-bg-hover)}:host[data-tui-host-status=warning][data-mode=onDark]{background-color:var(--tui-warning-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=warning][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=warning][data-mode=onDark]._hoverable:hover{background-color:var(--tui-warning-bg-night-hover)}:host[data-tui-host-status=default]{color:var(--tui-text-01-night);background-color:var(--tui-base-06)}:host[data-tui-host-status=default]:not([data-mode])._hoverable:hover{background-color:var(--tui-base-07)}:host[data-tui-host-status=default]:not([data-mode])._hoverable:active{background-color:var(--tui-base-08)}:host[data-tui-host-status=default][data-mode=onDark]{color:var(--tui-text-01-night);background-color:var(--tui-clear-inverse)}:host[data-tui-host-status=default][data-mode=onDark]._hoverable:hover{background-color:var(--tui-clear-inverse-hover)}:host[data-tui-host-status=default][data-mode=onDark]._hoverable:active{background-color:var(--tui-clear-inverse-active)}:host[data-tui-host-status=default][data-mode=onDark]:focus:after{border:2px solid var(--tui-base-01)}:host[data-tui-host-status=default][data-mode=onLight]{background-color:var(--tui-clear);color:var(--tui-text-01)}:host[data-tui-host-status=default][data-mode=onLight]._hoverable:hover{background-color:var(--tui-clear-hover)}:host[data-tui-host-status=default][data-mode=onLight]._hoverable:active{background-color:var(--tui-clear-active)}:host._editing{background:0 0!important}:host._disabled{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host._hoverable{cursor:pointer}:host._autocolor{color:var(--tui-text-01)}.text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.02em}.tag{position:relative;display:flex;align-items:center;border-radius:inherit;white-space:pre}:host[data-tui-host-size='s'] .tag{font:var(--tui-font-text-xs);height:20px;padding:0 8px}:host[data-tui-host-size='m'] .tag{height:var(--tui-height-xs);padding:0 8px}:host[data-tui-host-size='l'] .tag{height:var(--tui-height-s);padding:0 12px}:host._has-icon[data-tui-host-size='s'] .tag{padding-right:2px}:host._has-icon[data-tui-host-size='m'] .tag{padding-right:0}:host._has-icon[data-tui-host-size='l'] .tag{padding-right:4px}:host._editing .tag{visibility:hidden}:host._disabled._has-icon[data-tui-host-size='m'] .tag,:host._disabled._has-icon[data-tui-host-size='s'] .tag{padding-right:8px}:host._disabled._has-icon[data-tui-host-size='l'] .tag{padding-right:12px}.edit{font:var(--tui-font-text-s);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}.edit:-webkit-autofill,.edit:-webkit-autofill:focus,.edit:-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}:host[data-tui-host-size='s'] .edit{height:20px;line-height:20px;padding-left:8px}:host[data-tui-host-size='m'] .edit{height:var(--tui-height-xs);line-height:var(--tui-height-xs);padding-left:8px}:host[data-tui-host-size='l'] .edit{height:var(--tui-height-s);line-height:var(--tui-height-s);padding-left:12px}.icon{margin-left:4px;height:100%}.icon:not(.icon_loader){cursor:pointer;pointer-events:all;opacity:var(--tui-disabled-opacity)}.icon:hover{opacity:1}.icon_loader{width:16px;height:16px;margin:0 4px}:host[data-tui-host-size='s'] .icon_loader{margin:0 6px 0 12px;width:8px;height:8px}:host[data-tui-host-size='l'] .icon_loader{margin:0 4px 0 8px}.left-content{margin-right:4px;width:16px;height:16px}"]}),h(0,e.Inject(e.ElementRef)),h(1,e.Inject(i.TUI_MODE))],t)}(),p=function(){function t(){}return t=d([e.NgModule({imports:[n.CommonModule,s.FormsModule,o.TuiPreventDefaultModule,i.TuiSvgModule,i.TuiLoaderModule,u.PolymorpheusModule],declarations:[c],exports:[c]})],t)}();t.ALLOWED_SPACE_REGEXP=l,t.TuiTagComponent=c,t.TuiTagModule=p,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=taiga-ui-kit-components-tag.umd.min.js.map