@nuvia-ui/components 4.0.1

package/src/ds-slider/ds-slider.js

@@ -0,0 +1,399 @@
+import { LitElement, html, css } from 'lit';
+import { FieldMessageMixin, fieldMessageStyles } from '../mixins/field-message.mixin.js';
+import { FieldLabelMixin, fieldLabelStyles } from '../mixins/field-label.mixin.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-tooltip/ds-tooltip.js';
+
+/**
+ * Slider component for selecting numeric values within a range.
+ *
+ * @element ds-slider
+ *
+ * @prop {number} value - Current value
+ * @prop {number} min - Minimum value
+ * @prop {number} max - Maximum value
+ * @prop {number} step - Step increment
+ * @prop {boolean} disabled - Disabled state
+ * @prop {string} label - Field label
+ * @prop {string} info - Tooltip text for info button
+ * @prop {string} labelPosition - Label position: 'top' | 'inline-start' (default: 'top')
+ * @prop {string} labelWidth - Fixed label width for inline layout (e.g., '100px')
+ * @prop {string} helpText - Help text below slider
+ * @prop {string} errorText - Error text (when validationStatus="error")
+ * @prop {string} validationStatus - Validation state
+ *
+ * @fires input - Fired during drag
+ * @fires change - Fired on drag end
+ * @fires info-click - Fired when info button is clicked
+ */
+export class DsSlider extends FieldMessageMixin(FieldLabelMixin(LitElement)) {
+  static properties = {
+    value: { type: Number, reflect: true },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+    info: { type: String },
+    labelPosition: { type: String, attribute: 'label-position' },
+    labelWidth: { type: String, attribute: 'label-width' },
+    helpText: { type: String, attribute: 'help-text' },
+    errorText: { type: String, attribute: 'error-text' },
+    validationStatus: { type: String, attribute: 'validation-status', reflect: true },
+    _isDragging: { type: Boolean, state: true },
+    _showTooltip: { type: Boolean, state: true }
+  };
+
+  static styles = [
+    fieldLabelStyles,
+    fieldMessageStyles,
+    css`
+    :host {
+      display: block;
+      font-family: var(--ds-font-family-content);
+      outline: none;
+    }
+
+    .slider-container {
+      position: relative;
+      height: var(--ds-size-32, 32px);
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    :host([disabled]) .slider-container {
+      cursor: not-allowed;
+    }
+
+    /* Track - centered with 2px gap from thumb edges */
+    .track {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      border-radius: var(--ds-radius-container, 0px);
+      overflow: hidden;
+      display: flex;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .track-filled {
+      height: 100%;
+      background-color: var(--ds-color-border-brand);
+      transition: width 0.05s ease-out;
+    }
+
+    .track-unfilled {
+      height: 100%;
+      background-color: var(--ds-color-border-default);
+      flex: 1;
+    }
+
+    :host([disabled]) .track-filled {
+      background-color: var(--ds-color-border-default);
+    }
+
+    /* Thumb - with 2px visual gap from track via border */
+    .thumb {
+      /* Position relative since it's inside the absolute wrapper */
+      position: relative;
+      width: var(--ds-size-24);
+      height: var(--ds-size-24);
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: grab;
+      /* 2px background gap around icon to separate from track */
+      background-color: var(--ds-color-bg-default);
+    }
+
+    .thumb::before {
+      content: '';
+      position: absolute;
+      width: calc(100% - 4px); /* 20px to leave 2px gap */
+      height: calc(100% - 4px);
+      border-radius: 999px;
+      background-color: var(--ds-color-bg-default);
+      z-index: -1;
+    }
+
+    .thumb:active {
+      cursor: grabbing;
+    }
+
+    .thumb ds-icon {
+      color: var(--ds-color-icon-brand);
+      display: flex;
+    }
+
+    :host([disabled]) .thumb {
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .thumb ds-icon {
+      color: var(--ds-color-icon-disabled);
+    }
+
+    /* Focus state on thumb - triggered by input focus */
+    .thumb:focus-visible,
+    input[type="range"]:focus-visible ~ .slider-visuals .thumb {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 0;
+    }
+
+    /* Hidden range input for accessibility */
+    input[type="range"] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+      margin: 0;
+      z-index: 2;
+    }
+    /* Visuals wrapper - contains track and thumb layer */
+    .slider-visuals {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+      height: var(--ds-size-24, 24px);
+      pointer-events: none;
+    }
+
+    /* Thumb track - inset to keep thumb within container bounds */
+    .thumb-track {
+      position: absolute;
+      top: 0;
+      left: var(--ds-size-12, 12px);
+      right: var(--ds-size-12, 12px);
+      height: 100%;
+    }
+
+    /* Tooltip positioning wrapper */
+    .thumb-positioner {
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: left 0.05s ease-out;
+      z-index: 1;
+    }
+
+    /* ds-tooltip styling override for slider */
+    ds-tooltip::part(tooltip) {
+      padding: var(--ds-space-xs) var(--ds-space-sm);
+    }
+  `];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.label = '';
+    this.info = '';
+    this.labelPosition = 'top';
+    this.labelWidth = '';
+    this.helpText = '';
+    this.errorText = '';
+    this._isDragging = false;
+    this._showTooltip = false;
+  }
+
+  get _percentage() {
+    const range = this.max - this.min;
+    if (range <= 0) return 0;
+    return ((this.value - this.min) / range) * 100;
+  }
+
+  _handleInput(e) {
+    if (this.disabled) return;
+
+    const newValue = parseFloat(e.target.value);
+    this.value = newValue;
+    this._showTooltip = true;
+
+    // Update tooltip content and ensure it stays visible
+    this._updateTooltipContent();
+    this._showValueTooltip();
+
+    this.dispatchEvent(new CustomEvent('input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleChange(e) {
+    if (this.disabled) return;
+
+    // Only hide tooltip if not focused (keyboard interaction keeps it visible)
+    const input = this.shadowRoot?.querySelector('input[type="range"]');
+    const isFocused = this.shadowRoot?.activeElement === input;
+
+    if (!isFocused && !this._isDragging) {
+      this._showTooltip = false;
+      this._hideValueTooltip();
+    }
+
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleMouseDown() {
+    if (this.disabled) return;
+    this._isDragging = true;
+    this._showTooltip = true;
+    this._showValueTooltip();
+  }
+
+  _handleMouseUp() {
+    this._isDragging = false;
+    this._showTooltip = false;
+    this._hideValueTooltip();
+  }
+
+  _handleFocus() {
+    this._showTooltip = true;
+    this._showValueTooltip();
+  }
+
+  _handleBlur() {
+    if (!this._isDragging) {
+      this._showTooltip = false;
+      this._hideValueTooltip();
+    }
+  }
+
+  _showValueTooltip() {
+    const tooltip = this.shadowRoot?.querySelector('ds-tooltip.value-tooltip');
+    if (tooltip) {
+      tooltip._open = true;
+    }
+  }
+
+  _hideValueTooltip() {
+    const tooltip = this.shadowRoot?.querySelector('ds-tooltip.value-tooltip');
+    if (tooltip) {
+      tooltip._open = false;
+    }
+  }
+
+  _updateTooltipContent() {
+    const tooltip = this.shadowRoot?.querySelector('ds-tooltip.value-tooltip');
+    if (tooltip) {
+      tooltip.content = String(this.value);
+    }
+  }
+
+  /**
+   * Focuses the slider input
+   * @public
+   */
+  focus() {
+    const input = this.shadowRoot?.querySelector('input[type="range"]');
+    input?.focus();
+  }
+
+  render() {
+    const percentage = this._percentage;
+    const isInline = this.labelPosition === 'inline-start';
+    const wrapperClass = isInline ? 'field-wrapper inline-label' : 'field-wrapper';
+    const labelStyle = isInline && this.labelWidth ? `width: ${this.labelWidth}` : '';
+
+    const sliderContent = html`
+      <div class="slider-container">
+        <input
+          type="range"
+          .value="${this.value}"
+          min="${this.min}"
+          max="${this.max}"
+          step="${this.step}"
+          ?disabled="${this.disabled}"
+          aria-label="${this.label || 'Slider'}"
+          @input="${this._handleInput}"
+          @change="${this._handleChange}"
+          @mousedown="${this._handleMouseDown}"
+          @mouseup="${this._handleMouseUp}"
+          @touchstart="${this._handleMouseDown}"
+          @touchend="${this._handleMouseUp}"
+          @focus="${this._handleFocus}"
+          @blur="${this._handleBlur}"
+        >
+        
+        <div class="slider-visuals">
+          <div class="track">
+            <div class="track-filled" style="width: ${percentage}%;"></div>
+            <div class="track-unfilled"></div>
+          </div>
+          
+          <div class="thumb-track">
+            <div class="thumb-positioner" style="left: ${percentage}%;">
+              <ds-tooltip class="value-tooltip" content="${this.value}" placement="top" manual>
+                <div class="thumb" tabindex="-1">
+                  <ds-icon name="circle-filled" size="sm"></ds-icon>
+                </div>
+              </ds-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      ${this.validationStatus === 'error'
+        ? this.renderFieldMessage('', this.errorText)
+        : this.renderFieldMessage(this.helpText, '')}
+    `;
+
+    if (isInline) {
+      return html`
+        <div class="${wrapperClass}">
+          <div class="label-row" part="label-row" style="${labelStyle}">
+            <label>${this.label}</label>
+            ${this.info ? html`
+              <ds-tooltip content="${this.info}" placement="top">
+                <ds-icon-button 
+                  icon="info" 
+                  variant="action"
+                  size="s"
+                  aria-label="${this.info}"
+                  @click=${this._handleInfoClick}
+                ></ds-icon-button>
+              </ds-tooltip>
+            ` : ''}
+          </div>
+          <div class="field-content">
+            ${sliderContent}
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      ${this.renderFieldLabel(this.label, this.info)}
+      ${sliderContent}
+    `;
+  }
+
+  _handleInfoClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('info-click', {
+      bubbles: true,
+      composed: true,
+      detail: { info: this.info }
+    }));
+  }
+}
+
+if (!customElements.get('ds-slider')) {
+  customElements.define('ds-slider', DsSlider);
+}

package/src/ds-slider/ds-slider.stories.js

@@ -0,0 +1,107 @@
+import './ds-slider.js';
+
+export default {
+    title: 'Components/Slider',
+    component: 'ds-slider',
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: { type: 'number', min: 0, max: 100 } },
+        min: { control: 'number' },
+        max: { control: 'number' },
+        step: { control: 'number' },
+        disabled: { control: 'boolean' },
+        label: { control: 'text' },
+        info: { control: 'text' },
+        labelPosition: {
+            control: 'select',
+            options: ['top', 'inline-start']
+        },
+        labelWidth: { control: 'text' },
+        helpText: { control: 'text' },
+        errorText: { control: 'text' },
+        validationStatus: {
+            control: 'select',
+            options: [undefined, 'error']
+        }
+    }
+};
+
+const Template = (args) => {
+    const el = document.createElement('ds-slider');
+    Object.keys(args).forEach(key => {
+        const attrName = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+        if (args[key] !== undefined && args[key] !== null) {
+            if (typeof args[key] === 'boolean') {
+                if (args[key]) el.setAttribute(attrName, '');
+                else el.removeAttribute(attrName);
+            } else {
+                el.setAttribute(attrName, args[key]);
+            }
+        }
+    });
+    return el;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    value: 50,
+    min: 0,
+    max: 100
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+    value: 75,
+    label: 'Volume',
+    helpText: 'Ajusta o volume de som'
+};
+
+export const WithStep = Template.bind({});
+WithStep.args = {
+    value: 50,
+    min: 0,
+    max: 100,
+    step: 10,
+    label: 'Brightness',
+    helpText: 'Valores em incrementos de 10'
+};
+
+export const CustomRange = Template.bind({});
+CustomRange.args = {
+    value: 25,
+    min: 0,
+    max: 50,
+    label: 'Temperatura',
+    helpText: 'De 0 a 50 graus'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    value: 30,
+    disabled: true,
+    label: 'Slider desativado'
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+    value: 10,
+    label: 'Prioridade',
+    errorText: 'O valor mínimo é 20',
+    validationStatus: 'error'
+};
+
+export const WithInfo = Template.bind({});
+WithInfo.args = {
+    value: 50,
+    label: 'Qualidade',
+    info: 'Quanto maior, melhor a qualidade mas maior o tamanho do ficheiro'
+};
+
+export const InlineLabel = Template.bind({});
+InlineLabel.args = {
+    value: 50,
+    label: 'Volume',
+    labelPosition: 'inline-start',
+    labelWidth: '100px',
+    helpText: 'Label alinhada à esquerda'
+};