igniteui-webcomponents 4.6.0 → 4.8.0

package/components/slider/slider-base.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { styles as shared } from './themes/shared/slider.common.css.js';
 import { styles } from './themes/slider.base.css.js';
 import { all } from './themes/themes.js';
 import { themes } from '../../theming/theming-decorator.js';
@@ -15,64 +16,60 @@ import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, home
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { blazorTypeOverride } from '../common/decorators/blazorTypeOverride.js';
 import { watch } from '../common/decorators/watch.js';
-import { isLTR } from '../common/util.js';
+import { asNumber, asPercent, clamp, format, isDefined, isLTR, } from '../common/util.js';
 let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
+    get hasLabels() {
+        return this.labels?.length > 0;
+    }
+    get distance() {
+        return this.max - this.min;
+    }
     set min(value) {
-        if (value < this.max) {
-            const oldVal = this._min;
-            this._min = this.labels ? 0 : value;
-            this.requestUpdate('min', oldVal);
-            if (typeof this.lowerBound === 'number' && this.lowerBound < value) {
-                this.lowerBound = value;
-            }
+        if (!isDefined(value) || value > this.max) {
+            return;
+        }
+        this._min = this.hasLabels ? 0 : value;
+        if (isDefined(this._lowerBound) && this._lowerBound < value) {
+            this._lowerBound = value;
         }
     }
     get min() {
         return this._min;
     }
     set max(value) {
-        if (value > this.min) {
-            const oldVal = this._max;
-            this._max = this.labels ? this.labels.length - 1 : value;
-            this.requestUpdate('max', oldVal);
-            if (typeof this.upperBound === 'number' && this.upperBound > value) {
-                this.upperBound = value;
-            }
+        if (!isDefined(value) || value < this._min) {
+            return;
+        }
+        this._max = this.hasLabels ? this.labels.length - 1 : value;
+        if (isDefined(this._upperBound) && this._upperBound > value) {
+            this._upperBound = value;
         }
     }
     get max() {
         return this._max;
     }
     set lowerBound(value) {
-        const oldVal = this._lowerBound;
-        if (typeof value === 'number') {
-            this._lowerBound = this.valueInRange(value, this.min, this.actualMax);
-        }
-        else {
-            this._lowerBound = value;
-        }
-        this.requestUpdate('lowerBound', oldVal);
+        if (!isDefined(value))
+            return;
+        this._lowerBound = Math.min(this._upperBound ?? value, value);
     }
     get lowerBound() {
-        return this._lowerBound;
+        const current = this._lowerBound ?? this._min;
+        const upper = Math.min(this._upperBound ?? this._max, this._max);
+        return clamp(current, this._min, upper);
     }
     set upperBound(value) {
-        const oldVal = this._upperBound;
-        if (typeof value === 'number') {
-            this._upperBound = this.valueInRange(value, this.actualMin, this.max);
-        }
-        else {
-            this._upperBound = value;
-        }
-        this.requestUpdate('upperBound', oldVal);
+        if (!isDefined(value))
+            return;
+        this._upperBound = Math.max(this._lowerBound ?? value, value);
     }
     get upperBound() {
-        return this._upperBound;
+        const current = this._upperBound ?? this._max;
+        const lower = Math.max(this._lowerBound ?? this._min, this.min);
+        return clamp(current, lower, this._max);
     }
     set step(value) {
-        const oldVal = this._step;
-        this._step = this.labels ? 1 : value;
-        this.requestUpdate('step', oldVal);
+        this._step = this.hasLabels ? 1 : asNumber(value, this._step);
     }
     get step() {
         return this._step;
@@ -80,13 +77,6 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     constraintsChange() {
         this.normalizeValue();
     }
-    labelsChange() {
-        if (this.labels) {
-            this.min = 0;
-            this.max = this.labels.length - 1;
-            this.step = 1;
-        }
-    }
     constructor() {
         super();
         this._min = 0;
@@ -94,6 +84,7 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
         this._step = 1;
         this.pointerCaptured = false;
         this.thumbLabelsVisible = false;
+        this.labels = [];
         this.disabled = false;
         this.discreteTrack = false;
         this.hideTooltip = false;
@@ -104,36 +95,6 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
         this.hideSecondaryLabels = false;
         this.locale = 'en';
         this.tickLabelRotation = 0;
-        this.pointerDown = (event) => {
-            const thumb = this.closestHandle(event);
-            thumb.focus();
-            this.startValue = this.activeValue;
-            this.updateSlider(event.clientX);
-            this.setPointerCapture(event.pointerId);
-            this.pointerCaptured = true;
-            this.showThumbLabels();
-            event.preventDefault();
-            this.activeThumb?.part.remove('focused');
-        };
-        this.pointerMove = (event) => {
-            if (this.pointerCaptured) {
-                this.updateSlider(event.clientX);
-            }
-        };
-        this.lostPointerCapture = () => {
-            this.pointerCaptured = false;
-            this.hideThumbLabels();
-            if (this.startValue !== this.activeValue) {
-                this.emitChangeEvent();
-            }
-            this.startValue = undefined;
-        };
-        this.handleThumbPointerEnter = () => {
-            this.showThumbLabels();
-        };
-        this.handleThumbPointerLeave = () => {
-            this.hideThumbLabels();
-        };
         this.addEventListener('pointerdown', this.pointerDown);
         this.addEventListener('pointermove', this.pointerMove);
         this.addEventListener('lostpointercapture', this.lostPointerCapture);
@@ -146,8 +107,8 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
             .set(arrowRight, () => this.handleArrowKeys(isLTR(this) ? 1 : -1))
             .set(arrowUp, () => this.handleArrowKeys(1))
             .set(arrowDown, () => this.handleArrowKeys(-1))
-            .set(homeKey, () => this.handleKeyboardIncrement(this.actualMin - this.activeValue))
-            .set(endKey, () => this.handleKeyboardIncrement(this.actualMax - this.activeValue))
+            .set(homeKey, () => this.handleKeyboardIncrement(this.lowerBound - this.activeValue))
+            .set(endKey, () => this.handleKeyboardIncrement(this.upperBound - this.activeValue))
             .set(pageUpKey, () => this.handlePageKeys(1))
             .set(pageDownKey, () => this.handlePageKeys(-1));
     }
@@ -157,7 +118,7 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     }
     handlePageKeys(delta) {
         const step = this.step ? this.step : 1;
-        this.handleKeyboardIncrement(delta * Math.max((this.actualMax - this.actualMin) / 10, step));
+        this.handleKeyboardIncrement(delta * Math.max((this.upperBound - this.lowerBound) / 10, step));
     }
     handleKeyboardIncrement(increment) {
         if (increment) {
@@ -169,18 +130,20 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
             }
         }
     }
+    handleKeyUp() {
+        this.activeThumb?.part.add('focused');
+    }
     connectedCallback() {
         super.connectedCallback();
         this.normalizeValue();
     }
-    handleKeyUp() {
-        this.activeThumb?.part.add('focused');
-    }
     handleSlotChange() {
-        this.labels =
-            this.labelElements && this.labelElements.length
-                ? this.labelElements.map((e) => e.textContent)
-                : undefined;
+        this.labels = this.labelElements.map((label) => label.textContent ?? '');
+        if (this.hasLabels) {
+            this.min = 0;
+            this.max = this.labels.length - 1;
+            this.step = 1;
+        }
     }
     get activeValue() {
         return 0;
@@ -197,34 +160,21 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     }
     emitInputEvent() { }
     emitChangeEvent() { }
-    get actualMin() {
-        return typeof this.lowerBound === 'number'
-            ? this.lowerBound
-            : this.min;
-    }
-    get actualMax() {
-        return typeof this.upperBound === 'number'
-            ? this.upperBound
-            : this.max;
-    }
     validateValue(value) {
-        value = this.valueInRange(value, this.actualMin, this.actualMax);
-        value = this.normalizeByStep(value);
-        return value;
+        return this.normalizeByStep(clamp(value, this.lowerBound, this.upperBound));
     }
     formatValue(value) {
-        return this.valueFormat
-            ? this.valueFormat.replace('{0}', value.toLocaleString(this.locale, this.valueFormatOptions))
-            : value.toLocaleString(this.locale, this.valueFormatOptions);
+        const strValue = value.toLocaleString(this.locale, this.valueFormatOptions);
+        return this.valueFormat ? format(this.valueFormat, strValue) : strValue;
     }
     normalizeByStep(value) {
-        return this.step ? value - ((value - this.actualMin) % this.step) : value;
+        return this.step ? value - ((value - this.lowerBound) % this.step) : value;
     }
     closestHandle(_event) {
         return this.thumb;
     }
     totalTickCount() {
-        const primaryTicks = this.labels
+        const primaryTicks = this.hasLabels
             ? this.primaryTicks > 0
                 ? this.labels.length
                 : 0
@@ -239,9 +189,8 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     }
     tickValue(idx) {
         const tickCount = this.totalTickCount();
-        const labelStep = tickCount > 1
-            ? (this.max - this.min) / (tickCount - 1)
-            : this.max - this.min;
+        const distance = this.distance;
+        const labelStep = tickCount > 1 ? distance / (tickCount - 1) : distance;
         const labelVal = labelStep * idx;
         return this.min + labelVal;
     }
@@ -268,28 +217,15 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
             this.thumbLabelsVisible = false;
         }, 750);
     }
