UNPKG

@taiga-ui/kit

Version:
16 lines (14 loc) 11.5 kB
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@taiga-ui/cdk"),require("@taiga-ui/core"),require("@angular/common"),require("@taiga-ui/kit/components/badge"),require("@tinkoff/ng-polymorpheus")):"function"==typeof define&&define.amd?define("@taiga-ui/kit/components/badged-content",["exports","@angular/core","@taiga-ui/cdk","@taiga-ui/core","@angular/common","@taiga-ui/kit/components/badge","@tinkoff/ng-polymorpheus"],o):o(((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["badged-content"]={}),t.ng.core,t.cdk,t.core$1,t.ng.common,t["taiga-ui"].kit.components.badge,t.ngPolymorpheus)}(this,(function(t,o,i,n,e,a,s){"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 r(t,o,i,n){var e,a=arguments.length,s=a<3?o:null===n?n=Object.getOwnPropertyDescriptor(o,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,o,i,n);else for(var r=t.length-1;r>=0;r--)(e=t[r])&&(s=(a<3?e(s):a>3?e(o,i,s):e(o,i))||s);return a>3&&s&&Object.defineProperty(o,i,s),s}var d={xs:"s",s:"s",m:"s",l:"m",xl:"m",xxl:"l"},u=function(){function t(){this.contentTop="",this.contentBottom="",this.size="m",this.colorTop="",this.colorBottom="",this.rounded=!1}return Object.defineProperty(t.prototype,"topNotification",{get:function(){return!this.contentTop&&this.colorTop||this.contentTop&&this.contentIsNumber(this.contentTop)&&this.badgeHidden?this.colorTop:""},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"bottomNotification",{get:function(){return!this.contentBottom&&this.colorBottom?this.colorBottom:""},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"badgeSize",{get:function(){return d[this.size]},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"badgeHidden",{get:function(){return"xs"===this.size},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sizeBig",{get:function(){return n.sizeBigger(this.size)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"boxShadow",{get:function(){return"0 0 0 "+(this.sizeBig?3:2)+"px"},enumerable:!0,configurable:!0}),t.prototype.contentIsNumber=function(t){return i.isNumber(t.valueOf())},t.prototype.contentIsString=function(t){return"string"==typeof t.valueOf()},t.prototype.getStatus=function(t){return t?"custom":"primary"},r([o.Input(),o.HostBinding("attr.data-tui-host-top"),i.tuiDefaultProp()],t.prototype,"contentTop",void 0),r([o.Input(),o.HostBinding("attr.data-tui-host-bottom"),i.tuiDefaultProp()],t.prototype,"contentBottom",void 0),r([o.Input(),o.HostBinding("attr.data-tui-host-size"),i.tuiDefaultProp()],t.prototype,"size",void 0),r([o.Input(),i.tuiDefaultProp()],t.prototype,"colorTop",void 0),r([o.Input(),i.tuiDefaultProp()],t.prototype,"colorBottom",void 0),r([o.Input(),o.HostBinding("class._rounded"),i.tuiDefaultProp()],t.prototype,"rounded",void 0),t=r([o.Component({selector:"tui-badged-content",changeDetection:o.ChangeDetectionStrategy.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}"]})],t)}(),c=function(){function t(){}return t=r([o.NgModule({imports:[e.CommonModule,s.PolymorpheusModule,n.TuiSvgModule,a.TuiBadgeModule],declarations:[u],exports:[u]})],t)}();t.TuiBadgedContentComponent=u,t.TuiBadgedContentModule=c,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=taiga-ui-kit-components-badged-content.umd.min.js.map