@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-slider.mjs

@@ -0,0 +1,347 @@
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, input, booleanAttribute, output, signal, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * # FuiSliderComponent
+ *
+ * A slider (range input) component with single and dual-thumb (range) support.
+ * Integrates with Angular Reactive Forms via ControlValueAccessor.
+ *
+ * ## Features
+ * - Single value and range (dual-thumb) modes
+ * - Configurable min/max/step
+ * - Optional tick marks and tooltips
+ * - Custom label formatting
+ * - Keyboard navigation (Arrow keys, Home, End, PageUp/Down)
+ * - Drag and click-to-move interaction
+ * - Full accessibility (ARIA slider role)
+ *
+ * ## Usage
+ *
+ * ### Basic Slider
+ * ```html
+ * <fui-slider [formControl]="volumeControl"></fui-slider>
+ * ```
+ *
+ * ### Range Slider
+ * ```html
+ * <fui-slider [range]="true" [formControl]="priceRange"></fui-slider>
+ * ```
+ *
+ * ### With Ticks and Custom Label
+ * ```html
+ * <fui-slider [showTicks]="true" [formatLabel]="formatCurrency" [min]="0" [max]="1000" [step]="100"></fui-slider>
+ * ```
+ */
+class FuiSliderComponent {
+    _document = inject(DOCUMENT);
+    // Inputs
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showTicks = input(false, { ...(ngDevMode ? { debugName: "showTicks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showTooltip = input(true, { ...(ngDevMode ? { debugName: "showTooltip" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    formatLabel = input((v) => String(v), ...(ngDevMode ? [{ debugName: "formatLabel" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelLow = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelLow" }] : /* istanbul ignore next */ []));
+    ariaLabelHigh = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelHigh" }] : /* istanbul ignore next */ []));
+    // Outputs
+    valueChange = output();
+    dragStart = output();
+    dragEnd = output();
+    // Internal state
+    _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _valueLow = signal(0, ...(ngDevMode ? [{ debugName: "_valueLow" }] : /* istanbul ignore next */ []));
+    _valueHigh = signal(100, ...(ngDevMode ? [{ debugName: "_valueHigh" }] : /* istanbul ignore next */ []));
+    _dragging = signal(null, ...(ngDevMode ? [{ debugName: "_dragging" }] : /* istanbul ignore next */ []));
+    _hovered = signal(null, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
+    // ViewChild
+    _sliderContainer = viewChild('sliderContainer', ...(ngDevMode ? [{ debugName: "_sliderContainer" }] : /* istanbul ignore next */ []));
+    // Computed: percentages
+    _percentage = computed(() => this._valueToPercent(this._value()), ...(ngDevMode ? [{ debugName: "_percentage" }] : /* istanbul ignore next */ []));
+    _percentageLow = computed(() => this._valueToPercent(this._valueLow()), ...(ngDevMode ? [{ debugName: "_percentageLow" }] : /* istanbul ignore next */ []));
+    _percentageHigh = computed(() => this._valueToPercent(this._valueHigh()), ...(ngDevMode ? [{ debugName: "_percentageHigh" }] : /* istanbul ignore next */ []));
+    // Computed: tick values
+    _tickValues = computed(() => {
+        const minVal = this.min();
+        const maxVal = this.max();
+        const stepVal = this.step();
+        const ticks = [];
+        for (let v = minVal; v <= maxVal; v += stepVal) {
+            ticks.push(v);
+        }
+        // Ensure max is included
+        if (ticks[ticks.length - 1] !== maxVal) {
+            ticks.push(maxVal);
+        }
+        return ticks;
+    }, ...(ngDevMode ? [{ debugName: "_tickValues" }] : /* istanbul ignore next */ []));
+    // CVA callbacks
+    _onChange = () => {
+        // Intentionally empty: will be replaced by Angular forms
+    };
+    _onTouched = () => {
+        // Intentionally empty: will be replaced by Angular forms
+    };
+    // Bound event handlers for cleanup
+    _boundOnMouseMove = this._onMouseMove.bind(this);
+    _boundOnMouseUp = this._onMouseUp.bind(this);
+    _boundOnTouchMove = this._onTouchMove.bind(this);
+    _boundOnTouchEnd = this._onTouchEnd.bind(this);
+    // ControlValueAccessor
+    writeValue(value) {
+        if (value == null)
+            return;
+        if (Array.isArray(value)) {
+            this._valueLow.set(this._clamp(value[0], this.min(), this.max()));
+            this._valueHigh.set(this._clamp(value[1], this.min(), this.max()));
+        }
+        else {
+            this._value.set(this._clamp(value, this.min(), this.max()));
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        // disabled is handled by input signal
+    }
+    ngOnDestroy() {
+        this._removeDocumentListeners();
+    }
+    // === Public helpers (used in template) ===
+    _valueToPercent(value) {
+        const minVal = this.min();
+        const maxVal = this.max();
+        if (maxVal === minVal)
+            return 0;
+        return ((value - minVal) / (maxVal - minVal)) * 100;
+    }
+    _isTickActive(tick) {
+        if (this.range()) {
+            return tick >= this._valueLow() && tick <= this._valueHigh();
+        }
+        return tick <= this._value();
+    }
+    _snapToStep(value) {
+        const stepVal = this.step();
+        const minVal = this.min();
+        const snapped = Math.round((value - minVal) / stepVal) * stepVal + minVal;
+        // Clamp to min/max and round to avoid floating point issues
+        return this._clamp(parseFloat(snapped.toFixed(10)), this.min(), this.max());
+    }
+    _clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
+    // === Event handlers ===
+    _onTrackClick(event) {
+        if (this.disabled())
+            return;
+        // Ignore clicks on thumb elements
+        const target = event.target;
+        if (target.classList.contains('fui-slider__thumb'))
+            return;
+        const value = this._getValueFromEvent(event);
+        if (value === null)
+            return;
+        this._setNearestThumb(value);
+        this._emitChange();
+        this._onTouched();
+    }
+    _onThumbMouseDown(event, thumb) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._dragging.set(thumb);
+        this.dragStart.emit();
+        this._document.addEventListener('mousemove', this._boundOnMouseMove);
+        this._document.addEventListener('mouseup', this._boundOnMouseUp);
+    }
+    _onThumbTouchStart(event, thumb) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._dragging.set(thumb);
+        this.dragStart.emit();
+        this._document.addEventListener('touchmove', this._boundOnTouchMove, { passive: false });
+        this._document.addEventListener('touchend', this._boundOnTouchEnd);
+    }
+    _onThumbKeydown(event, thumb) {
+        if (this.disabled())
+            return;
+        const stepVal = this.step();
+        let delta = 0;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                delta = stepVal;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                delta = -stepVal;
+                break;
+            case 'PageUp':
+                delta = stepVal * 10;
+                break;
+            case 'PageDown':
+                delta = -stepVal * 10;
+                break;
+            case 'Home':
+                this._setThumbValue(thumb, this.min());
+                this._emitChange();
+                event.preventDefault();
+                return;
+            case 'End':
+                this._setThumbValue(thumb, this.max());
+                this._emitChange();
+                event.preventDefault();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const currentValue = this._getThumbValue(thumb);
+        const newValue = this._snapToStep(this._clamp(currentValue + delta, this.min(), this.max()));
+        this._setThumbValue(thumb, newValue);
+        this._emitChange();
+        this._onTouched();
+    }
+    // === Private methods ===
+    _onMouseMove(event) {
+        const value = this._getValueFromEvent(event);
+        if (value === null)
+            return;
+        this._updateDraggingThumb(value);
+    }
+    _onMouseUp() {
+        this._endDrag();
+        this._document.removeEventListener('mousemove', this._boundOnMouseMove);
+        this._document.removeEventListener('mouseup', this._boundOnMouseUp);
+    }
+    _onTouchMove(event) {
+        event.preventDefault();
+        if (event.touches.length === 0)
+            return;
+        const touch = event.touches[0];
+        const value = this._getValueFromClientX(touch.clientX);
+        if (value === null)
+            return;
+        this._updateDraggingThumb(value);
+    }
+    _onTouchEnd() {
+        this._endDrag();
+        this._document.removeEventListener('touchmove', this._boundOnTouchMove);
+        this._document.removeEventListener('touchend', this._boundOnTouchEnd);
+    }
+    _endDrag() {
+        if (this._dragging() !== null) {
+            this._dragging.set(null);
+            this.dragEnd.emit();
+            this._onTouched();
+        }
+    }
+    _removeDocumentListeners() {
+        this._document.removeEventListener('mousemove', this._boundOnMouseMove);
+        this._document.removeEventListener('mouseup', this._boundOnMouseUp);
+        this._document.removeEventListener('touchmove', this._boundOnTouchMove);
+        this._document.removeEventListener('touchend', this._boundOnTouchEnd);
+    }
+    _getValueFromEvent(event) {
+        return this._getValueFromClientX(event.clientX);
+    }
+    _getValueFromClientX(clientX) {
+        const container = this._sliderContainer();
+        if (!container)
+            return null;
+        const rect = container.nativeElement.getBoundingClientRect();
+        const percent = this._clamp((clientX - rect.left) / rect.width, 0, 1);
+        const rawValue = this.min() + percent * (this.max() - this.min());
+        return this._snapToStep(rawValue);
+    }
+    _updateDraggingThumb(value) {
+        const thumb = this._dragging();
+        if (thumb === null)
+            return;
+        this._setThumbValue(thumb, value);
+        this._emitChange();
+    }
+    _getThumbValue(thumb) {
+        if (this.range()) {
+            return thumb === 'low' ? this._valueLow() : this._valueHigh();
+        }
+        return this._value();
+    }
+    _setThumbValue(thumb, value) {
+        if (this.range()) {
+            if (thumb === 'low') {
+                // Prevent low from exceeding high
+                this._valueLow.set(this._clamp(value, this.min(), this._valueHigh()));
+            }
+            else {
+                // Prevent high from going below low
+                this._valueHigh.set(this._clamp(value, this._valueLow(), this.max()));
+            }
+        }
+        else {
+            this._value.set(value);
+        }
+    }
+    _setNearestThumb(value) {
+        if (this.range()) {
+            const distLow = Math.abs(value - this._valueLow());
+            const distHigh = Math.abs(value - this._valueHigh());
+            if (distLow <= distHigh) {
+                this._setThumbValue('low', value);
+            }
+            else {
+                this._setThumbValue('high', value);
+            }
+        }
+        else {
+            this._value.set(value);
+        }
+    }
+    _emitChange() {
+        const val = this.range() ? [this._valueLow(), this._valueHigh()] : this._value();
+        this._onChange(val);
+        this.valueChange.emit(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSliderComponent, isStandalone: true, selector: "fui-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, formatLabel: { classPropertyName: "formatLabel", publicName: "formatLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelLow: { classPropertyName: "ariaLabelLow", publicName: "ariaLabelLow", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelHigh: { classPropertyName: "ariaLabelHigh", publicName: "ariaLabelHigh", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { properties: { "class.fui-slider--disabled": "disabled()", "class.fui-slider--range": "range()", "class.fui-slider--dragging": "_dragging() !== null" }, classAttribute: "fui-slider" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: FuiSliderComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "_sliderContainer", first: true, predicate: ["sliderContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\n  <div class=\"fui-slider__track\">\n    <div\n      class=\"fui-slider__track-fill\"\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\n    ></div>\n  </div>\n\n  @if (showTicks()) {\n    <div class=\"fui-slider__ticks\">\n      @for (tick of _tickValues(); track tick) {\n        <div\n          class=\"fui-slider__tick\"\n          [style.left.%]=\"_valueToPercent(tick)\"\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\n        ></div>\n      }\n    </div>\n  }\n\n  <div\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\n    role=\"slider\"\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\n    [attr.aria-label]=\"range() ? ariaLabelLow() || 'Minimum value' : ariaLabel() || null\"\n    aria-orientation=\"horizontal\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\n    (focus)=\"_hovered.set('low')\"\n    (blur)=\"_hovered.set(null)\"\n  >\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\n    }\n  </div>\n\n  @if (range()) {\n    <div\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\n      [style.left.%]=\"_percentageHigh()\"\n      role=\"slider\"\n      [attr.aria-valuenow]=\"_valueHigh()\"\n      [attr.aria-valuemin]=\"_valueLow()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-label]=\"ariaLabelHigh() || 'Maximum value'\"\n      aria-orientation=\"horizontal\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\n      (focus)=\"_hovered.set('high')\"\n      (blur)=\"_hovered.set(null)\"\n    >\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-slider{display:block;position:relative;width:100%;padding:10px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fui-slider__container{position:relative;width:100%;height:20px;display:flex;align-items:center}.fui-slider__track{position:absolute;left:0;right:0;height:4px;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-30, #e2e8f0);overflow:hidden}.fui-slider__track-fill{position:absolute;top:0;bottom:0;background-color:var(--fui-primary);border-radius:var(--fui-border-radius-pill, 999px);transition:left,width var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none}.fui-slider__tick{position:absolute;width:4px;height:4px;border-radius:50%;background-color:var(--fui-secondary-50, #94a3b8);transform:translate(-50%,-50%);top:50%;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-slider__tick--active{background-color:var(--fui-primary)}.fui-slider__thumb{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--fui-primary);transform:translate(-50%);cursor:grab;z-index:2;outline:none;transition:left,transform,box-shadow var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__thumb:hover{box-shadow:0 0 0 6px rgba(var(--fui-primary-rgb, 99, 102, 241),.15)}.fui-slider__thumb:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-slider__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--fui-surface-inverse, #1e293b);color:var(--fui-text-inverse, #fff);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01, .75rem);font-weight:var(--fui-font-weight-medium, 500);line-height:1.2;white-space:nowrap;border-radius:var(--fui-border-radius-sm, 4px);pointer-events:none;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-slider__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--fui-surface-inverse, #1e293b)}.fui-slider--dragging .fui-slider__thumb{cursor:grabbing;transform:translate(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(var(--fui-primary-rgb, 99, 102, 241),.2)}.fui-slider--dragging .fui-slider__track-fill{transition:none}.fui-slider--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38);pointer-events:none}.fui-slider--disabled .fui-slider__thumb{cursor:not-allowed}.fui-slider--range .fui-slider__thumb--high{z-index:3}@media(prefers-contrast:high){.fui-slider__thumb{border:2px solid CanvasText}.fui-slider__track{border:1px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-slider__thumb,.fui-slider__track-fill,.fui-slider__tooltip,.fui-slider__tick{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-slider', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-slider',
+                        '[class.fui-slider--disabled]': 'disabled()',
+                        '[class.fui-slider--range]': 'range()',
+                        '[class.fui-slider--dragging]': '_dragging() !== null',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FuiSliderComponent,
+                            multi: true,
+                        },
+                    ], template: "<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\n  <div class=\"fui-slider__track\">\n    <div\n      class=\"fui-slider__track-fill\"\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\n    ></div>\n  </div>\n\n  @if (showTicks()) {\n    <div class=\"fui-slider__ticks\">\n      @for (tick of _tickValues(); track tick) {\n        <div\n          class=\"fui-slider__tick\"\n          [style.left.%]=\"_valueToPercent(tick)\"\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\n        ></div>\n      }\n    </div>\n  }\n\n  <div\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\n    role=\"slider\"\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\n    [attr.aria-label]=\"range() ? ariaLabelLow() || 'Minimum value' : ariaLabel() || null\"\n    aria-orientation=\"horizontal\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\n    (focus)=\"_hovered.set('low')\"\n    (blur)=\"_hovered.set(null)\"\n  >\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\n    }\n  </div>\n\n  @if (range()) {\n    <div\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\n      [style.left.%]=\"_percentageHigh()\"\n      role=\"slider\"\n      [attr.aria-valuenow]=\"_valueHigh()\"\n      [attr.aria-valuemin]=\"_valueLow()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-label]=\"ariaLabelHigh() || 'Maximum value'\"\n      aria-orientation=\"horizontal\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\n      (focus)=\"_hovered.set('high')\"\n      (blur)=\"_hovered.set(null)\"\n    >\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-slider{display:block;position:relative;width:100%;padding:10px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fui-slider__container{position:relative;width:100%;height:20px;display:flex;align-items:center}.fui-slider__track{position:absolute;left:0;right:0;height:4px;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-30, #e2e8f0);overflow:hidden}.fui-slider__track-fill{position:absolute;top:0;bottom:0;background-color:var(--fui-primary);border-radius:var(--fui-border-radius-pill, 999px);transition:left,width var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none}.fui-slider__tick{position:absolute;width:4px;height:4px;border-radius:50%;background-color:var(--fui-secondary-50, #94a3b8);transform:translate(-50%,-50%);top:50%;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-slider__tick--active{background-color:var(--fui-primary)}.fui-slider__thumb{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--fui-primary);transform:translate(-50%);cursor:grab;z-index:2;outline:none;transition:left,transform,box-shadow var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__thumb:hover{box-shadow:0 0 0 6px rgba(var(--fui-primary-rgb, 99, 102, 241),.15)}.fui-slider__thumb:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-slider__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--fui-surface-inverse, #1e293b);color:var(--fui-text-inverse, #fff);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01, .75rem);font-weight:var(--fui-font-weight-medium, 500);line-height:1.2;white-space:nowrap;border-radius:var(--fui-border-radius-sm, 4px);pointer-events:none;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-slider__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--fui-surface-inverse, #1e293b)}.fui-slider--dragging .fui-slider__thumb{cursor:grabbing;transform:translate(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(var(--fui-primary-rgb, 99, 102, 241),.2)}.fui-slider--dragging .fui-slider__track-fill{transition:none}.fui-slider--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38);pointer-events:none}.fui-slider--disabled .fui-slider__thumb{cursor:not-allowed}.fui-slider--range .fui-slider__thumb--high{z-index:3}@media(prefers-contrast:high){.fui-slider__thumb{border:2px solid CanvasText}.fui-slider__track{border:1px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-slider__thumb,.fui-slider__track-fill,.fui-slider__tooltip,.fui-slider__tick{transition:none}}\n"] }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelLow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelLow", required: false }] }], ariaLabelHigh: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelHigh", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], _sliderContainer: [{ type: i0.ViewChild, args: ['sliderContainer', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiSliderComponent };
+//# sourceMappingURL=raintonic-formaui-components-slider.mjs.map

package/fesm2022/raintonic-formaui-components-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-slider.mjs","sources":["../../../lib/components/slider/slider.component.ts","../../../lib/components/slider/slider.component.html","../../../lib/components/slider/raintonic-formaui-components-slider.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  computed,\n  signal,\n  viewChild,\n  ElementRef,\n  Signal,\n  WritableSignal,\n  OnDestroy,\n  booleanAttribute,\n  DOCUMENT,\n  inject,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { SliderValue, SliderFormatLabelFn } from './slider.types';\n\n/**\n * # FuiSliderComponent\n *\n * A slider (range input) component with single and dual-thumb (range) support.\n * Integrates with Angular Reactive Forms via ControlValueAccessor.\n *\n * ## Features\n * - Single value and range (dual-thumb) modes\n * - Configurable min/max/step\n * - Optional tick marks and tooltips\n * - Custom label formatting\n * - Keyboard navigation (Arrow keys, Home, End, PageUp/Down)\n * - Drag and click-to-move interaction\n * - Full accessibility (ARIA slider role)\n *\n * ## Usage\n *\n * ### Basic Slider\n * ```html\n * <fui-slider [formControl]=\"volumeControl\"></fui-slider>\n * ```\n *\n * ### Range Slider\n * ```html\n * <fui-slider [range]=\"true\" [formControl]=\"priceRange\"></fui-slider>\n * ```\n *\n * ### With Ticks and Custom Label\n * ```html\n * <fui-slider [showTicks]=\"true\" [formatLabel]=\"formatCurrency\" [min]=\"0\" [max]=\"1000\" [step]=\"100\"></fui-slider>\n * ```\n */\n@Component({\n  selector: 'fui-slider',\n  standalone: true,\n  imports: [],\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-slider',\n    '[class.fui-slider--disabled]': 'disabled()',\n    '[class.fui-slider--range]': 'range()',\n    '[class.fui-slider--dragging]': '_dragging() !== null',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: FuiSliderComponent,\n      multi: true,\n    },\n  ],\n})\nexport class FuiSliderComponent implements ControlValueAccessor, OnDestroy {\n  private readonly _document = inject(DOCUMENT);\n\n  // Inputs\n  readonly min = input(0);\n  readonly max = input(100);\n  readonly step = input(1);\n  readonly range = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly showTicks = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly showTooltip = input<boolean, unknown>(true, { transform: booleanAttribute });\n  readonly formatLabel = input<SliderFormatLabelFn>((v: number) => String(v));\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n  readonly ariaLabelLow = input<string | null>(null);\n  readonly ariaLabelHigh = input<string | null>(null);\n\n  // Outputs\n  readonly valueChange = output<SliderValue>();\n  readonly dragStart = output();\n  readonly dragEnd = output();\n\n  // Internal state\n  readonly _value: WritableSignal<number> = signal(0);\n  readonly _valueLow: WritableSignal<number> = signal(0);\n  readonly _valueHigh: WritableSignal<number> = signal(100);\n  readonly _dragging: WritableSignal<'low' | 'high' | null> = signal(null);\n  readonly _hovered: WritableSignal<'low' | 'high' | null> = signal(null);\n\n  // ViewChild\n  readonly _sliderContainer: Signal<ElementRef<HTMLElement> | undefined> =\n    viewChild<ElementRef<HTMLElement>>('sliderContainer');\n\n  // Computed: percentages\n  readonly _percentage: Signal<number> = computed(() => this._valueToPercent(this._value()));\n\n  readonly _percentageLow: Signal<number> = computed(() => this._valueToPercent(this._valueLow()));\n\n  readonly _percentageHigh: Signal<number> = computed(() => this._valueToPercent(this._valueHigh()));\n\n  // Computed: tick values\n  readonly _tickValues: Signal<number[]> = computed(() => {\n    const minVal = this.min();\n    const maxVal = this.max();\n    const stepVal = this.step();\n    const ticks: number[] = [];\n    for (let v = minVal; v <= maxVal; v += stepVal) {\n      ticks.push(v);\n    }\n    // Ensure max is included\n    if (ticks[ticks.length - 1] !== maxVal) {\n      ticks.push(maxVal);\n    }\n    return ticks;\n  });\n\n  // CVA callbacks\n  private _onChange: (value: SliderValue) => void = () => {\n    // Intentionally empty: will be replaced by Angular forms\n  };\n  private _onTouched: () => void = () => {\n    // Intentionally empty: will be replaced by Angular forms\n  };\n\n  // Bound event handlers for cleanup\n  private _boundOnMouseMove = this._onMouseMove.bind(this);\n  private _boundOnMouseUp = this._onMouseUp.bind(this);\n  private _boundOnTouchMove = this._onTouchMove.bind(this);\n  private _boundOnTouchEnd = this._onTouchEnd.bind(this);\n\n  // ControlValueAccessor\n  writeValue(value: SliderValue): void {\n    if (value == null) return;\n\n    if (Array.isArray(value)) {\n      this._valueLow.set(this._clamp(value[0], this.min(), this.max()));\n      this._valueHigh.set(this._clamp(value[1], this.min(), this.max()));\n    } else {\n      this._value.set(this._clamp(value, this.min(), this.max()));\n    }\n  }\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(_isDisabled: boolean): void {\n    // disabled is handled by input signal\n  }\n\n  ngOnDestroy(): void {\n    this._removeDocumentListeners();\n  }\n\n  // === Public helpers (used in template) ===\n\n  _valueToPercent(value: number): number {\n    const minVal = this.min();\n    const maxVal = this.max();\n    if (maxVal === minVal) return 0;\n    return ((value - minVal) / (maxVal - minVal)) * 100;\n  }\n\n  _isTickActive(tick: number): boolean {\n    if (this.range()) {\n      return tick >= this._valueLow() && tick <= this._valueHigh();\n    }\n    return tick <= this._value();\n  }\n\n  _snapToStep(value: number): number {\n    const stepVal = this.step();\n    const minVal = this.min();\n    const snapped = Math.round((value - minVal) / stepVal) * stepVal + minVal;\n    // Clamp to min/max and round to avoid floating point issues\n    return this._clamp(parseFloat(snapped.toFixed(10)), this.min(), this.max());\n  }\n\n  _clamp(value: number, min: number, max: number): number {\n    return Math.min(Math.max(value, min), max);\n  }\n\n  // === Event handlers ===\n\n  _onTrackClick(event: MouseEvent): void {\n    if (this.disabled()) return;\n    // Ignore clicks on thumb elements\n    const target = event.target as HTMLElement;\n    if (target.classList.contains('fui-slider__thumb')) return;\n\n    const value = this._getValueFromEvent(event);\n    if (value === null) return;\n\n    this._setNearestThumb(value);\n    this._emitChange();\n    this._onTouched();\n  }\n\n  _onThumbMouseDown(event: MouseEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    event.stopPropagation();\n\n    this._dragging.set(thumb);\n    this.dragStart.emit();\n\n    this._document.addEventListener('mousemove', this._boundOnMouseMove);\n    this._document.addEventListener('mouseup', this._boundOnMouseUp);\n  }\n\n  _onThumbTouchStart(event: TouchEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    event.stopPropagation();\n\n    this._dragging.set(thumb);\n    this.dragStart.emit();\n\n    this._document.addEventListener('touchmove', this._boundOnTouchMove, { passive: false });\n    this._document.addEventListener('touchend', this._boundOnTouchEnd);\n  }\n\n  _onThumbKeydown(event: KeyboardEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n\n    const stepVal = this.step();\n    let delta = 0;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        delta = stepVal;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        delta = -stepVal;\n        break;\n      case 'PageUp':\n        delta = stepVal * 10;\n        break;\n      case 'PageDown':\n        delta = -stepVal * 10;\n        break;\n      case 'Home':\n        this._setThumbValue(thumb, this.min());\n        this._emitChange();\n        event.preventDefault();\n        return;\n      case 'End':\n        this._setThumbValue(thumb, this.max());\n        this._emitChange();\n        event.preventDefault();\n        return;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    const currentValue = this._getThumbValue(thumb);\n    const newValue = this._snapToStep(this._clamp(currentValue + delta, this.min(), this.max()));\n    this._setThumbValue(thumb, newValue);\n    this._emitChange();\n    this._onTouched();\n  }\n\n  // === Private methods ===\n\n  private _onMouseMove(event: MouseEvent): void {\n    const value = this._getValueFromEvent(event);\n    if (value === null) return;\n    this._updateDraggingThumb(value);\n  }\n\n  private _onMouseUp(): void {\n    this._endDrag();\n    this._document.removeEventListener('mousemove', this._boundOnMouseMove);\n    this._document.removeEventListener('mouseup', this._boundOnMouseUp);\n  }\n\n  private _onTouchMove(event: TouchEvent): void {\n    event.preventDefault();\n    if (event.touches.length === 0) return;\n    const touch = event.touches[0];\n    const value = this._getValueFromClientX(touch.clientX);\n    if (value === null) return;\n    this._updateDraggingThumb(value);\n  }\n\n  private _onTouchEnd(): void {\n    this._endDrag();\n    this._document.removeEventListener('touchmove', this._boundOnTouchMove);\n    this._document.removeEventListener('touchend', this._boundOnTouchEnd);\n  }\n\n  private _endDrag(): void {\n    if (this._dragging() !== null) {\n      this._dragging.set(null);\n      this.dragEnd.emit();\n      this._onTouched();\n    }\n  }\n\n  private _removeDocumentListeners(): void {\n    this._document.removeEventListener('mousemove', this._boundOnMouseMove);\n    this._document.removeEventListener('mouseup', this._boundOnMouseUp);\n    this._document.removeEventListener('touchmove', this._boundOnTouchMove);\n    this._document.removeEventListener('touchend', this._boundOnTouchEnd);\n  }\n\n  private _getValueFromEvent(event: MouseEvent): number | null {\n    return this._getValueFromClientX(event.clientX);\n  }\n\n  private _getValueFromClientX(clientX: number): number | null {\n    const container = this._sliderContainer();\n    if (!container) return null;\n\n    const rect = container.nativeElement.getBoundingClientRect();\n    const percent = this._clamp((clientX - rect.left) / rect.width, 0, 1);\n    const rawValue = this.min() + percent * (this.max() - this.min());\n    return this._snapToStep(rawValue);\n  }\n\n  private _updateDraggingThumb(value: number): void {\n    const thumb = this._dragging();\n    if (thumb === null) return;\n    this._setThumbValue(thumb, value);\n    this._emitChange();\n  }\n\n  private _getThumbValue(thumb: 'low' | 'high'): number {\n    if (this.range()) {\n      return thumb === 'low' ? this._valueLow() : this._valueHigh();\n    }\n    return this._value();\n  }\n\n  private _setThumbValue(thumb: 'low' | 'high', value: number): void {\n    if (this.range()) {\n      if (thumb === 'low') {\n        // Prevent low from exceeding high\n        this._valueLow.set(this._clamp(value, this.min(), this._valueHigh()));\n      } else {\n        // Prevent high from going below low\n        this._valueHigh.set(this._clamp(value, this._valueLow(), this.max()));\n      }\n    } else {\n      this._value.set(value);\n    }\n  }\n\n  private _setNearestThumb(value: number): void {\n    if (this.range()) {\n      const distLow = Math.abs(value - this._valueLow());\n      const distHigh = Math.abs(value - this._valueHigh());\n      if (distLow <= distHigh) {\n        this._setThumbValue('low', value);\n      } else {\n        this._setThumbValue('high', value);\n      }\n    } else {\n      this._value.set(value);\n    }\n  }\n\n  private _emitChange(): void {\n    const val = this.range() ? ([this._valueLow(), this._valueHigh()] as [number, number]) : this._value();\n    this._onChange(val);\n    this.valueChange.emit(val);\n  }\n}\n","<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\n  <div class=\"fui-slider__track\">\n    <div\n      class=\"fui-slider__track-fill\"\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\n    ></div>\n  </div>\n\n  @if (showTicks()) {\n    <div class=\"fui-slider__ticks\">\n      @for (tick of _tickValues(); track tick) {\n        <div\n          class=\"fui-slider__tick\"\n          [style.left.%]=\"_valueToPercent(tick)\"\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\n        ></div>\n      }\n    </div>\n  }\n\n  <div\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\n    role=\"slider\"\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\n    [attr.aria-label]=\"range() ? ariaLabelLow() || 'Minimum value' : ariaLabel() || null\"\n    aria-orientation=\"horizontal\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\n    (focus)=\"_hovered.set('low')\"\n    (blur)=\"_hovered.set(null)\"\n  >\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\n    }\n  </div>\n\n  @if (range()) {\n    <div\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\n      [style.left.%]=\"_percentageHigh()\"\n      role=\"slider\"\n      [attr.aria-valuenow]=\"_valueHigh()\"\n      [attr.aria-valuemin]=\"_valueLow()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-label]=\"ariaLabelHigh() || 'Maximum value'\"\n      aria-orientation=\"horizontal\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\n      (focus)=\"_hovered.set('high')\"\n      (blur)=\"_hovered.set(null)\"\n    >\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-spinner.mjs

@@ -0,0 +1,63 @@
+import * as i0 from '@angular/core';
+import { input, numberAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * @component FuiSpinnerComponent
+ * @selector fui-spinner
+ * @description A circular loading spinner with determinate and indeterminate modes.
+ * Supports an overlay mode that covers its parent container.
+ *
+ * @input mode - Spinner mode: 'determinate' | 'indeterminate'. Default 'indeterminate'.
+ * @input value - Progress value (0-100) for determinate mode. Default 0.
+ * @input size - Spinner size: 'sm' | 'md' | 'lg'. Default 'md'.
+ * @input color - Optional custom CSS color for the spinner stroke.
+ * @input overlay - Whether to render as a full-area overlay. Default false.
+ * @input ariaLabel - Accessible label. Default 'Loading'.
+ *
+ * @example
+ * <fui-spinner></fui-spinner>
+ *
+ * @example
+ * <fui-spinner mode="determinate" [value]="progress" size="lg"></fui-spinner>
+ */
+class FuiSpinnerComponent {
+    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Loading', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    RADIUS = 20;
+    circumference = 2 * Math.PI * this.RADIUS;
+    clampedValue = computed(() => Math.max(0, Math.min(100, this.value() || 0)), ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    strokeDashoffset = computed(() => {
+        return this.circumference - (this.clampedValue() / 100) * this.circumference;
+    }, ...(ngDevMode ? [{ debugName: "strokeDashoffset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSpinnerComponent, isStandalone: true, selector: "fui-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class.fui-spinner--sm": "size() === \"sm\"", "class.fui-spinner--md": "size() === \"md\"", "class.fui-spinner--lg": "size() === \"lg\"", "class.fui-spinner--overlay": "overlay()", "class.fui-spinner--determinate": "mode() === \"determinate\"", "class.fui-spinner--indeterminate": "mode() === \"indeterminate\"", "attr.aria-valuenow": "mode() === \"determinate\" ? clampedValue() : null", "attr.aria-valuemin": "mode() === \"determinate\" ? 0 : null", "attr.aria-valuemax": "mode() === \"determinate\" ? 100 : null", "attr.aria-label": "ariaLabel()" }, classAttribute: "fui-spinner" }, ngImport: i0, template: "@if (overlay()) {\n  <div class=\"fui-spinner__overlay\">\n    <svg class=\"fui-spinner__svg\" viewBox=\"0 0 48 48\" [style.--fui-spinner-color]=\"color()\">\n      @if (mode() === 'determinate') {\n        <circle class=\"fui-spinner__track\" cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n      }\n      <circle\n        class=\"fui-spinner__circle\"\n        cx=\"24\"\n        cy=\"24\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"4\"\n        [attr.stroke-dasharray]=\"mode() === 'determinate' ? circumference : null\"\n        [attr.stroke-dashoffset]=\"mode() === 'determinate' ? strokeDashoffset() : null\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n} @else {\n  <svg class=\"fui-spinner__svg\" viewBox=\"0 0 48 48\" [style.--fui-spinner-color]=\"color()\">\n    @if (mode() === 'determinate') {\n      <circle class=\"fui-spinner__track\" cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n    }\n    <circle\n      class=\"fui-spinner__circle\"\n      cx=\"24\"\n      cy=\"24\"\n      r=\"20\"\n      fill=\"none\"\n      stroke-width=\"4\"\n      [attr.stroke-dasharray]=\"mode() === 'determinate' ? circumference : null\"\n      [attr.stroke-dashoffset]=\"mode() === 'determinate' ? strokeDashoffset() : null\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-spinner{display:inline-flex;align-items:center;justify-content:center;--fui-spinner-color: var(--fui-primary)}.fui-spinner--sm{width:1rem;height:1rem}.fui-spinner--md{width:2.5rem;height:2.5rem}.fui-spinner--lg{width:4rem;height:4rem}.fui-spinner__svg{width:100%;height:100%}.fui-spinner__track{stroke:var(--fui-surface-05, #e2e8f0)}.fui-spinner__circle{stroke:var(--fui-spinner-color);transform-origin:center}.fui-spinner--indeterminate .fui-spinner__svg{animation:fui-spin var(--fui-duration-slow-02, .7s) linear infinite}.fui-spinner--indeterminate .fui-spinner__circle{stroke-dasharray:80,200;stroke-dashoffset:0;animation:fui-spinner-dash 1.5s ease-in-out infinite}.fui-spinner--determinate .fui-spinner__circle{transition:stroke-dashoffset var(--fui-duration-moderate-01, .3s) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1));transform:rotate(-90deg);transform-origin:center}.fui-spinner--overlay{position:static}.fui-spinner__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--fui-white-70);z-index:var(--fui-z-index-overlay, 10);border-radius:inherit}.fui-theme-dark .fui-spinner__overlay{background-color:var(--fui-black-50)}@keyframes fui-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@media(prefers-reduced-motion:reduce){.fui-spinner__svg,.fui-spinner__circle{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-spinner', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-spinner',
+                        '[class.fui-spinner--sm]': 'size() === "sm"',
+                        '[class.fui-spinner--md]': 'size() === "md"',
+                        '[class.fui-spinner--lg]': 'size() === "lg"',
+                        '[class.fui-spinner--overlay]': 'overlay()',
+                        '[class.fui-spinner--determinate]': 'mode() === "determinate"',
+                        '[class.fui-spinner--indeterminate]': 'mode() === "indeterminate"',
+                        role: 'status',
+                        'aria-live': 'polite',
+                        '[attr.aria-valuenow]': 'mode() === "determinate" ? clampedValue() : null',
+                        '[attr.aria-valuemin]': 'mode() === "determinate" ? 0 : null',
+                        '[attr.aria-valuemax]': 'mode() === "determinate" ? 100 : null',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "@if (overlay()) {\n  <div class=\"fui-spinner__overlay\">\n    <svg class=\"fui-spinner__svg\" viewBox=\"0 0 48 48\" [style.--fui-spinner-color]=\"color()\">\n      @if (mode() === 'determinate') {\n        <circle class=\"fui-spinner__track\" cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n      }\n      <circle\n        class=\"fui-spinner__circle\"\n        cx=\"24\"\n        cy=\"24\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"4\"\n        [attr.stroke-dasharray]=\"mode() === 'determinate' ? circumference : null\"\n        [attr.stroke-dashoffset]=\"mode() === 'determinate' ? strokeDashoffset() : null\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n} @else {\n  <svg class=\"fui-spinner__svg\" viewBox=\"0 0 48 48\" [style.--fui-spinner-color]=\"color()\">\n    @if (mode() === 'determinate') {\n      <circle class=\"fui-spinner__track\" cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n    }\n    <circle\n      class=\"fui-spinner__circle\"\n      cx=\"24\"\n      cy=\"24\"\n      r=\"20\"\n      fill=\"none\"\n      stroke-width=\"4\"\n      [attr.stroke-dasharray]=\"mode() === 'determinate' ? circumference : null\"\n      [attr.stroke-dashoffset]=\"mode() === 'determinate' ? strokeDashoffset() : null\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-spinner{display:inline-flex;align-items:center;justify-content:center;--fui-spinner-color: var(--fui-primary)}.fui-spinner--sm{width:1rem;height:1rem}.fui-spinner--md{width:2.5rem;height:2.5rem}.fui-spinner--lg{width:4rem;height:4rem}.fui-spinner__svg{width:100%;height:100%}.fui-spinner__track{stroke:var(--fui-surface-05, #e2e8f0)}.fui-spinner__circle{stroke:var(--fui-spinner-color);transform-origin:center}.fui-spinner--indeterminate .fui-spinner__svg{animation:fui-spin var(--fui-duration-slow-02, .7s) linear infinite}.fui-spinner--indeterminate .fui-spinner__circle{stroke-dasharray:80,200;stroke-dashoffset:0;animation:fui-spinner-dash 1.5s ease-in-out infinite}.fui-spinner--determinate .fui-spinner__circle{transition:stroke-dashoffset var(--fui-duration-moderate-01, .3s) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1));transform:rotate(-90deg);transform-origin:center}.fui-spinner--overlay{position:static}.fui-spinner__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--fui-white-70);z-index:var(--fui-z-index-overlay, 10);border-radius:inherit}.fui-theme-dark .fui-spinner__overlay{background-color:var(--fui-black-50)}@keyframes fui-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@media(prefers-reduced-motion:reduce){.fui-spinner__svg,.fui-spinner__circle{animation:none}}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiSpinnerComponent };
+//# sourceMappingURL=raintonic-formaui-components-spinner.mjs.map

package/fesm2022/raintonic-formaui-components-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-spinner.mjs","sources":["../../../lib/components/spinner/spinner.component.ts","../../../lib/components/spinner/spinner.component.html","../../../lib/components/spinner/raintonic-formaui-components-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, numberAttribute } from '@angular/core';\nimport { FuiSpinnerMode, FuiSpinnerSize } from './spinner.types';\n\n/**\n * @component FuiSpinnerComponent\n * @selector fui-spinner\n * @description A circular loading spinner with determinate and indeterminate modes.\n * Supports an overlay mode that covers its parent container.\n *\n * @input mode - Spinner mode: 'determinate' | 'indeterminate'. Default 'indeterminate'.\n * @input value - Progress value (0-100) for determinate mode. Default 0.\n * @input size - Spinner size: 'sm' | 'md' | 'lg'. Default 'md'.\n * @input color - Optional custom CSS color for the spinner stroke.\n * @input overlay - Whether to render as a full-area overlay. Default false.\n * @input ariaLabel - Accessible label. Default 'Loading'.\n *\n * @example\n * <fui-spinner></fui-spinner>\n *\n * @example\n * <fui-spinner mode=\"determinate\" [value]=\"progress\" size=\"lg\"></fui-spinner>\n */\n@Component({\n  selector: 'fui-spinner',\n  standalone: true,\n  imports: [],\n  templateUrl: './spinner.component.html',\n  styleUrls: ['./spinner.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-spinner',\n    '[class.fui-spinner--sm]': 'size() === \"sm\"',\n    '[class.fui-spinner--md]': 'size() === \"md\"',\n    '[class.fui-spinner--lg]': 'size() === \"lg\"',\n    '[class.fui-spinner--overlay]': 'overlay()',\n    '[class.fui-spinner--determinate]': 'mode() === \"determinate\"',\n    '[class.fui-spinner--indeterminate]': 'mode() === \"indeterminate\"',\n    role: 'status',\n    'aria-live': 'polite',\n    '[attr.aria-valuenow]': 'mode() === \"determinate\" ? clampedValue() : null',\n    '[attr.aria-valuemin]': 'mode() === \"determinate\" ? 0 : null',\n    '[attr.aria-valuemax]': 'mode() === \"determinate\" ? 100 : null',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class FuiSpinnerComponent {\n  readonly mode = input<FuiSpinnerMode>('indeterminate');\n  readonly value = input<number, unknown>(0, { transform: numberAttribute });\n  readonly size = input<FuiSpinnerSize>('md');\n  readonly color = input<string | null>(null);\n  readonly overlay = input(false);\n  readonly ariaLabel = input('Loading', { alias: 'aria-label' });\n\n  private readonly RADIUS = 20;\n  readonly circumference = 2 * Math.PI * this.RADIUS;\n\n  readonly clampedValue = computed(() => Math.max(0, Math.min(100, this.value() || 0)));\n  readonly strokeDashoffset = computed(() => {\n    return this.circumference - (this.clampedValue() / 100) * this.circumference;\n  });\n}\n","@if (overlay()) {\n  <div class=\"fui-spinner__overlay\">\n    <svg class=\"fui-spinner__svg\" viewBox=\"0 0 48 48\" [style.--fui-spinner-color]=\"color()\">\n      @if (mode() === 'determinate') {\n        <circle class=\"fui-spinner__track\" cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n      }\n      <circle\n        class=\"fui-spinner__circle\"\n        cx=\"24\"\n        cy=\"24\"\n        r=\"20\"\n        fill=\"none\"\n        stroke-width=\"4\"\n        [attr.stroke-dasharray]=\"mode() === 'determinate' ? circumference : null\"\n        [attr.stroke-dashoffset]=\"mode() === 'determinate' ? strokeDashoffset() : null\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </div>\n} @else {\n  <svg class=\"fui-spinner__svg\" viewBox=\"0 0 48 48\" [style.--fui-spinner-color]=\"color()\">\n    @if (mode() === 'determinate') {\n      <circle class=\"fui-spinner__track\" cx=\"24\" cy=\"24\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n    }\n    <circle\n      class=\"fui-spinner__circle\"\n      cx=\"24\"\n      cy=\"24\"\n      r=\"20\"\n      fill=\"none\"\n      stroke-width=\"4\"\n      [attr.stroke-dasharray]=\"mode() === 'determinate' ? circumference : null\"\n      [attr.stroke-dashoffset]=\"mode() === 'determinate' ? strokeDashoffset() : null\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;AAkBG;MAyBU,mBAAmB,CAAA;AACrB,IAAA,IAAI,GAAG,KAAK,CAAiB,eAAe,2EAAC;IAC7C,KAAK,GAAG,KAAK,CAAkB,CAAC,6EAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AACjE,IAAA,IAAI,GAAG,KAAK,CAAiB,IAAI,2EAAC;AAClC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,8EAAC;IACtB,SAAS,GAAG,KAAK,CAAC,SAAS,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;IAE7C,MAAM,GAAG,EAAE;IACnB,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM;IAEzC,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAC5E,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,OAAO,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI,IAAI,CAAC,aAAa;AAC9E,IAAA,CAAC,uFAAC;uGAdS,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,y8CC9ChC,+0CAqCA,EAAA,MAAA,EAAA,CAAA,ggGAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDSa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAxB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EAGM,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,yBAAyB,EAAE,iBAAiB;AAC5C,wBAAA,yBAAyB,EAAE,iBAAiB;AAC5C,wBAAA,yBAAyB,EAAE,iBAAiB;AAC5C,wBAAA,8BAA8B,EAAE,WAAW;AAC3C,wBAAA,kCAAkC,EAAE,0BAA0B;AAC9D,wBAAA,oCAAoC,EAAE,4BAA4B;AAClE,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,WAAW,EAAE,QAAQ;AACrB,wBAAA,sBAAsB,EAAE,kDAAkD;AAC1E,wBAAA,sBAAsB,EAAE,qCAAqC;AAC7D,wBAAA,sBAAsB,EAAE,uCAAuC;AAC/D,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA,EAAA,QAAA,EAAA,+0CAAA,EAAA,MAAA,EAAA,CAAA,ggGAAA,CAAA,EAAA;;;AE5CH;;AAEG;;;;"}