@taiga-ui/kit
Version:
Taiga UI Angular main components kit
50 lines (45 loc) • 10.8 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Directive } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/directives/appearance';
import { tuiAppearanceOptionsProvider, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
import * as i2 from '@taiga-ui/core/directives/icons';
import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const TUI_BADGE_DEFAULT_OPTIONS = {
appearance: '',
size: 'l',
};
const [TUI_BADGE_OPTIONS, tuiBadgeOptionsProvider] = tuiCreateOptions(TUI_BADGE_DEFAULT_OPTIONS);
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-badge-5.7.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiBadge]:where(*[data-tui-version=\"5.7.0\"]){--t-icon-size: 1rem;--t-padding: 0 .5rem;--t-size: var(--tui-height-xs);--t-margin: -.25rem;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:middle;max-inline-size:100%;gap:calc(var(--t-gap, 0rem) - 2 * var(--t-margin, 0rem));border-radius:6rem;justify-content:center;background:#959595;color:var(--tui-background-base);padding:var(--t-padding);block-size:var(--t-size);min-inline-size:var(--t-size);inline-size:fit-content;font:var(--tui-typography-body-s)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>img,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiAvatar],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>tui-badge,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiBadge],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiRadio],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiSwitch],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiCheckbox],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{margin:var(--t-margin)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiStatus]:before{inline-size:.375rem;block-size:.375rem;margin:0}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{font-size:var(--t-icon-size)!important}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=negative]{--t-status: var(--tui-status-negative)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=positive]{--t-status: var(--tui-status-positive)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=warning]{--t-status: var(--tui-status-warning)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=info]{--t-status: var(--tui-status-info)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=neutral]{--t-status: var(--tui-status-neutral)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{--t-padding: 0 .3125rem;--t-size: 1rem;--t-icon-size: .625rem;--t-margin: -.125rem;font:var(--tui-typography-ui-2xs)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=s][tuiStatus]:before{inline-size:.25rem;block-size:.25rem;margin-inline-end:-.125rem}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-padding: 0 .375rem;--t-size: 1.25rem;--t-icon-size: .75rem;--t-margin: -.125rem}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=xl]{--t-margin: -.25rem;--t-padding: 0 .75rem;--t-size: var(--tui-height-s);font:var(--tui-typography-body-m)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=xl][tuiStatus]:before{inline-size:.5rem;block-size:.5rem;margin-inline-end:-.125rem}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=negative],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=positive],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=warning],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=info],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=neutral]{color:var(--tui-text-primary)}img[tuiBadge]:where(*[data-tui-version=\"5.7.0\"]){padding:0;inline-size:var(--t-size)}tui-icon[tuiBadge]:where(*[data-tui-version=\"5.7.0\"]):before{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;--t-margin: 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-badge-${TUI_VERSION}`, styles: ["[tuiBadge]:where(*[data-tui-version=\"5.7.0\"]){--t-icon-size: 1rem;--t-padding: 0 .5rem;--t-size: var(--tui-height-xs);--t-margin: -.25rem;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:middle;max-inline-size:100%;gap:calc(var(--t-gap, 0rem) - 2 * var(--t-margin, 0rem));border-radius:6rem;justify-content:center;background:#959595;color:var(--tui-background-base);padding:var(--t-padding);block-size:var(--t-size);min-inline-size:var(--t-size);inline-size:fit-content;font:var(--tui-typography-body-s)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>img,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiAvatar],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>tui-badge,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiBadge],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiRadio],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiSwitch],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>[tuiCheckbox],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{margin:var(--t-margin)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiStatus]:before{inline-size:.375rem;block-size:.375rem;margin:0}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{font-size:var(--t-icon-size)!important}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=negative]{--t-status: var(--tui-status-negative)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=positive]{--t-status: var(--tui-status-positive)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=warning]{--t-status: var(--tui-status-warning)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=info]{--t-status: var(--tui-status-info)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=neutral]{--t-status: var(--tui-status-neutral)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{--t-padding: 0 .3125rem;--t-size: 1rem;--t-icon-size: .625rem;--t-margin: -.125rem;font:var(--tui-typography-ui-2xs)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=s][tuiStatus]:before{inline-size:.25rem;block-size:.25rem;margin-inline-end:-.125rem}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-padding: 0 .375rem;--t-size: 1.25rem;--t-icon-size: .75rem;--t-margin: -.125rem}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=xl]{--t-margin: -.25rem;--t-padding: 0 .75rem;--t-size: var(--tui-height-s);font:var(--tui-typography-body-m)}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[data-size=xl][tuiStatus]:before{inline-size:.5rem;block-size:.5rem;margin-inline-end:-.125rem}[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=negative],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=positive],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=warning],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=info],[tuiBadge]:where(*[data-tui-version=\"5.7.0\"])[tuiAppearance][data-appearance=neutral]{color:var(--tui-text-primary)}img[tuiBadge]:where(*[data-tui-version=\"5.7.0\"]){padding:0;inline-size:var(--t-size)}tui-icon[tuiBadge]:where(*[data-tui-version=\"5.7.0\"]):before{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;--t-margin: 0}\n"] }]
}] });
class TuiBadge {
constructor() {
this.nothing = tuiWithStyles(Styles);
this.size = input(inject(TUI_BADGE_OPTIONS).size);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiBadge, isStandalone: true, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, providers: [tuiAppearanceOptionsProvider(TUI_BADGE_OPTIONS)], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiWithIcons }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBadge, decorators: [{
type: Directive,
args: [{
// tui-icon[tuiBadge] is required to avoid double matching of TuiIcons
selector: '[tuiBadge],tui-icon[tuiBadge]',
providers: [tuiAppearanceOptionsProvider(TUI_BADGE_OPTIONS)],
hostDirectives: [TuiWithAppearance, TuiWithIcons],
host: { '[attr.data-size]': 'size()' },
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_BADGE_DEFAULT_OPTIONS, TUI_BADGE_OPTIONS, TuiBadge, tuiBadgeOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-badge.mjs.map