@taiga-ui/kit/fesm2022/taiga-ui-kit-components-chip.mjs

Taiga UI Angular main components kit

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 { TUI_PLATFORM } from '@taiga-ui/cdk/tokens';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { tuiCheckboxOptionsProvider } from '@taiga-ui/core/components/checkbox';
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 { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { tuiSwitchOptionsProvider } from '@taiga-ui/kit/components/switch';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';

const TUI_CHIP_DEFAULT_OPTIONS = {
    appearance: 'neutral',
    size: 's',
};
const [TUI_CHIP_OPTIONS, tuiChipOptionsProvider] = tuiCreateOptions(TUI_CHIP_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-chip-5.7.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiChip]:where(*[data-tui-version=\"5.7.0\"]){--t-gap: .125rem;--t-margin: -.125rem;--t-icon-size: 1rem;--t-padding: 0 .625rem;--t-size: var(--tui-height-s);-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;gap:calc(var(--t-gap, 0rem) - 2 * var(--t-margin, 0rem));font:var(--tui-typography-body-s);border-radius:var(--tui-radius-m);padding:var(--t-padding);block-size:var(--t-size);inline-size:fit-content;max-inline-size:100%;isolation:isolate}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>img,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiAvatar],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>tui-badge,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiBadge],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiRadio],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiSwitch],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiCheckbox],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{margin:var(--t-margin)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{font-size:var(--t-icon-size)!important}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiIconButton]{margin:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiBadge]{margin-inline-end:0}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xxs]{--t-gap: 0rem;--t-padding: 0 .25rem;--t-size: 1rem;--t-icon-size: .75rem;font:var(--tui-typography-body-xs);border-radius:var(--tui-radius-xs)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xxs]>[tuiIconButton]{margin:-.5rem;transform:scale(.75)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xs]{--t-padding: 0 .375rem;--t-size: var(--tui-height-xs);border-radius:var(--tui-radius-xs)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xs]>[tuiIconButton]{margin:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-margin: -.375rem;--t-icon-size: 1.5rem;--t-padding: 0 1rem;--t-size: var(--tui-height-m);font:var(--tui-typography-body-m)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]>[tuiIconButton]{margin:-.75rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]>[tuiBadge]{margin-inline-start:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>img,[tuiChip]:where(*[data-tui-version=\"5.7.0\"]) [tuiAvatar]{inline-size:1.5rem;margin-inline-start:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiFade]:first-of-type{flex:1 0 30%;max-inline-size:fit-content}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiFade]:last-of-type{flex:0 1 auto}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>input[tuiChip]{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;margin:0}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>input[tuiChip][type=checkbox],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>input[tuiChip][type=radio]{z-index:-1}input[tuiChip]:where(*[data-tui-version=\"5.7.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:text}\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-chip-${TUI_VERSION}`, styles: ["[tuiChip]:where(*[data-tui-version=\"5.7.0\"]){--t-gap: .125rem;--t-margin: -.125rem;--t-icon-size: 1rem;--t-padding: 0 .625rem;--t-size: var(--tui-height-s);-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;gap:calc(var(--t-gap, 0rem) - 2 * var(--t-margin, 0rem));font:var(--tui-typography-body-s);border-radius:var(--tui-radius-m);padding:var(--t-padding);block-size:var(--t-size);inline-size:fit-content;max-inline-size:100%;isolation:isolate}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>img,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiAvatar],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>tui-badge,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiBadge],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiRadio],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiSwitch],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiCheckbox],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{margin:var(--t-margin)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>tui-icon,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:before,[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[tuiIcons]:after{font-size:var(--t-icon-size)!important}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiIconButton]{margin:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiBadge]{margin-inline-end:0}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xxs]{--t-gap: 0rem;--t-padding: 0 .25rem;--t-size: 1rem;--t-icon-size: .75rem;font:var(--tui-typography-body-xs);border-radius:var(--tui-radius-xs)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xxs]>[tuiIconButton]{margin:-.5rem;transform:scale(.75)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xs]{--t-padding: 0 .375rem;--t-size: var(--tui-height-xs);border-radius:var(--tui-radius-xs)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=xs]>[tuiIconButton]{margin:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-margin: -.375rem;--t-icon-size: 1.5rem;--t-padding: 0 1rem;--t-size: var(--tui-height-m);font:var(--tui-typography-body-m)}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]>[tuiIconButton]{margin:-.75rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]>[tuiBadge]{margin-inline-start:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>img,[tuiChip]:where(*[data-tui-version=\"5.7.0\"]) [tuiAvatar]{inline-size:1.5rem;margin-inline-start:-.375rem}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiFade]:first-of-type{flex:1 0 30%;max-inline-size:fit-content}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>[tuiFade]:last-of-type{flex:0 1 auto}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>input[tuiChip]{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;margin:0}[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>input[tuiChip][type=checkbox],[tuiChip]:where(*[data-tui-version=\"5.7.0\"])>input[tuiChip][type=radio]{z-index:-1}input[tuiChip]:where(*[data-tui-version=\"5.7.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:text}\n"] }]
        }] });
class TuiChip {
    constructor() {
        this.nothing = tuiWithStyles(Styles);
        this.size = input(inject(TUI_CHIP_OPTIONS).size);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiChip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiChip, isStandalone: true, selector: "[tuiChip]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, providers: [
            tuiAppearanceOptionsProvider(TUI_CHIP_OPTIONS),
            tuiSwitchOptionsProvider({ size: 's' }),
            tuiCheckboxOptionsProvider({ size: 's' }),
            tuiAvatarOptionsProvider(() => ({
                size: 'xs',
                round: inject(TUI_PLATFORM) !== 'web',
            })),
            tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
        ], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiWithIcons }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiChip, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tuiChip]',
                    providers: [
                        tuiAppearanceOptionsProvider(TUI_CHIP_OPTIONS),
                        tuiSwitchOptionsProvider({ size: 's' }),
                        tuiCheckboxOptionsProvider({ size: 's' }),
                        tuiAvatarOptionsProvider(() => ({
                            size: 'xs',
                            round: inject(TUI_PLATFORM) !== 'web',
                        })),
                        tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
                    ],
                    hostDirectives: [TuiWithAppearance, TuiWithIcons],
                    host: { '[attr.data-size]': 'size()' },
                }]
        }] });

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

export { TUI_CHIP_DEFAULT_OPTIONS, TUI_CHIP_OPTIONS, TuiChip, tuiChipOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-chip.mjs.map