@taiga-ui/kit
Version:
Taiga UI Angular main components kit
1 lines • 11.5 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"TuiBadgedContentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"tui-badged-content","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":17,"character":21},"member":"OnPush"},"template":"<ng-content></ng-content>\n\n<div\n *ngIf=\"topNotification\"\n class=\"notification notification_top\"\n [style.background]=\"topNotification\"\n [style.boxShadow]=\"boxShadow\"\n></div>\n\n<div\n *ngIf=\"bottomNotification\"\n class=\"notification notification_bottom\"\n [style.background]=\"bottomNotification\"\n [style.boxShadow]=\"boxShadow\"\n></div>\n\n<div\n *ngIf=\"contentTop\"\n polymorpheus-outlet\n class=\"content content_top\"\n [style.boxShadow]=\"boxShadow\"\n [content]=\"contentTop\"\n>\n <ng-template let-content>\n <tui-badge\n *ngIf=\"contentIsNumber(content) && !badgeHidden\"\n [status]=\"getStatus(colorTop)\"\n [style.backgroundColor]=\"colorTop\"\n [size]=\"badgeSize\"\n [value]=\"contentTop\"\n ></tui-badge>\n <tui-svg\n *ngIf=\"contentIsString(content)\"\n class=\"icon\"\n [style.color]=\"colorTop\"\n [src]=\"content\"\n ></tui-svg>\n </ng-template>\n</div>\n\n<div\n polymorpheus-outlet\n *ngIf=\"contentBottom && sizeBig\"\n class=\"content content_bottom\"\n [style.boxShadow]=\"boxShadow\"\n [content]=\"contentBottom\"\n>\n <ng-template let-content>\n <tui-badge\n *ngIf=\"contentIsNumber(content)\"\n [status]=\"getStatus(colorBottom)\"\n [style.backgroundColor]=\"colorBottom\"\n [size]=\"badgeSize\"\n [value]=\"contentBottom\"\n ></tui-badge>\n <tui-svg\n *ngIf=\"contentIsString(content)\"\n class=\"icon\"\n [style.color]=\"colorBottom\"\n [src]=\"content\"\n ></tui-svg>\n </ng-template>\n</div>\n","styles":[":host{position:relative;display:inline-block;color:var(--tui-base-01)}.notification{position:absolute;border-radius:100%;box-shadow:0 0 0 2px currentColor}.notification:not([data-tui-background]){background-color:currentColor}:host[data-tui-host-size='m']:not(._rounded) .notification_top,:host[data-tui-host-size='s']:not(._rounded) .notification_top,:host[data-tui-host-size=xs]:not(._rounded) .notification_top{top:-2px;right:-2px}:host[data-tui-host-size='l']:not(._rounded) .notification_top,:host[data-tui-host-size=xl]:not(._rounded) .notification_top{top:-4px;right:-4px}:host[data-tui-host-size=xxl]:not(._rounded) .notification_top{top:-8px;right:-8px}:host[data-tui-host-size=xs]._rounded .notification_top{top:0;right:0}:host[data-tui-host-size='s']._rounded .notification_top{top:1px;right:1px}:host[data-tui-host-size='m']._rounded .notification_top{top:3px;right:3px}:host[data-tui-host-size='l']._rounded .notification_top{top:4px;right:4px}:host[data-tui-host-size=xl]._rounded .notification_top{top:6px;right:6px}:host[data-tui-host-size=xxl]._rounded .notification_top{top:8px;right:8px}:host[data-tui-host-size='m']:not(._rounded) .notification_bottom{bottom:-2px;right:-2px}:host[data-tui-host-size='l']:not(._rounded) .notification_bottom,:host[data-tui-host-size=xl]:not(._rounded) .notification_bottom{bottom:-4px;right:-4px}:host[data-tui-host-size=xxl]:not(._rounded) .notification_bottom{bottom:-8px;right:-8px}:host[data-tui-host-size='m']._rounded .notification_bottom{bottom:3px;right:3px}:host[data-tui-host-size='l']._rounded .notification_bottom{bottom:4px;right:4px}:host[data-tui-host-size=xl]._rounded .notification_bottom{bottom:6px;right:6px}:host[data-tui-host-size=xxl]._rounded .notification_bottom{bottom:8px;right:8px}:host[data-tui-host-size='m'] .notification,:host[data-tui-host-size='s'] .notification,:host[data-tui-host-size=xs] .notification{width:8px;height:8px}:host[data-tui-host-size='l'] .notification{width:12px;height:12px}:host[data-tui-host-size=xl] .notification{width:16px;height:16px}:host[data-tui-host-size=xxl] .notification{width:24px;height:24px}.icon[data-tui-color=normal],.notification[data-tui-color=normal]{color:var(--tui-base-06)}.icon[data-tui-color=onDark],.notification[data-tui-color=onDark]{color:var(--tui-secondary)}.icon[data-tui-color=gray],.notification[data-tui-color=gray]{color:var(--tui-base-03)}.icon[data-tui-color=warning],.notification[data-tui-color=warning]{color:var(--tui-primary)}.icon[data-tui-color=secondary],.notification[data-tui-color=secondary]{color:var(--tui-info-fill)}.icon[data-tui-color=highlight],.icon[data-tui-color=white],.notification[data-tui-color=highlight],.notification[data-tui-color=white]{color:var(--tui-base-01)}.icon[data-tui-color=transparent-dark],.notification[data-tui-color=transparent-dark]{color:var(--tui-clear)}.icon[data-tui-color=transparent-light],.notification[data-tui-color=transparent-light]{color:var(--tui-clear-inverse)}:host[data-tui-host-size='m'] .icon,:host[data-tui-host-size='s'] .icon{width:24px;height:24px;margin:-2px}:host[data-tui-host-size='l'] .icon,:host[data-tui-host-size=xl] .icon{transform:scale(1.2)}:host[data-tui-host-size=xxl] .icon{transform:scale(1.6)}.content{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:100px;overflow:hidden;background-color:currentColor;box-shadow:0 0 0 2px currentColor}:host[data-tui-host-size='l'][data-tui-host-top]:not(._rounded) .content_top,:host[data-tui-host-size=xxl][data-tui-host-top]:not(._rounded) .content_top{right:-8px;top:-8px}:host[data-tui-host-size=xl][data-tui-host-top]:not(._rounded) .content_top{right:-6px;top:-6px}:host[data-tui-host-size='m'][data-tui-host-top]:not(._rounded) .content_top,:host[data-tui-host-size='s'][data-tui-host-top]:not(._rounded) .content_top,:host[data-tui-host-size=xs][data-tui-host-top]:not(._rounded) .content_top{right:-4px;top:-4px}:host[data-tui-host-size=xxl][data-tui-host-top]._rounded .content_top{right:4px;top:4px}:host[data-tui-host-size=xl][data-tui-host-top]._rounded .content_top{right:2px;top:2px}:host[data-tui-host-size='l'][data-tui-host-top]._rounded .content_top,:host[data-tui-host-size='m'][data-tui-host-top]._rounded .content_top,:host[data-tui-host-size='s'][data-tui-host-top]._rounded .content_top,:host[data-tui-host-size=xs][data-tui-host-top]._rounded .content_top{right:-4px;top:-4px}:host[data-tui-host-size='l'][data-tui-host-bottom]:not(._rounded) .content_bottom,:host[data-tui-host-size=xxl][data-tui-host-bottom]:not(._rounded) .content_bottom{bottom:-8px;right:-8px}:host[data-tui-host-size=xl][data-tui-host-bottom]:not(._rounded) .content_bottom{bottom:-6px;right:-6px}:host[data-tui-host-size='m'][data-tui-host-bottom]:not(._rounded) .content_bottom{bottom:-4px;right:-4px}:host[data-tui-host-size=xxl][data-tui-host-bottom]._rounded .content_bottom{bottom:4px;right:4px}:host[data-tui-host-size=xl][data-tui-host-bottom]._rounded .content_bottom{bottom:2px;right:2px}:host[data-tui-host-size='l'][data-tui-host-bottom]._rounded .content_bottom,:host[data-tui-host-size='m'][data-tui-host-bottom]._rounded .content_bottom{bottom:-4px;right:-4px}:host[data-tui-host-size=xxl] .content{height:32px;min-width:32px}:host[data-tui-host-size='l'] .content,:host[data-tui-host-size=xl] .content{height:24px;min-width:24px}:host[data-tui-host-size='m'] .content,:host[data-tui-host-size='s'] .content{height:20px;min-width:20px}:host[data-tui-host-size=xs] .content{height:16px;min-width:16px}"]}]}],"members":{"contentTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":23,"character":5},"arguments":["attr.data-tui-host-top"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":24,"character":5}}]}],"contentBottom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":28,"character":5},"arguments":["attr.data-tui-host-bottom"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":29,"character":5}}]}],"size":[{"__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":["attr.data-tui-host-size"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":34,"character":5}}]}],"colorTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":38,"character":5}}]}],"colorBottom":[{"__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}}]}],"rounded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":46,"character":5},"arguments":["class._rounded"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":47,"character":5}}]}],"contentIsNumber":[{"__symbolic":"method"}],"contentIsString":[{"__symbolic":"method"}],"getStatus":[{"__symbolic":"method"}]}},"TuiBadgedContentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":14},{"__symbolic":"reference","module":"@tinkoff/ng-polymorpheus","name":"PolymorpheusModule","line":8,"character":28},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiSvgModule","line":8,"character":48},{"__symbolic":"reference","module":"@taiga-ui/kit/components/badge","name":"TuiBadgeModule","line":8,"character":62}],"declarations":[{"__symbolic":"reference","name":"TuiBadgedContentComponent"}],"exports":[{"__symbolic":"reference","name":"TuiBadgedContentComponent"}]}]}],"members":{}}},"origins":{"TuiBadgedContentComponent":"./badged-content.component","TuiBadgedContentModule":"./badged-content.module"},"importAs":"@taiga-ui/kit/components/badged-content"}