@taiga-ui/kit
Version:
Taiga UI Angular main components kit
1 lines • 4.94 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"TuiAvatarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"tui-avatar","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":21},"member":"OnPush"},"template":"<img\n *ngIf=\"isUrlValid\"\n class=\"image\"\n loading=\"lazy\"\n [attr.alt]=\"text\"\n [src]=\"avatarUrl\"\n (error)=\"onError()\"\n/>\n<span class=\"text\">{{computedText}}</span>\n","styles":[":host{position:relative;display:flex;flex-shrink:0;border-radius:var(--tui-radius-m);color:var(--tui-secondary-active);text-align:center;text-transform:uppercase;justify-content:center;align-items:center;background-color:currentColor;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}:host[data-tui-host-size=xs]{font:var(--tui-font-text-s);width:24px;height:24px}:host[data-tui-host-size='s']{font:var(--tui-font-text-m);width:32px;height:32px}:host[data-tui-host-size='m']{font:var(--tui-font-text-l);width:48px;height:48px}:host[data-tui-host-size='l']{font:var(--tui-font-heading-5);width:64px;height:64px;border-radius:var(--tui-radius-l)}:host[data-tui-host-size=xl]{font:var(--tui-font-heading-3);width:96px;height:96px;border-radius:var(--tui-radius-l)}:host[data-tui-host-size=xxl]{font:var(--tui-font-heading-1);width:144px;height:144px;border-radius:var(--tui-radius-l)}:host._has-avatar{background-color:transparent}:host._rounded{border-radius:100%}.image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.text{color:var(--tui-text-01)}"]}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":13,"character":5},"arguments":["attr.data-tui-host-size"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":14,"character":5}}]}],"avatarUrlSetter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5},"arguments":["avatarUrl"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiRequiredSetter","line":18,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":25,"character":5}}]}],"autoColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":29,"character":5}}]}],"rounded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":5},"arguments":["class._rounded"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":34,"character":5}}]}],"bgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":41,"character":5},"arguments":["style.background"]}]}],"hasAvatar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":46,"character":5},"arguments":["class._has-avatar"]}]}],"onError":[{"__symbolic":"method"}]}},"TuiAvatarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14},{"__symbolic":"reference","module":"@taiga-ui/kit/directives","name":"TuiLazyLoadingModule","line":6,"character":28}],"declarations":[{"__symbolic":"reference","name":"TuiAvatarComponent"}],"exports":[{"__symbolic":"reference","name":"TuiAvatarComponent"}]}]}],"members":{}}},"origins":{"TuiAvatarComponent":"./avatar.component","TuiAvatarModule":"./avatar.module"},"importAs":"@taiga-ui/kit/components/avatar"}