@taiga-ui/kit
Version:
Taiga UI Angular main components kit
62 lines (57 loc) • 5.5 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
import { tuiIsString } 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 { tuiInjectIconResolver } 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.options = inject(TUI_LIKE_OPTIONS);
this.resolver = tuiInjectIconResolver();
this.color = '';
this.uncheckedIcon = this.options.icons.unchecked;
this.checkedIcon = this.options.icons.checked;
this.size = this.options.size;
}
getIcon(state) {
const option = state === 'checked' ? this.checkedIcon : this.uncheckedIcon;
const icon = tuiIsString(option) ? option : option(this.size);
return icon && `url(${this.resolver(icon)})`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLike, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLike, isStandalone: true, selector: "input[tuiLike][type=checkbox]", inputs: { color: ["tuiLike", "color"], uncheckedIcon: "uncheckedIcon", checkedIcon: "checkedIcon", size: "size" }, host: { attributes: { "tuiLike": "" }, properties: { "attr.data-size": "size", "attr.data-mode": "\"\"", "style.--t-icon-color": "color", "style.--t-unchecked-icon": "getIcon(\"unchecked\")", "style.--t-checked-icon": "getIcon(\"checked\")" } }, providers: [tuiAppearanceOptionsProvider(TUI_LIKE_OPTIONS)], hostDirectives: [{ directive: i1.TuiWithAppearance }], ngImport: i0, template: '', isInline: true, styles: ["[tuiLike]{--t-size: var(--tui-height-m);--t-border-width: .75rem;inline-size:var(--t-size);block-size:var(--t-size);border:var(--t-border-width) transparent solid;border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:before,[tuiLike]:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";background:currentColor;-webkit-mask:var(--t-unchecked-icon) no-repeat center / contain;mask:var(--t-unchecked-icon) no-repeat center / contain}[tuiLike]:after{-webkit-mask-image:var(--t-checked-icon);mask-image:var(--t-checked-icon);opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:checked:before{opacity:0}[tuiLike]:checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike][data-size=s]{--t-size: var(--tui-height-s);--t-border-width: .5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLike, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[tuiLike][type=checkbox]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAppearanceOptionsProvider(TUI_LIKE_OPTIONS)], hostDirectives: [TuiWithAppearance], host: {
tuiLike: '',
'[attr.data-size]': 'size',
'[attr.data-mode]': '""',
'[style.--t-icon-color]': 'color',
'[style.--t-unchecked-icon]': 'getIcon("unchecked")',
'[style.--t-checked-icon]': 'getIcon("checked")',
}, styles: ["[tuiLike]{--t-size: var(--tui-height-m);--t-border-width: .75rem;inline-size:var(--t-size);block-size:var(--t-size);border:var(--t-border-width) transparent solid;border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:before,[tuiLike]:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";background:currentColor;-webkit-mask:var(--t-unchecked-icon) no-repeat center / contain;mask:var(--t-unchecked-icon) no-repeat center / contain}[tuiLike]:after{-webkit-mask-image:var(--t-checked-icon);mask-image:var(--t-checked-icon);opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:checked:before{opacity:0}[tuiLike]:checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike][data-size=s]{--t-size: var(--tui-height-s);--t-border-width: .5rem}\n"] }]
}], propDecorators: { color: [{
type: Input,
args: ['tuiLike']
}], uncheckedIcon: [{
type: Input
}], checkedIcon: [{
type: Input
}], size: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_LIKE_OPTIONS, TuiLike, tuiLikeOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-like.mjs.map