@taiga-ui/kit
Version:
Taiga UI Angular main components kit
70 lines (65 loc) • 5.9 kB
JavaScript
import * as i0 from '@angular/core';
import { input, inject, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import '@taiga-ui/cdk/constants';
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 { TuiIcons } from '@taiga-ui/core/directives/icons';
import { TUI_ICON_START, TUI_ICON_END } from '@taiga-ui/core/tokens';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const [TUI_LIKE_OPTIONS, tuiLikeOptionsProvider] = tuiCreateOptions({
size: 'm',
appearance: 'secondary',
icons: {
unchecked: '@tui.heart',
checked: '@tui.heart-filled',
},
});
class TuiLike {
constructor() {
this.color = input('', { alias: 'tuiLike' });
this.size = input(inject(TUI_LIKE_OPTIONS).size);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLike, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TuiLike, isStandalone: true, selector: "input[tuiLike][type=checkbox]", inputs: { color: { classPropertyName: "color", publicName: "tuiLike", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiLike": "" }, properties: { "attr.data-mode": "\"\"", "attr.data-size": "size()", "style.--t-icon-color": "color()" } }, providers: [
tuiAppearanceOptionsProvider(TUI_LIKE_OPTIONS),
{
provide: TUI_ICON_START,
useFactory: () => inject(TUI_LIKE_OPTIONS).icons.unchecked,
},
{
provide: TUI_ICON_END,
useFactory: () => inject(TUI_LIKE_OPTIONS).icons.checked,
},
], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiIcons, inputs: ["iconStart", "uncheckedIcon", "iconEnd", "checkedIcon"] }], ngImport: i0, template: '', isInline: true, styles: ["[tuiLike]:where(*[data-tui-version=\"5.7.0\"]){inline-size:1em;block-size:1em;font-size:var(--tui-height-m);border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):before,[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;font-size:1.25rem;transition-property:transform,opacity}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):after{opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):checked:before{opacity:0}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{font-size:var(--tui-height-s)}[tuiLike]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:before,[tuiLike]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:after{font-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLike, decorators: [{
type: Component,
args: [{ selector: 'input[tuiLike][type=checkbox]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiAppearanceOptionsProvider(TUI_LIKE_OPTIONS),
{
provide: TUI_ICON_START,
useFactory: () => inject(TUI_LIKE_OPTIONS).icons.unchecked,
},
{
provide: TUI_ICON_END,
useFactory: () => inject(TUI_LIKE_OPTIONS).icons.checked,
},
], hostDirectives: [
TuiWithAppearance,
{
directive: TuiIcons,
inputs: ['iconStart: uncheckedIcon', 'iconEnd: checkedIcon'],
},
], host: {
tuiLike: '',
'[attr.data-mode]': '""',
'[attr.data-size]': 'size()',
'[style.--t-icon-color]': 'color()',
}, styles: ["[tuiLike]:where(*[data-tui-version=\"5.7.0\"]){inline-size:1em;block-size:1em;font-size:var(--tui-height-m);border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):before,[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;font-size:1.25rem;transition-property:transform,opacity}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):after{opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):checked:before{opacity:0}[tuiLike]:where(*[data-tui-version=\"5.7.0\"]):checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{font-size:var(--tui-height-s)}[tuiLike]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:before,[tuiLike]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:after{font-size:1rem}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_LIKE_OPTIONS, TuiLike, tuiLikeOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-like.mjs.map