@taiga-ui/kit
Version:
Taiga UI Angular main components kit
111 lines (106 loc) • 10.6 kB
JavaScript
import { __decorate } from 'tslib';
import { Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { isNumber, tuiDefaultProp } from '@taiga-ui/cdk';
import { sizeBigger, TuiSvgModule } from '@taiga-ui/core';
import { CommonModule } from '@angular/common';
import { TuiBadgeModule } from '@taiga-ui/kit/components/badge';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
const BADGE_SIZE = {
xs: 's',
s: 's',
m: 's',
l: 'm',
xl: 'm',
xxl: 'l',
};
let TuiBadgedContentComponent = class TuiBadgedContentComponent {
constructor() {
this.contentTop = '';
this.contentBottom = '';
this.size = 'm';
this.colorTop = '';
this.colorBottom = '';
this.rounded = false;
}
get topNotification() {
return (!this.contentTop && this.colorTop) ||
(this.contentTop && this.contentIsNumber(this.contentTop) && this.badgeHidden)
? this.colorTop
: '';
}
get bottomNotification() {
return !this.contentBottom && this.colorBottom ? this.colorBottom : '';
}
get badgeSize() {
return BADGE_SIZE[this.size];
}
get badgeHidden() {
return this.size === 'xs';
}
get sizeBig() {
return sizeBigger(this.size);
}
get boxShadow() {
const borderWidth = this.sizeBig ? 3 : 2;
return `0 0 0 ${borderWidth}px`;
}
contentIsNumber(content) {
return isNumber(content.valueOf());
}
contentIsString(content) {
return typeof content.valueOf() === 'string';
}
getStatus(color) {
return color ? "custom" /* Custom */ : "primary" /* Primary */;
}
};
__decorate([
Input(),
HostBinding('attr.data-tui-host-top'),
tuiDefaultProp()
], TuiBadgedContentComponent.prototype, "contentTop", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-bottom'),
tuiDefaultProp()
], TuiBadgedContentComponent.prototype, "contentBottom", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-size'),
tuiDefaultProp()
], TuiBadgedContentComponent.prototype, "size", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiBadgedContentComponent.prototype, "colorTop", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiBadgedContentComponent.prototype, "colorBottom", void 0);
__decorate([
Input(),
HostBinding('class._rounded'),
tuiDefaultProp()
], TuiBadgedContentComponent.prototype, "rounded", void 0);
TuiBadgedContentComponent = __decorate([
Component({
selector: 'tui-badged-content',
changeDetection: 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}"]
})
], TuiBadgedContentComponent);
let TuiBadgedContentModule = class TuiBadgedContentModule {
};
TuiBadgedContentModule = __decorate([
NgModule({
imports: [CommonModule, PolymorpheusModule, TuiSvgModule, TuiBadgeModule],
declarations: [TuiBadgedContentComponent],
exports: [TuiBadgedContentComponent],
})
], TuiBadgedContentModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiBadgedContentComponent, TuiBadgedContentModule };
//# sourceMappingURL=taiga-ui-kit-components-badged-content.js.map