@ship-ui/core 0.19.5 → 0.22.0

package/fesm2022/ship-ui-core-ship-range-slider.mjs

@@ -0,0 +1,277 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, model, signal, computed, effect, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { shipComponentClasses } from '@ship-ui/core';
+
+class ShipRangeSlider {
+    constructor() {
+        this.#selfRef = inject((ElementRef));
+        this.#observer = null;
+        this.#inputElement = null;
+        this.#initialDefaultValue = 0;
+        this.unit = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+        this.value = model(this.#initialDefaultValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.inputState = signal({
+            min: 0,
+            max: 100,
+            step: 1,
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputState" }] : /* istanbul ignore next */ []));
+        this.color = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.sharp = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sharp" }] : /* istanbul ignore next */ []));
+        this.alwaysShow = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alwaysShow" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('rangeSlider', {
+            color: this.color,
+            variant: this.variant,
+            size: this.size,
+            sharp: this.sharp,
+            alwaysShow: this.alwaysShow,
+        });
+        this.valuePercentage = computed(() => {
+            const { min, max } = this.inputState();
+            const currentValue = this.value() ?? min;
+            if (isNaN(currentValue))
+                return 0;
+            const range = max - min;
+            if (range === 0)
+                return 0;
+            const percentage = ((currentValue - min) / range) * 100;
+            return Math.max(0, Math.min(100, percentage));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valuePercentage" }] : /* istanbul ignore next */ []));
+        this.trackFilledPercentage = computed(() => this.valuePercentage(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackFilledPercentage" }] : /* istanbul ignore next */ []));
+        this.thumbPositionPercentage = computed(() => this.valuePercentage(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "thumbPositionPercentage" }] : /* istanbul ignore next */ []));
+        this.syncModelToInputEffect = effect(() => {
+            const modelValue = this.value();
+            if (this.#inputElement) {
+                const currentInputValue = parseFloat(this.#inputElement.value);
+                if (isNaN(currentInputValue) || String(currentInputValue) !== String(modelValue)) {
+                    this.#inputElement.value = String(modelValue);
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "syncModelToInputEffect" }] : /* istanbul ignore next */ []));
+    }
+    #selfRef;
+    #observer;
+    #inputElement;
+    #initialDefaultValue;
+    get hasInputElement() {
+        return !!this.#inputElement;
+    }
+    ngAfterViewInit() {
+        this.#inputElement = this.#selfRef.nativeElement.querySelector('input[type="range"]');
+        if (this.#inputElement) {
+            this.#createCustomInputEventListener(this.#inputElement);
+            this.#inputElement.oninput = () => {
+                this.setNewInputValue(this.#inputElement.value);
+            };
+            this.#inputElement.addEventListener('inputValueChanged', (event) => {
+                this.setNewInputValue(event.detail.value);
+            });
+            queueMicrotask(() => this.#updateStateFromInput(true));
+            this.#setupMutationObserver();
+        }
+        else {
+            console.error('ShipRangeSlider: No <input type="range"> element found projected inside.');
+        }
+    }
+    setNewInputValue(value) {
+        const inputValue = parseFloat(value ?? '0');
+        if (!isNaN(inputValue)) {
+            const { min, max } = this.inputState();
+            this.value.set(Math.max(min, Math.min(max, inputValue)));
+        }
+    }
+    trackEvent(e) {
+        if (!this.#inputElement || this.#inputElement.readOnly || this.#inputElement.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.target === this.#inputElement ||
+            e.target?.closest('.thumb, .min-indicator, .max-indicator')) {
+            return;
+        }
+        const trackWrap = e.currentTarget;
+        const rect = trackWrap.getBoundingClientRect();
+        const clickX = e.clientX - rect.left;
+        const width = rect.width;
+        const { min, max, step } = this.inputState();
+        const range = max - min;
+        if (width > 0 && range !== 0 && step > 0) {
+            let proportionalValue = (clickX / width) * range + min;
+            const numSteps = (proportionalValue - min) / step;
+            let nearestStepValue = min + Math.round(numSteps) * step;
+            const decimals = this.#countDecimals(step);
+            nearestStepValue = parseFloat(nearestStepValue.toFixed(decimals));
+            const clampedValue = Math.max(min, Math.min(max, nearestStepValue));
+            this.value.set(clampedValue);
+        }
+    }
+    #updateStateFromInput(isInitialCall = false) {
+        if (!this.#inputElement)
+            return;
+        const min = parseFloat(this.#inputElement.min ?? '0') ?? 0;
+        const max = parseFloat(this.#inputElement.max ?? '100') ?? 100;
+        const stepAttr = this.#inputElement.step;
+        let step = 1;
+        if (stepAttr && stepAttr.toLowerCase() !== 'any') {
+            const parsedStep = parseFloat(stepAttr);
+            if (!isNaN(parsedStep) && parsedStep > 0) {
+                step = parsedStep;
+            }
+        }
+        this.inputState.set({ min, max, step });
+        const inputElementValue = parseFloat(this.#inputElement.value ?? String(min)) ?? min;
+        if (isInitialCall && this.value() !== this.#initialDefaultValue) {
+            const modelValue = this.value();
+            const clampedModelValue = Math.max(min, Math.min(max, modelValue));
+            if (inputElementValue !== clampedModelValue) {
+                this.#inputElement.value = String(clampedModelValue);
+            }
+            if (modelValue !== clampedModelValue) {
+                this.value.set(clampedModelValue);
+            }
+        }
+        else {
+            const clampedInputElementValue = Math.max(min, Math.min(max, inputElementValue));
+            if (this.value() !== clampedInputElementValue) {
+                this.value.set(clampedInputElementValue);
+            }
+        }
+    }
+    #setupMutationObserver() {
+        if (!this.#inputElement || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        const MUTATION_ATTRIBUTES = ['min', 'max', 'step', 'value', 'readonly', 'disabled'];
+        this.#observer = new MutationObserver((mutationList) => {
+            let needsStateUpdate = false;
+            for (const mutation of mutationList) {
+                if (mutation.type === 'attributes' && MUTATION_ATTRIBUTES.includes(mutation.attributeName ?? '')) {
+                    needsStateUpdate = true;
+                    break;
+                }
+            }
+            if (needsStateUpdate) {
+                this.#updateStateFromInput(false);
+            }
+        });
+        this.#observer.observe(this.#inputElement, { attributes: true, attributeFilter: MUTATION_ATTRIBUTES });
+    }
+    #countDecimals(value) {
+        if (isNaN(value) || Math.floor(value) === value)
+            return 0;
+        const str = value.toString();
+        const decimalPart = str.split('.')[1];
+        return decimalPart ? decimalPart.length : 0;
+    }
+    #createCustomInputEventListener(input) {
+        Object.defineProperty(input, 'value', {
+            configurable: true,
+            get() {
+                const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+                return descriptor.get.call(this);
+            },
+            set(newVal) {
+                const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+                descriptor.set.call(this, newVal);
+                const inputEvent = new CustomEvent('inputValueChanged', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: newVal,
+                    },
+                });
+                this.dispatchEvent(inputEvent);
+                return newVal;
+            },
+        });
+    }
+    ngOnDestroy() {
+        if (this.#observer) {
+            this.#observer.disconnect();
+        }
+        if (this.#inputElement) {
+            this.#inputElement.oninput = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ShipRangeSlider, isStandalone: true, selector: "sh-range-slider", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sharp: { classPropertyName: "sharp", publicName: "sharp", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sh-range-slider": "true", "class": "hostClasses()", "class.has-input": "this.hasInputElement" } }, ngImport: i0, template: `
+    <div class="label">
+      <ng-content select="label"></ng-content>
+    </div>
+
+    <div class="input-wrap">
+      <div class="min-indicator">{{ inputState().min }}{{ unit() }}</div>
+
+      <div class="track-wrap" (click)="trackEvent($event)">
+        <ng-content select="input[type=range]"></ng-content>
+
+        <div class="track">
+          <div class="track-filled" [style.width.%]="trackFilledPercentage()"></div>
+        </div>
+
+        <div class="thumb-wrap" [style.left.%]="thumbPositionPercentage()">
+          <div class="thumb">
+            <div class="value-indicator">{{ value() }}{{ unit() }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-indicator">{{ inputState().max }}{{ unit() }}</div>
+    </div>
+  `, isInline: true, styles: ["sh-range-slider{--rs-h: 2.5rem;--rs-f: var(--paragraph-30);--rs-unit-g: .75rem;--rs-unit-c: var(--base-8);--rst: var(--base-3);--rst-bc: var(--base-1);--rst-bg: var(--base-4);--rst-h: .5rem;--rst-s: calc(var(--shape-2) / 2);--rs-thumb-c: var(--base-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--base-4);--rs-thumb-arrow: var(--rs-thumb-value-bg);--rs-thumb-value-c: var(--base-8);--rs-thumb-si: 1rem;--rs-thumb-w: var(--rs-thumb-si);--rs-thumb-s: calc(var(--rs-thumb-w) / 2);display:flex;flex-direction:column;width:100%;font:var(--rs-f)}sh-range-slider.sharp{--rst-s: .125rem;--rs-thumb-s: .125rem;--rs-thumb-bc: transparent !important}sh-range-slider .label{display:flex;align-items:center;gap:.5rem;padding-bottom:.25rem}sh-range-slider .label>label{display:flex;align-items:center;gap:.25rem}sh-range-slider .label sh-icon{color:var(--grey-500);font-size:1rem}sh-range-slider .label:empty{display:none}sh-range-slider[readonly]:not([readonly=false]),sh-range-slider:has(input[type=range][readonly]:not([readonly=false])),sh-range-slider[disabled]:not([disabled=false]),sh-range-slider:has(input[type=range][disabled]:not([disabled=false])){opacity:.4;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-range-slider:has(input[type=range][readonly]) .thumb .value-indicator,sh-range-slider.always-show .thumb .value-indicator{opacity:1}sh-range-slider input[type=range]{appearance:none;width:100%;height:100%;position:absolute;inset:0;opacity:0;margin:0;z-index:1000}sh-range-slider .input-wrap{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--rs-h);position:relative;gap:var(--rs-unit-g)}sh-range-slider .thumb-wrap{position:absolute;top:0}sh-range-slider .thumb{position:relative;margin-top:calc(-1 * var(--rs-thumb-si) / 4);width:var(--rs-thumb-w);height:var(--rs-thumb-si);border-radius:var(--rs-thumb-s);background-color:var(--rs-thumb-c);border:1px solid var(--rs-thumb-bc);box-shadow:var(--box-shadow-20);transform:translate(-50%)}sh-range-slider .track-wrap{position:relative;width:100%;height:var(--rst-h)}sh-range-slider .track{position:relative;width:100%;height:var(--rst-h);border-radius:var(--rst-s);background-color:var(--rst);border:1px solid var(--rst-bc);overflow:hidden}sh-range-slider .track-filled{position:absolute;top:0;left:0;bottom:0;background:var(--rst-bg);width:0}sh-range-slider .min-indicator,sh-range-slider .max-indicator{white-space:nowrap;color:var(--rs-unit-c)}sh-range-slider input[type=range]:hover~.thumb-wrap .value-indicator,sh-range-slider input[type=range]:focus~.thumb-wrap .value-indicator{opacity:1}sh-range-slider .value-indicator{position:absolute;top:-1.875rem;height:1.5rem;min-width:1.5rem;border-radius:var(--shape-2);left:50%;margin:auto;transform:translate(-50%);padding:.25rem .5rem;background:var(--rs-thumb-value-bg);color:var(--rs-thumb-value-c);white-space:nowrap;opacity:0;transition:opacity 125ms linear;-webkit-user-select:none;user-select:none;pointer-events:none}sh-range-slider .value-indicator:after{content:\"\";border-top:.3125rem solid var(--rs-thumb-arrow);border-left:.3125rem solid transparent;border-right:.3125rem solid transparent;position:absolute;top:calc(100% - 1px);left:50%;margin-left:-.3125rem}sh-range-slider.primary{--rst-bg: var(--primary-8);--rs-thumb-arrow: var(--primary-8);--rs-thumb-value-bg: var(--primary-8);--rs-thumb-value-c: #fff}sh-range-slider.accent{--rst-bg: var(--accent-8);--rs-thumb-arrow: var(--accent-8);--rs-thumb-value-bg: var(--accent-8);--rs-thumb-value-c: #fff}sh-range-slider.warn{--rst-bg: var(--warn-8);--rs-thumb-arrow: var(--warn-8);--rs-thumb-value-bg: var(--warn-8);--rs-thumb-value-c: #fff}sh-range-slider.error{--rst-bg: var(--error-8);--rs-thumb-arrow: var(--error-8);--rs-thumb-value-bg: var(--error-8);--rs-thumb-value-c: #fff}sh-range-slider.success{--rst-bg: var(--success-8);--rs-thumb-arrow: var(--success-8);--rs-thumb-value-bg: var(--success-8);--rs-thumb-value-c: #fff}sh-range-slider.simple{--rst-h: 1rem;--rst-s: var(--shape-2)}sh-range-slider.simple .thumb{width:1px;height:var(--rst-h);margin-top:0;border-radius:0;border:none;box-shadow:none}sh-range-slider.simple.primary{--rst-bg: var(--primary-8);--rst: var(--primary-2);--rs-thumb-c: var(--primary-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--primary-8);--rs-thumb-value-c: var(--primary-2)}sh-range-slider.simple.accent{--rst-bg: var(--accent-8);--rst: var(--accent-2);--rs-thumb-c: var(--accent-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--accent-8);--rs-thumb-value-c: var(--accent-2)}sh-range-slider.simple.warn{--rst-bg: var(--warn-8);--rst: var(--warn-2);--rs-thumb-c: var(--warn-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--warn-8);--rs-thumb-value-c: var(--warn-2)}sh-range-slider.simple.error{--rst-bg: var(--error-8);--rst: var(--error-2);--rs-thumb-c: var(--error-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--error-8);--rs-thumb-value-c: var(--error-2)}sh-range-slider.simple.success{--rst-bg: var(--success-8);--rst: var(--success-2);--rs-thumb-c: var(--success-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--success-8);--rs-thumb-value-c: var(--success-2)}sh-range-slider.outlined{--rst: var(--base-1);--rst-bc: var(--base-4);--rs-thumb-c: var(--base-6);--rs-thumb-bc: var(--base-1);--rs-thumb-arrow: var(--base-4)}sh-range-slider.outlined.primary,sh-range-slider.outlined.accent,sh-range-slider.outlined.warn,sh-range-slider.outlined.error,sh-range-slider.outlined.success{--rst: var(--base-2)}sh-range-slider.outlined.primary{--rst-bg: var(--primary-4);--rst-bc: var(--primary-8);--rs-thumb-c: var(--primary-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--primary-4);--rs-thumb-value-c: var(--primary-8);--rs-thumb-arrow: var(--primary-4)}sh-range-slider.outlined.accent{--rs-thumb-c: var(--accent-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--accent-4);--rs-thumb-value-c: var(--accent-8);--rs-thumb-arrow: var(--accent-4)}sh-range-slider.outlined.warn{--rs-thumb-c: var(--warn-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--warn-4);--rs-thumb-value-c: var(--warn-8);--rs-thumb-arrow: var(--warn-4)}sh-range-slider.outlined.error{--rs-thumb-c: var(--error-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--error-4);--rs-thumb-value-c: var(--error-8);--rs-thumb-arrow: var(--error-4)}sh-range-slider.outlined.success{--rs-thumb-c: var(--success-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--success-4);--rs-thumb-value-c: var(--success-8);--rs-thumb-arrow: var(--success-4)}sh-range-slider.flat{--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4)}sh-range-slider.flat.primary,sh-range-slider.flat.accent,sh-range-slider.flat.warn,sh-range-slider.flat.error,sh-range-slider.flat.success{--rst: var(--base-3);--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4);--rs-thumb-value-bg: var(--base-8);--rs-thumb-value-c: #fff}sh-range-slider.flat.primary{--rst-bg: var(--primary-8);--rs-thumb-value-bg: var(--primary-8)}sh-range-slider.flat.accent{--rst-bg: var(--accent-8);--rs-thumb-value-bg: var(--accent-8)}sh-range-slider.flat.warn{--rst-bg: var(--warn-8);--rs-thumb-value-bg: var(--warn-8)}sh-range-slider.flat.error{--rst-bg: var(--error-8);--rs-thumb-value-bg: var(--error-8)}sh-range-slider.flat.success{--rst-bg: var(--success-8);--rs-thumb-value-bg: var(--success-8)}sh-range-slider.raised{--rst-bg: var(--base-g2);--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4)}sh-range-slider.raised.primary,sh-range-slider.raised.accent,sh-range-slider.raised.warn,sh-range-slider.raised.error,sh-range-slider.raised.success{--rst: var(--base-3);--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4);--rs-thumb-value-bg: var(--base-g6);--rs-thumb-value-c: #fff}sh-range-slider.raised.primary{--rst-bg: var(--primary-g2);--rs-thumb-arrow: var(--primary-8);--rs-thumb-value-bg: var(--primary-g3)}sh-range-slider.raised.accent{--rst-bg: var(--accent-g2);--rs-thumb-arrow: var(--accent-8);--rs-thumb-value-bg: var(--accent-8)}sh-range-slider.raised.warn{--rst-bg: var(--warn-g2);--rs-thumb-arrow: var(--warn-8);--rs-thumb-value-bg: var(--warn-8)}sh-range-slider.raised.error{--rst-bg: var(--error-g2);--rs-thumb-arrow: var(--error-8);--rs-thumb-value-bg: var(--error-8)}sh-range-slider.raised.success{--rst-bg: var(--success-g2);--rs-thumb-arrow: var(--success-8);--rs-thumb-value-bg: var(--success-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipRangeSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-range-slider', encapsulation: ViewEncapsulation.None, imports: [], template: `
+    <div class="label">
+      <ng-content select="label"></ng-content>
+    </div>
+
+    <div class="input-wrap">
+      <div class="min-indicator">{{ inputState().min }}{{ unit() }}</div>
+
+      <div class="track-wrap" (click)="trackEvent($event)">
+        <ng-content select="input[type=range]"></ng-content>
+
+        <div class="track">
+          <div class="track-filled" [style.width.%]="trackFilledPercentage()"></div>
+        </div>
+
+        <div class="thumb-wrap" [style.left.%]="thumbPositionPercentage()">
+          <div class="thumb">
+            <div class="value-indicator">{{ value() }}{{ unit() }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-indicator">{{ inputState().max }}{{ unit() }}</div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.sh-range-slider]': 'true',
+                        '[class]': 'hostClasses()',
+                    }, styles: ["sh-range-slider{--rs-h: 2.5rem;--rs-f: var(--paragraph-30);--rs-unit-g: .75rem;--rs-unit-c: var(--base-8);--rst: var(--base-3);--rst-bc: var(--base-1);--rst-bg: var(--base-4);--rst-h: .5rem;--rst-s: calc(var(--shape-2) / 2);--rs-thumb-c: var(--base-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--base-4);--rs-thumb-arrow: var(--rs-thumb-value-bg);--rs-thumb-value-c: var(--base-8);--rs-thumb-si: 1rem;--rs-thumb-w: var(--rs-thumb-si);--rs-thumb-s: calc(var(--rs-thumb-w) / 2);display:flex;flex-direction:column;width:100%;font:var(--rs-f)}sh-range-slider.sharp{--rst-s: .125rem;--rs-thumb-s: .125rem;--rs-thumb-bc: transparent !important}sh-range-slider .label{display:flex;align-items:center;gap:.5rem;padding-bottom:.25rem}sh-range-slider .label>label{display:flex;align-items:center;gap:.25rem}sh-range-slider .label sh-icon{color:var(--grey-500);font-size:1rem}sh-range-slider .label:empty{display:none}sh-range-slider[readonly]:not([readonly=false]),sh-range-slider:has(input[type=range][readonly]:not([readonly=false])),sh-range-slider[disabled]:not([disabled=false]),sh-range-slider:has(input[type=range][disabled]:not([disabled=false])){opacity:.4;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:initial}sh-range-slider:has(input[type=range][readonly]) .thumb .value-indicator,sh-range-slider.always-show .thumb .value-indicator{opacity:1}sh-range-slider input[type=range]{appearance:none;width:100%;height:100%;position:absolute;inset:0;opacity:0;margin:0;z-index:1000}sh-range-slider .input-wrap{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--rs-h);position:relative;gap:var(--rs-unit-g)}sh-range-slider .thumb-wrap{position:absolute;top:0}sh-range-slider .thumb{position:relative;margin-top:calc(-1 * var(--rs-thumb-si) / 4);width:var(--rs-thumb-w);height:var(--rs-thumb-si);border-radius:var(--rs-thumb-s);background-color:var(--rs-thumb-c);border:1px solid var(--rs-thumb-bc);box-shadow:var(--box-shadow-20);transform:translate(-50%)}sh-range-slider .track-wrap{position:relative;width:100%;height:var(--rst-h)}sh-range-slider .track{position:relative;width:100%;height:var(--rst-h);border-radius:var(--rst-s);background-color:var(--rst);border:1px solid var(--rst-bc);overflow:hidden}sh-range-slider .track-filled{position:absolute;top:0;left:0;bottom:0;background:var(--rst-bg);width:0}sh-range-slider .min-indicator,sh-range-slider .max-indicator{white-space:nowrap;color:var(--rs-unit-c)}sh-range-slider input[type=range]:hover~.thumb-wrap .value-indicator,sh-range-slider input[type=range]:focus~.thumb-wrap .value-indicator{opacity:1}sh-range-slider .value-indicator{position:absolute;top:-1.875rem;height:1.5rem;min-width:1.5rem;border-radius:var(--shape-2);left:50%;margin:auto;transform:translate(-50%);padding:.25rem .5rem;background:var(--rs-thumb-value-bg);color:var(--rs-thumb-value-c);white-space:nowrap;opacity:0;transition:opacity 125ms linear;-webkit-user-select:none;user-select:none;pointer-events:none}sh-range-slider .value-indicator:after{content:\"\";border-top:.3125rem solid var(--rs-thumb-arrow);border-left:.3125rem solid transparent;border-right:.3125rem solid transparent;position:absolute;top:calc(100% - 1px);left:50%;margin-left:-.3125rem}sh-range-slider.primary{--rst-bg: var(--primary-8);--rs-thumb-arrow: var(--primary-8);--rs-thumb-value-bg: var(--primary-8);--rs-thumb-value-c: #fff}sh-range-slider.accent{--rst-bg: var(--accent-8);--rs-thumb-arrow: var(--accent-8);--rs-thumb-value-bg: var(--accent-8);--rs-thumb-value-c: #fff}sh-range-slider.warn{--rst-bg: var(--warn-8);--rs-thumb-arrow: var(--warn-8);--rs-thumb-value-bg: var(--warn-8);--rs-thumb-value-c: #fff}sh-range-slider.error{--rst-bg: var(--error-8);--rs-thumb-arrow: var(--error-8);--rs-thumb-value-bg: var(--error-8);--rs-thumb-value-c: #fff}sh-range-slider.success{--rst-bg: var(--success-8);--rs-thumb-arrow: var(--success-8);--rs-thumb-value-bg: var(--success-8);--rs-thumb-value-c: #fff}sh-range-slider.simple{--rst-h: 1rem;--rst-s: var(--shape-2)}sh-range-slider.simple .thumb{width:1px;height:var(--rst-h);margin-top:0;border-radius:0;border:none;box-shadow:none}sh-range-slider.simple.primary{--rst-bg: var(--primary-8);--rst: var(--primary-2);--rs-thumb-c: var(--primary-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--primary-8);--rs-thumb-value-c: var(--primary-2)}sh-range-slider.simple.accent{--rst-bg: var(--accent-8);--rst: var(--accent-2);--rs-thumb-c: var(--accent-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--accent-8);--rs-thumb-value-c: var(--accent-2)}sh-range-slider.simple.warn{--rst-bg: var(--warn-8);--rst: var(--warn-2);--rs-thumb-c: var(--warn-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--warn-8);--rs-thumb-value-c: var(--warn-2)}sh-range-slider.simple.error{--rst-bg: var(--error-8);--rst: var(--error-2);--rs-thumb-c: var(--error-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--error-8);--rs-thumb-value-c: var(--error-2)}sh-range-slider.simple.success{--rst-bg: var(--success-8);--rst: var(--success-2);--rs-thumb-c: var(--success-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--success-8);--rs-thumb-value-c: var(--success-2)}sh-range-slider.outlined{--rst: var(--base-1);--rst-bc: var(--base-4);--rs-thumb-c: var(--base-6);--rs-thumb-bc: var(--base-1);--rs-thumb-arrow: var(--base-4)}sh-range-slider.outlined.primary,sh-range-slider.outlined.accent,sh-range-slider.outlined.warn,sh-range-slider.outlined.error,sh-range-slider.outlined.success{--rst: var(--base-2)}sh-range-slider.outlined.primary{--rst-bg: var(--primary-4);--rst-bc: var(--primary-8);--rs-thumb-c: var(--primary-8);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--primary-4);--rs-thumb-value-c: var(--primary-8);--rs-thumb-arrow: var(--primary-4)}sh-range-slider.outlined.accent{--rs-thumb-c: var(--accent-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--accent-4);--rs-thumb-value-c: var(--accent-8);--rs-thumb-arrow: var(--accent-4)}sh-range-slider.outlined.warn{--rs-thumb-c: var(--warn-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--warn-4);--rs-thumb-value-c: var(--warn-8);--rs-thumb-arrow: var(--warn-4)}sh-range-slider.outlined.error{--rs-thumb-c: var(--error-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--error-4);--rs-thumb-value-c: var(--error-8);--rs-thumb-arrow: var(--error-4)}sh-range-slider.outlined.success{--rs-thumb-c: var(--success-4);--rs-thumb-bc: var(--base-1);--rs-thumb-value-bg: var(--success-4);--rs-thumb-value-c: var(--success-8);--rs-thumb-arrow: var(--success-4)}sh-range-slider.flat{--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4)}sh-range-slider.flat.primary,sh-range-slider.flat.accent,sh-range-slider.flat.warn,sh-range-slider.flat.error,sh-range-slider.flat.success{--rst: var(--base-3);--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4);--rs-thumb-value-bg: var(--base-8);--rs-thumb-value-c: #fff}sh-range-slider.flat.primary{--rst-bg: var(--primary-8);--rs-thumb-value-bg: var(--primary-8)}sh-range-slider.flat.accent{--rst-bg: var(--accent-8);--rs-thumb-value-bg: var(--accent-8)}sh-range-slider.flat.warn{--rst-bg: var(--warn-8);--rs-thumb-value-bg: var(--warn-8)}sh-range-slider.flat.error{--rst-bg: var(--error-8);--rs-thumb-value-bg: var(--error-8)}sh-range-slider.flat.success{--rst-bg: var(--success-8);--rs-thumb-value-bg: var(--success-8)}sh-range-slider.raised{--rst-bg: var(--base-g2);--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4)}sh-range-slider.raised.primary,sh-range-slider.raised.accent,sh-range-slider.raised.warn,sh-range-slider.raised.error,sh-range-slider.raised.success{--rst: var(--base-3);--rs-thumb-c: #fff;--rs-thumb-bc: var(--base-4);--rs-thumb-value-bg: var(--base-g6);--rs-thumb-value-c: #fff}sh-range-slider.raised.primary{--rst-bg: var(--primary-g2);--rs-thumb-arrow: var(--primary-8);--rs-thumb-value-bg: var(--primary-g3)}sh-range-slider.raised.accent{--rst-bg: var(--accent-g2);--rs-thumb-arrow: var(--accent-8);--rs-thumb-value-bg: var(--accent-8)}sh-range-slider.raised.warn{--rst-bg: var(--warn-g2);--rs-thumb-arrow: var(--warn-8);--rs-thumb-value-bg: var(--warn-8)}sh-range-slider.raised.error{--rst-bg: var(--error-g2);--rs-thumb-arrow: var(--error-8);--rs-thumb-value-bg: var(--error-8)}sh-range-slider.raised.success{--rst-bg: var(--success-g2);--rs-thumb-arrow: var(--success-8);--rs-thumb-value-bg: var(--success-8)}\n"] }]
+        }], propDecorators: { unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sharp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sharp", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }], hasInputElement: [{
+                type: HostBinding,
+                args: ['class.has-input']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipRangeSlider };
+//# sourceMappingURL=ship-ui-core-ship-range-slider.mjs.map

