@taiga-ui/kit
Version:
Taiga UI Angular main components kit
74 lines • 11.6 kB
JavaScript
import { __decorate, __param } from "tslib";
import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, } from '@angular/core';
import { isNumber, tuiDefaultProp } from '@taiga-ui/cdk';
import { MODE_PROVIDER, TUI_MODE } from '@taiga-ui/core';
import { Observable } from 'rxjs';
var TuiBadgeComponent = /** @class */ (function () {
function TuiBadgeComponent(mode$) {
this.mode$ = mode$;
this.value = '';
this.size = 'm';
this.status = "default" /* Default */;
this.hoverable = false;
}
Object.defineProperty(TuiBadgeComponent.prototype, "padding", {
get: function () {
return isNumber(this.value.valueOf()) ? 'm' : 'l';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiBadgeComponent.prototype, "outputValue", {
get: function () {
if (isNumber(this.value.valueOf()) && this.value.valueOf() > 99) {
return '99+';
}
else {
return String(this.value);
}
},
enumerable: true,
configurable: true
});
TuiBadgeComponent.ctorParameters = function () { return [
{ 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);
return TuiBadgeComponent;
}());
export { TuiBadgeComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHRhaWdhLXVpL2tpdC9jb21wb25lbnRzL2JhZGdlLyIsInNvdXJjZXMiOlsiYmFkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxXQUFXLEVBQ1gsTUFBTSxFQUNOLEtBQUssR0FDUixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsUUFBUSxFQUFFLGNBQWMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2RCxPQUFPLEVBQUMsYUFBYSxFQUFFLFFBQVEsRUFBb0MsTUFBTSxnQkFBZ0IsQ0FBQztBQUUxRixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBWWhDO0lBb0JJLDJCQUF1QyxLQUF1QztRQUF2QyxVQUFLLEdBQUwsS0FBSyxDQUFrQztRQWpCOUUsVUFBSyxHQUFvQixFQUFFLENBQUM7UUFLNUIsU0FBSSxHQUF3QixHQUFHLENBQUM7UUFLaEMsV0FBTSwyQkFBZ0M7UUFLdEMsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUUrRCxDQUFDO0lBR2xGLHNCQUFJLHNDQUFPO2FBQVg7WUFDSSxPQUFPLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDO1FBQ3RELENBQUM7OztPQUFBO0lBRUQsc0JBQUksMENBQVc7YUFBZjtZQUNJLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRTtnQkFDN0QsT0FBTyxLQUFLLENBQUM7YUFDaEI7aUJBQU07Z0JBQ0gsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQzdCO1FBQ0wsQ0FBQzs7O09BQUE7O2dCQWI2QyxVQUFVLHVCQUEzQyxNQUFNLFNBQUMsUUFBUTs7SUFqQjVCO1FBRkMsS0FBSyxFQUFFO1FBQ1AsY0FBYyxFQUFFO29EQUNXO0lBSzVCO1FBSEMsS0FBSyxFQUFFO1FBQ1AsV0FBVyxDQUFDLHlCQUF5QixDQUFDO1FBQ3RDLGNBQWMsRUFBRTttREFDZTtJQUtoQztRQUhDLEtBQUssRUFBRTtRQUNQLFdBQVcsQ0FBQywyQkFBMkIsQ0FBQztRQUN4QyxjQUFjLEVBQUU7cURBQ3FCO0lBS3RDO1FBSEMsS0FBSyxFQUFFO1FBQ1AsV0FBVyxDQUFDLGtCQUFrQixDQUFDO1FBQy9CLGNBQWMsRUFBRTt3REFDQztJQUtsQjtRQURDLFdBQVcsQ0FBQyw0QkFBNEIsQ0FBQztvREFHekM7SUF6QlEsaUJBQWlCO1FBVjdCLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxXQUFXO1lBQ3JCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1lBQy9DLFFBQVEsRUFBRSxpQkFBaUI7WUFFM0IsU0FBUyxFQUFFLENBQUMsYUFBYSxDQUFDO1lBQzFCLElBQUksRUFBRTtnQkFDRixvQkFBb0IsRUFBRSxPQUFPO2FBQ2hDOztTQUNKLENBQUM7UUFxQmUsV0FBQSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUE7T0FwQnBCLGlCQUFpQixDQWtDN0I7SUFBRCx3QkFBQztDQUFBLEFBbENELElBa0NDO1NBbENZLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIEluamVjdCxcbiAgICBJbnB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2lzTnVtYmVyLCB0dWlEZWZhdWx0UHJvcH0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge01PREVfUFJPVklERVIsIFRVSV9NT0RFLCBUdWlCcmlnaHRuZXNzLCBUdWlTaXplTCwgVHVpU2l6ZVN9IGZyb20gJ0B0YWlnYS11aS9jb3JlJztcbmltcG9ydCB7VHVpU3RhdHVzfSBmcm9tICdAdGFpZ2EtdWkva2l0L2VudW1zJztcbmltcG9ydCB7T2JzZXJ2YWJsZX0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndHVpLWJhZGdlJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICB0ZW1wbGF0ZTogJ3t7b3V0cHV0VmFsdWV9fScsXG4gICAgc3R5bGVVcmxzOiBbJy4vYmFkZ2Uuc3R5bGUubGVzcyddLFxuICAgIHByb3ZpZGVyczogW01PREVfUFJPVklERVJdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJygkLmRhdGEtbW9kZS5hdHRyKSc6ICdtb2RlJCcsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQmFkZ2VDb21wb25lbnQge1xuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICB2YWx1ZTogbnVtYmVyIHwgc3RyaW5nID0gJyc7XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLXR1aS1ob3N0LXNpemUnKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgc2l6ZTogVHVpU2l6ZVMgfCBUdWlTaXplTCA9ICdtJztcblxuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtdHVpLWhvc3Qtc3RhdHVzJylcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIHN0YXR1czogVHVpU3RhdHVzID0gVHVpU3RhdHVzLkRlZmF1bHQ7XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX2hvdmVyYWJsZScpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBob3ZlcmFibGUgPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKEBJbmplY3QoVFVJX01PREUpIHJlYWRvbmx5IG1vZGUkOiBPYnNlcnZhYmxlPFR1aUJyaWdodG5lc3MgfCBudWxsPikge31cblxuICAgIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLXR1aS1ob3N0LXBhZGRpbmcnKVxuICAgIGdldCBwYWRkaW5nKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBpc051bWJlcih0aGlzLnZhbHVlLnZhbHVlT2YoKSkgPyAnbScgOiAnbCc7XG4gICAgfVxuXG4gICAgZ2V0IG91dHB1dFZhbHVlKCk6IHN0cmluZyB7XG4gICAgICAgIGlmIChpc051bWJlcih0aGlzLnZhbHVlLnZhbHVlT2YoKSkgJiYgdGhpcy52YWx1ZS52YWx1ZU9mKCkgPiA5OSkge1xuICAgICAgICAgICAgcmV0dXJuICc5OSsnO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgcmV0dXJuIFN0cmluZyh0aGlzLnZhbHVlKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==