@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
90 lines (85 loc) • 7.43 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed, signal, inject, Directive, Input } from '@angular/core';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiInjectIconResolver, tuiGetIconMode, TUI_ICON_START, TUI_ICON_END } from '@taiga-ui/core/tokens';
class TuiIconsStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIconsStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiIconsStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-icons" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiIcons]{--t-icon-start: none;--t-icon-end: none}[tuiIcons]:before,[tuiIcons]:after{content:\"\";inline-size:1em;block-size:1em;line-height:1em;font-size:1.5rem;flex-shrink:0;box-sizing:content-box;background:currentColor}[tuiIcons]:before{display:var(--t-icon-start, none);-webkit-mask:var(--t-icon-start) no-repeat center / contain padding-box;mask:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIcons]:after{display:var(--t-icon-end, none);-webkit-mask:var(--t-icon-end) no-repeat center / contain padding-box;mask:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIcons][data-icon-start=image]:before{-webkit-mask:none;mask:none;background:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIcons][data-icon-end=image]:after{-webkit-mask:none;mask:none;background:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIcons][data-icon-start=font]:before,[tuiIcons][data-icon-end=font]:after{display:grid;-webkit-mask:none;mask:none;background:none;font:1.3em/1 var(--tui-font-icon, inherit);text-align:center;place-content:center;text-transform:none}[tuiIcons][data-icon-start=font]:before{content:var(--t-icon-start)}[tuiIcons][data-icon-end=font]:after{content:var(--t-icon-end)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIconsStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-icons',
}, styles: ["[tuiIcons]{--t-icon-start: none;--t-icon-end: none}[tuiIcons]:before,[tuiIcons]:after{content:\"\";inline-size:1em;block-size:1em;line-height:1em;font-size:1.5rem;flex-shrink:0;box-sizing:content-box;background:currentColor}[tuiIcons]:before{display:var(--t-icon-start, none);-webkit-mask:var(--t-icon-start) no-repeat center / contain padding-box;mask:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIcons]:after{display:var(--t-icon-end, none);-webkit-mask:var(--t-icon-end) no-repeat center / contain padding-box;mask:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIcons][data-icon-start=image]:before{-webkit-mask:none;mask:none;background:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIcons][data-icon-end=image]:after{-webkit-mask:none;mask:none;background:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIcons][data-icon-start=font]:before,[tuiIcons][data-icon-end=font]:after{display:grid;-webkit-mask:none;mask:none;background:none;font:1.3em/1 var(--tui-font-icon, inherit);text-align:center;place-content:center;text-transform:none}[tuiIcons][data-icon-start=font]:before{content:var(--t-icon-start)}[tuiIcons][data-icon-end=font]:after{content:var(--t-icon-end)}\n"] }]
}] });
class TuiIcons {
constructor() {
this.resolver = tuiInjectIconResolver();
this.nothing = tuiWithStyles(TuiIconsStyles);
this.startResource = computed(() => this.resolve(this.iconStart()));
this.endResource = computed(() => this.resolve(this.iconEnd()));
this.startMode = computed(() => tuiGetIconMode(this.iconStart()?.toString()));
this.endMode = computed(() => tuiGetIconMode(this.iconEnd()));
this.iconStart = signal(inject(TUI_ICON_START, { self: true, optional: true }) || '');
this.iconEnd = signal(inject(TUI_ICON_END, { self: true, optional: true }) || '');
}
// TODO(v5): use signal inputs
set iconStartSetter(x) {
this.iconStart.set(x);
}
// TODO(v5): use signal inputs
set iconEndSetter(x) {
this.iconEnd.set(x);
}
resolve(icon) {
if (!icon) {
return null;
}
const iconStr = icon.toString();
return tuiGetIconMode(iconStr) === 'font'
? `'${this.resolver(iconStr)}'`
: `url(${this.resolver(iconStr)})`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIcons, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiIcons, isStandalone: true, inputs: { iconStartSetter: ["iconStart", "iconStartSetter"], iconEndSetter: ["iconEnd", "iconEndSetter"] }, host: { attributes: { "tuiIcons": "" }, properties: { "style.--t-icon-start": "startResource()", "style.--t-icon-end": "endResource()", "attr.data-icon-start": "startMode()", "attr.data-icon-end": "endMode()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIcons, decorators: [{
type: Directive,
args: [{
standalone: true,
host: {
tuiIcons: '',
'[style.--t-icon-start]': 'startResource()',
'[style.--t-icon-end]': 'endResource()',
'[attr.data-icon-start]': 'startMode()',
'[attr.data-icon-end]': 'endMode()',
},
}]
}], propDecorators: { iconStartSetter: [{
type: Input,
args: ['iconStart']
}], iconEndSetter: [{
type: Input,
args: ['iconEnd']
}] } });
class TuiWithIcons {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithIcons, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiWithIcons, isStandalone: true, hostDirectives: [{ directive: TuiIcons, inputs: ["iconStart", "iconStart", "iconEnd", "iconEnd"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithIcons, decorators: [{
type: Directive,
args: [{
standalone: true,
hostDirectives: [
{
directive: TuiIcons,
inputs: ['iconStart', 'iconEnd'],
},
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiIcons, TuiWithIcons };
//# sourceMappingURL=taiga-ui-core-directives-icons.mjs.map