@taiga-ui/kit/fesm2015/taiga-ui-kit-components-badge.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { Inject, Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { isNumber, tuiDefaultProp } from '@taiga-ui/cdk';
import { TUI_MODE, MODE_PROVIDER } from '@taiga-ui/core';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';

let TuiBadgeComponent = class TuiBadgeComponent {
    constructor(mode$) {
        this.mode$ = mode$;
        this.value = '';
        this.size = 'm';
        this.status = "default" /* Default */;
        this.hoverable = false;
    }
    get padding() {
        return isNumber(this.value.valueOf()) ? 'm' : 'l';
    }
    get outputValue() {
        if (isNumber(this.value.valueOf()) && this.value.valueOf() > 99) {
            return '99+';
        }
        else {
            return String(this.value);
        }
    }
};
TuiBadgeComponent.ctorParameters = () => [
    { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] }
];
__decorate([
    Input(),
    tuiDefaultProp()
], TuiBadgeComponent.prototype, "value", void 0);
__decorate([
    Input(),
    HostBinding('attr.data-tui-host-size'),
    tuiDefaultProp()
], TuiBadgeComponent.prototype, "size", void 0);
__decorate([
    Input(),
    HostBinding('attr.data-tui-host-status'),
    tuiDefaultProp()
], TuiBadgeComponent.prototype, "status", void 0);
__decorate([
    Input(),
    HostBinding('class._hoverable'),
    tuiDefaultProp()
], TuiBadgeComponent.prototype, "hoverable", void 0);
__decorate([
    HostBinding('attr.data-tui-host-padding')
], TuiBadgeComponent.prototype, "padding", null);
TuiBadgeComponent = __decorate([
    Component({
        selector: 'tui-badge',
        changeDetection: ChangeDetectionStrategy.OnPush,
        template: '{{outputValue}}',
        providers: [MODE_PROVIDER],
        host: {
            '($.data-mode.attr)': 'mode$',
        },
        styles: [":host{font:var(--tui-font-text-s);transition-property:background-color;transition-duration:.3s;transition-timing-function:ease-in-out;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--tui-base-01);border-radius:100px;white-space:nowrap;overflow:hidden}:host:after{transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;top:0;left:0;width:100%;height:100%;content:'';box-sizing:border-box;border-radius:inherit;pointer-events:none}:host._hoverable:active[data-tui-host-status=custom]:after,:host._hoverable:hover[data-tui-host-status=custom]:after{background-color:var(--tui-clear)}:host[data-tui-host-status=primary]{background-color:var(--tui-primary);color:var(--tui-primary-text)}:host[data-tui-host-status=primary]._hoverable:hover{background-color:var(--tui-primary-hover)}:host[data-tui-host-status=primary]._hoverable:active{background-color:var(--tui-primary-active)}:host[data-tui-host-status=error]{background-color:var(--tui-error-bg);color:var(--tui-text-01)}:host[data-tui-host-status=error]:before{content:'';color:var(--tui-error-fill)}:host[data-tui-host-status=error]._hoverable:active,:host[data-tui-host-status=error]._hoverable:hover{background-color:var(--tui-error-bg-hover)}:host[data-tui-host-status=error][data-mode=onDark]{background-color:var(--tui-error-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=error][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=error][data-mode=onDark]._hoverable:hover{background-color:var(--tui-error-bg-night-hover)}:host[data-tui-host-status=success]{background-color:var(--tui-success-bg);color:var(--tui-text-01)}:host[data-tui-host-status=success]:before{content:'';color:var(--tui-success-fill)}:host[data-tui-host-status=success]._hoverable:active,:host[data-tui-host-status=success]._hoverable:hover{background-color:var(--tui-success-bg-hover)}:host[data-tui-host-status=success][data-mode=onDark]{background-color:var(--tui-success-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=success][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=success][data-mode=onDark]._hoverable:hover{background-color:var(--tui-success-bg-night-hover)}:host[data-tui-host-status=warning]{background-color:var(--tui-warning-bg);color:var(--tui-text-01)}:host[data-tui-host-status=warning]:before{content:'';color:var(--tui-warning-fill)}:host[data-tui-host-status=warning]._hoverable:active,:host[data-tui-host-status=warning]._hoverable:hover{background-color:var(--tui-warning-bg-hover)}:host[data-tui-host-status=warning][data-mode=onDark]{background-color:var(--tui-warning-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=warning][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=warning][data-mode=onDark]._hoverable:hover{background-color:var(--tui-warning-bg-night-hover)}:host[data-tui-host-status=default]{background-color:var(--tui-base-06)}:host[data-tui-host-status=default]:not([data-mode])._hoverable:hover{background-color:var(--tui-base-07)}:host[data-tui-host-status=default]:not([data-mode])._hoverable:active{background-color:var(--tui-base-08)}:host[data-tui-host-status=default][data-mode=onDark]{background-color:var(--tui-clear-inverse)}:host[data-tui-host-status=default][data-mode=onDark]._hoverable:hover{background-color:var(--tui-clear-inverse-hover)}:host[data-tui-host-status=default][data-mode=onDark]._hoverable:active{background-color:var(--tui-clear-inverse-active)}:host[data-tui-host-status=default][data-mode=onDark]:focus:after{border:2px solid var(--tui-base-01)}:host[data-tui-host-status=default][data-mode=onLight]{background-color:var(--tui-clear);color:var(--tui-text-01)}:host[data-tui-host-status=default][data-mode=onLight]._hoverable:hover{background-color:var(--tui-clear-hover)}:host[data-tui-host-status=default][data-mode=onLight]._hoverable:active{background-color:var(--tui-clear-active)}:host._hoverable{cursor:pointer}:host[data-tui-host-padding='m']{padding:0 8px}:host[data-tui-host-padding='m'][data-tui-host-size='s']{padding:0 6px}:host[data-tui-host-padding='m'][data-tui-host-size='l']{padding:0 10px}:host[data-tui-host-padding='l']{padding:0 12px}:host[data-tui-host-padding='l'][data-tui-host-size='s']{padding:0 10px}:host[data-tui-host-size='s']{font:var(--tui-font-text-xs);height:20px;min-width:20px}:host[data-tui-host-size='m']{height:var(--tui-height-xs);line-height:var(--tui-height-xs);min-width:var(--tui-height-xs)}:host[data-tui-host-size='l']{height:var(--tui-height-s);line-height:var(--tui-height-s);min-width:var(--tui-height-s)}:host:before{display:block;background:currentColor;margin:0 6px 0 -2px;width:6px;height:6px;border-radius:100%}:host[data-tui-host-size='s'] :host:before{width:4px;height:4px}:host[data-tui-host-size='l'] :host:before{margin:0 8px 0 0;width:8px;height:8px}"]
    }),
    __param(0, Inject(TUI_MODE))
], TuiBadgeComponent);

let TuiBadgeModule = class TuiBadgeModule {
};
TuiBadgeModule = __decorate([
    NgModule({
        imports: [CommonModule],
        declarations: [TuiBadgeComponent],
        exports: [TuiBadgeComponent],
    })
], TuiBadgeModule);

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

export { TuiBadgeComponent, TuiBadgeModule };
//# sourceMappingURL=taiga-ui-kit-components-badge.js.map