@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
82 lines • 14.2 kB
JavaScript
import { afterNextRender, ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, Directive, effect, inject, Input, signal, ViewEncapsulation, } from '@angular/core';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsString, tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_APPEARANCE_OPTIONS } from './appearance.options';
import * as i0 from "@angular/core";
class TuiAppearanceStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearanceStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearanceStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-appearance" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiAppearance]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearance].tui-appearance-initializing{transition:none!important}[tuiAppearance]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearance][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearance][tuiWrapper]:not(._focused):has(:focus-visible),[tuiAppearance][tuiWrapper]._focused{outline-color:var(--tui-border-focus)}[tuiAppearance]:disabled:not([data-state]),[tuiAppearance][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearance][tuiWrapper]:disabled:not([data-state]),[tuiAppearance][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearanceStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-appearance',
}, styles: ["[tuiAppearance]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearance].tui-appearance-initializing{transition:none!important}[tuiAppearance]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearance][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearance][tuiWrapper]:not(._focused):has(:focus-visible),[tuiAppearance][tuiWrapper]._focused{outline-color:var(--tui-border-focus)}[tuiAppearance]:disabled:not([data-state]),[tuiAppearance][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearance][tuiWrapper]:disabled:not([data-state]),[tuiAppearance][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"] }]
}] });
class TuiAppearance {
constructor() {
this.cdr = inject(ChangeDetectorRef, { skipSelf: true });
this.el = tuiInjectElement();
this.nothing = tuiWithStyles(TuiAppearanceStyles);
this.modes = computed((mode = this.mode()) => !mode || tuiIsString(mode) ? mode : mode.join(' '));
// TODO: Remove when Angular is updated
this.update = effect(() => {
this.mode();
this.state();
this.focus();
if (this.el.matches('tui-textfield[multi]')) {
this.cdr.detectChanges();
}
}, TUI_ALLOW_SIGNAL_WRITES);
// TODO: refactor to signal inputs after Angular update
this.appearance = signal(inject(TUI_APPEARANCE_OPTIONS).appearance);
this.state = signal(null);
this.focus = signal(null);
this.mode = signal(null);
afterNextRender(() => {
this.el.classList.toggle('tui-appearance-initializing',
// Triggering reflow so there's no transition
!!this.el.offsetWidth && false);
});
}
set tuiAppearance(appearance) {
this.appearance.set(appearance);
}
set tuiAppearanceState(state) {
this.state.set(state);
}
set tuiAppearanceFocus(focus) {
this.focus.set(focus);
}
set tuiAppearanceMode(mode) {
this.mode.set(mode);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearance, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearance, isStandalone: true, selector: "[tuiAppearance]", inputs: { tuiAppearance: "tuiAppearance", tuiAppearanceState: "tuiAppearanceState", tuiAppearanceFocus: "tuiAppearanceFocus", tuiAppearanceMode: "tuiAppearanceMode" }, host: { attributes: { "tuiAppearance": "" }, properties: { "attr.data-appearance": "appearance()", "attr.data-state": "state()", "attr.data-focus": "focus()", "attr.data-mode": "modes()" }, classAttribute: "tui-appearance-initializing" }, ngImport: i0 }); }
}
export { TuiAppearance };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearance, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiAppearance]',
host: {
class: 'tui-appearance-initializing',
tuiAppearance: '',
'[attr.data-appearance]': 'appearance()',
'[attr.data-state]': 'state()',
'[attr.data-focus]': 'focus()',
'[attr.data-mode]': 'modes()',
},
}]
}], ctorParameters: function () { return []; }, propDecorators: { tuiAppearance: [{
type: Input
}], tuiAppearanceState: [{
type: Input
}], tuiAppearanceFocus: [{
type: Input
}], tuiAppearanceMode: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwZWFyYW5jZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2RpcmVjdGl2ZXMvYXBwZWFyYW5jZS9hcHBlYXJhbmNlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsZUFBZSxFQUNmLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFFBQVEsRUFDUixTQUFTLEVBQ1QsTUFBTSxFQUNOLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxFQUNOLGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsdUJBQXVCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNoRSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsV0FBVyxFQUFFLGFBQWEsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBRzdFLE9BQU8sRUFBQyxzQkFBc0IsRUFBNEIsTUFBTSxzQkFBc0IsQ0FBQzs7QUFFdkYsTUFVTSxtQkFBbUI7K0dBQW5CLG1CQUFtQjttR0FBbkIsbUJBQW1CLG9IQVJYLEVBQUU7OzRGQVFWLG1CQUFtQjtrQkFWeEIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sRUFBRSxpQkFFRyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLEtBQUssRUFBRSxnQkFBZ0I7cUJBQzFCOztBQUlMLE1BWWEsYUFBYTtJQTBCdEI7UUF6QmlCLFFBQUcsR0FBRyxNQUFNLENBQUMsaUJBQWlCLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsQ0FBQztRQUNsRCxPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUV0QixZQUFPLEdBQUcsYUFBYSxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFDN0MsVUFBSyxHQUFHLFFBQVEsQ0FBQyxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsRUFBRSxDQUN2RCxDQUFDLElBQUksSUFBSSxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FDckQsQ0FBQztRQUVGLHVDQUF1QztRQUNwQixXQUFNLEdBQUcsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNwQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDWixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDYixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFFYixJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLHNCQUFzQixDQUFDLEVBQUU7Z0JBQ3pDLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7YUFDNUI7UUFDTCxDQUFDLEVBQUUsdUJBQXVCLENBQUMsQ0FBQztRQUU1Qix1REFBdUQ7UUFDdkMsZUFBVSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUMvRCxVQUFLLEdBQUcsTUFBTSxDQUE2QixJQUFJLENBQUMsQ0FBQztRQUNqRCxVQUFLLEdBQUcsTUFBTSxDQUFpQixJQUFJLENBQUMsQ0FBQztRQUNyQyxTQUFJLEdBQUcsTUFBTSxDQUFvQyxJQUFJLENBQUMsQ0FBQztRQUduRSxlQUFlLENBQUMsR0FBRyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FDcEIsNkJBQTZCO1lBQzdCLDZDQUE2QztZQUM3QyxDQUFDLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxXQUFXLElBQUksS0FBSyxDQUNqQyxDQUFDO1FBQ04sQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsSUFDVyxhQUFhLENBQUMsVUFBOEM7UUFDbkUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELElBQ1csa0JBQWtCLENBQUMsS0FBaUM7UUFDM0QsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVELElBQ1csa0JBQWtCLENBQUMsS0FBcUI7UUFDL0MsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVELElBQ1csaUJBQWlCLENBQUMsSUFBdUM7UUFDaEUsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDeEIsQ0FBQzsrR0F0RFEsYUFBYTttR0FBYixhQUFhOztTQUFiLGFBQWE7NEZBQWIsYUFBYTtrQkFaekIsU0FBUzttQkFBQztvQkFDUCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsSUFBSSxFQUFFO3dCQUNGLEtBQUssRUFBRSw2QkFBNkI7d0JBQ3BDLGFBQWEsRUFBRSxFQUFFO3dCQUNqQix3QkFBd0IsRUFBRSxjQUFjO3dCQUN4QyxtQkFBbUIsRUFBRSxTQUFTO3dCQUM5QixtQkFBbUIsRUFBRSxTQUFTO3dCQUM5QixrQkFBa0IsRUFBRSxTQUFTO3FCQUNoQztpQkFDSjswRUFzQ2MsYUFBYTtzQkFEdkIsS0FBSztnQkFNSyxrQkFBa0I7c0JBRDVCLEtBQUs7Z0JBTUssa0JBQWtCO3NCQUQ1QixLQUFLO2dCQU1LLGlCQUFpQjtzQkFEM0IsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgYWZ0ZXJOZXh0UmVuZGVyLFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBjb21wdXRlZCxcbiAgICBEaXJlY3RpdmUsXG4gICAgZWZmZWN0LFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBzaWduYWwsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUVUlfQUxMT1dfU0lHTkFMX1dSSVRFU30gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge3R1aUlzU3RyaW5nLCB0dWlXaXRoU3R5bGVzfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHt0eXBlIFR1aUludGVyYWN0aXZlU3RhdGV9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcblxuaW1wb3J0IHtUVUlfQVBQRUFSQU5DRV9PUFRJT05TLCB0eXBlIFR1aUFwcGVhcmFuY2VPcHRpb25zfSBmcm9tICcuL2FwcGVhcmFuY2Uub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgdGVtcGxhdGU6ICcnLFxuICAgIHN0eWxlczogWydAaW1wb3J0IFwiQHRhaWdhLXVpL2NvcmUvc3R5bGVzL2NvbXBvbmVudHMvYXBwZWFyYW5jZS5sZXNzXCI7J10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAndHVpLWFwcGVhcmFuY2UnLFxuICAgIH0sXG59KVxuY2xhc3MgVHVpQXBwZWFyYW5jZVN0eWxlcyB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnW3R1aUFwcGVhcmFuY2VdJyxcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAndHVpLWFwcGVhcmFuY2UtaW5pdGlhbGl6aW5nJyxcbiAgICAgICAgdHVpQXBwZWFyYW5jZTogJycsXG4gICAgICAgICdbYXR0ci5kYXRhLWFwcGVhcmFuY2VdJzogJ2FwcGVhcmFuY2UoKScsXG4gICAgICAgICdbYXR0ci5kYXRhLXN0YXRlXSc6ICdzdGF0ZSgpJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtZm9jdXNdJzogJ2ZvY3VzKCknLFxuICAgICAgICAnW2F0dHIuZGF0YS1tb2RlXSc6ICdtb2RlcygpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlBcHBlYXJhbmNlIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNkciA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZiwge3NraXBTZWxmOiB0cnVlfSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBub3RoaW5nID0gdHVpV2l0aFN0eWxlcyhUdWlBcHBlYXJhbmNlU3R5bGVzKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgbW9kZXMgPSBjb21wdXRlZCgobW9kZSA9IHRoaXMubW9kZSgpKSA9PlxuICAgICAgICAhbW9kZSB8fCB0dWlJc1N0cmluZyhtb2RlKSA/IG1vZGUgOiBtb2RlLmpvaW4oJyAnKSxcbiAgICApO1xuXG4gICAgLy8gVE9ETzogUmVtb3ZlIHdoZW4gQW5ndWxhciBpcyB1cGRhdGVkXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHVwZGF0ZSA9IGVmZmVjdCgoKSA9PiB7XG4gICAgICAgIHRoaXMubW9kZSgpO1xuICAgICAgICB0aGlzLnN0YXRlKCk7XG4gICAgICAgIHRoaXMuZm9jdXMoKTtcblxuICAgICAgICBpZiAodGhpcy5lbC5tYXRjaGVzKCd0dWktdGV4dGZpZWxkW211bHRpXScpKSB7XG4gICAgICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgICAgIH1cbiAgICB9LCBUVUlfQUxMT1dfU0lHTkFMX1dSSVRFUyk7XG5cbiAgICAvLyBUT0RPOiByZWZhY3RvciB0byBzaWduYWwgaW5wdXRzIGFmdGVyIEFuZ3VsYXIgdXBkYXRlXG4gICAgcHVibGljIHJlYWRvbmx5IGFwcGVhcmFuY2UgPSBzaWduYWwoaW5qZWN0KFRVSV9BUFBFQVJBTkNFX09QVElPTlMpLmFwcGVhcmFuY2UpO1xuICAgIHB1YmxpYyByZWFkb25seSBzdGF0ZSA9IHNpZ25hbDxUdWlJbnRlcmFjdGl2ZVN0YXRlIHwgbnVsbD4obnVsbCk7XG4gICAgcHVibGljIHJlYWRvbmx5IGZvY3VzID0gc2lnbmFsPGJvb2xlYW4gfCBudWxsPihudWxsKTtcbiAgICBwdWJsaWMgcmVhZG9ubHkgbW9kZSA9IHNpZ25hbDxzdHJpbmcgfCByZWFkb25seSBzdHJpbmdbXSB8IG51bGw+KG51bGwpO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIGFmdGVyTmV4dFJlbmRlcigoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLmVsLmNsYXNzTGlzdC50b2dnbGUoXG4gICAgICAgICAgICAgICAgJ3R1aS1hcHBlYXJhbmNlLWluaXRpYWxpemluZycsXG4gICAgICAgICAgICAgICAgLy8gVHJpZ2dlcmluZyByZWZsb3cgc28gdGhlcmUncyBubyB0cmFuc2l0aW9uXG4gICAgICAgICAgICAgICAgISF0aGlzLmVsLm9mZnNldFdpZHRoICYmIGZhbHNlLFxuICAgICAgICAgICAgKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IHR1aUFwcGVhcmFuY2UoYXBwZWFyYW5jZTogVHVpQXBwZWFyYW5jZU9wdGlvbnNbJ2FwcGVhcmFuY2UnXSkge1xuICAgICAgICB0aGlzLmFwcGVhcmFuY2Uuc2V0KGFwcGVhcmFuY2UpO1xuICAgIH1cblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNldCB0dWlBcHBlYXJhbmNlU3RhdGUoc3RhdGU6IFR1aUludGVyYWN0aXZlU3RhdGUgfCBudWxsKSB7XG4gICAgICAgIHRoaXMuc3RhdGUuc2V0KHN0YXRlKTtcbiAgICB9XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzZXQgdHVpQXBwZWFyYW5jZUZvY3VzKGZvY3VzOiBib29sZWFuIHwgbnVsbCkge1xuICAgICAgICB0aGlzLmZvY3VzLnNldChmb2N1cyk7XG4gICAgfVxuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IHR1aUFwcGVhcmFuY2VNb2RlKG1vZGU6IHN0cmluZyB8IHJlYWRvbmx5IHN0cmluZ1tdIHwgbnVsbCkge1xuICAgICAgICB0aGlzLm1vZGUuc2V0KG1vZGUpO1xuICAgIH1cbn1cbiJdfQ==