@taiga-ui/kit
Version:
Taiga UI Angular main components kit
45 lines • 12.7 kB
JavaScript
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { delay, of } from 'rxjs';
import { TUI_PROGRESS_OPTIONS } from '../progress.options';
import * as i0 from "@angular/core";
class TuiProgressCircle {
constructor() {
this.options = inject(TUI_PROGRESS_OPTIONS);
this.animationDelay = toSignal(of(true).pipe(delay(0)));
this.value = 0;
this.max = 1;
this.color = this.options.color;
this.size = this.options.size;
this.arc = false;
}
get progressRatio() {
const ratio = this.value / this.max;
return Number.isFinite(ratio) ? ratio : 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiProgressCircle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: TuiProgressCircle, isStandalone: true, selector: "tui-progress-circle", inputs: { value: "value", max: "max", color: "color", size: "size", arc: ["arc", "arc", coerceBooleanProperty] }, host: { properties: { "attr.data-size": "size", "style.--tui-progress-color": "color", "style.--t-progress-ratio": "progressRatio", "class._arc": "arc" } }, ngImport: i0, template: "<progress\n class=\"t-hidden-progress\"\n [max]=\"max\"\n [value]=\"value\"\n></progress>\n\n<svg\n aria-hidden=\"true\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-svg\"\n>\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-track\"\n />\n\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-progress\"\n [class.t-progress_filled]=\"animationDelay()\"\n />\n</svg>\n", styles: [":host{--t-stroke-width: var(--tui-thickness, .375em);position:relative;display:block;color:var(--tui-background-accent-1);transform:rotate(-90deg);transform-origin:center;font-size:1rem;inline-size:var(--t-diameter);min-inline-size:var(--t-diameter);block-size:var(--t-diameter);border-radius:100%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--t-stroke-width)),#000 calc(100% - var(--t-stroke-width) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--t-stroke-width)),#000 calc(100% - var(--t-stroke-width) + .5px))}:host._arc{transform:rotate(135deg)}:host[data-size=xxs]{--t-diameter: 2em}:host[data-size=xs]{--t-diameter: 2.5em}:host[data-size=s]{--t-diameter: 3.5em}:host[data-size=m]{--t-diameter: 4em}:host[data-size=l]{--t-diameter: 5em}:host[data-size=xl]{--t-diameter: 6em}:host[data-size=xxl]{--t-diameter: 8em}.t-track,.t-progress{fill:transparent;stroke-linecap:round;stroke-width:var(--t-stroke-width);r:calc((var(--t-diameter) - var(--t-stroke-width)) / 2)}.t-track{stroke:var(--tui-background-neutral-1)}:host._arc .t-track{stroke-dasharray:calc(.75 * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2))) calc(.25 * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)))}.t-progress{stroke:var(--tui-progress-color, currentColor);stroke-dasharray:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2));stroke-dashoffset:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2))}.t-progress_filled{transition-property:stroke-dashoffset,stroke-dasharray;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;transition-timing-function:linear;stroke-dashoffset:calc(calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)) - var(--t-progress-ratio) * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)))}:host._arc .t-progress{stroke-dashoffset:.1px;stroke-dasharray:calc(.75 * var(--t-progress-ratio) * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2))) calc(calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)))}.t-hidden-progress{position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0}.t-svg{overflow:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiProgressCircle };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiProgressCircle, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-size]': 'size',
'[style.--tui-progress-color]': 'color',
'[style.--t-progress-ratio]': 'progressRatio',
'[class._arc]': 'arc',
}, template: "<progress\n class=\"t-hidden-progress\"\n [max]=\"max\"\n [value]=\"value\"\n></progress>\n\n<svg\n aria-hidden=\"true\"\n height=\"100%\"\n width=\"100%\"\n class=\"t-svg\"\n>\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-track\"\n />\n\n <circle\n cx=\"50%\"\n cy=\"50%\"\n class=\"t-progress\"\n [class.t-progress_filled]=\"animationDelay()\"\n />\n</svg>\n", styles: [":host{--t-stroke-width: var(--tui-thickness, .375em);position:relative;display:block;color:var(--tui-background-accent-1);transform:rotate(-90deg);transform-origin:center;font-size:1rem;inline-size:var(--t-diameter);min-inline-size:var(--t-diameter);block-size:var(--t-diameter);border-radius:100%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--t-stroke-width)),#000 calc(100% - var(--t-stroke-width) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--t-stroke-width)),#000 calc(100% - var(--t-stroke-width) + .5px))}:host._arc{transform:rotate(135deg)}:host[data-size=xxs]{--t-diameter: 2em}:host[data-size=xs]{--t-diameter: 2.5em}:host[data-size=s]{--t-diameter: 3.5em}:host[data-size=m]{--t-diameter: 4em}:host[data-size=l]{--t-diameter: 5em}:host[data-size=xl]{--t-diameter: 6em}:host[data-size=xxl]{--t-diameter: 8em}.t-track,.t-progress{fill:transparent;stroke-linecap:round;stroke-width:var(--t-stroke-width);r:calc((var(--t-diameter) - var(--t-stroke-width)) / 2)}.t-track{stroke:var(--tui-background-neutral-1)}:host._arc .t-track{stroke-dasharray:calc(.75 * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2))) calc(.25 * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)))}.t-progress{stroke:var(--tui-progress-color, currentColor);stroke-dasharray:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2));stroke-dashoffset:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2))}.t-progress_filled{transition-property:stroke-dashoffset,stroke-dasharray;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;transition-timing-function:linear;stroke-dashoffset:calc(calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)) - var(--t-progress-ratio) * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)))}:host._arc .t-progress{stroke-dashoffset:.1px;stroke-dasharray:calc(.75 * var(--t-progress-ratio) * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2))) calc(calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-stroke-width)) / 2)))}.t-hidden-progress{position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0}.t-svg{overflow:unset}\n"] }]
}], propDecorators: { value: [{
type: Input
}], max: [{
type: Input
}], color: [{
type: Input
}], size: [{
type: Input
}], arc: [{
type: Input,
args: [{ transform: coerceBooleanProperty }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3Byb2dyZXNzL3Byb2dyZXNzLWNpcmNsZS9wcm9ncmVzcy1jaXJjbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHJvZ3Jlc3MvcHJvZ3Jlc3MtY2lyY2xlL3Byb2dyZXNzLWNpcmNsZS50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IscUJBQXFCLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUMvRSxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBRXBELE9BQU8sRUFBQyxLQUFLLEVBQUUsRUFBRSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBRS9CLE9BQU8sRUFBQyxvQkFBb0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQUV6RCxNQWFhLGlCQUFpQjtJQWI5QjtRQWNxQixZQUFPLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFFckMsbUJBQWMsR0FBRyxRQUFRLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRy9ELFVBQUssR0FBRyxDQUFDLENBQUM7UUFHVixRQUFHLEdBQUcsQ0FBQyxDQUFDO1FBR1IsVUFBSyxHQUFrQixJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQztRQUcxQyxTQUFJLEdBQTRCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBR2xELFFBQUcsR0FBaUIsS0FBSyxDQUFDO0tBT3BDO0lBTEcsSUFBYyxhQUFhO1FBQ3ZCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUVwQyxPQUFPLE1BQU0sQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQzlDLENBQUM7K0dBeEJRLGlCQUFpQjttR0FBakIsaUJBQWlCLCtJQWlCUCxxQkFBcUIsMExDdEM1Qyw4YkF5QkE7O1NESmEsaUJBQWlCOzRGQUFqQixpQkFBaUI7a0JBYjdCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLGtCQUFrQixFQUFFLE1BQU07d0JBQzFCLDhCQUE4QixFQUFFLE9BQU87d0JBQ3ZDLDRCQUE0QixFQUFFLGVBQWU7d0JBQzdDLGNBQWMsRUFBRSxLQUFLO3FCQUN4Qjs4QkFRTSxLQUFLO3NCQURYLEtBQUs7Z0JBSUMsR0FBRztzQkFEVCxLQUFLO2dCQUlDLEtBQUs7c0JBRFgsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsR0FBRztzQkFEVCxLQUFLO3VCQUFDLEVBQUMsU0FBUyxFQUFFLHFCQUFxQixFQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHt0eXBlIEJvb2xlYW5JbnB1dCwgY29lcmNlQm9vbGVhblByb3BlcnR5fSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3QsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dG9TaWduYWx9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7dHlwZSBUdWlTaXplWFhMLCB0eXBlIFR1aVNpemVYWFN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcbmltcG9ydCB7ZGVsYXksIG9mfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUVUlfUFJPR1JFU1NfT1BUSU9OU30gZnJvbSAnLi4vcHJvZ3Jlc3Mub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktcHJvZ3Jlc3MtY2lyY2xlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MtY2lyY2xlLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3Byb2dyZXNzLWNpcmNsZS5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2F0dHIuZGF0YS1zaXplXSc6ICdzaXplJyxcbiAgICAgICAgJ1tzdHlsZS4tLXR1aS1wcm9ncmVzcy1jb2xvcl0nOiAnY29sb3InLFxuICAgICAgICAnW3N0eWxlLi0tdC1wcm9ncmVzcy1yYXRpb10nOiAncHJvZ3Jlc3NSYXRpbycsXG4gICAgICAgICdbY2xhc3MuX2FyY10nOiAnYXJjJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlQcm9ncmVzc0NpcmNsZSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBvcHRpb25zID0gaW5qZWN0KFRVSV9QUk9HUkVTU19PUFRJT05TKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBhbmltYXRpb25EZWxheSA9IHRvU2lnbmFsKG9mKHRydWUpLnBpcGUoZGVsYXkoMCkpKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHZhbHVlID0gMDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG1heCA9IDE7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBjb2xvcjogc3RyaW5nIHwgbnVsbCA9IHRoaXMub3B0aW9ucy5jb2xvcjtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemU6IFR1aVNpemVYWEwgfCBUdWlTaXplWFhTID0gdGhpcy5vcHRpb25zLnNpemU7XG5cbiAgICBASW5wdXQoe3RyYW5zZm9ybTogY29lcmNlQm9vbGVhblByb3BlcnR5fSlcbiAgICBwdWJsaWMgYXJjOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcblxuICAgIHByb3RlY3RlZCBnZXQgcHJvZ3Jlc3NSYXRpbygpOiBudW1iZXIge1xuICAgICAgICBjb25zdCByYXRpbyA9IHRoaXMudmFsdWUgLyB0aGlzLm1heDtcblxuICAgICAgICByZXR1cm4gTnVtYmVyLmlzRmluaXRlKHJhdGlvKSA/IHJhdGlvIDogMDtcbiAgICB9XG59XG4iLCI8cHJvZ3Jlc3NcbiAgICBjbGFzcz1cInQtaGlkZGVuLXByb2dyZXNzXCJcbiAgICBbbWF4XT1cIm1heFwiXG4gICAgW3ZhbHVlXT1cInZhbHVlXCJcbj48L3Byb2dyZXNzPlxuXG48c3ZnXG4gICAgYXJpYS1oaWRkZW49XCJ0cnVlXCJcbiAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICB3aWR0aD1cIjEwMCVcIlxuICAgIGNsYXNzPVwidC1zdmdcIlxuPlxuICAgIDxjaXJjbGVcbiAgICAgICAgY3g9XCI1MCVcIlxuICAgICAgICBjeT1cIjUwJVwiXG4gICAgICAgIGNsYXNzPVwidC10cmFja1wiXG4gICAgLz5cblxuICAgIDxjaXJjbGVcbiAgICAgICAgY3g9XCI1MCVcIlxuICAgICAgICBjeT1cIjUwJVwiXG4gICAgICAgIGNsYXNzPVwidC1wcm9ncmVzc1wiXG4gICAgICAgIFtjbGFzcy50LXByb2dyZXNzX2ZpbGxlZF09XCJhbmltYXRpb25EZWxheSgpXCJcbiAgICAvPlxuPC9zdmc+XG4iXX0=