@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
46 lines • 14.7 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, PolymorpheusTemplate, } 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:.25rem 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, PolymorpheusTemplate], 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:.25rem 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9sb2FkZXIvbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9sb2FkZXIvbG9hZGVyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDaEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUNqRSxPQUFPLEVBRUgsa0JBQWtCLEVBQ2xCLG9CQUFvQixHQUN2QixNQUFNLHdCQUF3QixDQUFDO0FBRWhDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLGtCQUFrQixDQUFDOztBQUVwRCxNQVlhLFNBQVM7SUFadEI7UUFhcUIsVUFBSyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUMzQixZQUFPLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFDbkMsWUFBTyxHQUFHLFdBQVcsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQztRQUdwRSxTQUFJLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7UUFHekIsaUJBQVksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQztRQUd6QyxZQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUM7UUFLdEMseUJBQXlCO1FBRWxCLFlBQU8sR0FBRyxJQUFJLENBQUM7S0FLekI7SUFIRyxJQUFjLFlBQVk7UUFDdEIsT0FBTyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckMsQ0FBQzsrR0F2QlEsU0FBUzttR0FBVCxTQUFTLG1TQzFCdEIsbS9CQXlDQSxrd0VEeEJjLElBQUksNkZBQUUsa0JBQWtCOztTQVN6QixTQUFTOzRGQUFULFNBQVM7a0JBWnJCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLFlBQVksV0FDYixDQUFDLElBQUksRUFBRSxrQkFBa0IsRUFBRSxvQkFBb0IsQ0FBQyxtQkFHeEMsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixrQkFBa0IsRUFBRSxTQUFTO3dCQUM3QixrQkFBa0IsRUFBRSxNQUFNO3FCQUM3Qjs4QkFRTSxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsWUFBWTtzQkFEbEIsS0FBSztnQkFJQyxPQUFPO3NCQURiLEtBQUs7Z0JBSUMsV0FBVztzQkFEakIsS0FBSztnQkFLQyxPQUFPO3NCQURiLEtBQUs7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1RVSV9JU19JT1N9IGZyb20gJ0B0YWlnYS11aS9jZGsvdG9rZW5zJztcbmltcG9ydCB7dHVpSXNTYWZhcml9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvYnJvd3Nlcic7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcbmltcG9ydCB7dHVpU2l6ZUJpZ2dlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1xuICAgIHR5cGUgUG9seW1vcnBoZXVzQ29udGVudCxcbiAgICBQb2x5bW9ycGhldXNPdXRsZXQsXG4gICAgUG9seW1vcnBoZXVzVGVtcGxhdGUsXG59IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge1RVSV9MT0FERVJfT1BUSU9OU30gZnJvbSAnLi9sb2FkZXIub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktbG9hZGVyJyxcbiAgICBpbXBvcnRzOiBbTmdJZiwgUG9seW1vcnBoZXVzT3V0bGV0LCBQb2x5bW9ycGhldXNUZW1wbGF0ZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2xvYWRlci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9sb2FkZXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tjbGFzcy5fbG9hZGluZ10nOiAnbG9hZGluZycsXG4gICAgICAgICdbYXR0ci5kYXRhLXNpemVdJzogJ3NpemUnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUxvYWRlciB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBpc0lPUyA9IGluamVjdChUVUlfSVNfSU9TKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IG9wdGlvbnMgPSBpbmplY3QoVFVJX0xPQURFUl9PUFRJT05TKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaXNBcHBsZSA9IHR1aUlzU2FmYXJpKHR1aUluamVjdEVsZW1lbnQoKSkgfHwgdGhpcy5pc0lPUztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemUgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGluaGVyaXRDb2xvciA9IHRoaXMub3B0aW9ucy5pbmhlcml0Q29sb3I7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBvdmVybGF5ID0gdGhpcy5vcHRpb25zLm92ZXJsYXk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0ZXh0Q29udGVudDogUG9seW1vcnBoZXVzQ29udGVudDtcblxuICAgIC8vIFRPRE86IERyb3AgYWxpYXMgaW4gdjVcbiAgICBASW5wdXQoJ3Nob3dMb2FkZXInKVxuICAgIHB1YmxpYyBsb2FkaW5nID0gdHJ1ZTtcblxuICAgIHByb3RlY3RlZCBnZXQgaXNIb3Jpem9udGFsKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gIXR1aVNpemVCaWdnZXIodGhpcy5zaXplKTtcbiAgICB9XG59XG4iLCI8ZmllbGRzZXRcbiAgICBjbGFzcz1cInQtY29udGVudFwiXG4gICAgW2F0dHIuaW5lcnRdPVwibG9hZGluZyB8fCBudWxsXCJcbiAgICBbY2xhc3MudC1jb250ZW50X2hhcy1vdmVybGF5XT1cIm92ZXJsYXkgJiYgbG9hZGluZ1wiXG4gICAgW2NsYXNzLnQtY29udGVudF9sb2FkaW5nXT1cImxvYWRpbmdcIlxuICAgIFtkaXNhYmxlZF09XCJsb2FkaW5nICYmICFpc0FwcGxlXCJcbj5cbiAgICA8bmctY29udGVudCAvPlxuPC9maWVsZHNldD5cblxuPGRpdlxuICAgICpuZ0lmPVwibG9hZGluZ1wiXG4gICAgY2xhc3M9XCJ0LWxvYWRlclwiXG4gICAgW2NsYXNzLnQtbG9hZGVyX2hvcml6b250YWxdPVwiaXNIb3Jpem9udGFsXCJcbiAgICBbY2xhc3MudC1sb2FkZXJfaW5oZXJpdC1jb2xvcl09XCJpbmhlcml0Q29sb3JcIlxuPlxuICAgIDxzdmdcbiAgICAgICAgYXV0b21hdGlvbi1pZD1cInR1aS1sb2FkZXJfX2xvYWRlclwiXG4gICAgICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICAgIGNsYXNzPVwidC1pY29uXCJcbiAgICA+XG4gICAgICAgIDxjaXJjbGVcbiAgICAgICAgICAgIGN4PVwiNTAlXCJcbiAgICAgICAgICAgIGN5PVwiNTAlXCJcbiAgICAgICAgICAgIGNsYXNzPVwidC1jaXJjbGVcIlxuICAgICAgICAvPlxuICAgIDwvc3ZnPlxuXG4gICAgPGRpdlxuICAgICAgICAqbmdJZj1cInRleHRDb250ZW50XCJcbiAgICAgICAgYXV0b21hdGlvbi1pZD1cInR1aS1sb2FkZXJfX3RleHRcIlxuICAgICAgICBjbGFzcz1cInQtdGV4dFwiXG4gICAgICAgIFtjbGFzcy50LXRleHRfaG9yaXpvbnRhbF09XCJpc0hvcml6b250YWxcIlxuICAgID5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqcG9seW1vcnBoZXVzT3V0bGV0PVwidGV4dENvbnRlbnQgYXMgdGV4dFwiPlxuICAgICAgICAgICAge3sgdGV4dCB9fVxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19