@taiga-ui/kit/fesm5/taiga-ui-kit-components-badged-content.js

Taiga UI Angular main components kit

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';

var BADGE_SIZE = {
    xs: 's',
    s: 's',
    m: 's',
    l: 'm',
    xl: 'm',
    xxl: 'l',
};
var TuiBadgedContentComponent = /** @class */ (function () {
    function TuiBadgedContentComponent() {
        this.contentTop = '';
        this.contentBottom = '';
        this.size = 'm';
        this.colorTop = '';
        this.colorBottom = '';
        this.rounded = false;
    }
    Object.defineProperty(TuiBadgedContentComponent.prototype, "topNotification", {
        get: function () {
            return (!this.contentTop && this.colorTop) ||
                (this.contentTop && this.contentIsNumber(this.contentTop) && this.badgeHidden)
                ? this.colorTop
                : '';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiBadgedContentComponent.prototype, "bottomNotification", {
        get: function () {
            return !this.contentBottom && this.colorBottom ? this.colorBottom : '';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiBadgedContentComponent.prototype, "badgeSize", {
        get: function () {
            return BADGE_SIZE[this.size];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiBadgedContentComponent.prototype, "badgeHidden", {
        get: function () {
            return this.size === 'xs';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiBadgedContentComponent.prototype, "sizeBig", {
        get: function () {
            return sizeBigger(this.size);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiBadgedContentComponent.prototype, "boxShadow", {
        get: function () {
            var borderWidth = this.sizeBig ? 3 : 2;
            return "0 0 0 " + borderWidth + "px";
        },
        enumerable: true,
        configurable: true
    });
    TuiBadgedContentComponent.prototype.contentIsNumber = function (content) {
        return isNumber(content.valueOf());
    };
    TuiBadgedContentComponent.prototype.contentIsString = function (content) {
        return typeof content.valueOf() === 'string';
    };
    TuiBadgedContentComponent.prototype.getStatus = function (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);
    return TuiBadgedContentComponent;
}());

var TuiBadgedContentModule = /** @class */ (function () {
    function TuiBadgedContentModule() {
    }
    TuiBadgedContentModule = __decorate([
        NgModule({
            imports: [CommonModule, PolymorpheusModule, TuiSvgModule, TuiBadgeModule],
            declarations: [TuiBadgedContentComponent],
            exports: [TuiBadgedContentComponent],
        })
    ], TuiBadgedContentModule);
    return TuiBadgedContentModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { TuiBadgedContentComponent, TuiBadgedContentModule };
//# sourceMappingURL=taiga-ui-kit-components-badged-content.js.map