package/fesm2022/ship-ui-core-ship-range-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ship-ui-core-ship-range-slider.mjs","sources":["../../../projects/ship-ui/ship-range-slider/ship-range-slider.ts","../../../projects/ship-ui/ship-range-slider/ship-ui-core-ship-range-slider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, HostBinding, inject, input, model, signal, ViewEncapsulation } from '@angular/core';\nimport { shipComponentClasses } from '@ship-ui/core';\nimport { ShipColor, ShipSize, ShipRangeSliderVariant } from '@ship-ui/core';\n\n@Component({\n  selector: 'sh-range-slider',\n  styleUrl: './ship-range-slider.scss',\n  encapsulation: ViewEncapsulation.None,\n  imports: [],\n  template: `\n    <div class=\"label\">\n      <ng-content select=\"label\"></ng-content>\n    </div>\n\n    <div class=\"input-wrap\">\n      <div class=\"min-indicator\">{{ inputState().min }}{{ unit() }}</div>\n\n      <div class=\"track-wrap\" (click)=\"trackEvent($event)\">\n        <ng-content select=\"input[type=range]\"></ng-content>\n\n        <div class=\"track\">\n          <div class=\"track-filled\" [style.width.%]=\"trackFilledPercentage()\"></div>\n        </div>\n\n        <div class=\"thumb-wrap\" [style.left.%]=\"thumbPositionPercentage()\">\n          <div class=\"thumb\">\n            <div class=\"value-indicator\">{{ value() }}{{ unit() }}</div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"max-indicator\">{{ inputState().max }}{{ unit() }}</div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.sh-range-slider]': 'true',\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ShipRangeSlider {\n  #selfRef = inject(ElementRef<HTMLElement>);\n  #observer: MutationObserver | null = null;\n  #inputElement: HTMLInputElement | null = null;\n  #initialDefaultValue = 0;\n\n  unit = input<string>('');\n  value = model<number>(this.#initialDefaultValue);\n\n  inputState = signal({\n    min: 0,\n    max: 100,\n    step: 1,\n  });\n\n  readonly color = input<ShipColor | null>(null);\n  readonly variant = input<ShipRangeSliderVariant | null>(null);\n  readonly size = input<ShipSize | null>(null);\n  readonly sharp = input<boolean | undefined>(undefined);\n  readonly alwaysShow = input<boolean | undefined>(undefined);\n\n  hostClasses = shipComponentClasses('rangeSlider', {\n    color: this.color,\n    variant: this.variant,\n    size: this.size,\n    sharp: this.sharp,\n    alwaysShow: this.alwaysShow,\n  });\n\n  valuePercentage = computed(() => {\n    const { min, max } = this.inputState();\n    const currentValue = this.value() ?? min;\n    if (isNaN(currentValue)) return 0;\n\n    const range = max - min;\n    if (range === 0) return 0;\n\n    const percentage = ((currentValue - min) / range) * 100;\n    return Math.max(0, Math.min(100, percentage));\n  });\n\n  trackFilledPercentage = computed(() => this.valuePercentage());\n  thumbPositionPercentage = computed(() => this.valuePercentage());\n\n  syncModelToInputEffect = effect(() => {\n    const modelValue = this.value();\n    if (this.#inputElement) {\n      const currentInputValue = parseFloat(this.#inputElement.value);\n      if (isNaN(currentInputValue) || String(currentInputValue) !== String(modelValue)) {\n        this.#inputElement.value = String(modelValue);\n      }\n    }\n  });\n\n  @HostBinding('class.has-input')\n  get hasInputElement(): boolean {\n    return !!this.#inputElement;\n  }\n\n  ngAfterViewInit() {\n    this.#inputElement = this.#selfRef.nativeElement.querySelector('input[type=\"range\"]');\n\n    if (this.#inputElement) {\n      this.#createCustomInputEventListener(this.#inputElement);\n\n      this.#inputElement.oninput = () => {\n        this.setNewInputValue(this.#inputElement!.value);\n      };\n\n      this.#inputElement.addEventListener('inputValueChanged', (event: any) => {\n        this.setNewInputValue(event.detail.value);\n      });\n\n      queueMicrotask(() => this.#updateStateFromInput(true));\n\n      this.#setupMutationObserver();\n    } else {\n      console.error('ShipRangeSlider: No <input type=\"range\"> element found projected inside.');\n    }\n  }\n\n  setNewInputValue(value: string) {\n    const inputValue = parseFloat(value ?? '0');\n\n    if (!isNaN(inputValue)) {\n      const { min, max } = this.inputState();\n      this.value.set(Math.max(min, Math.min(max, inputValue)));\n    }\n  }\n\n  trackEvent(e: MouseEvent) {\n    if (!this.#inputElement || this.#inputElement.readOnly || this.#inputElement.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (\n      e.target === this.#inputElement ||\n      (e.target as HTMLElement)?.closest('.thumb, .min-indicator, .max-indicator')\n    ) {\n      return;\n    }\n\n    const trackWrap = e.currentTarget as HTMLElement;\n    const rect = trackWrap.getBoundingClientRect();\n    const clickX = e.clientX - rect.left;\n    const width = rect.width;\n    const { min, max, step } = this.inputState();\n    const range = max - min;\n\n    if (width > 0 && range !== 0 && step > 0) {\n      let proportionalValue = (clickX / width) * range + min;\n      const numSteps = (proportionalValue - min) / step;\n      let nearestStepValue = min + Math.round(numSteps) * step;\n\n      const decimals = this.#countDecimals(step);\n      nearestStepValue = parseFloat(nearestStepValue.toFixed(decimals));\n\n      const clampedValue = Math.max(min, Math.min(max, nearestStepValue));\n\n      this.value.set(clampedValue);\n    }\n  }\n\n  #updateStateFromInput(isInitialCall = false) {\n    if (!this.#inputElement) return;\n\n    const min = parseFloat(this.#inputElement.min ?? '0') ?? 0;\n    const max = parseFloat(this.#inputElement.max ?? '100') ?? 100;\n    const stepAttr = this.#inputElement.step;\n    let step = 1;\n    if (stepAttr && stepAttr.toLowerCase() !== 'any') {\n      const parsedStep = parseFloat(stepAttr);\n      if (!isNaN(parsedStep) && parsedStep > 0) {\n        step = parsedStep;\n      }\n    }\n\n    this.inputState.set({ min, max, step });\n\n    const inputElementValue = parseFloat(this.#inputElement.value ?? String(min)) ?? min;\n\n    if (isInitialCall && this.value() !== this.#initialDefaultValue) {\n      const modelValue = this.value();\n      const clampedModelValue = Math.max(min, Math.min(max, modelValue));\n\n      if (inputElementValue !== clampedModelValue) {\n        this.#inputElement.value = String(clampedModelValue);\n      }\n      if (modelValue !== clampedModelValue) {\n        this.value.set(clampedModelValue);\n      }\n    } else {\n      const clampedInputElementValue = Math.max(min, Math.min(max, inputElementValue));\n      if (this.value() !== clampedInputElementValue) {\n        this.value.set(clampedInputElementValue);\n      }\n    }\n  }\n\n  #setupMutationObserver() {\n    if (!this.#inputElement || typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const MUTATION_ATTRIBUTES = ['min', 'max', 'step', 'value', 'readonly', 'disabled'];\n\n    this.#observer = new MutationObserver((mutationList) => {\n      let needsStateUpdate = false;\n      for (const mutation of mutationList) {\n        if (mutation.type === 'attributes' && MUTATION_ATTRIBUTES.includes(mutation.attributeName ?? '')) {\n          needsStateUpdate = true;\n          break;\n        }\n      }\n      if (needsStateUpdate) {\n        this.#updateStateFromInput(false);\n      }\n    });\n\n    this.#observer.observe(this.#inputElement, { attributes: true, attributeFilter: MUTATION_ATTRIBUTES });\n  }\n\n  #countDecimals(value: number): number {\n    if (isNaN(value) || Math.floor(value) === value) return 0;\n    const str = value.toString();\n    const decimalPart = str.split('.')[1];\n    return decimalPart ? decimalPart.length : 0;\n  }\n\n  #createCustomInputEventListener(input: HTMLInputElement | HTMLTextAreaElement) {\n    Object.defineProperty(input, 'value', {\n      configurable: true,\n      get() {\n        const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');\n        return descriptor!.get!.call(this);\n      },\n      set(newVal) {\n        const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');\n        descriptor!.set!.call(this, newVal);\n\n        const inputEvent = new CustomEvent('inputValueChanged', {\n          bubbles: true,\n          cancelable: true,\n          detail: {\n            value: newVal,\n          },\n        });\n\n        this.dispatchEvent(inputEvent);\n\n        return newVal;\n      },\n    });\n  }\n\n  ngOnDestroy() {\n    if (this.#observer) {\n      this.#observer.disconnect();\n    }\n    if (this.#inputElement) {\n      this.#inputElement.oninput = null;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}