UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

46 lines 10 kB
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%;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 }); } } 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%;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 }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlrZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9saWtlL2xpa2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsaUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUM5RCxPQUFPLEVBQ0gsNEJBQTRCLEVBQzVCLGlCQUFpQixHQUNwQixNQUFNLHNDQUFzQyxDQUFDO0FBQzlDLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBSTVELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLGdCQUFnQixDQUFDOzs7QUFFaEQsTUFrQmEsT0FBTztJQWxCcEI7UUFtQnFCLFlBQU8sR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNuQyxhQUFRLEdBQUcscUJBQXFCLEVBQUUsQ0FBQztRQUc3QyxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBR1gsa0JBQWEsR0FDaEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDO1FBRzFCLGdCQUFXLEdBQXdDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQztRQUc5RSxTQUFJLEdBQWEsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7S0FRN0M7SUFOYSxPQUFPLENBQUMsS0FBb0M7UUFDbEQsTUFBTSxNQUFNLEdBQUcsS0FBSyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUMzRSxNQUFNLElBQUksR0FBRyxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUU5RCxPQUFPLElBQUksSUFBSSxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztJQUNqRCxDQUFDOytHQXRCUSxPQUFPO21HQUFQLE9BQU8scWJBWEwsQ0FBQyw0QkFBNEIsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLGlGQUpqRCxFQUFFOztTQWVILE9BQU87NEZBQVAsT0FBTztrQkFsQm5CLFNBQVM7aUNBQ00sSUFBSSxZQUNOLCtCQUErQixZQUMvQixFQUFFLGlCQUVHLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyw0QkFBNEIsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLGtCQUMzQyxDQUFDLGlCQUFpQixDQUFDLFFBQzdCO3dCQUNGLE9BQU8sRUFBRSxFQUFFO3dCQUNYLGtCQUFrQixFQUFFLE1BQU07d0JBQzFCLGtCQUFrQixFQUFFLElBQUk7d0JBQ3hCLHdCQUF3QixFQUFFLE9BQU87d0JBQ2pDLDRCQUE0QixFQUFFLHNCQUFzQjt3QkFDcEQsMEJBQTBCLEVBQUUsb0JBQW9CO3FCQUNuRDs4QkFPTSxLQUFLO3NCQURYLEtBQUs7dUJBQUMsU0FBUztnQkFJVCxhQUFhO3NCQURuQixLQUFLO2dCQUtDLFdBQVc7c0JBRGpCLEtBQUs7Z0JBSUMsSUFBSTtzQkFEVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB0eXBlIHtUdWlTdHJpbmdIYW5kbGVyfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3R5cGVzJztcbmltcG9ydCB7dHVpSXNTdHJpbmd9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1xuICAgIHR1aUFwcGVhcmFuY2VPcHRpb25zUHJvdmlkZXIsXG4gICAgVHVpV2l0aEFwcGVhcmFuY2UsXG59IGZyb20gJ0B0YWlnYS11aS9jb3JlL2RpcmVjdGl2ZXMvYXBwZWFyYW5jZSc7XG5pbXBvcnQge3R1aUluamVjdEljb25SZXNvbHZlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdG9rZW5zJztcbmltcG9ydCB0eXBlIHtUdWlTaXplU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdHlwZXMnO1xuXG5pbXBvcnQgdHlwZSB7VHVpTGlrZU9wdGlvbnN9IGZyb20gJy4vbGlrZS5vcHRpb25zJztcbmltcG9ydCB7VFVJX0xJS0VfT1BUSU9OU30gZnJvbSAnLi9saWtlLm9wdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnaW5wdXRbdHVpTGlrZV1bdHlwZT1jaGVja2JveF0nLFxuICAgIHRlbXBsYXRlOiAnJyxcbiAgICBzdHlsZXM6IFsnQGltcG9ydCBcIkB0YWlnYS11aS9raXQvc3R5bGVzL2NvbXBvbmVudHMvbGlrZS5sZXNzXCI7J10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt0dWlBcHBlYXJhbmNlT3B0aW9uc1Byb3ZpZGVyKFRVSV9MSUtFX09QVElPTlMpXSxcbiAgICBob3N0RGlyZWN0aXZlczogW1R1aVdpdGhBcHBlYXJhbmNlXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHR1aUxpa2U6ICcnLFxuICAgICAgICAnW2F0dHIuZGF0YS1zaXplXSc6ICdzaXplJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtbW9kZV0nOiAnXCJcIicsXG4gICAgICAgICdbc3R5bGUuLS10LWljb24tY29sb3JdJzogJ2NvbG9yJyxcbiAgICAgICAgJ1tzdHlsZS4tLXQtdW5jaGVja2VkLWljb25dJzogJ2dldEljb24oXCJ1bmNoZWNrZWRcIiknLFxuICAgICAgICAnW3N0eWxlLi0tdC1jaGVja2VkLWljb25dJzogJ2dldEljb24oXCJjaGVja2VkXCIpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlMaWtlIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IG9wdGlvbnMgPSBpbmplY3QoVFVJX0xJS0VfT1BUSU9OUyk7XG4gICAgcHJpdmF0ZSByZWFkb25seSByZXNvbHZlciA9IHR1aUluamVjdEljb25SZXNvbHZlcigpO1xuXG4gICAgQElucHV0KCd0dWlMaWtlJylcbiAgICBwdWJsaWMgY29sb3IgPSAnJztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHVuY2hlY2tlZEljb246IFR1aVN0cmluZ0hhbmRsZXI8VHVpU2l6ZVM+IHwgc3RyaW5nID1cbiAgICAgICAgdGhpcy5vcHRpb25zLmljb25zLnVuY2hlY2tlZDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGNoZWNrZWRJY29uOiBUdWlTdHJpbmdIYW5kbGVyPFR1aVNpemVTPiB8IHN0cmluZyA9IHRoaXMub3B0aW9ucy5pY29ucy5jaGVja2VkO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2l6ZTogVHVpU2l6ZVMgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcblxuICAgIHByb3RlY3RlZCBnZXRJY29uKHN0YXRlOiBrZXlvZiBUdWlMaWtlT3B0aW9uc1snaWNvbnMnXSk6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IG9wdGlvbiA9IHN0YXRlID09PSAnY2hlY2tlZCcgPyB0aGlzLmNoZWNrZWRJY29uIDogdGhpcy51bmNoZWNrZWRJY29uO1xuICAgICAgICBjb25zdCBpY29uID0gdHVpSXNTdHJpbmcob3B0aW9uKSA/IG9wdGlvbiA6IG9wdGlvbih0aGlzLnNpemUpO1xuXG4gICAgICAgIHJldHVybiBpY29uICYmIGB1cmwoJHt0aGlzLnJlc29sdmVyKGljb24pfSlgO1xuICAgIH1cbn1cbiJdfQ==