@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs

@@ -0,0 +1,200 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, computed, contentChild, input, Component } from '@angular/core';
+import { getPercentage } from '@nanahoshi/mona-ui/common';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class CircularProgressBarLabelTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CircularProgressBarLabelTemplateDirective, isStandalone: true, selector: "ng-template[monaCircularProgressBarLabelTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaCircularProgressBarLabelTemplate]"
+                }]
+        }] });
+
+const circularProgressBarBaseVariants = cva(`
+        flex items-center justify-center
+        relative select-none
+        [&_svg]:w-full [&_svg]:h-full
+        [&_svg]:absolute [&_svg]:top-1/2
+        [&_svg]:left-1/2
+        [&_svg]:-translate-x-1/2 [&_svg]:-translate-y-1/2
+        [&_svg_circle]:origin-center
+        [&_svg_circle]:-rotate-90
+        [&_svg_circle]:transition-[stroke-dashoffset,stroke] duration-200 ease-in
+        [&_svg_circle]:data-[stroke-trail='true']:stroke-input-border
+    `, {
+    variants: {
+        disabled: {
+            true: "opacity-50 pointer-events-none cursor-not-allowed",
+            false: ""
+        }
+    }
+});
+
+const circularProgressBarBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return circularProgressBarBaseVariants;
+        default:
+            return circularProgressBarBaseVariants;
+    }
+};
+
+class CircularProgressBarComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const classes = circularProgressBarBaseThemeVariants(theme)({ disabled });
+            const animateClass = this.animate() ? "" : "[&_svg_circle]:transition-none";
+            return twMerge(classes, this.userClass(), animateClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.center = computed(() => ({
+            x: this.size() / 2,
+            y: this.size() / 2
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
+        this.circumference = computed(() => 2 * Math.PI * (this.size() / 2 - this.thickness()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+        this.labelTemplate = contentChild(CircularProgressBarLabelTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
+        this.pixelSize = computed(() => `${this.size()}px`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* istanbul ignore next */ []));
+        this.progress = computed(() => getPercentage(this.value(), this.min(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        this.radius = computed(() => this.size() / 2 - this.thickness(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+        this.strokeColor = computed(() => {
+            if (typeof this.color() === "string") {
+                return this.color() || "var(--color-primary)";
+            }
+            const colorize = this.color();
+            return colorize(this.progress());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strokeColor" }] : /* istanbul ignore next */ []));
+        this.strokeDashOffset = computed(() => {
+            const progress = Math.min(Math.max(this.progress(), 0), 100);
+            const dashOffset = this.circumference() * (1 - progress / 100);
+            return this.indeterminate() ? this.circumference() / 1.42 : dashOffset;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strokeDashOffset" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables CSS transitions on stroke and color changes.
+         * Set to `false` when updating `value` at a high frequency.
+         * @default true
+         */
+        this.animate = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the host element. Describe what the component represents (e.g., "Upload progress").
+         * When empty, assistive technology announces the role without a label.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Human-readable override for the `aria-valuenow` announcement.
+         * Useful in indeterminate mode — set to a localized string such as `"Loading"`
+         * so screen readers announce state rather than silence.
+         * When empty, assistive technology falls back to the numeric value.
+         * @default ""
+         */
+        this.ariaValueText = input("", { ...(ngDevMode ? { debugName: "ariaValueText" } : /* istanbul ignore next */ {}), alias: "aria-valuetext" });
+        /**
+         * @description Accent color. Pass a CSS color string, or a function receiving the current percentage (0–100) and
+         * returning a string. When empty, falls back to the primary theme color.
+         * @default ""
+         */
+        this.color = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Activates indeterminate mode when the completion value is unknown.
+         * ARIA value attributes are removed and `aria-busy` is set on the host element.
+         * @default false
+         */
+        this.indeterminate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Upper bound of the value range. Must be greater than `min`.
+         * @default 100
+         */
+        this.max = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Lower bound of the value range.
+         * @default 0
+         */
+        this.min = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Diameter of the indicator in pixels. Controls both width and height of the host element.
+         * @default 100
+         */
+        this.size = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Stroke width of the circular track in pixels.
+         * @default 6
+         */
+        this.thickness = input(6, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Current progress value within `[min, max]`. Values outside the range are clamped before rendering; non-finite values are treated as `0`.
+         * @default 0
+         */
+        this.value = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CircularProgressBarComponent, isStandalone: true, selector: "mona-circular-progress-bar", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled() || null", "style.width": "pixelSize()", "style.height": "pixelSize()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CircularProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<svg>\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.data-stroke-trail]=\"true\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\" />\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.stroke]=\"strokeColor()\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\"\r\n        [class.indeterminate]=\"indeterminate()\" />\r\n</svg>\r\n@if (!indeterminate()) {\r\n    <div class=\"mona-circular-progress-bar-label\">\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            {{ progress() }}\r\n        }\r\n    </div>\r\n}\r\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-circular-progress-bar", imports: [NgTemplateOutlet], host: {
+                        "[class]": "baseClasses()",
+                        "[attr.aria-busy]": "indeterminate() || null",
+                        "[attr.aria-label]": "ariaLabel() || null",
+                        "[attr.aria-valuemin]": "indeterminate() ? null : min()",
+                        "[attr.aria-valuemax]": "indeterminate() ? null : max()",
+                        "[attr.aria-valuenow]": "indeterminate() ? null : value()",
+                        "[attr.aria-valuetext]": "ariaValueText() || null",
+                        "[attr.aria-disabled]": "disabled() || null",
+                        "[attr.data-disabled]": "disabled() || null",
+                        role: "progressbar",
+                        "[style.width]": "pixelSize()",
+                        "[style.height]": "pixelSize()"
+                    }, template: "<svg>\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.data-stroke-trail]=\"true\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\" />\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.stroke]=\"strokeColor()\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\"\r\n        [class.indeterminate]=\"indeterminate()\" />\r\n</svg>\r\n@if (!indeterminate()) {\r\n    <div class=\"mona-circular-progress-bar-label\">\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            {{ progress() }}\r\n        }\r\n    </div>\r\n}\r\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CircularProgressBarLabelTemplateDirective), { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/circular-progress-bar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CircularProgressBarComponent, CircularProgressBarLabelTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-circular-progress-bar.mjs.map