@taiga-ui/kit
Version:
Taiga UI Angular main components kit
39 lines • 10.9 kB
JavaScript
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;
}
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: "14.0.0", version: "16.2.12", type: TuiProgressCircle, isStandalone: true, selector: "tui-progress-circle", inputs: { value: "value", max: "max", color: "color", size: "size" }, host: { properties: { "attr.data-size": "size", "style.--tui-progress-color": "color", "style.--t-progress-ratio": "progressRatio" } }, 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-track-stroke: var(--tui-thickness, .375em);--t-progress-stroke: 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);block-size:var(--t-diameter);border-radius:100%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--t-track-stroke)),#000 calc(100% - var(--t-track-stroke) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--t-track-stroke)),#000 calc(100% - var(--t-track-stroke) + .5px))}: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{fill:transparent;stroke:var(--tui-background-neutral-1);stroke-width:var(--t-track-stroke);r:calc((var(--t-diameter) - var(--t-track-stroke)) / 2)}.t-progress{fill:transparent;stroke:var(--tui-progress-color, currentColor);stroke-linecap:round;stroke-width:var(--t-progress-stroke);stroke-dasharray:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 2));stroke-dashoffset:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 2));r:calc((var(--t-diameter) - var(--t-progress-stroke)) / 2)}.t-progress_filled{transition:stroke-dashoffset var(--tui-duration) linear;stroke-dashoffset:calc(calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 2)) - var(--t-progress-ratio) * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 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',
}, 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-track-stroke: var(--tui-thickness, .375em);--t-progress-stroke: 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);block-size:var(--t-diameter);border-radius:100%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--t-track-stroke)),#000 calc(100% - var(--t-track-stroke) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--t-track-stroke)),#000 calc(100% - var(--t-track-stroke) + .5px))}: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{fill:transparent;stroke:var(--tui-background-neutral-1);stroke-width:var(--t-track-stroke);r:calc((var(--t-diameter) - var(--t-track-stroke)) / 2)}.t-progress{fill:transparent;stroke:var(--tui-progress-color, currentColor);stroke-linecap:round;stroke-width:var(--t-progress-stroke);stroke-dasharray:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 2));stroke-dashoffset:calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 2));r:calc((var(--t-diameter) - var(--t-progress-stroke)) / 2)}.t-progress_filled{transition:stroke-dashoffset var(--tui-duration) linear;stroke-dashoffset:calc(calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 2)) - var(--t-progress-ratio) * calc(2 * 3.14159265 * calc((var(--t-diameter) - var(--t-progress-stroke)) / 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3Byb2dyZXNzL3Byb2dyZXNzLWNpcmNsZS9wcm9ncmVzcy1jaXJjbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHJvZ3Jlc3MvcHJvZ3Jlc3MtY2lyY2xlL3Byb2dyZXNzLWNpcmNsZS50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFFcEQsT0FBTyxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFL0IsT0FBTyxFQUFDLG9CQUFvQixFQUFDLE1BQU0scUJBQXFCLENBQUM7O0FBRXpELE1BWWEsaUJBQWlCO0lBWjlCO1FBYXFCLFlBQU8sR0FBRyxNQUFNLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUVyQyxtQkFBYyxHQUFHLFFBQVEsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFHL0QsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUdWLFFBQUcsR0FBRyxDQUFDLENBQUM7UUFHUixVQUFLLEdBQWtCLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDO1FBRzFDLFNBQUksR0FBNEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7S0FPNUQ7SUFMRyxJQUFjLGFBQWE7UUFDdkIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBRXBDLE9BQU8sTUFBTSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDOUMsQ0FBQzsrR0FyQlEsaUJBQWlCO21HQUFqQixpQkFBaUIsNlJDbkI5Qiw4YkF5QkE7O1NETmEsaUJBQWlCOzRGQUFqQixpQkFBaUI7a0JBWjdCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLGtCQUFrQixFQUFFLE1BQU07d0JBQzFCLDhCQUE4QixFQUFFLE9BQU87d0JBQ3ZDLDRCQUE0QixFQUFFLGVBQWU7cUJBQ2hEOzhCQVFNLEtBQUs7c0JBRFgsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUs7Z0JBSUMsS0FBSztzQkFEWCxLQUFLO2dCQUlDLElBQUk7c0JBRFYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3RvU2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgdHlwZSB7VHVpU2l6ZVhYTCwgVHVpU2l6ZVhYU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdHlwZXMnO1xuaW1wb3J0IHtkZWxheSwgb2Z9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQge1RVSV9QUk9HUkVTU19PUFRJT05TfSBmcm9tICcuLi9wcm9ncmVzcy5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1wcm9ncmVzcy1jaXJjbGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy1jaXJjbGUudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtY2lyY2xlLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICdbYXR0ci5kYXRhLXNpemVdJzogJ3NpemUnLFxuICAgICAgICAnW3N0eWxlLi0tdHVpLXByb2dyZXNzLWNvbG9yXSc6ICdjb2xvcicsXG4gICAgICAgICdbc3R5bGUuLS10LXByb2dyZXNzLXJhdGlvXSc6ICdwcm9ncmVzc1JhdGlvJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlQcm9ncmVzc0NpcmNsZSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBvcHRpb25zID0gaW5qZWN0KFRVSV9QUk9HUkVTU19PUFRJT05TKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBhbmltYXRpb25EZWxheSA9IHRvU2lnbmFsKG9mKHRydWUpLnBpcGUoZGVsYXkoMCkpKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHZhbHVlID0gMDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG1heCA9IDE7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBjb2xvcjogc3RyaW5nIHwgbnVsbCA9IHRoaXMub3B0aW9ucy5jb2xvcjtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemU6IFR1aVNpemVYWEwgfCBUdWlTaXplWFhTID0gdGhpcy5vcHRpb25zLnNpemU7XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IHByb2dyZXNzUmF0aW8oKTogbnVtYmVyIHtcbiAgICAgICAgY29uc3QgcmF0aW8gPSB0aGlzLnZhbHVlIC8gdGhpcy5tYXg7XG5cbiAgICAgICAgcmV0dXJuIE51bWJlci5pc0Zpbml0ZShyYXRpbykgPyByYXRpbyA6IDA7XG4gICAgfVxufVxuIiwiPHByb2dyZXNzXG4gICAgY2xhc3M9XCJ0LWhpZGRlbi1wcm9ncmVzc1wiXG4gICAgW21heF09XCJtYXhcIlxuICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4+PC9wcm9ncmVzcz5cblxuPHN2Z1xuICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgd2lkdGg9XCIxMDAlXCJcbiAgICBjbGFzcz1cInQtc3ZnXCJcbj5cbiAgICA8Y2lyY2xlXG4gICAgICAgIGN4PVwiNTAlXCJcbiAgICAgICAgY3k9XCI1MCVcIlxuICAgICAgICBjbGFzcz1cInQtdHJhY2tcIlxuICAgIC8+XG5cbiAgICA8Y2lyY2xlXG4gICAgICAgIGN4PVwiNTAlXCJcbiAgICAgICAgY3k9XCI1MCVcIlxuICAgICAgICBjbGFzcz1cInQtcHJvZ3Jlc3NcIlxuICAgICAgICBbY2xhc3MudC1wcm9ncmVzc19maWxsZWRdPVwiYW5pbWF0aW9uRGVsYXkoKVwiXG4gICAgLz5cbjwvc3ZnPlxuIl19