@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
79 lines • 13.6 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, Directive, effect, inject, Input, signal, ViewEncapsulation, } from '@angular/core';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { TuiTransitioned } from '@taiga-ui/cdk/directives/transitioned';
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";
import * as i1 from "@taiga-ui/cdk/directives/transitioned";
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]:before,[tuiAppearance]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[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]:before,[tuiAppearance]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[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: 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);
// 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);
}
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()" } }, hostDirectives: [{ directive: i1.TuiTransitioned }], 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]',
hostDirectives: [TuiTransitioned],
host: {
tuiAppearance: '',
'[attr.data-appearance]': 'appearance()',
'[attr.data-state]': 'state()',
'[attr.data-focus]': 'focus()',
'[attr.data-mode]': 'modes()',
},
}]
}], propDecorators: { tuiAppearance: [{
type: Input
}], tuiAppearanceState: [{
type: Input
}], tuiAppearanceFocus: [{
type: Input
}], tuiAppearanceMode: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwZWFyYW5jZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2RpcmVjdGl2ZXMvYXBwZWFyYW5jZS9hcHBlYXJhbmNlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsUUFBUSxFQUNSLFNBQVMsRUFDVCxNQUFNLEVBQ04sTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ04saUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUN0RSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsV0FBVyxFQUFFLGFBQWEsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBRzdFLE9BQU8sRUFBQyxzQkFBc0IsRUFBNEIsTUFBTSxzQkFBc0IsQ0FBQzs7O0FBRXZGLE1BVU0sbUJBQW1COytHQUFuQixtQkFBbUI7bUdBQW5CLG1CQUFtQixvSEFSWCxFQUFFOzs0RkFRVixtQkFBbUI7a0JBVnhCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLEVBQUUsaUJBRUcsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixLQUFLLEVBQUUsZ0JBQWdCO3FCQUMxQjs7QUFJTCxNQVlhLGFBQWE7SUFaMUI7UUFhcUIsUUFBRyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsRUFBRSxFQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDO1FBQ2xELE9BQUUsR0FBRyxnQkFBZ0IsRUFBRSxDQUFDO1FBRXRCLFlBQU8sR0FBRyxhQUFhLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQUM3QyxVQUFLLEdBQUcsUUFBUSxDQUFDLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxFQUFFLENBQ3ZELENBQUMsSUFBSSxJQUFJLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUNyRCxDQUFDO1FBRUYsdURBQXVEO1FBQ3ZDLGVBQVUsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDL0QsVUFBSyxHQUFHLE1BQU0sQ0FBNkIsSUFBSSxDQUFDLENBQUM7UUFDakQsVUFBSyxHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7UUFDckMsU0FBSSxHQUFHLE1BQU0sQ0FBb0MsSUFBSSxDQUFDLENBQUM7UUFFdkUsdUNBQXVDO1FBQ3ZCLFdBQU0sR0FBRyxNQUFNLENBQUMsR0FBRyxFQUFFO1lBQ2pDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNaLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNiLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUViLElBQUksSUFBSSxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsc0JBQXNCLENBQUMsRUFBRTtnQkFDekMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQzthQUM1QjtRQUNMLENBQUMsRUFBRSx1QkFBdUIsQ0FBQyxDQUFDO0tBcUIvQjtJQW5CRyxJQUNXLGFBQWEsQ0FBQyxVQUE4QztRQUNuRSxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsSUFDVyxrQkFBa0IsQ0FBQyxLQUFpQztRQUMzRCxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFDVyxrQkFBa0IsQ0FBQyxLQUFxQjtRQUMvQyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFDVyxpQkFBaUIsQ0FBQyxJQUF1QztRQUNoRSxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN4QixDQUFDOytHQTVDUSxhQUFhO21HQUFiLGFBQWE7O1NBQWIsYUFBYTs0RkFBYixhQUFhO2tCQVp6QixTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixjQUFjLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQ2pDLElBQUksRUFBRTt3QkFDRixhQUFhLEVBQUUsRUFBRTt3QkFDakIsd0JBQXdCLEVBQUUsY0FBYzt3QkFDeEMsbUJBQW1CLEVBQUUsU0FBUzt3QkFDOUIsbUJBQW1CLEVBQUUsU0FBUzt3QkFDOUIsa0JBQWtCLEVBQUUsU0FBUztxQkFDaEM7aUJBQ0o7OEJBNEJjLGFBQWE7c0JBRHZCLEtBQUs7Z0JBTUssa0JBQWtCO3NCQUQ1QixLQUFLO2dCQU1LLGtCQUFrQjtzQkFENUIsS0FBSztnQkFNSyxpQkFBaUI7c0JBRDNCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBjb21wdXRlZCxcbiAgICBEaXJlY3RpdmUsXG4gICAgZWZmZWN0LFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBzaWduYWwsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUVUlfQUxMT1dfU0lHTkFMX1dSSVRFU30gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHtUdWlUcmFuc2l0aW9uZWR9IGZyb20gJ0B0YWlnYS11aS9jZGsvZGlyZWN0aXZlcy90cmFuc2l0aW9uZWQnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge3R1aUlzU3RyaW5nLCB0dWlXaXRoU3R5bGVzfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHt0eXBlIFR1aUludGVyYWN0aXZlU3RhdGV9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcblxuaW1wb3J0IHtUVUlfQVBQRUFSQU5DRV9PUFRJT05TLCB0eXBlIFR1aUFwcGVhcmFuY2VPcHRpb25zfSBmcm9tICcuL2FwcGVhcmFuY2Uub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgdGVtcGxhdGU6ICcnLFxuICAgIHN0eWxlczogWydAaW1wb3J0IFwiQHRhaWdhLXVpL2NvcmUvc3R5bGVzL2NvbXBvbmVudHMvYXBwZWFyYW5jZS5sZXNzXCI7J10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAndHVpLWFwcGVhcmFuY2UnLFxuICAgIH0sXG59KVxuY2xhc3MgVHVpQXBwZWFyYW5jZVN0eWxlcyB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnW3R1aUFwcGVhcmFuY2VdJyxcbiAgICBob3N0RGlyZWN0aXZlczogW1R1aVRyYW5zaXRpb25lZF0sXG4gICAgaG9zdDoge1xuICAgICAgICB0dWlBcHBlYXJhbmNlOiAnJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtYXBwZWFyYW5jZV0nOiAnYXBwZWFyYW5jZSgpJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtc3RhdGVdJzogJ3N0YXRlKCknLFxuICAgICAgICAnW2F0dHIuZGF0YS1mb2N1c10nOiAnZm9jdXMoKScsXG4gICAgICAgICdbYXR0ci5kYXRhLW1vZGVdJzogJ21vZGVzKCknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFwcGVhcmFuY2Uge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgY2RyID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmLCB7c2tpcFNlbGY6IHRydWV9KTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsID0gdHVpSW5qZWN0RWxlbWVudCgpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IG5vdGhpbmcgPSB0dWlXaXRoU3R5bGVzKFR1aUFwcGVhcmFuY2VTdHlsZXMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBtb2RlcyA9IGNvbXB1dGVkKChtb2RlID0gdGhpcy5tb2RlKCkpID0+XG4gICAgICAgICFtb2RlIHx8IHR1aUlzU3RyaW5nKG1vZGUpID8gbW9kZSA6IG1vZGUuam9pbignICcpLFxuICAgICk7XG5cbiAgICAvLyBUT0RPOiByZWZhY3RvciB0byBzaWduYWwgaW5wdXRzIGFmdGVyIEFuZ3VsYXIgdXBkYXRlXG4gICAgcHVibGljIHJlYWRvbmx5IGFwcGVhcmFuY2UgPSBzaWduYWwoaW5qZWN0KFRVSV9BUFBFQVJBTkNFX09QVElPTlMpLmFwcGVhcmFuY2UpO1xuICAgIHB1YmxpYyByZWFkb25seSBzdGF0ZSA9IHNpZ25hbDxUdWlJbnRlcmFjdGl2ZVN0YXRlIHwgbnVsbD4obnVsbCk7XG4gICAgcHVibGljIHJlYWRvbmx5IGZvY3VzID0gc2lnbmFsPGJvb2xlYW4gfCBudWxsPihudWxsKTtcbiAgICBwdWJsaWMgcmVhZG9ubHkgbW9kZSA9IHNpZ25hbDxzdHJpbmcgfCByZWFkb25seSBzdHJpbmdbXSB8IG51bGw+KG51bGwpO1xuXG4gICAgLy8gVE9ETzogUmVtb3ZlIHdoZW4gQW5ndWxhciBpcyB1cGRhdGVkXG4gICAgcHVibGljIHJlYWRvbmx5IHVwZGF0ZSA9IGVmZmVjdCgoKSA9PiB7XG4gICAgICAgIHRoaXMubW9kZSgpO1xuICAgICAgICB0aGlzLnN0YXRlKCk7XG4gICAgICAgIHRoaXMuZm9jdXMoKTtcblxuICAgICAgICBpZiAodGhpcy5lbC5tYXRjaGVzKCd0dWktdGV4dGZpZWxkW211bHRpXScpKSB7XG4gICAgICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgICAgIH1cbiAgICB9LCBUVUlfQUxMT1dfU0lHTkFMX1dSSVRFUyk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzZXQgdHVpQXBwZWFyYW5jZShhcHBlYXJhbmNlOiBUdWlBcHBlYXJhbmNlT3B0aW9uc1snYXBwZWFyYW5jZSddKSB7XG4gICAgICAgIHRoaXMuYXBwZWFyYW5jZS5zZXQoYXBwZWFyYW5jZSk7XG4gICAgfVxuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IHR1aUFwcGVhcmFuY2VTdGF0ZShzdGF0ZTogVHVpSW50ZXJhY3RpdmVTdGF0ZSB8IG51bGwpIHtcbiAgICAgICAgdGhpcy5zdGF0ZS5zZXQoc3RhdGUpO1xuICAgIH1cblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNldCB0dWlBcHBlYXJhbmNlRm9jdXMoZm9jdXM6IGJvb2xlYW4gfCBudWxsKSB7XG4gICAgICAgIHRoaXMuZm9jdXMuc2V0KGZvY3VzKTtcbiAgICB9XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzZXQgdHVpQXBwZWFyYW5jZU1vZGUobW9kZTogc3RyaW5nIHwgcmVhZG9ubHkgc3RyaW5nW10gfCBudWxsKSB7XG4gICAgICAgIHRoaXMubW9kZS5zZXQobW9kZSk7XG4gICAgfVxufVxuIl19