@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-component-slider.mjs

@@ -1,7 +1,460 @@
-export * from '@ojiepermana/angular-component/slider';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, Component, DestroyRef, viewChild, numberAttribute, booleanAttribute, output, signal, effect, untracked } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { DOCUMENT } from '@angular/common';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Styled native range input. Works with `ngModel` / `FormControl` via
+ * Angular's built-in `RangeValueAccessor`. Keyboard + ARIA handled by the browser.
+ */
+class SliderComponent {
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('Slider relative w-full appearance-none bg-transparent', 'focus-visible:outline-none', 'disabled:pointer-events-none disabled:opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SliderComponent, isStandalone: true, selector: "input[type=range][Slider]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, styles: [":host.Slider{height:calc(var(--spacing-base) * 5);cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--spacing-base) * -1);width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[type=range][Slider]', host: { '[class]': 'classes()' }, template: '', styles: [":host.Slider{height:calc(var(--spacing-base) * 5);cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--spacing-base) * -1);width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SliderRootComponent {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    track = viewChild.required('track', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    value = input([0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    minStepsBetweenThumbs = input(0, { ...(ngDevMode ? { debugName: "minStepsBetweenThumbs" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    thumbLabels = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbLabels" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    valueState = signal([0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
+    activeThumbIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeThumbIndex" }] : /* istanbul ignore next */ []));
+    draggedThumbIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draggedThumbIndex" }] : /* istanbul ignore next */ []));
+    pointerId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointerId" }] : /* istanbul ignore next */ []));
+    detachDragListeners = null;
+    config = computed(() => ({
+        min: Math.min(this.min(), this.max()),
+        max: Math.max(this.min(), this.max()),
+        step: this.step() > 0 ? this.step() : 1,
+        minStepsBetweenThumbs: Math.max(0, Math.floor(this.minStepsBetweenThumbs())),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('slider-root relative flex touch-none select-none', this.orientation() === 'horizontal' ? 'h-5 w-full items-center' : 'h-32 w-5 justify-center', this.disabled() ? 'opacity-50' : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    thumbs = computed(() => {
+        const values = this.valueState();
+        const config = this.config();
+        return values.map((value, index) => {
+            const bounds = thumbBounds(values, index, config);
+            return {
+                index,
+                value,
+                position: this.positionPercent(value),
+                min: bounds.min,
+                max: bounds.max,
+                label: this.thumbLabel(index, values.length),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
+    rangeOffset = computed(() => {
+        const span = this.rangeSpan();
+        return span.start;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeOffset" }] : /* istanbul ignore next */ []));
+    rangeSize = computed(() => {
+        const span = this.rangeSpan();
+        return span.end - span.start;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeSize" }] : /* istanbul ignore next */ []));
+    syncExternalValue = effect(() => {
+        const normalized = normalizeSliderValues(this.value(), this.config());
+        untracked(() => {
+            if (!sameValues(normalized, this.valueState())) {
+                this.valueState.set(normalized);
+            }
+            this.activeThumbIndex.set(clampIndex(this.activeThumbIndex(), normalized.length));
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncExternalValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.endDrag());
+    }
+    onTrackPointerDown(event) {
+        if (this.disabled() || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        const nextValue = this.valueFromPointer(event);
+        if (nextValue == null) {
+            return;
+        }
+        const thumbIndex = this.closestThumbIndex(nextValue);
+        this.activeThumbIndex.set(thumbIndex);
+        this.updateThumbValue(thumbIndex, nextValue);
+        this.beginDrag(event, thumbIndex);
+    }
+    onThumbPointerDown(event, index) {
+        if (this.disabled() || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.activeThumbIndex.set(index);
+        this.beginDrag(event, index);
+    }
+    onThumbFocus(index) {
+        this.activeThumbIndex.set(index);
+    }
+    onThumbKeydown(event, index) {
+        if (this.disabled()) {
+            return;
+        }
+        const current = this.valueState()[index];
+        const config = this.config();
+        const pageStep = config.step * 10;
+        const direction = this.resolvedDirection();
+        let nextValue = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextValue =
+                    current +
+                        (direction === 'rtl' && this.orientation() === 'horizontal' ? -config.step : config.step);
+                break;
+            case 'ArrowLeft':
+                nextValue =
+                    current +
+                        (direction === 'rtl' && this.orientation() === 'horizontal' ? config.step : -config.step);
+                break;
+            case 'ArrowUp':
+                nextValue = current + config.step;
+                break;
+            case 'ArrowDown':
+                nextValue = current - config.step;
+                break;
+            case 'PageUp':
+                nextValue = current + pageStep;
+                break;
+            case 'PageDown':
+                nextValue = current - pageStep;
+                break;
+            case 'Home':
+                nextValue = thumbBounds(this.valueState(), index, config).min;
+                break;
+            case 'End':
+                nextValue = thumbBounds(this.valueState(), index, config).max;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.activeThumbIndex.set(index);
+        this.updateThumbValue(index, nextValue);
+    }
+    /**
+     * Pointer listeners live for exactly as long as the drag does.
+     *
+     * Angular's listener wrapper marks the view dirty BEFORE the handler runs, so
+     * a permanently bound `pointermove` made every pointer move anywhere on the
+     * page dirty every slider on screen -- the pointerId guard inside the handler
+     * came far too late to stop it.
+     */
+    beginDrag(event, index) {
+        this.endDrag();
+        this.pointerId.set(event.pointerId);
+        this.draggedThumbIndex.set(index);
+        this.host.nativeElement.setPointerCapture(event.pointerId);
+        const move = (next) => this.onDragMove(next);
+        const end = (next) => this.endDrag(next);
+        this.document.addEventListener('pointermove', move);
+        this.document.addEventListener('pointerup', end);
+        this.document.addEventListener('pointercancel', end);
+        this.detachDragListeners = () => {
+            this.document.removeEventListener('pointermove', move);
+            this.document.removeEventListener('pointerup', end);
+            this.document.removeEventListener('pointercancel', end);
+            this.detachDragListeners = null;
+        };
+        this.focusThumb(index);
+    }
+    onDragMove(event) {
+        if (this.pointerId() !== event.pointerId) {
+            return;
+        }
+        const thumbIndex = this.draggedThumbIndex();
+        if (thumbIndex == null) {
+            return;
+        }
+        const nextValue = this.valueFromPointer(event);
+        if (nextValue == null) {
+            return;
+        }
+        event.preventDefault();
+        this.updateThumbValue(thumbIndex, nextValue);
+    }
+    endDrag(event) {
+        const pointerId = event ? event.pointerId : this.pointerId();
+        if (pointerId == null || (event && this.pointerId() !== pointerId)) {
+            return;
+        }
+        const host = this.host.nativeElement;
+        if (host.hasPointerCapture(pointerId)) {
+            host.releasePointerCapture(pointerId);
+        }
+        this.detachDragListeners?.();
+        this.draggedThumbIndex.set(null);
+        this.pointerId.set(null);
+    }
+    updateThumbValue(index, rawValue) {
+        const current = this.valueState();
+        const bounds = thumbBounds(current, index, this.config());
+        const nextValues = current.slice();
+        nextValues[index] = snapWithinBounds(rawValue, bounds.min, bounds.max, this.config());
+        if (sameValues(nextValues, current)) {
+            return;
+        }
+        this.valueState.set(nextValues);
+        this.valueChange.emit(nextValues);
+    }
+    valueFromPointer(event) {
+        const track = this.track().nativeElement;
+        const rect = track.getBoundingClientRect();
+        const config = this.config();
+        if (rect.width <= 0 || rect.height <= 0) {
+            return null;
+        }
+        let ratio = 0;
+        if (this.orientation() === 'horizontal') {
+            const physicalRatio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+            ratio = this.resolvedDirection() === 'rtl' ? 1 - physicalRatio : physicalRatio;
+        }
+        else {
+            ratio = clamp((rect.bottom - event.clientY) / rect.height, 0, 1);
+        }
+        return config.min + ratio * (config.max - config.min);
+    }
+    closestThumbIndex(nextValue) {
+        const values = this.valueState();
+        let bestIndex = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        values.forEach((value, index) => {
+            const distance = Math.abs(value - nextValue);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                bestIndex = index;
+            }
+        });
+        return bestIndex;
+    }
+    rangeSpan() {
+        const positions = this.valueState().map((value) => this.positionPercent(value));
+        if (!positions.length) {
+            return { start: 0, end: 0 };
+        }
+        if (positions.length === 1) {
+            const minBoundary = this.positionPercent(this.config().min);
+            return {
+                start: Math.min(minBoundary, positions[0]),
+                end: Math.max(minBoundary, positions[0]),
+            };
+        }
+        return {
+            start: Math.min(...positions),
+            end: Math.max(...positions),
+        };
+    }
+    positionPercent(value) {
+        const config = this.config();
+        const range = config.max - config.min;
+        if (range <= 0) {
+            return this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl' ? 100 : 0;
+        }
+        const logicalRatio = (value - config.min) / range;
+        const physicalRatio = this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl'
+            ? 1 - logicalRatio
+            : logicalRatio;
+        return clamp(physicalRatio * 100, 0, 100);
+    }
+    thumbLabel(index, count) {
+        const labels = this.thumbLabels();
+        if (labels?.[index]) {
+            return labels[index] ?? null;
+        }
+        if (count === 1) {
+            return this.ariaLabel();
+        }
+        return this.ariaLabel() ? `${this.ariaLabel()} ${index + 1}` : `Slider thumb ${index + 1}`;
+    }
+    focusThumb(index) {
+        const thumb = this.host.nativeElement.querySelector(`.slider__thumb[data-index="${index}"]`);
+        thumb?.focus();
+    }
+    resolvedDirection() {
+        const host = this.host.nativeElement;
+        if (host.dir === 'ltr' || host.dir === 'rtl') {
+            return host.dir;
+        }
+        const view = this.document.defaultView;
+        if (!view) {
+            return 'ltr';
+        }
+        return view.getComputedStyle(host).direction === 'rtl' ? 'rtl' : 'ltr';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SliderRootComponent, isStandalone: true, selector: "Slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, 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 }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, thumbLabels: { classPropertyName: "thumbLabels", publicName: "thumbLabels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #track class="slider__track" (pointerdown)="onTrackPointerDown($event)">
+      <div
+        class="slider__range"
+        [style.left.%]="orientation() === 'horizontal' ? rangeOffset() : null"
+        [style.width.%]="orientation() === 'horizontal' ? rangeSize() : null"
+        [style.bottom.%]="orientation() === 'vertical' ? rangeOffset() : null"
+        [style.height.%]="orientation() === 'vertical' ? rangeSize() : null"
+      ></div>
+
+      @for (thumb of thumbs(); track thumb.index) {
+        <button
+          type="button"
+          class="slider__thumb"
+          [style.left.%]="orientation() === 'horizontal' ? thumb.position : 50"
+          [style.top.%]="orientation() === 'horizontal' ? 50 : null"
+          [style.bottom.%]="orientation() === 'vertical' ? thumb.position : null"
+          [attr.aria-describedby]="ariaDescribedby()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [attr.aria-label]="thumb.label"
+          [attr.aria-labelledby]="thumb.label ? null : ariaLabelledby()"
+          [attr.aria-orientation]="orientation()"
+          [attr.aria-valuemax]="thumb.max"
+          [attr.aria-valuemin]="thumb.min"
+          [attr.aria-valuenow]="thumb.value"
+          [attr.data-index]="thumb.index"
+          [attr.data-state]="disabled() ? 'disabled' : 'active'"
+          [tabIndex]="disabled() ? -1 : activeThumbIndex() === thumb.index ? 0 : -1"
+          role="slider"
+          (focus)="onThumbFocus(thumb.index)"
+          (keydown)="onThumbKeydown($event, thumb.index)"
+          (pointerdown)="onThumbPointerDown($event, thumb.index)"
+        ></button>
+      }
+    </div>
+  `, isInline: true, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SliderRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Slider', host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-orientation]': 'orientation()',
+                    }, template: `
+    <div #track class="slider__track" (pointerdown)="onTrackPointerDown($event)">
+      <div
+        class="slider__range"
+        [style.left.%]="orientation() === 'horizontal' ? rangeOffset() : null"
+        [style.width.%]="orientation() === 'horizontal' ? rangeSize() : null"
+        [style.bottom.%]="orientation() === 'vertical' ? rangeOffset() : null"
+        [style.height.%]="orientation() === 'vertical' ? rangeSize() : null"
+      ></div>
+
+      @for (thumb of thumbs(); track thumb.index) {
+        <button
+          type="button"
+          class="slider__thumb"
+          [style.left.%]="orientation() === 'horizontal' ? thumb.position : 50"
+          [style.top.%]="orientation() === 'horizontal' ? 50 : null"
+          [style.bottom.%]="orientation() === 'vertical' ? thumb.position : null"
+          [attr.aria-describedby]="ariaDescribedby()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [attr.aria-label]="thumb.label"
+          [attr.aria-labelledby]="thumb.label ? null : ariaLabelledby()"
+          [attr.aria-orientation]="orientation()"
+          [attr.aria-valuemax]="thumb.max"
+          [attr.aria-valuemin]="thumb.min"
+          [attr.aria-valuenow]="thumb.value"
+          [attr.data-index]="thumb.index"
+          [attr.data-state]="disabled() ? 'disabled' : 'active'"
+          [tabIndex]="disabled() ? -1 : activeThumbIndex() === thumb.index ? 0 : -1"
+          role="slider"
+          (focus)="onThumbFocus(thumb.index)"
+          (keydown)="onThumbKeydown($event, thumb.index)"
+          (pointerdown)="onThumbPointerDown($event, thumb.index)"
+        ></button>
+      }
+    </div>
+  `, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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 }] }], minStepsBetweenThumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenThumbs", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], thumbLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbLabels", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function clampIndex(index, length) {
+    return clamp(index, 0, Math.max(length - 1, 0));
+}
+function decimalPlaces(value) {
+    const text = `${value}`;
+    const fraction = text.split('.')[1];
+    return fraction?.length ?? 0;
+}
+function normalizeSliderValues(values, config) {
+    const incoming = values.length ? [...values] : [config.min];
+    const sorted = incoming
+        .map((value) => snapToStep(value, config))
+        .sort((left, right) => left - right);
+    const gap = config.step * config.minStepsBetweenThumbs;
+    const normalized = [];
+    sorted.forEach((value, index) => {
+        const remaining = sorted.length - index - 1;
+        const min = index === 0 ? config.min : normalized[index - 1] + gap;
+        const max = Math.max(min, config.max - remaining * gap);
+        normalized.push(snapWithinBounds(value, min, max, config));
+    });
+    return normalized;
+}
+function sameValues(left, right) {
+    return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function snapToStep(value, config) {
+    const ratio = (value - config.min) / config.step;
+    const snapped = config.min + Math.round(ratio) * config.step;
+    const precision = Math.max(decimalPlaces(config.step), decimalPlaces(config.min));
+    return Number(snapped.toFixed(precision));
+}
+function snapWithinBounds(value, min, max, config) {
+    const boundedMin = Math.min(min, max);
+    const boundedMax = Math.max(min, max);
+    const snapped = snapToStep(value, config);
+    return clamp(snapped, boundedMin, boundedMax);
+}
+function thumbBounds(values, index, config) {
+    const gap = config.step * config.minStepsBetweenThumbs;
+    const min = index === 0 ? config.min : values[index - 1] + gap;
+    const max = index === values.length - 1 ? config.max : values[index + 1] - gap;
+    return { min: Math.min(min, max), max: Math.max(min, max) };
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { SliderComponent, SliderComponent as SliderInputDirective, SliderRootComponent };

package/fesm2022/ojiepermana-angular-component-spinner.mjs

@@ -1,7 +1,60 @@
-export * from '@ojiepermana/angular-component/spinner';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class SpinnerComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    decorative = input(false, { ...(ngDevMode ? { debugName: "decorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('Loading', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    classes = computed(() => cn('inline-flex size-4 shrink-0 items-center justify-center align-middle text-current', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SpinnerComponent, isStandalone: true, selector: "Spinner", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "spinner" }, properties: { "class": "classes()", "attr.role": "decorative() ? null : \"status\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "attr.aria-label": "decorative() || ariaLabelledby() ? null : ariaLabel()", "attr.aria-labelledby": "decorative() ? null : ariaLabelledby()" } }, ngImport: i0, template: `
+    <svg
+      aria-hidden="true"
+      class="size-full animate-spin motion-reduce:animate-none"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <circle cx="12" cy="12" r="9" class="opacity-20" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke-linecap="round" />
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Spinner',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': 'decorative() ? null : "status"',
+                        '[attr.aria-hidden]': 'decorative() ? "true" : null',
+                        '[attr.aria-label]': 'decorative() || ariaLabelledby() ? null : ariaLabel()',
+                        '[attr.aria-labelledby]': 'decorative() ? null : ariaLabelledby()',
+                        'data-slot': 'spinner',
+                    },
+                    template: `
+    <svg
+      aria-hidden="true"
+      class="size-full animate-spin motion-reduce:animate-none"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <circle cx="12" cy="12" r="9" class="opacity-20" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke-linecap="round" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { SpinnerComponent };