@mintplayer/ng-bootstrap 21.28.0 → 21.30.0

package/fesm2022/mintplayer-ng-bootstrap-multi-range.mjs

@@ -0,0 +1,693 @@
+import * as i0 from '@angular/core';
+import { inject, forwardRef, Directive, input, model, output, viewChild, computed, effect, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { html, unsafeCSS, LitElement, nothing } from 'lit';
+
+class BsMultiRangeValueAccessor {
+    constructor() {
+        this.host = inject(BsMultiRangeComponent);
+    }
+    onInputEvent(ev) {
+        if (!this.onValueChange)
+            return;
+        const detail = ev.detail;
+        if (detail)
+            this.onValueChange([...detail]);
+    }
+    onTouchEvent() {
+        if (this.onTouched)
+            this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onValueChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        const ref = this.host.elementRef();
+        if (!ref)
+            return;
+        ref.nativeElement.value = value ?? [];
+    }
+    setDisabledState(isDisabled) {
+        const ref = this.host.elementRef();
+        if (!ref)
+            return;
+        if (isDisabled) {
+            ref.nativeElement.setAttribute('disabled', '');
+        }
+        else {
+            ref.nativeElement.removeAttribute('disabled');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsMultiRangeValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsMultiRangeValueAccessor, isStandalone: true, selector: "bs-multi-range", host: { listeners: { "value-input": "onInputEvent($event)", "value-change": "onTouchEvent()" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BsMultiRangeValueAccessor),
+                multi: true,
+            }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsMultiRangeValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bs-multi-range',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BsMultiRangeValueAccessor),
+                            multi: true,
+                        }],
+                    host: {
+                        '(value-input)': 'onInputEvent($event)',
+                        '(value-change)': 'onTouchEvent()',
+                    },
+                }]
+        }] });
+
+class BsMultiRangeComponent {
+    constructor() {
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.minDistance = input(0, ...(ngDevMode ? [{ debugName: "minDistance" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.formatValue = input(null, ...(ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []));
+        this.label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        // Default is `undefined` so the effect doesn't clobber a writeValue() from a
+        // form-control binding that hasn't fired yet. Once the model is set (either
+        // by [(value)] binding or by user interaction), the effect drives the WC.
+        this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.valueChange = output();
+        this.valueInput = output();
+        this.elementRef = viewChild.required('el');
+        this.disabledAttr = computed(() => (this.disabled() ? '' : null), ...(ngDevMode ? [{ debugName: "disabledAttr" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const ref = this.elementRef();
+            if (!ref)
+                return;
+            const v = this.value();
+            if (v === undefined)
+                return;
+            ref.nativeElement.value = v;
+        });
+        effect(() => {
+            const ref = this.elementRef();
+            if (!ref)
+                return;
+            ref.nativeElement.formatValue = this.formatValue();
+        });
+    }
+    onValueInput(event) {
+        const detail = event.detail;
+        if (!detail)
+            return;
+        this.value.set(detail);
+        this.valueInput.emit(detail);
+    }
+    onValueChange(event) {
+        const detail = event.detail;
+        if (!detail)
+            return;
+        this.value.set(detail);
+        this.valueChange.emit(detail);
+    }
+    /** Imperatively read the currently-rendered values from the WC. */
+    getValues() {
+        const ref = this.elementRef();
+        return ref ? ref.nativeElement.getValues() : [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsMultiRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsMultiRangeComponent, isStandalone: true, selector: "bs-multi-range", 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 }, minDistance: { classPropertyName: "minDistance", publicName: "minDistance", 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 }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", valueInput: "valueInput" }, host: { properties: { "attr.orientation": "orientation()" } }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["el"], descendants: true, isSignal: true }], hostDirectives: [{ directive: BsMultiRangeValueAccessor }], ngImport: i0, template: `
+    <mp-multi-range
+      #el
+      class="bs-multi-range"
+      [attr.min]="min()"
+      [attr.max]="max()"
+      [attr.step]="step()"
+      [attr.min-distance]="minDistance()"
+      [attr.orientation]="orientation()"
+      [attr.disabled]="disabledAttr()"
+      [attr.aria-label]="label()"
+      (value-input)="onValueInput($event)"
+      (value-change)="onValueChange($event)"
+    ></mp-multi-range>
+  `, isInline: true, styles: [":host{display:block;width:100%}.bs-multi-range{display:block;width:100%;height:100%}:host([orientation=\"vertical\"]){width:auto;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsMultiRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-multi-range', template: `
+    <mp-multi-range
+      #el
+      class="bs-multi-range"
+      [attr.min]="min()"
+      [attr.max]="max()"
+      [attr.step]="step()"
+      [attr.min-distance]="minDistance()"
+      [attr.orientation]="orientation()"
+      [attr.disabled]="disabledAttr()"
+      [attr.aria-label]="label()"
+      (value-input)="onValueInput($event)"
+      (value-change)="onValueChange($event)"
+    ></mp-multi-range>
+  `, host: {
+                        '[attr.orientation]': 'orientation()',
+                    }, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsMultiRangeValueAccessor], styles: [":host{display:block;width:100%}.bs-multi-range{display:block;width:100%;height:100%}:host([orientation=\"vertical\"]){width:auto;height:100%}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], minDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], valueInput: [{ type: i0.Output, args: ["valueInput"] }], elementRef: [{ type: i0.ViewChild, args: ['el', { isSignal: true }] }] } });
+
+// AUTO-GENERATED — do not edit by hand.
+// Source: mint-multi-range.element.html + mint-multi-range.element.scss
+// Regenerate with the codegen-wc Nx target.
+const template = html `<!-- Track + thumbs are rendered dynamically by render(). This file exists so the
+     codegen-wc target produces a \`styles\` export from the sibling .scss; the
+     \`template\` export it generates here is intentionally unused. -->`;
+const styles = unsafeCSS(`:host {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  --bs-multi-range-track-bg: var(--bs-tertiary-bg, #e9ecef);
+  --bs-multi-range-track-radius: 1rem;
+  --bs-multi-range-track-thickness: 0.5rem;
+  --bs-multi-range-thumb-bg: var(--bs-primary, #0d6efd);
+  --bs-multi-range-thumb-bg-disabled: var(--bs-secondary, #6c757d);
+  --bs-multi-range-thumb-size: 1rem;
+  --bs-multi-range-thumb-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+  --bs-multi-range-fill-bg: var(--bs-primary, #0d6efd);
+  --bs-multi-range-fill-bg-disabled: var(--bs-secondary, #6c757d);
+  --bs-multi-range-tooltip-bg: var(--bs-dark, #212529);
+  --bs-multi-range-tooltip-color: var(--bs-light, #f8f9fa);
+}
+
+:host([orientation=vertical]) {
+  width: auto;
+  height: 100%;
+  min-height: 8rem;
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+}
+
+.track {
+  position: relative;
+  background: var(--bs-multi-range-track-bg);
+  border-radius: var(--bs-multi-range-track-radius);
+  touch-action: none;
+}
+
+:host([orientation=horizontal]) .track {
+  width: 100%;
+  height: var(--bs-multi-range-track-thickness);
+  margin: calc(var(--bs-multi-range-thumb-size) / 2) 0;
+}
+
+:host([orientation=vertical]) .track {
+  width: var(--bs-multi-range-track-thickness);
+  height: 100%;
+  margin: 0 calc(var(--bs-multi-range-thumb-size) / 2);
+}
+
+.fill {
+  position: absolute;
+  background: var(--bs-multi-range-fill-bg);
+  border-radius: var(--bs-multi-range-track-radius);
+}
+
+:host([orientation=horizontal]) .fill {
+  top: 0;
+  bottom: 0;
+}
+
+:host([orientation=vertical]) .fill {
+  left: 0;
+  right: 0;
+}
+
+:host([disabled]) .fill {
+  background: var(--bs-multi-range-fill-bg-disabled);
+}
+
+.thumb {
+  position: absolute;
+  width: var(--bs-multi-range-thumb-size);
+  height: var(--bs-multi-range-thumb-size);
+  background: var(--bs-multi-range-thumb-bg);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: var(--bs-multi-range-thumb-shadow);
+  cursor: grab;
+  touch-action: none;
+  padding: 0;
+  outline: none;
+  transition: transform 100ms ease-out;
+}
+
+.thumb:active {
+  cursor: grabbing;
+  transform: scale(1.1);
+}
+
+:host([orientation=horizontal]) .thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:host([orientation=horizontal]) .thumb:active {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+:host([orientation=horizontal]:dir(rtl)) .thumb {
+  transform: translate(50%, -50%);
+}
+
+:host([orientation=horizontal]:dir(rtl)) .thumb:active {
+  transform: translate(50%, -50%) scale(1.1);
+}
+
+:host([orientation=vertical]) .thumb {
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+:host([orientation=vertical]) .thumb:active {
+  transform: translate(-50%, 50%) scale(1.1);
+}
+
+:host([disabled]) .thumb {
+  background: var(--bs-multi-range-thumb-bg-disabled);
+  cursor: not-allowed;
+}
+
+.thumb:focus-visible {
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35), var(--bs-multi-range-thumb-shadow);
+}
+
+.tooltip {
+  position: absolute;
+  background: var(--bs-multi-range-tooltip-bg);
+  color: var(--bs-multi-range-tooltip-color);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+  z-index: 2;
+}
+
+:host([orientation=horizontal]) .tooltip {
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:host([orientation=vertical]) .tooltip {
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.thumb:hover .tooltip,
+.thumb:focus-visible .tooltip,
+.thumb:active .tooltip,
+.thumb[data-dragging=true] .tooltip {
+  opacity: 1;
+}
+
+:host([disabled]) .tooltip {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thumb,
+  .tooltip {
+    transition: none;
+  }
+}`);
+
+/**
+ * Bootstrap-flavoured multi-thumb range slider.
+ *
+ * Block-crossing: thumbs cannot pass their neighbours. Identity is by index —
+ * value[0] is always the lowest thumb. The value setter normalises input by
+ * sorting ascending and clamping each entry to [min, max]; minDistance is
+ * enforced only at user-interaction entry points (pointer + keyboard), not on
+ * programmatic writes — callers' arrays are preserved verbatim within bounds.
+ *
+ * Events:
+ *  - `value-input`  fires continuously during drag and on every keyboard step.
+ *  - `value-change` fires on commit (pointerup) and after every keyboard step.
+ *
+ * Both bubble and compose so the Angular wrapper's host listeners pick them up.
+ */
+class MintMultiRangeElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.minDistance = 0;
+        this.orientation = 'horizontal';
+        this.disabled = false;
+        this.formatValue = null;
+        this._value = null;
+        this.dragState = null;
+        // Cached references / state to keep the per-pointermove path off the hot path
+        // for getComputedStyle and querySelector. Track ref is set in firstUpdated()
+        // and is stable across renders. RTL is captured at gesture start so a single
+        // drag stream sees a coherent direction even if the host's `dir` changes mid-air.
+        this.trackEl = null;
+        this.rtlDuringGesture = null;
+        this.onThumbPointerDown = (thumbIndex, ev) => {
+            if (this.disabled)
+                return;
+            this.startDrag(thumbIndex, ev.pointerId, ev.currentTarget);
+        };
+        this.onTrackPointerDown = (ev) => {
+            if (this.disabled)
+                return;
+            // Ignore clicks that originated on a thumb — those are handled by the thumb's own pointerdown.
+            const path = ev.composedPath();
+            if (path.some(node => node instanceof HTMLElement && node.classList?.contains('thumb')))
+                return;
+            // Capture direction up-front so the first valueFromPointer / nearest-thumb
+            // calculation in this gesture sees a consistent value.
+            this.rtlDuringGesture = getComputedStyle(this).direction === 'rtl';
+            const targetValue = this.valueFromPointer(ev.clientX, ev.clientY);
+            const values = this.value;
+            const nearestIndex = this.nearestThumbIndex(values, targetValue);
+            if (this.moveThumb(nearestIndex, targetValue))
+                this.dispatchValueChange();
+            // Transfer drag to the nearest thumb so a continued press-and-drag keeps moving it.
+            const thumbEl = this.renderRoot.querySelector(`.thumb[data-thumb-index="${nearestIndex}"]`);
+            if (thumbEl)
+                this.startDrag(nearestIndex, ev.pointerId, thumbEl);
+        };
+        this.onPointerMove = (ev) => {
+            if (!this.dragState || ev.pointerId !== this.dragState.pointerId)
+                return;
+            const candidate = this.valueFromPointer(ev.clientX, ev.clientY);
+            this.moveThumb(this.dragState.thumbIndex, candidate);
+        };
+        this.onPointerUp = (ev) => {
+            if (!this.dragState || ev.pointerId !== this.dragState.pointerId)
+                return;
+            const target = ev.target;
+            if (target?.releasePointerCapture && target.hasPointerCapture(ev.pointerId)) {
+                target.releasePointerCapture(ev.pointerId);
+            }
+            this.dragState = null;
+            this.rtlDuringGesture = null;
+            this.requestUpdate();
+            this.dispatchValueChange();
+        };
+        this.onThumbKeyDown = (thumbIndex, ev) => {
+            if (this.disabled)
+                return;
+            const target = this.keyboardTarget(thumbIndex, ev.key);
+            if (target === null)
+                return;
+            ev.preventDefault();
+            if (this.moveThumb(thumbIndex, target))
+                this.dispatchValueChange();
+        };
+    }
+    static { this.styles = [styles]; }
+    static get observedAttributes() {
+        return [
+            ...(super.observedAttributes ?? []),
+            'min',
+            'max',
+            'step',
+            'min-distance',
+            'orientation',
+            'disabled',
+        ];
+    }
+    static { this.properties = {
+        value: { attribute: false },
+        min: { attribute: 'min', type: Number, reflect: true },
+        max: { attribute: 'max', type: Number, reflect: true },
+        step: { attribute: 'step', type: Number, reflect: true },
+        minDistance: { attribute: 'min-distance', type: Number },
+        orientation: { attribute: 'orientation', type: String, reflect: true },
+        disabled: { attribute: 'disabled', type: Boolean, reflect: true },
+        formatValue: { attribute: false },
+    }; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'group');
+    }
+    firstUpdated() {
+        this.trackEl = this.renderRoot.querySelector('.track');
+    }
+    get value() {
+        return this._value ?? [this.min, this.max];
+    }
+    set value(next) {
+        const old = this._value;
+        const normalised = this.normalise(next);
+        // Skip the update entirely when the incoming array is shallow-equal to the
+        // current state — the wrapper's effect re-pushes the value on every
+        // value-input event during a drag, so without this we'd queue a redundant
+        // Lit update for every pointermove.
+        if (this.arraysEqual(old, normalised))
+            return;
+        this._value = normalised;
+        this.requestUpdate('value', old);
+    }
+    arraysEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a === null || b === null)
+            return false;
+        if (a.length !== b.length)
+            return false;
+        return a.every((v, i) => v === b[i]);
+    }
+    normalise(input) {
+        if (!input || input.length === 0)
+            return null;
+        const clamped = input.map(v => this.clampToBounds(v));
+        return [...clamped].sort((a, b) => a - b);
+    }
+    clampToBounds(v) {
+        return Math.min(this.max, Math.max(this.min, v));
+    }
+    snapToStep(v) {
+        if (!this.step || this.step <= 0)
+            return this.clampToBounds(v);
+        const snapped = this.min + Math.round((v - this.min) / this.step) * this.step;
+        return this.clampToBounds(snapped);
+    }
+    percent(value) {
+        const range = this.max - this.min;
+        if (range <= 0)
+            return 0;
+        return ((value - this.min) / range) * 100;
+    }
+    formatThumb(value) {
+        if (this.formatValue) {
+            try {
+                return this.formatValue(value);
+            }
+            catch {
+                return String(value);
+            }
+        }
+        return String(value);
+    }
+    isVertical() {
+        return this.orientation === 'vertical';
+    }
+    /**
+     * Returns whether the host renders in RTL. Uses the cached value if a gesture
+     * is active (set in startDrag / onTrackPointerDown), otherwise reads
+     * getComputedStyle fresh — direction can come from any ancestor's `dir`,
+     * so document.dir or our own attribute aren't sufficient.
+     */
+    isRtl() {
+        if (this.rtlDuringGesture !== null)
+            return this.rtlDuringGesture;
+        return getComputedStyle(this).direction === 'rtl';
+    }
+    /**
+     * Apply the Block + minDistance constraint to a candidate value for thumb i.
+     * Returns the candidate clamped between its (already-respected) neighbours.
+     */
+    constrainThumb(values, i, candidate) {
+        const lower = i > 0 ? values[i - 1] + this.minDistance : this.min;
+        const upper = i < values.length - 1 ? values[i + 1] - this.minDistance : this.max;
+        return Math.min(Math.max(candidate, lower), upper);
+    }
+    /** Map a pointer coordinate inside the track rect to a value in [min, max]. */
+    valueFromPointer(clientX, clientY) {
+        const track = this.trackEl ?? this.renderRoot.querySelector('.track');
+        if (!track)
+            return this.min;
+        const rect = track.getBoundingClientRect();
+        let pct;
+        if (this.isVertical()) {
+            pct = (rect.bottom - clientY) / rect.height;
+        }
+        else if (this.isRtl()) {
+            pct = (rect.right - clientX) / rect.width;
+        }
+        else {
+            pct = (clientX - rect.left) / rect.width;
+        }
+        pct = Math.min(1, Math.max(0, pct));
+        const raw = this.min + pct * (this.max - this.min);
+        return this.snapToStep(raw);
+    }
+    /** Update one thumb in-place; emit `value-input`. Returns true if value changed. */
+    moveThumb(thumbIndex, candidate) {
+        const current = [...this.value];
+        const constrained = this.constrainThumb(current, thumbIndex, this.snapToStep(candidate));
+        if (constrained === current[thumbIndex])
+            return false;
+        current[thumbIndex] = constrained;
+        this._value = current;
+        this.requestUpdate('value');
+        this.dispatchEvent(new CustomEvent('value-input', {
+            detail: [...current],
+            bubbles: true,
+            composed: true,
+        }));
+        return true;
+    }
+    dispatchValueChange() {
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: [...this.value],
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    startDrag(thumbIndex, pointerId, target) {
+        if (this.disabled)
+            return;
+        if (this.rtlDuringGesture === null) {
+            this.rtlDuringGesture = getComputedStyle(this).direction === 'rtl';
+        }
+        target.setPointerCapture(pointerId);
+        target.focus();
+        this.dragState = { thumbIndex, pointerId };
+        this.requestUpdate();
+    }
+    /**
+     * Returns the index of the thumb closest to `target`. Ties (multiple thumbs
+     * stacked at the same value) are broken by direction: clicks to the right of
+     * the stack pick the highest-index thumb, clicks to the left pick the
+     * lowest. Without this, a stack would always select the lowest-index thumb,
+     * which is blocked by its higher-indexed neighbours and can't move toward
+     * the click — the user would see no response.
+     */
+    nearestThumbIndex(values, target) {
+        return values.reduce((best, v, i) => {
+            const dBest = Math.abs(values[best] - target);
+            const dCur = Math.abs(v - target);
+            if (dCur < dBest)
+                return i;
+            if (dCur > dBest)
+                return best;
+            // Tie. Prefer the thumb on the side of the target so it can move toward it.
+            return target > v ? i : best;
+        }, 0);
+    }
+    /** Return the target value for a key press, or null if the key isn't bound. */
+    keyboardTarget(thumbIndex, key) {
+        const step = this.step || 1;
+        const big = step * 10;
+        const current = this.value[thumbIndex];
+        const rtl = !this.isVertical() && this.isRtl();
+        switch (key) {
+            case 'ArrowRight': return current + (rtl ? -step : step);
+            case 'ArrowLeft': return current + (rtl ? step : -step);
+            case 'ArrowUp': return current + step;
+            case 'ArrowDown': return current - step;
+            case 'PageUp': return current + big;
+            case 'PageDown': return current - big;
+            case 'Home': return this.min;
+            case 'End': return this.max;
+            default: return null;
+        }
+    }
+    render() {
+        const values = this.value;
+        const vertical = this.isVertical();
+        const fills = values.slice(0, -1).map((v, i) => ({
+            from: this.percent(v),
+            to: this.percent(values[i + 1]),
+        }));
+        return html `
+      <div
+        class="track"
+        part="track"
+        @pointerdown=${this.onTrackPointerDown}
+        @pointermove=${this.onPointerMove}
+        @pointerup=${this.onPointerUp}
+        @pointercancel=${this.onPointerUp}
+      >
+        ${fills.map(f => this.renderFill(f, vertical))}
+        ${values.map((v, i) => this.renderThumb(v, i, vertical))}
+      </div>
+    `;
+    }
+    renderFill(segment, vertical) {
+        // Use logical `inset-inline-start` so the fill flips correctly in RTL;
+        // works as `left` in LTR and `right` in RTL.
+        const style = vertical
+            ? `bottom: ${segment.from}%; height: ${segment.to - segment.from}%;`
+            : `inset-inline-start: ${segment.from}%; width: ${segment.to - segment.from}%;`;
+        return html `<div class="fill" part="fill" style=${style}></div>`;
+    }
+    renderThumb(value, index, vertical) {
+        const pct = this.percent(value);
+        // Logical `inset-inline-start` so the thumb position flips in RTL.
+        const style = vertical ? `bottom: ${pct}%;` : `inset-inline-start: ${pct}%;`;
+        const formatted = this.formatThumb(value);
+        const isDragging = this.dragState?.thumbIndex === index;
+        // aria-valuetext only when formatValue is provided — otherwise aria-valuenow alone is read out.
+        const valueText = this.formatValue ? formatted : null;
+        return html `
+      <button
+        class="thumb"
+        part="thumb"
+        type="button"
+        role="slider"
+        data-thumb-index=${index}
+        data-dragging=${isDragging ? 'true' : 'false'}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuenow=${value}
+        aria-orientation=${this.orientation}
+        aria-valuetext=${valueText ?? nothing}
+        ?disabled=${this.disabled}
+        style=${style}
+        @pointerdown=${(ev) => this.onThumbPointerDown(index, ev)}
+        @keydown=${(ev) => this.onThumbKeyDown(index, ev)}
+      >
+        <span class="tooltip" part="tooltip">${formatted}</span>
+      </button>
+    `;
+    }
+    /** Returns a copy of the current values. */
+    getValues() {
+        return [...this.value];
+    }
+}
+if (typeof customElements !== 'undefined' && !customElements.get('mp-multi-range')) {
+    customElements.define('mp-multi-range', MintMultiRangeElement);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BsMultiRangeComponent, BsMultiRangeValueAccessor, MintMultiRangeElement };
+//# sourceMappingURL=mintplayer-ng-bootstrap-multi-range.mjs.map