@taiga-ui/kit
Version:
Taiga UI Angular main components kit
46 lines • 9.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation, } from '@angular/core';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAppearanceOptionsProvider, TuiWithAppearance, } from '@taiga-ui/core/directives/appearance';
import { tuiInjectIconResolver } from '@taiga-ui/core/tokens';
import { TUI_LIKE_OPTIONS } from './like.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/directives/appearance";
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%;content:\"\";background:currentColor;-webkit-mask:var(--t-unchecked-icon) no-repeat center / contain;mask:var(--t-unchecked-icon) no-repeat center / contain;transition-property:transform,opacity}[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 }); }
}
export { TuiLike };
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%;content:\"\";background:currentColor;-webkit-mask:var(--t-unchecked-icon) no-repeat center / contain;mask:var(--t-unchecked-icon) no-repeat center / contain;transition-property:transform,opacity}[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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlrZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9saWtlL2xpa2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsaUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUM5RCxPQUFPLEVBQ0gsNEJBQTRCLEVBQzVCLGlCQUFpQixHQUNwQixNQUFNLHNDQUFzQyxDQUFDO0FBQzlDLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBRzVELE9BQU8sRUFBQyxnQkFBZ0IsRUFBc0IsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRXJFLE1Ba0JhLE9BQU87SUFsQnBCO1FBbUJxQixZQUFPLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDbkMsYUFBUSxHQUFHLHFCQUFxQixFQUFFLENBQUM7UUFHN0MsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUdYLGtCQUFhLEdBQ2hCLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQztRQUcxQixnQkFBVyxHQUF3QyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUM7UUFHOUUsU0FBSSxHQUFhLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO0tBUTdDO0lBTmEsT0FBTyxDQUFDLEtBQW9DO1FBQ2xELE1BQU0sTUFBTSxHQUFHLEtBQUssS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDM0UsTUFBTSxJQUFJLEdBQUcsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFOUQsT0FBTyxJQUFJLElBQUksT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7SUFDakQsQ0FBQzsrR0F0QlEsT0FBTzttR0FBUCxPQUFPLHFiQVhMLENBQUMsNEJBQTRCLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxpRkFKakQsRUFBRTs7U0FlSCxPQUFPOzRGQUFQLE9BQU87a0JBbEJuQixTQUFTO2lDQUNNLElBQUksWUFDTiwrQkFBK0IsWUFDL0IsRUFBRSxpQkFFRyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsNEJBQTRCLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxrQkFDM0MsQ0FBQyxpQkFBaUIsQ0FBQyxRQUM3Qjt3QkFDRixPQUFPLEVBQUUsRUFBRTt3QkFDWCxrQkFBa0IsRUFBRSxNQUFNO3dCQUMxQixrQkFBa0IsRUFBRSxJQUFJO3dCQUN4Qix3QkFBd0IsRUFBRSxPQUFPO3dCQUNqQyw0QkFBNEIsRUFBRSxzQkFBc0I7d0JBQ3BELDBCQUEwQixFQUFFLG9CQUFvQjtxQkFDbkQ7OEJBT00sS0FBSztzQkFEWCxLQUFLO3VCQUFDLFNBQVM7Z0JBSVQsYUFBYTtzQkFEbkIsS0FBSztnQkFLQyxXQUFXO3NCQURqQixLQUFLO2dCQUlDLElBQUk7c0JBRFYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R5cGUgVHVpU3RyaW5nSGFuZGxlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay90eXBlcyc7XG5pbXBvcnQge3R1aUlzU3RyaW5nfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtcbiAgICB0dWlBcHBlYXJhbmNlT3B0aW9uc1Byb3ZpZGVyLFxuICAgIFR1aVdpdGhBcHBlYXJhbmNlLFxufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2FwcGVhcmFuY2UnO1xuaW1wb3J0IHt0dWlJbmplY3RJY29uUmVzb2x2ZXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3Rva2Vucyc7XG5pbXBvcnQge3R5cGUgVHVpU2l6ZVN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcblxuaW1wb3J0IHtUVUlfTElLRV9PUFRJT05TLCB0eXBlIFR1aUxpa2VPcHRpb25zfSBmcm9tICcuL2xpa2Uub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdpbnB1dFt0dWlMaWtlXVt0eXBlPWNoZWNrYm94XScsXG4gICAgdGVtcGxhdGU6ICcnLFxuICAgIHN0eWxlczogWydAaW1wb3J0IFwiQHRhaWdhLXVpL2tpdC9zdHlsZXMvY29tcG9uZW50cy9saWtlLmxlc3NcIjsnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW3R1aUFwcGVhcmFuY2VPcHRpb25zUHJvdmlkZXIoVFVJX0xJS0VfT1BUSU9OUyldLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbVHVpV2l0aEFwcGVhcmFuY2VdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgdHVpTGlrZTogJycsXG4gICAgICAgICdbYXR0ci5kYXRhLXNpemVdJzogJ3NpemUnLFxuICAgICAgICAnW2F0dHIuZGF0YS1tb2RlXSc6ICdcIlwiJyxcbiAgICAgICAgJ1tzdHlsZS4tLXQtaWNvbi1jb2xvcl0nOiAnY29sb3InLFxuICAgICAgICAnW3N0eWxlLi0tdC11bmNoZWNrZWQtaWNvbl0nOiAnZ2V0SWNvbihcInVuY2hlY2tlZFwiKScsXG4gICAgICAgICdbc3R5bGUuLS10LWNoZWNrZWQtaWNvbl0nOiAnZ2V0SWNvbihcImNoZWNrZWRcIiknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUxpa2Uge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3B0aW9ucyA9IGluamVjdChUVUlfTElLRV9PUFRJT05TKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJlc29sdmVyID0gdHVpSW5qZWN0SWNvblJlc29sdmVyKCk7XG5cbiAgICBASW5wdXQoJ3R1aUxpa2UnKVxuICAgIHB1YmxpYyBjb2xvciA9ICcnO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgdW5jaGVja2VkSWNvbjogVHVpU3RyaW5nSGFuZGxlcjxUdWlTaXplUz4gfCBzdHJpbmcgPVxuICAgICAgICB0aGlzLm9wdGlvbnMuaWNvbnMudW5jaGVja2VkO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgY2hlY2tlZEljb246IFR1aVN0cmluZ0hhbmRsZXI8VHVpU2l6ZVM+IHwgc3RyaW5nID0gdGhpcy5vcHRpb25zLmljb25zLmNoZWNrZWQ7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaXplOiBUdWlTaXplUyA9IHRoaXMub3B0aW9ucy5zaXplO1xuXG4gICAgcHJvdGVjdGVkIGdldEljb24oc3RhdGU6IGtleW9mIFR1aUxpa2VPcHRpb25zWydpY29ucyddKTogc3RyaW5nIHtcbiAgICAgICAgY29uc3Qgb3B0aW9uID0gc3RhdGUgPT09ICdjaGVja2VkJyA/IHRoaXMuY2hlY2tlZEljb24gOiB0aGlzLnVuY2hlY2tlZEljb247XG4gICAgICAgIGNvbnN0IGljb24gPSB0dWlJc1N0cmluZyhvcHRpb24pID8gb3B0aW9uIDogb3B0aW9uKHRoaXMuc2l6ZSk7XG5cbiAgICAgICAgcmV0dXJuIGljb24gJiYgYHVybCgke3RoaXMucmVzb2x2ZXIoaWNvbil9KWA7XG4gICAgfVxufVxuIl19