@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-loader.mjs

@@ -0,0 +1,141 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MLV_LOADER_I18N } from '@malva-ui/i18n';
+import { of, delay } from 'rxjs';
+
+class MlvLoader {
+    /** Visual variant — `'bar'` for a horizontal progress bar, `'circle'` for a circular spinner. */
+    variant = input('bar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Semantic tone. Controls the `--mlv-l-color` CSS token. */
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Current progress value. Used in determinate mode together with `max`. */
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Maximum progress value. Defaults to `100`. */
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, the loader animates continuously without tracking a specific value.
+     * Disables all ARIA value attributes (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`).
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Pixel size of the loader.
+     * For `'bar'` variant this sets the track height (defaults to `4`).
+     * For `'circle'` variant this sets the diameter (defaults to `48`).
+     */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Stroke width in pixels for the `'circle'` variant. Defaults to `4`. */
+    strokeWidth = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Custom aria-label override. Falls back to the i18n-provided label. */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, displays the current progress percentage as a text hint.
+     * For the `'bar'` variant the hint appears above the track.
+     * For the `'circle'` variant the hint appears centred inside the ring.
+     * Only shown when the loader is in determinate mode (not `indeterminate`).
+     */
+    showHint = input(false, { ...(ngDevMode ? { debugName: "showHint" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Custom color override applied directly to `--mlv-l-color`.
+     * Accepts any valid CSS color value or a `linear-gradient()` / `url('#paintServerId')` string.
+     * When set, takes precedence over the `tone` color.
+     */
+    color = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom fill color override applied directly to `--mlv-l-track-color`.
+     * Accepts any valid CSS color value or a `linear-gradient()` / `url('#paintServerId')` string.
+     * When set, takes precedence over the `tone` color.
+     */
+    trackColor = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, adds a shimmer sweep animation over the filled bar / arc.
+     * Only applies to the `'bar'` variant in determinate mode.
+     * Has no effect in indeterminate mode (the bar is already animated).
+     */
+    glow = input(false, { ...(ngDevMode ? { debugName: "glow" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_LOADER_I18N);
+    /** @protected Resolved aria-label: explicit input takes precedence over i18n default. */
+    _resolvedAriaLabel = computed(() => this.ariaLabel() ?? this._i18n().loading, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Resolves the effective pixel size based on `size` input and `variant`. */
+    _normalizedSize = computed(() => {
+        const inputSize = this.size();
+        if (inputSize !== undefined)
+            return inputSize;
+        return this.variant() === 'bar' ? 4 : 48;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_normalizedSize" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Delays enabling the CSS fill transition by one event loop tick so the
+     * browser has a defined starting `stroke-dashoffset` before the transition begins.
+     * Starts as `undefined` (falsy) and becomes truthy after the microtask queue drains.
+     */
+    _progressVisible = toSignal(of(true).pipe(delay(0)));
+    /** @protected `true` when the loader is in determinate (value-tracking) mode. */
+    _determinate = computed(() => !this.indeterminate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_determinate" }] : /* istanbul ignore next */ []));
+    /** @protected Progress as a percentage clamped between 0 and 100. */
+    _percentage = computed(() => {
+        const val = Math.max(0, Math.min(this.value(), this.max()));
+        return (val / this.max()) * 100;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_percentage" }] : /* istanbul ignore next */ []));
+    /** @protected Formatted hint text shown when `showHint` is true and mode is determinate. */
+    _hintText = computed(() => `${Math.round(this._percentage())}%`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hintText" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the hint should be visible. */
+    _showHint = computed(() => this.showHint() && this._determinate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showHint" }] : /* istanbul ignore next */ []));
+    /** @protected CSS class string applied to the host element. */
+    _hostClasses = computed(() => {
+        const classes = [
+            `mlv-loader--${this.variant()}`,
+            `mlv-loader--${this.tone()}`,
+        ];
+        if (this.indeterminate()) {
+            classes.push('mlv-loader--indeterminate');
+        }
+        if (this.glow()) {
+            classes.push('mlv-loader--glow');
+        }
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvLoader, isStandalone: true, selector: "mlv-loader", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showHint: { classPropertyName: "showHint", publicName: "showHint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, glow: { classPropertyName: "glow", publicName: "glow", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "_hostClasses()", "style.--mlv-l-progress": "_determinate() && _progressVisible() ? _percentage() / 100 : null", "style.--mlv-l-diameter": "_normalizedSize() + \"px\"", "style.--mlv-l-stroke-width": "strokeWidth() + \"px\"", "style.--mlv-l-color": "color() || null", "style.--mlv-l-track-color": "trackColor() || null", "attr.aria-valuenow": "_determinate() ? value() : null", "attr.aria-valuemin": "_determinate() ? 0 : null", "attr.aria-valuemax": "_determinate() ? max() : null", "attr.aria-label": "_resolvedAriaLabel()" }, classAttribute: "mlv-loader" }, ngImport: i0, template: "@if (_showHint() && variant() === 'bar') {\n<span class=\"mlv-loader__hint\" aria-hidden=\"true\">{{ _hintText() }}</span>\n}\n<div class=\"mlv-loader__track\">\n  <div class=\"mlv-loader__bar\"></div>\n</div>\n\n@if (variant() === 'circle') {\n<div class=\"mlv-loader__circle-wrapper\">\n  <svg aria-hidden=\"true\" height=\"100%\" width=\"100%\" class=\"mlv-loader__circle\">\n    <circle cx=\"50%\" cy=\"50%\" class=\"mlv-loader__circle-track\" />\n\n    <circle\n      cx=\"50%\"\n      cy=\"50%\"\n      class=\"mlv-loader__circle-fill\"\n      [class.mlv-loader__circle-fill--filled]=\"_progressVisible()\"\n    />\n  </svg>\n</div>\n@if (_showHint()) {\n<span class=\"mlv-loader__hint\" aria-hidden=\"true\">{{ _hintText() }}</span>\n} }\n", styles: ["@layer mlv.components{.mlv-loader{display:inline-flex;--mlv-l-color: var(--mlv-background-accent-1)}.mlv-loader--default{--mlv-l-color: var(--mlv-background-accent-1)}.mlv-loader--success{--mlv-l-color: var(--mlv-palette-success-500)}.mlv-loader--info{--mlv-l-color: var(--mlv-palette-info-500)}.mlv-loader--warning{--mlv-l-color: var(--mlv-background-warning-1)}.mlv-loader--danger{--mlv-l-color: var(--mlv-background-danger-1)}.mlv-loader--bar{display:flex;flex-direction:column;width:100%}.mlv-loader--bar .mlv-loader__hint{align-self:flex-end;font-size:var(--mlv-typography-ui-s-size);font-weight:var(--mlv-font-weight-medium);color:var(--mlv-text-secondary);margin-bottom:.25rem;line-height:1}.mlv-loader--bar .mlv-loader__track{position:relative;width:100%;block-size:var(--mlv-l-diameter, .25rem);border-radius:var(--mlv-radius-full);background:var(--mlv-border-subtle);overflow:hidden}.mlv-loader--bar .mlv-loader__bar{position:absolute;top:0;bottom:0;inset-inline-start:0;border-radius:inherit;background:var(--mlv-l-color);width:calc(var(--mlv-l-progress, 0) * 100%);transition:width var(--mlv-duration-normal) linear}.mlv-loader--bar.mlv-loader--glow:not(.mlv-loader--indeterminate) .mlv-loader__bar:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);animation:mlv-loader-bar-shimmer 1.8s ease-in-out infinite}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__bar{display:none}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:before,.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:after{content:\"\";position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:inherit;background:var(--mlv-l-color);transform-origin:left center;will-change:translate,scale}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:before{animation:mlv-loader-bar-primary-translate 3s linear infinite,mlv-loader-bar-primary-scale 3s linear infinite}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:after{animation:mlv-loader-bar-secondary-translate 3s linear infinite,mlv-loader-bar-secondary-scale 3s linear infinite;animation-delay:1.725s,1.725s}.mlv-loader--circle{position:relative;inline-size:var(--mlv-l-diameter);min-inline-size:var(--mlv-l-diameter);block-size:var(--mlv-l-diameter)}.mlv-loader--circle .mlv-loader__circle-wrapper{inline-size:100%;block-size:100%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--mlv-l-stroke-width)),#000 calc(100% - var(--mlv-l-stroke-width) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--mlv-l-stroke-width)),#000 calc(100% - var(--mlv-l-stroke-width) + .5px))}.mlv-loader--circle .mlv-loader__track,.mlv-loader--circle .mlv-loader__bar{display:none}.mlv-loader--circle .mlv-loader__hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--mlv-typography-ui-s-size);font-weight:var(--mlv-font-weight-medium);color:var(--mlv-text-primary);line-height:1;pointer-events:none}.mlv-loader--circle .mlv-loader__circle{display:block;overflow:visible;shape-rendering:geometricPrecision}.mlv-loader--circle .mlv-loader__circle-fill,.mlv-loader--circle .mlv-loader__circle-track{fill:transparent;stroke-linecap:round;stroke-width:var(--mlv-l-stroke-width);r:calc((var(--mlv-l-diameter) - var(--mlv-l-stroke-width)) / 2)}.mlv-loader--circle .mlv-loader__circle-fill{stroke:var(--mlv-l-color);stroke-dasharray:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)));stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)));transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}.mlv-loader--circle .mlv-loader__circle-fill--filled{transition-property:stroke-dashoffset,stroke-dasharray;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-default);stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)) - var(--mlv-l-progress, 0) * 3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}.mlv-loader--circle .mlv-loader__circle-track{stroke:var(--mlv-l-track-color, var(--mlv-border-subtle))}.mlv-loader--circle.mlv-loader--indeterminate .mlv-loader__circle{animation:mlv-loader-circle-rotate 4s linear infinite}.mlv-loader--circle.mlv-loader--indeterminate .mlv-loader__circle-fill{transition:none!important;transform-origin:center;stroke-dasharray:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)));animation:mlv-loader-circle-dash 4s linear infinite}@media(prefers-reduced-motion:reduce){.mlv-loader,.mlv-loader *,.mlv-loader:before,.mlv-loader:after,[class^=mlv-loader__],[class*=\" mlv-loader__\"],[class^=mlv-loader--],[class*=\" mlv-loader--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes mlv-loader-bar-shimmer{0%{translate:-200%}to{translate:200%}}@keyframes mlv-loader-bar-primary-translate{0%{translate:-100%}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);translate:-100%}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);translate:-16.329%}to{translate:100.611%}}@keyframes mlv-loader-bar-primary-scale{0%{scale:.08 1}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);scale:.08 1}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);scale:.661479 1}to{scale:.08 1}}@keyframes mlv-loader-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);translate:-100%}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);translate:-62.348%}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);translate:-15.614%}to{translate:120%}}@keyframes mlv-loader-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);scale:.08 1}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);scale:.457104 1}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);scale:.72796 1}to{scale:.08 1}}@keyframes mlv-loader-circle-rotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}@keyframes mlv-loader-circle-dash{0%{stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}50%{stroke-dashoffset:calc(.05 * 3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}to{stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-loader', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-loader',
+                        '[class]': '_hostClasses()',
+                        role: 'progressbar',
+                        '[style.--mlv-l-progress]': '_determinate() && _progressVisible() ? _percentage() / 100 : null',
+                        '[style.--mlv-l-diameter]': '_normalizedSize() + "px"',
+                        '[style.--mlv-l-stroke-width]': 'strokeWidth() + "px"',
+                        '[style.--mlv-l-color]': 'color() || null',
+                        '[style.--mlv-l-track-color]': 'trackColor() || null',
+                        '[attr.aria-valuenow]': '_determinate() ? value() : null',
+                        '[attr.aria-valuemin]': '_determinate() ? 0 : null',
+                        '[attr.aria-valuemax]': '_determinate() ? max() : null',
+                        '[attr.aria-label]': '_resolvedAriaLabel()',
+                    }, template: "@if (_showHint() && variant() === 'bar') {\n<span class=\"mlv-loader__hint\" aria-hidden=\"true\">{{ _hintText() }}</span>\n}\n<div class=\"mlv-loader__track\">\n  <div class=\"mlv-loader__bar\"></div>\n</div>\n\n@if (variant() === 'circle') {\n<div class=\"mlv-loader__circle-wrapper\">\n  <svg aria-hidden=\"true\" height=\"100%\" width=\"100%\" class=\"mlv-loader__circle\">\n    <circle cx=\"50%\" cy=\"50%\" class=\"mlv-loader__circle-track\" />\n\n    <circle\n      cx=\"50%\"\n      cy=\"50%\"\n      class=\"mlv-loader__circle-fill\"\n      [class.mlv-loader__circle-fill--filled]=\"_progressVisible()\"\n    />\n  </svg>\n</div>\n@if (_showHint()) {\n<span class=\"mlv-loader__hint\" aria-hidden=\"true\">{{ _hintText() }}</span>\n} }\n", styles: ["@layer mlv.components{.mlv-loader{display:inline-flex;--mlv-l-color: var(--mlv-background-accent-1)}.mlv-loader--default{--mlv-l-color: var(--mlv-background-accent-1)}.mlv-loader--success{--mlv-l-color: var(--mlv-palette-success-500)}.mlv-loader--info{--mlv-l-color: var(--mlv-palette-info-500)}.mlv-loader--warning{--mlv-l-color: var(--mlv-background-warning-1)}.mlv-loader--danger{--mlv-l-color: var(--mlv-background-danger-1)}.mlv-loader--bar{display:flex;flex-direction:column;width:100%}.mlv-loader--bar .mlv-loader__hint{align-self:flex-end;font-size:var(--mlv-typography-ui-s-size);font-weight:var(--mlv-font-weight-medium);color:var(--mlv-text-secondary);margin-bottom:.25rem;line-height:1}.mlv-loader--bar .mlv-loader__track{position:relative;width:100%;block-size:var(--mlv-l-diameter, .25rem);border-radius:var(--mlv-radius-full);background:var(--mlv-border-subtle);overflow:hidden}.mlv-loader--bar .mlv-loader__bar{position:absolute;top:0;bottom:0;inset-inline-start:0;border-radius:inherit;background:var(--mlv-l-color);width:calc(var(--mlv-l-progress, 0) * 100%);transition:width var(--mlv-duration-normal) linear}.mlv-loader--bar.mlv-loader--glow:not(.mlv-loader--indeterminate) .mlv-loader__bar:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);animation:mlv-loader-bar-shimmer 1.8s ease-in-out infinite}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__bar{display:none}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:before,.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:after{content:\"\";position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:inherit;background:var(--mlv-l-color);transform-origin:left center;will-change:translate,scale}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:before{animation:mlv-loader-bar-primary-translate 3s linear infinite,mlv-loader-bar-primary-scale 3s linear infinite}.mlv-loader--bar.mlv-loader--indeterminate .mlv-loader__track:after{animation:mlv-loader-bar-secondary-translate 3s linear infinite,mlv-loader-bar-secondary-scale 3s linear infinite;animation-delay:1.725s,1.725s}.mlv-loader--circle{position:relative;inline-size:var(--mlv-l-diameter);min-inline-size:var(--mlv-l-diameter);block-size:var(--mlv-l-diameter)}.mlv-loader--circle .mlv-loader__circle-wrapper{inline-size:100%;block-size:100%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--mlv-l-stroke-width)),#000 calc(100% - var(--mlv-l-stroke-width) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--mlv-l-stroke-width)),#000 calc(100% - var(--mlv-l-stroke-width) + .5px))}.mlv-loader--circle .mlv-loader__track,.mlv-loader--circle .mlv-loader__bar{display:none}.mlv-loader--circle .mlv-loader__hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--mlv-typography-ui-s-size);font-weight:var(--mlv-font-weight-medium);color:var(--mlv-text-primary);line-height:1;pointer-events:none}.mlv-loader--circle .mlv-loader__circle{display:block;overflow:visible;shape-rendering:geometricPrecision}.mlv-loader--circle .mlv-loader__circle-fill,.mlv-loader--circle .mlv-loader__circle-track{fill:transparent;stroke-linecap:round;stroke-width:var(--mlv-l-stroke-width);r:calc((var(--mlv-l-diameter) - var(--mlv-l-stroke-width)) / 2)}.mlv-loader--circle .mlv-loader__circle-fill{stroke:var(--mlv-l-color);stroke-dasharray:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)));stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)));transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}.mlv-loader--circle .mlv-loader__circle-fill--filled{transition-property:stroke-dashoffset,stroke-dasharray;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-default);stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)) - var(--mlv-l-progress, 0) * 3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}.mlv-loader--circle .mlv-loader__circle-track{stroke:var(--mlv-l-track-color, var(--mlv-border-subtle))}.mlv-loader--circle.mlv-loader--indeterminate .mlv-loader__circle{animation:mlv-loader-circle-rotate 4s linear infinite}.mlv-loader--circle.mlv-loader--indeterminate .mlv-loader__circle-fill{transition:none!important;transform-origin:center;stroke-dasharray:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)));animation:mlv-loader-circle-dash 4s linear infinite}@media(prefers-reduced-motion:reduce){.mlv-loader,.mlv-loader *,.mlv-loader:before,.mlv-loader:after,[class^=mlv-loader__],[class*=\" mlv-loader__\"],[class^=mlv-loader--],[class*=\" mlv-loader--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}@keyframes mlv-loader-bar-shimmer{0%{translate:-200%}to{translate:200%}}@keyframes mlv-loader-bar-primary-translate{0%{translate:-100%}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);translate:-100%}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);translate:-16.329%}to{translate:100.611%}}@keyframes mlv-loader-bar-primary-scale{0%{scale:.08 1}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);scale:.08 1}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);scale:.661479 1}to{scale:.08 1}}@keyframes mlv-loader-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);translate:-100%}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);translate:-62.348%}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);translate:-15.614%}to{translate:120%}}@keyframes mlv-loader-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);scale:.08 1}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);scale:.457104 1}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);scale:.72796 1}to{scale:.08 1}}@keyframes mlv-loader-circle-rotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}@keyframes mlv-loader-circle-dash{0%{stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}50%{stroke-dashoffset:calc(.05 * 3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}to{stroke-dashoffset:calc(3.1415926536 * (var(--mlv-l-diameter) - var(--mlv-l-stroke-width)))}}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], glow: [{ type: i0.Input, args: [{ isSignal: true, alias: "glow", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvLoader };
+//# sourceMappingURL=malva-ui-core-loader.mjs.map

package/fesm2022/malva-ui-core-loader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-loader.mjs","sources":["../../../../libs/core/loader/src/lib/loader/loader.ts","../../../../libs/core/loader/src/lib/loader/loader.html","../../../../libs/core/loader/src/malva-ui-core-loader.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MLV_LOADER_I18N } from '@malva-ui/i18n';\nimport type { MlvTone } from '@malva-ui/cdk/utils';\n\n/**\n * Semantic tone of the loader. Extends the shared {@link MlvTone} vocabulary\n * (`'info' | 'success' | 'warning' | 'danger'`) with a neutral `'default'`.\n */\nexport type MlvLoaderTone = MlvTone | 'default';\nimport { delay, of } from 'rxjs';\n\n/** Visual variant of the loader. */\nexport type MlvLoaderVariant = 'bar' | 'circle';\n\n@Component({\n  selector: 'mlv-loader',\n  imports: [],\n  templateUrl: './loader.html',\n  styleUrl: './loader.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-loader',\n    '[class]': '_hostClasses()',\n    role: 'progressbar',\n    '[style.--mlv-l-progress]':\n      '_determinate() && _progressVisible() ? _percentage() / 100 : null',\n    '[style.--mlv-l-diameter]': '_normalizedSize() + \"px\"',\n    '[style.--mlv-l-stroke-width]': 'strokeWidth() + \"px\"',\n    '[style.--mlv-l-color]': 'color() || null',\n    '[style.--mlv-l-track-color]': 'trackColor() || null',\n    '[attr.aria-valuenow]': '_determinate() ? value() : null',\n    '[attr.aria-valuemin]': '_determinate() ? 0 : null',\n    '[attr.aria-valuemax]': '_determinate() ? max() : null',\n    '[attr.aria-label]': '_resolvedAriaLabel()',\n  },\n})\nexport class MlvLoader {\n  /** Visual variant — `'bar'` for a horizontal progress bar, `'circle'` for a circular spinner. */\n  readonly variant = input<MlvLoaderVariant>('bar');\n\n  /** Semantic tone. Controls the `--mlv-l-color` CSS token. */\n  readonly tone = input<MlvLoaderTone>('default');\n\n  /** Current progress value. Used in determinate mode together with `max`. */\n  readonly value = input(0);\n\n  /** Maximum progress value. Defaults to `100`. */\n  readonly max = input(100);\n\n  /**\n   * When `true`, the loader animates continuously without tracking a specific value.\n   * Disables all ARIA value attributes (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`).\n   */\n  readonly indeterminate = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Pixel size of the loader.\n   * For `'bar'` variant this sets the track height (defaults to `4`).\n   * For `'circle'` variant this sets the diameter (defaults to `48`).\n   */\n  readonly size = input<number | undefined>(undefined);\n\n  /** Stroke width in pixels for the `'circle'` variant. Defaults to `4`. */\n  readonly strokeWidth = input(4);\n\n  /** Custom aria-label override. Falls back to the i18n-provided label. */\n  readonly ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * When `true`, displays the current progress percentage as a text hint.\n   * For the `'bar'` variant the hint appears above the track.\n   * For the `'circle'` variant the hint appears centred inside the ring.\n   * Only shown when the loader is in determinate mode (not `indeterminate`).\n   */\n  readonly showHint = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Custom color override applied directly to `--mlv-l-color`.\n   * Accepts any valid CSS color value or a `linear-gradient()` / `url('#paintServerId')` string.\n   * When set, takes precedence over the `tone` color.\n   */\n  readonly color = input<string | undefined>(undefined);\n\n  /**\n   * Custom fill color override applied directly to `--mlv-l-track-color`.\n   * Accepts any valid CSS color value or a `linear-gradient()` / `url('#paintServerId')` string.\n   * When set, takes precedence over the `tone` color.\n   */\n  readonly trackColor = input<string | undefined>(undefined);\n\n  /**\n   * When `true`, adds a shimmer sweep animation over the filled bar / arc.\n   * Only applies to the `'bar'` variant in determinate mode.\n   * Has no effect in indeterminate mode (the bar is already animated).\n   */\n  readonly glow = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_LOADER_I18N);\n\n  /** @protected Resolved aria-label: explicit input takes precedence over i18n default. */\n  protected readonly _resolvedAriaLabel = computed(\n    () => this.ariaLabel() ?? this._i18n().loading,\n  );\n\n  /** @protected Resolves the effective pixel size based on `size` input and `variant`. */\n  protected readonly _normalizedSize = computed(() => {\n    const inputSize = this.size();\n    if (inputSize !== undefined) return inputSize;\n    return this.variant() === 'bar' ? 4 : 48;\n  });\n\n  /**\n   * @protected Delays enabling the CSS fill transition by one event loop tick so the\n   * browser has a defined starting `stroke-dashoffset` before the transition begins.\n   * Starts as `undefined` (falsy) and becomes truthy after the microtask queue drains.\n   */\n  protected readonly _progressVisible = toSignal(of(true).pipe(delay(0)));\n\n  /** @protected `true` when the loader is in determinate (value-tracking) mode. */\n  protected readonly _determinate = computed(() => !this.indeterminate());\n\n  /** @protected Progress as a percentage clamped between 0 and 100. */\n  protected readonly _percentage = computed(() => {\n    const val = Math.max(0, Math.min(this.value(), this.max()));\n    return (val / this.max()) * 100;\n  });\n\n  /** @protected Formatted hint text shown when `showHint` is true and mode is determinate. */\n  protected readonly _hintText = computed(\n    () => `${Math.round(this._percentage())}%`,\n  );\n\n  /** @protected Whether the hint should be visible. */\n  protected readonly _showHint = computed(\n    () => this.showHint() && this._determinate(),\n  );\n\n  /** @protected CSS class string applied to the host element. */\n  protected readonly _hostClasses = computed(() => {\n    const classes = [\n      `mlv-loader--${this.variant()}`,\n      `mlv-loader--${this.tone()}`,\n    ];\n    if (this.indeterminate()) {\n      classes.push('mlv-loader--indeterminate');\n    }\n    if (this.glow()) {\n      classes.push('mlv-loader--glow');\n    }\n    return classes.join(' ');\n  });\n}\n","@if (_showHint() && variant() === 'bar') {\n<span class=\"mlv-loader__hint\" aria-hidden=\"true\">{{ _hintText() }}</span>\n}\n<div class=\"mlv-loader__track\">\n  <div class=\"mlv-loader__bar\"></div>\n</div>\n\n@if (variant() === 'circle') {\n<div class=\"mlv-loader__circle-wrapper\">\n  <svg aria-hidden=\"true\" height=\"100%\" width=\"100%\" class=\"mlv-loader__circle\">\n    <circle cx=\"50%\" cy=\"50%\" class=\"mlv-loader__circle-track\" />\n\n    <circle\n      cx=\"50%\"\n      cy=\"50%\"\n      class=\"mlv-loader__circle-fill\"\n      [class.mlv-loader__circle-fill--filled]=\"_progressVisible()\"\n    />\n  </svg>\n</div>\n@if (_showHint()) {\n<span class=\"mlv-loader__hint\" aria-hidden=\"true\">{{ _hintText() }}</span>\n} }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}