@carbon/web-components 2.45.0 → 2.46.0

package/es/components/slider/slider.js

@@ -15,6 +15,9 @@ import FocusMixin from '../../globals/mixins/focus.js';
 import FormMixin from '../../globals/mixins/form.js';
 import HostListenerMixin from '../../globals/mixins/host-listener.js';
 import HostListener from '../../globals/decorators/host-listener.js';
+import '../tooltip/tooltip.js';
+import '../tooltip/tooltip-content.js';
+import '../tooltip/definition-tooltip.js';
 import styles from './slider.scss.js';
 import { carbonElement } from '../../globals/decorators/carbon-element.js';
 
@@ -111,6 +114,9 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
          * Handles `pointerup` and `pointerleave` event to finishing dragging.
          */
         this._endDrag = () => {
+            var _a, _b, _c, _d;
+            const wasDragging = this._dragging;
+            const wasDraggingUpper = this._draggingUpper;
             if (this._dragging || this._draggingUpper) {
                 this.dragCoolDown = true;
             }
@@ -139,6 +145,20 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                 this._draggingUpper = false;
                 this._thumbNodeUpper.style.touchAction = '';
             }
+            if (wasDragging) {
+                const shouldKeepOpen = ((_a = this._thumbNode) === null || _a === void 0 ? void 0 : _a.matches(':hover')) ||
+                    ((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) === this._thumbNode;
+                if (!shouldKeepOpen) {
+                    this._setThumbTooltipOpen(this._thumbNode, false);
+                }
+            }
+            else if (wasDraggingUpper) {
+                const shouldKeepOpen = ((_c = this._thumbNodeUpper) === null || _c === void 0 ? void 0 : _c.matches(':hover')) ||
+                    ((_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.activeElement) === this._thumbNodeUpper;
+                if (!shouldKeepOpen) {
+                    this._setThumbTooltipOpen(this._thumbNodeUpper, false);
+                }
+            }
             if (this._dragging || this._draggingUpper) {
                 this.dragCooldownTimeout = window.setTimeout(() => {
                     this.dragCoolDown = false;
@@ -211,16 +231,21 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
          * Specify whether you want the underlying label to be visually hidden
          */
         this.hideLabel = false;
+        /**
+         * The callback to format the label associated with the minimum/maximum value
+         * and the value tooltip when hideTextInput is true.
+         */
+        this.formatLabel = (value, label) => `${value}${label !== null && label !== void 0 ? label : ''}`;
         /**
          * The formatter for the text for maximum value.
          * Should be changed upon the locale the UI is rendered with.
          */
-        this.formatMaxText = (max, maxLabel) => `${max}${maxLabel}`;
+        this.formatMaxText = (max, maxLabel) => this.formatLabel(Number(max), maxLabel);
         /**
          * The formatter for the text for min/max value.
          * Should be changed upon the locale the UI is rendered with.
          */
-        this.formatMinText = (min, minLabel) => `${min}${minLabel}`;
+        this.formatMinText = (min, minLabel) => this.formatLabel(Number(min), minLabel);
         /**
          * true to specify if the control is invalid.
          */
@@ -300,6 +325,15 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
         var _a;
         (_a = this._thumbNode) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    _setThumbTooltipOpen(thumb, open) {
+        if (!this.hideTextInput || !thumb) {
+            return;
+        }
+        const tooltip = thumb.closest(`${prefix}-tooltip`);
+        if (tooltip) {
+            tooltip.open = open;
+        }
+    }
     _handleFormdata(event) {
         const { formData } = event;
         const { disabled, name, value } = this;
@@ -361,21 +395,22 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
      * Handles `pointerdown` event on the thumb to start dragging.
      */
     _startDrag(event) {
+        var _a;
         if (!this.readonly && !this.disabled) {
             let eventContainer = event.target.id;
             if (!eventContainer) {
-                const element = event.target.nodeName;
-                if (element == 'path' || element == 'svg') {
-                    eventContainer = event.target.parentElement.closest('.cds--slider__thumb-wrapper').id;
-                }
+                const thumb = event.target.closest(`.${prefix}--slider__thumb`);
+                eventContainer = (_a = thumb === null || thumb === void 0 ? void 0 : thumb.id) !== null && _a !== void 0 ? _a : '';
             }
             if (eventContainer === 'thumb') {
                 this._dragging = true;
                 this._thumbNode.style.touchAction = 'none';
+                this._setThumbTooltipOpen(this._thumbNode, true);
             }
-            else {
+            else if (eventContainer === 'thumb-upper') {
                 this._draggingUpper = true;
                 this._thumbNodeUpper.style.touchAction = 'none';
+                this._setThumbTooltipOpen(this._thumbNodeUpper, true);
             }
         }
     }
@@ -383,12 +418,11 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
      * Handles `pointerdown` event on the track to update the thumb position and the value as necessary.
      */
     _handleClick(event) {
+        var _a;
         let eventContainer = event.target.id;
         if (!eventContainer) {
-            const element = event.target.nodeName;
-            if (element == 'path' || element == 'svg') {
-                eventContainer = event.target.parentElement.closest('.cds--slider__thumb-wrapper').id;
-            }
+            const thumb = event.target.closest(`.${prefix}--slider__thumb`);
+            eventContainer = (_a = thumb === null || thumb === void 0 ? void 0 : thumb.id) !== null && _a !== void 0 ? _a : '';
         }
         if (!this.disabled && !this.readonly) {
             const { _trackNode: trackNode } = this;
@@ -481,6 +515,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
             const thumbPosition = event.clientX;
             const { left: trackLeft, width: trackWidth } = this._trackNode.getBoundingClientRect();
             if (dragging) {
+                this._setThumbTooltipOpen(this._thumbNode, true);
                 const position = (isRtl
                     ? trackLeft + trackWidth - thumbPosition
                     : thumbPosition - trackLeft) / trackWidth;
@@ -498,6 +533,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                 }
             }
             else if (draggingUpper) {
+                this._setThumbTooltipOpen(this._thumbNodeUpper, true);
                 const position = (isRtl
                     ? trackLeft + trackWidth - thumbPosition
                     : thumbPosition - trackLeft) / trackWidth;
@@ -634,6 +670,9 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
             if (changedProperties.has('invalid')) {
                 input.invalid = this.invalid;
             }
+            if (changedProperties.has('warn')) {
+                input.warn = this.warn;
+            }
             if (changedProperties.has('hideTextInput')) {
                 input.hideTextInput = this.hideTextInput;
             }
@@ -679,7 +718,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
         return true;
     }
     render() {
-        const { disabled, formatMaxText, formatMinText, labelText, hideLabel, max, min, maxLabel, minLabel, readonly, invalidText, isValid, warn, warnText, value, unstable_valueUpper, _rate: rate, _rateUpper: rateUpper, _handleClickLabel: handleClickLabel, _handleKeydown: handleKeydown, _handleClick: handleClick, onDrag, _endDrag: endDrag, } = this;
+        const { disabled, formatLabel, formatMaxText, formatMinText, labelText, hideLabel, hideTextInput, max, min, maxLabel, minLabel, readonly, invalidText, isValid, warn, warnText, value, unstable_valueUpper, _rate: rate, _rateUpper: rateUpper, _handleClickLabel: handleClickLabel, _handleKeydown: handleKeydown, _handleClick: handleClick, onDrag, _endDrag: endDrag, } = this;
         const isInteractive = !readonly && !disabled;
         const normalizedProps = {
             invalid: isInteractive && !isValid,
@@ -695,17 +734,24 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
             [`${prefix}--slider--disabled`]: disabled,
             [`${prefix}--slider--readonly`]: readonly,
         });
-        const thumbLowerClasses = classMap({
-            [`${prefix}--icon-tooltip`]: unstable_valueUpper || unstable_valueUpper === '',
-            [`${prefix}--slider__thumb-wrapper`]: unstable_valueUpper || unstable_valueUpper === '',
+        const thumbLowerWrapperClasses = classMap({
+            [`${prefix}--icon-tooltip`]: true,
+            [`${prefix}--slider__thumb-wrapper`]: true,
             [`${prefix}--slider__thumb-wrapper--lower`]: unstable_valueUpper || unstable_valueUpper === '',
-            [`${prefix}--slider__thumb`]: !(unstable_valueUpper || unstable_valueUpper === ''),
+        });
+        const thumbLowerClasses = classMap({
+            [`${prefix}--slider__thumb`]: true,
+            [`${prefix}--slider__thumb--lower`]: unstable_valueUpper || unstable_valueUpper === '',
             [`${prefix}--slider__thumb-disabled`]: disabled,
         });
-        const thumbUpperClasses = classMap({
+        const thumbUpperWrapperClasses = classMap({
             [`${prefix}--icon-tooltip`]: true,
             [`${prefix}--slider__thumb-wrapper`]: true,
             [`${prefix}--slider__thumb-wrapper--upper`]: true,
+        });
+        const thumbUpperClasses = classMap({
+            [`${prefix}--slider__thumb`]: true,
+            [`${prefix}--slider__thumb--upper`]: true,
             [`${prefix}--slider__thumb-disabled`]: disabled,
         });
         return html `
@@ -727,77 +773,171 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
           class="${sliderClasses}"
           tabindex="-1"
           role="presentation">
-          <div
-            id="thumb"
-            class="${thumbLowerClasses}"
-            role="slider"
-            tabindex="${!readonly ? 0 : -1}"
-            aria-valuemax="${max}"
-            aria-valuemin="${min}"
-            aria-valuenow="${value}"
-            style="left: ${rate * 100}%"
-            @pointerdown="${onDrag}">
-            ${(unstable_valueUpper || unstable_valueUpper === '') && !readonly
+          ${hideTextInput
             ? html `
-                  <div class="${prefix}--slider__thumb--lower">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 16 24"
-                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
-                      <path
-                        d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
-                      <path fill="none" d="M-4 0h24v24H-4z"></path>
-                    </svg>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 16 24"
-                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower cds--slider__thumb-icon--focus">
-                      <path
-                        d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
-                      <path fill="none" d="M-4 0h24v24H-4z"></path>
-                      <path d="M15.08 0H16v6.46h-.92z"></path>
-                      <path d="M0 0h.92v24H0zM15.08 0H16v24h-.92z"></path>
-                      <path d="M0 .92V0h16v.92zM0 24v-.92h16V24z"></path>
-                    </svg>
+                <cds-tooltip
+                  class="${thumbLowerWrapperClasses}"
+                  style="left: ${rate * 100}%"
+                  align="top"
+                  .dropShadow=${false}>
+                  <div
+                    id="thumb"
+                    class="${thumbLowerClasses}"
+                    role="slider"
+                    tabindex="${!readonly ? 0 : -1}"
+                    aria-valuemax="${max}"
+                    aria-valuemin="${min}"
+                    aria-valuenow="${value}"
+                    aria-valuetext="${formatLabel(Number(value), undefined)}"
+                    @pointerdown="${onDrag}">
+                    ${unstable_valueUpper || unstable_valueUpper === ''
+                ? html `
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 16 24"
+                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
+                            <path
+                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
+                            <path fill="none" d="M-4 0h24v24H-4z"></path>
+                          </svg>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 16 24"
+                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower cds--slider__thumb-icon--focus">
+                            <path
+                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
+                            <path fill="none" d="M-4 0h24v24H-4z"></path>
+                            <path d="M15.08 0H16v6.46h-.92z"></path>
+                            <path d="M0 0h.92v24H0zM15.08 0H16v24h-.92z"></path>
+                            <path d="M0 .92V0h16v.92zM0 24v-.92h16V24z"></path>
+                          </svg>
+                        `
+                : ``}
                   </div>
-                `
-            : ``}
-          </div>
-          ${(unstable_valueUpper || unstable_valueUpper === '') && !readonly
-            ? html `
+                  <cds-tooltip-content>
+                    ${formatLabel(Number(value), undefined)}
+                  </cds-tooltip-content>
+                </cds-tooltip>
+              `
+            : html `
                 <div
-                  id="thumb-upper"
-                  class="${thumbUpperClasses}"
-                  role="slider"
-                  tabindex="${!readonly ? 0 : -1}"
-                  aria-valuemax="${max}"
-                  aria-valuemin="${min}"
-                  aria-valuenow="${unstable_valueUpper}"
-                  style="left: ${rateUpper * 100}%"
-                  @pointerdown="${onDrag}">
-                  <div class="${prefix}--slider__thumb--upper">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 16 24"
-                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
-                      <path
-                        d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
-                      <path fill="none" d="M-4 0h24v24H-4z"></path>
-                    </svg>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 16 24"
-                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper cds--slider__thumb-icon--focus">
-                      <path
-                        d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
-                      <path fill="none" d="M-4 0h24v24H-4z"></path>
-                      <path d="M.92 24H0v-6.46h.92z"></path>
-                      <path d="M16 24h-.92V0H16zM.92 24H0V0h.92z"></path>
-                      <path d="M16 23.08V24H0v-.92zM16 0v.92H0V0z"></path>
-                    </svg>
+                  class="${thumbLowerWrapperClasses}"
+                  style="left: ${rate * 100}%">
+                  <div
+                    id="thumb"
+                    class="${thumbLowerClasses}"
+                    role="slider"
+                    tabindex="${!readonly ? 0 : -1}"
+                    aria-valuemax="${max}"
+                    aria-valuemin="${min}"
+                    aria-valuenow="${value}"
+                    aria-valuetext="${formatLabel(Number(value), undefined)}"
+                    @pointerdown="${onDrag}">
+                    ${unstable_valueUpper || unstable_valueUpper === ''
+                ? html `
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 16 24"
+                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
+                            <path
+                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
+                            <path fill="none" d="M-4 0h24v24H-4z"></path>
+                          </svg>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 16 24"
+                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower cds--slider__thumb-icon--focus">
+                            <path
+                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
+                            <path fill="none" d="M-4 0h24v24H-4z"></path>
+                            <path d="M15.08 0H16v6.46h-.92z"></path>
+                            <path d="M0 0h.92v24H0zM15.08 0H16v24h-.92z"></path>
+                            <path d="M0 .92V0h16v.92zM0 24v-.92h16V24z"></path>
+                          </svg>
+                        `
+                : ``}
                   </div>
                 </div>
-              `
+              `}
+          ${unstable_valueUpper || unstable_valueUpper === ''
+            ? hideTextInput
+                ? html `
+                  <cds-tooltip
+                    class="${thumbUpperWrapperClasses}"
+                    style="left: ${rateUpper * 100}%"
+                    align="top"
+                    .dropShadow=${false}>
+                    <div
+                      id="thumb-upper"
+                      class="${thumbUpperClasses}"
+                      role="slider"
+                      tabindex="${!readonly ? 0 : -1}"
+                      aria-valuemax="${max}"
+                      aria-valuemin="${min}"
+                      aria-valuenow="${unstable_valueUpper}"
+                      aria-valuetext="${formatLabel(Number(unstable_valueUpper), undefined)}"
+                      @pointerdown="${onDrag}">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 16 24"
+                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
+                        <path
+                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
+                        <path fill="none" d="M-4 0h24v24H-4z"></path>
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 16 24"
+                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper cds--slider__thumb-icon--focus">
+                        <path
+                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
+                        <path fill="none" d="M-4 0h24v24H-4z"></path>
+                        <path d="M.92 24H0v-6.46h.92z"></path>
+                        <path d="M16 24h-.92V0H16zM.92 24H0V0h.92z"></path>
+                        <path d="M16 23.08V24H0v-.92zM16 0v.92H0V0z"></path>
+                      </svg>
+                    </div>
+                    <cds-tooltip-content>
+                      ${formatLabel(Number(unstable_valueUpper), undefined)}
+                    </cds-tooltip-content>
+                  </cds-tooltip>
+                `
+                : html `
+                  <div
+                    class="${thumbUpperWrapperClasses}"
+                    style="left: ${rateUpper * 100}%">
+                    <div
+                      id="thumb-upper"
+                      class="${thumbUpperClasses}"
+                      role="slider"
+                      tabindex="${!readonly ? 0 : -1}"
+                      aria-valuemax="${max}"
+                      aria-valuemin="${min}"
+                      aria-valuenow="${unstable_valueUpper}"
+                      aria-valuetext="${formatLabel(Number(unstable_valueUpper), undefined)}"
+                      @pointerdown="${onDrag}">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 16 24"
+                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
+                        <path
+                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
+                        <path fill="none" d="M-4 0h24v24H-4z"></path>
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 16 24"
+                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper cds--slider__thumb-icon--focus">
+                        <path
+                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
+                        <path fill="none" d="M-4 0h24v24H-4z"></path>
+                        <path d="M.92 24H0v-6.46h.92z"></path>
+                        <path d="M16 24h-.92V0H16zM.92 24H0V0h.92z"></path>
+                        <path d="M16 23.08V24H0v-.92zM16 0v.92H0V0z"></path>
+                      </svg>
+                    </div>
+                  </div>
+                `
             : html ``}
           <div id="track" class="${prefix}--slider__track"></div>
           ${unstable_valueUpper || unstable_valueUpper === ''
@@ -892,6 +1032,9 @@ __decorate([
 __decorate([
     property({ attribute: 'hide-label', type: Boolean, reflect: true })
 ], CDSSlider.prototype, "hideLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], CDSSlider.prototype, "formatLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], CDSSlider.prototype, "formatMaxText", void 0);