@taiga-ui/kit/components/tag/taiga-ui-kit-components-tag.metadata.json

Taiga UI Angular main components kit

{"__symbolic":"module","version":4,"metadata":{"ALLOWED_SPACE_REGEXP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"RegExp"},"arguments":[",|[\\s]"]},"TuiTagComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"tui-tag, a[tuiTag]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":21},"member":"OnPush"},"providers":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"MODE_PROVIDER","line":34,"character":16}],"host":{"($.data-mode.attr)":"mode$","$quoted$":["($.data-mode.attr)"]},"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","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}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":42,"character":5}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":46,"character":5}}]}],"allowSpaces":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":50,"character":5}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":54,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":58,"character":5},"arguments":["attr.data-tui-host-size"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":59,"character":5}}]}],"showLoader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":63,"character":5}}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":67,"character":5},"arguments":["attr.data-tui-host-status"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":68,"character":5}}]}],"hoverable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":72,"character":5},"arguments":["class._hoverable"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":73,"character":5}}]}],"removable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":77,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":81,"character":5},"arguments":["class._disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":82,"character":5}}]}],"autoColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":86,"character":5},"arguments":["class._autocolor"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":87,"character":5}}]}],"leftContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":91,"character":5}}]}],"edited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"editing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":97,"character":5},"arguments":["class._editing"]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":102,"character":5},"arguments":["input",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":102,"character":31}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":110,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":110,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":111,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"TUI_MODE","line":111,"character":16}]}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":110,"character":68,"context":{"typeName":"HTMLElement"},"module":"./tag.component"}]},{"__symbolic":"reference","name":"Observable","module":"rxjs","arguments":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiBrightness","line":111,"character":53}]}]}],"hasIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":130,"character":5},"arguments":["class._has-icon"]}]}],"edit":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":135,"character":5},"arguments":["keydown.enter",["$event"]]}]}],"remove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":146,"character":5},"arguments":["keydown.delete",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":147,"character":5},"arguments":["keydown.backspace",["$event"]]}]}],"onInput":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"stopEditing":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}]}},"TuiTagModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiPreventDefaultModule","line":12,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiSvgModule","line":13,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiLoaderModule","line":14,"character":8},{"__symbolic":"reference","module":"@tinkoff/ng-polymorpheus","name":"PolymorpheusModule","line":15,"character":8}],"declarations":[{"__symbolic":"reference","name":"TuiTagComponent"}],"exports":[{"__symbolic":"reference","name":"TuiTagComponent"}]}]}],"members":{}}},"origins":{"ALLOWED_SPACE_REGEXP":"./tag.component","TuiTagComponent":"./tag.component","TuiTagModule":"./tag.module"},"importAs":"@taiga-ui/kit/components/tag"}