-    valueInRange(value, min = 0, max = 100) {
-        return Math.max(Math.min(value, max), min);
-    }
-    valueToFraction(value) {
-        return (value - this.min) / (this.max - this.min);
-    }
     calculateTrackUpdate(mouseX) {
-        if (!this.activeThumb) {
-            return 0;
-        }
-        const thumbBoundaries = this.activeThumb.getBoundingClientRect();
-        const thumbCenter = (thumbBoundaries.right - thumbBoundaries.left) / 2;
-        const thumbPositionX = thumbBoundaries.left + thumbCenter;
-        const scale = this.getBoundingClientRect().width / (this.max - this.min);
-        const change = isLTR(this)
-            ? mouseX - thumbPositionX
-            : thumbPositionX - mouseX;
+        const { width, left } = this.activeThumb.getBoundingClientRect();
+        const { width: trackWidth } = this.base.getBoundingClientRect();
+        const thumbX = left + width / 2;
+        const scale = trackWidth / this.distance;
+        const change = isLTR(this) ? mouseX - thumbX : thumbX - mouseX;
         if (this.step) {
             const stepDistance = scale * this.step;
-            const stepDistanceCenter = stepDistance / 2;
-            const scaleXPositive = Math.abs(change);
-            if (scaleXPositive < stepDistanceCenter) {
+            if (Math.abs(change) < stepDistance / 2) {
                 return 0;
             }
             return Math.round(change / stepDistance) * this.step;
@@ -299,77 +235,108 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
         }
     }
     updateSlider(mouseX) {
-        if (this.disabled) {
+        if (this.disabled || !this.activeThumb) {
             return;
         }
         const increment = this.calculateTrackUpdate(mouseX);
-        if (this.activeThumb && increment !== 0) {
+        if (increment !== 0) {
             this.updateValue(increment);
         }
     }
-    renderTicks() {
-        const groups = [];
-        for (let i = 0, totalCount = this.totalTickCount(); i < totalCount; i++) {
-            const isPrimary = this.isPrimary(i);
-            groups.push(html `
-        <div part="tick-group">
-          <div part="tick" data-primary=${isPrimary}>
-            ${(isPrimary ? this.hidePrimaryLabels : this.hideSecondaryLabels)
-                ? html ``
+    pointerDown(event) {
+        const thumb = this.closestHandle(event);
+        thumb.focus();
+        this.startValue = this.activeValue;
+        this.updateSlider(event.clientX);
+        this.setPointerCapture(event.pointerId);
+        this.pointerCaptured = true;
+        this.showThumbLabels();
+        event.preventDefault();
+        this.activeThumb?.part.remove('focused');
+    }
+    pointerMove(event) {
+        if (this.pointerCaptured) {
+            this.updateSlider(event.clientX);
+        }
+    }
+    lostPointerCapture() {
+        this.pointerCaptured = false;
+        this.hideThumbLabels();
+        if (this.startValue !== this.activeValue) {
+            this.emitChangeEvent();
+        }
+        this.startValue = undefined;
+    }
+    handleThumbFocus(event) {
+        this.activeThumb = event.target;
+    }
+    handleThumbBlur() {
+        this.activeThumb?.part.remove('focused');
+        this.activeThumb = undefined;
+    }
+    *_renderTicks() {
+        const total = this.totalTickCount();
+        const secondaryTicks = this.secondaryTicks + 1;
+        for (let i = 0; i < total; i++) {
+            const primary = this.isPrimary(i);
+            const shown = primary ? this.hidePrimaryLabels : this.hideSecondaryLabels;
+            const labelInner = this.hasLabels
+                ? primary
+                    ? this.labels[Math.round(i / secondaryTicks)]
+                    : nothing
+                : this.formatValue(this.tickValue(i));
+            yield html `<div part="tick-group">
+        <div part="tick" data-primary=${primary}>
+          ${shown
+                ? nothing
                 : html `
-                  <div part="tick-label">
-                    <span part="tick-label-inner">
-                      ${this.labels
-                    ? isPrimary
-                        ? this.labels[Math.round(i / (this.secondaryTicks + 1))]
-                        : ''
-                    : this.formatValue(this.tickValue(i))}
-                    </span>
-                  </div>
-                `}
-          </div>
+                <div part="tick-label">
+                  <span part="tick-label-inner">${labelInner}</span>
+                </div>
+              `}
         </div>
-      `);
+      </div>`;
         }
-        return groups;
+    }
+    renderTicks() {
+        return html `<div part="ticks">${this._renderTicks()}</div>`;
     }
     renderThumb(value, ariaLabel, thumbId) {
-        const percent = `${this.valueToFraction(value) * 100}%`;
+        const percent = `${asPercent(value - this.min, this.distance)}%`;
+        const thumbStyles = { insetInlineStart: percent };
+        const tooltipStyles = {
+            insetInlineStart: percent,
+            opacity: this.thumbLabelsVisible ? 1 : 0,
+        };
+        const textValue = this.hasLabels
+            ? this.labels[value]
+            : this.valueFormat || this.valueFormatOptions
+                ? this.formatValue(value)
+                : undefined;
         return html `
       <div
         part="thumb"
         id=${ifDefined(thumbId)}
         tabindex=${this.disabled ? -1 : 0}
-        style=${styleMap({ insetInlineStart: percent })}
+        style=${styleMap(thumbStyles)}
         role="slider"
-        aria-valuemin=${this.actualMin}
-        aria-valuemax=${this.actualMax}
+        aria-valuemin=${this.lowerBound}
+        aria-valuemax=${this.upperBound}
         aria-valuenow=${value}
-        aria-valuetext=${ifDefined(this.labels
-            ? this.labels[value]
-            : this.valueFormat || this.valueFormatOptions
-                ? this.formatValue(value)
-                : undefined)}
+        aria-valuetext=${ifDefined(textValue)}
         aria-label=${ifDefined(ariaLabel)}
         aria-disabled=${this.disabled ? 'true' : 'false'}
-        @pointerenter=${this.handleThumbPointerEnter}
-        @pointerleave=${this.handleThumbPointerLeave}
-        @focus=${(ev) => (this.activeThumb = ev.target)}
-        @blur=${() => (this.activeThumb?.part.remove('focused'),
-            (this.activeThumb = undefined))}
+        @pointerenter=${this.showThumbLabels}
+        @pointerleave=${this.hideThumbLabels}
+        @focus=${this.handleThumbFocus}
+        @blur=${this.handleThumbBlur}
       ></div>
       ${this.hideTooltip
-            ? html ``
+            ? nothing
             : html `
-            <div
-              part="thumb-label"
-              style=${styleMap({
-                opacity: this.thumbLabelsVisible ? '1' : '0',
-                insetInlineStart: percent,
-            })}
-            >
+            <div part="thumb-label" style=${styleMap(tooltipStyles)}>
               <div part="thumb-label-inner">
-                ${this.labels ? this.labels[value] : this.formatValue(value)}
+                ${this.hasLabels ? this.labels[value] : this.formatValue(value)}
               </div>
             </div>
           `}
@@ -377,10 +344,9 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     }
     renderSteps() {
         if (!this.discreteTrack || !this.step) {
-            return html ``;
+            return nothing;
         }
-        const trackRange = this.max - this.min;
-        const interval = ((100 / (trackRange / this.step)) * 10) / 10;
+        const interval = (100 * Math.SQRT2 * this.step) / this.distance;
         return html `
       <div part="steps">
         <svg width="100%" height="100%" style="display: flex">
@@ -390,7 +356,7 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
             x2="100%"
             y2="1"
             stroke="currentColor"
-            stroke-dasharray="0, calc(${interval * Math.sqrt(2)}%)"
+            stroke-dasharray="0, calc(${interval}%)"
             stroke-linecap="round"
             stroke-width="2px"
           ></line>
@@ -399,29 +365,30 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     `;
     }
     render() {
+        const isStart = this.tickOrientation === 'start';
+        const isMirrored = this.tickOrientation === 'mirror';
         return html `
       <div part="base">
-        ${this.tickOrientation === 'mirror' || this.tickOrientation === 'start'
-            ? html `<div part="ticks">${this.renderTicks()}</div>`
-            : html ``}
+        ${isStart || isMirrored ? html `${this.renderTicks()}` : nothing}
         <div part="track">
           <div part="inactive"></div>
           <div part="fill" style=${styleMap(this.getTrackStyle())}></div>
           ${this.renderSteps()}
         </div>
-        ${this.tickOrientation !== 'start'
-            ? html `<div part="ticks">${this.renderTicks()}</div>`
-            : html ``}
+        ${!isStart ? html `${this.renderTicks()}` : nothing}
         <div part="thumbs">${this.renderThumbs()}</div>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
     }
 };
-IgcSliderBaseComponent.styles = styles;
+IgcSliderBaseComponent.styles = [styles, shared];
 __decorate([
     query(`[part~='thumb']`)
 ], IgcSliderBaseComponent.prototype, "thumb", void 0);
+__decorate([
+    query(`[part='base']`, true)
+], IgcSliderBaseComponent.prototype, "base", void 0);
 __decorate([
     queryAssignedElements({ selector: 'igc-slider-label' })
 ], IgcSliderBaseComponent.prototype, "labelElements", void 0);
@@ -490,11 +457,8 @@ __decorate([
     watch('upperBound', { waitUntilFirstUpdate: true }),
     watch('step', { waitUntilFirstUpdate: true })
 ], IgcSliderBaseComponent.prototype, "constraintsChange", null);
-__decorate([
-    watch('labels')
-], IgcSliderBaseComponent.prototype, "labelsChange", null);
 IgcSliderBaseComponent = __decorate([
-    themes(all, true),
+    themes(all),
     blazorDeepImport
 ], IgcSliderBaseComponent);
 export { IgcSliderBaseComponent };