@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
46 lines • 14.6 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
import { tuiIsSafari } from '@taiga-ui/cdk/utils/browser';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiSizeBigger } from '@taiga-ui/core/utils/miscellaneous';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { TUI_LOADER_OPTIONS } from './loader.options';
import * as i0 from "@angular/core";
class TuiLoader {
constructor() {
this.isIOS = inject(TUI_IS_IOS);
this.options = inject(TUI_LOADER_OPTIONS);
this.isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;
this.size = this.options.size;
this.inheritColor = this.options.inheritColor;
this.overlay = this.options.overlay;
// TODO: Drop alias in v5
this.loading = true;
}
get isHorizontal() {
return !tuiSizeBigger(this.size);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLoader, isStandalone: true, selector: "tui-loader", inputs: { size: "size", inheritColor: "inheritColor", overlay: "overlay", textContent: "textContent", loading: ["showLoader", "loading"] }, host: { properties: { "class._loading": "loading", "attr.data-size": "size" } }, ngImport: i0, template: "<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n<div\n *ngIf=\"loading\"\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n>\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n\n <div\n *ngIf=\"textContent\"\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:0 calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiLoader };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLoader, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-loader', imports: [NgIf, PolymorpheusOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class._loading]': 'loading',
'[attr.data-size]': 'size',
}, template: "<fieldset\n class=\"t-content\"\n [attr.inert]=\"loading || null\"\n [class.t-content_has-overlay]=\"overlay && loading\"\n [class.t-content_loading]=\"loading\"\n [disabled]=\"loading && !isApple\"\n>\n <ng-content />\n</fieldset>\n\n<div\n *ngIf=\"loading\"\n class=\"t-loader\"\n [class.t-loader_horizontal]=\"isHorizontal\"\n [class.t-loader_inherit-color]=\"inheritColor\"\n>\n <svg\n automation-id=\"tui-loader__loader\"\n focusable=\"false\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-icon\"\n >\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-circle\"\n />\n </svg>\n\n <div\n *ngIf=\"textContent\"\n automation-id=\"tui-loader__text\"\n class=\"t-text\"\n [class.t-text_horizontal]=\"isHorizontal\"\n >\n <ng-container *polymorpheusOutlet=\"textContent as text\">\n {{ text }}\n </ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:0 calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"] }]
}], propDecorators: { size: [{
type: Input
}], inheritColor: [{
type: Input
}], overlay: [{
type: Input
}], textContent: [{
type: Input
}], loading: [{
type: Input,
args: ['showLoader']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9sb2FkZXIvbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9sb2FkZXIvbG9hZGVyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDaEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUNqRSxPQUFPLEVBQTJCLGtCQUFrQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFFcEYsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sa0JBQWtCLENBQUM7O0FBRXBELE1BWWEsU0FBUztJQVp0QjtRQWFxQixVQUFLLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzNCLFlBQU8sR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUNuQyxZQUFPLEdBQUcsV0FBVyxDQUFDLGdCQUFnQixFQUFFLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDO1FBR3BFLFNBQUksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUd6QixpQkFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsWUFBWSxDQUFDO1FBR3pDLFlBQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQztRQUt0Qyx5QkFBeUI7UUFFbEIsWUFBTyxHQUFHLElBQUksQ0FBQztLQUt6QjtJQUhHLElBQWMsWUFBWTtRQUN0QixPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNyQyxDQUFDOytHQXZCUSxTQUFTO21HQUFULFNBQVMsbVNDdEJ0QixtL0JBeUNBLDZ2RUQ1QmMsSUFBSSw2RkFBRSxrQkFBa0I7O1NBU3pCLFNBQVM7NEZBQVQsU0FBUztrQkFackIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sWUFBWSxXQUNiLENBQUMsSUFBSSxFQUFFLGtCQUFrQixDQUFDLG1CQUdsQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLGtCQUFrQixFQUFFLFNBQVM7d0JBQzdCLGtCQUFrQixFQUFFLE1BQU07cUJBQzdCOzhCQVFNLElBQUk7c0JBRFYsS0FBSztnQkFJQyxZQUFZO3NCQURsQixLQUFLO2dCQUlDLE9BQU87c0JBRGIsS0FBSztnQkFJQyxXQUFXO3NCQURqQixLQUFLO2dCQUtDLE9BQU87c0JBRGIsS0FBSzt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3QsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VFVJX0lTX0lPU30gZnJvbSAnQHRhaWdhLXVpL2Nkay90b2tlbnMnO1xuaW1wb3J0IHt0dWlJc1NhZmFyaX0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9icm93c2VyJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHt0dWlTaXplQmlnZ2VyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7dHlwZSBQb2x5bW9ycGhldXNDb250ZW50LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge1RVSV9MT0FERVJfT1BUSU9OU30gZnJvbSAnLi9sb2FkZXIub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktbG9hZGVyJyxcbiAgICBpbXBvcnRzOiBbTmdJZiwgUG9seW1vcnBoZXVzT3V0bGV0XSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbG9hZGVyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2xvYWRlci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2NsYXNzLl9sb2FkaW5nXSc6ICdsb2FkaW5nJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpTG9hZGVyIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGlzSU9TID0gaW5qZWN0KFRVSV9JU19JT1MpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3B0aW9ucyA9IGluamVjdChUVUlfTE9BREVSX09QVElPTlMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBpc0FwcGxlID0gdHVpSXNTYWZhcmkodHVpSW5qZWN0RWxlbWVudCgpKSB8fCB0aGlzLmlzSU9TO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2l6ZSA9IHRoaXMub3B0aW9ucy5zaXplO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaW5oZXJpdENvbG9yID0gdGhpcy5vcHRpb25zLmluaGVyaXRDb2xvcjtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG92ZXJsYXkgPSB0aGlzLm9wdGlvbnMub3ZlcmxheTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHRleHRDb250ZW50OiBQb2x5bW9ycGhldXNDb250ZW50O1xuXG4gICAgLy8gVE9ETzogRHJvcCBhbGlhcyBpbiB2NVxuICAgIEBJbnB1dCgnc2hvd0xvYWRlcicpXG4gICAgcHVibGljIGxvYWRpbmcgPSB0cnVlO1xuXG4gICAgcHJvdGVjdGVkIGdldCBpc0hvcml6b250YWwoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiAhdHVpU2l6ZUJpZ2dlcih0aGlzLnNpemUpO1xuICAgIH1cbn1cbiIsIjxmaWVsZHNldFxuICAgIGNsYXNzPVwidC1jb250ZW50XCJcbiAgICBbYXR0ci5pbmVydF09XCJsb2FkaW5nIHx8IG51bGxcIlxuICAgIFtjbGFzcy50LWNvbnRlbnRfaGFzLW92ZXJsYXldPVwib3ZlcmxheSAmJiBsb2FkaW5nXCJcbiAgICBbY2xhc3MudC1jb250ZW50X2xvYWRpbmddPVwibG9hZGluZ1wiXG4gICAgW2Rpc2FibGVkXT1cImxvYWRpbmcgJiYgIWlzQXBwbGVcIlxuPlxuICAgIDxuZy1jb250ZW50IC8+XG48L2ZpZWxkc2V0PlxuXG48ZGl2XG4gICAgKm5nSWY9XCJsb2FkaW5nXCJcbiAgICBjbGFzcz1cInQtbG9hZGVyXCJcbiAgICBbY2xhc3MudC1sb2FkZXJfaG9yaXpvbnRhbF09XCJpc0hvcml6b250YWxcIlxuICAgIFtjbGFzcy50LWxvYWRlcl9pbmhlcml0LWNvbG9yXT1cImluaGVyaXRDb2xvclwiXG4+XG4gICAgPHN2Z1xuICAgICAgICBhdXRvbWF0aW9uLWlkPVwidHVpLWxvYWRlcl9fbG9hZGVyXCJcbiAgICAgICAgZm9jdXNhYmxlPVwiZmFsc2VcIlxuICAgICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgY2xhc3M9XCJ0LWljb25cIlxuICAgID5cbiAgICAgICAgPGNpcmNsZVxuICAgICAgICAgICAgY3g9XCI1MCVcIlxuICAgICAgICAgICAgY3k9XCI1MCVcIlxuICAgICAgICAgICAgY2xhc3M9XCJ0LWNpcmNsZVwiXG4gICAgICAgIC8+XG4gICAgPC9zdmc+XG5cbiAgICA8ZGl2XG4gICAgICAgICpuZ0lmPVwidGV4dENvbnRlbnRcIlxuICAgICAgICBhdXRvbWF0aW9uLWlkPVwidHVpLWxvYWRlcl9fdGV4dFwiXG4gICAgICAgIGNsYXNzPVwidC10ZXh0XCJcbiAgICAgICAgW2NsYXNzLnQtdGV4dF9ob3Jpem9udGFsXT1cImlzSG9yaXpvbnRhbFwiXG4gICAgPlxuICAgICAgICA8bmctY29udGFpbmVyICpwb2x5bW9ycGhldXNPdXRsZXQ9XCJ0ZXh0Q29udGVudCBhcyB0ZXh0XCI+XG4gICAgICAgICAgICB7eyB0ZXh0IH19XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=