@aquera/nile-elements 1.8.0 → 1.8.2

package/src/nile-slider/nile-slider.css.ts

@@ -14,12 +14,31 @@ export const styles = css`
     display: block;
   }
 
+  /* Field header  */
+
+  .field-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .field-label {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+  }
+
+  /* Layout  */
+
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 10px;
-    height: 100px;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-height: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
   .align-item-center {
@@ -27,14 +46,14 @@ export const styles = css`
   }
 
   slot.span {
-    font-size: var(--nile-font-size-micro);
-    margin-top: 14px;
+    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
   }
 
   .range-container {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-sm);
+    flex: 1 1 auto;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .column-reverse {
@@ -47,18 +66,21 @@ export const styles = css`
   }
 
   .label-container span {
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
-    font-size: var(--nile-font-size-micro);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
+  /* track & fill  */
+
   .range {
     position: relative;
-    width: 228px;
-    height: 4px;
-    background-color: var(--nile-colors-neutral-400);
+    width: var(--nile-slider-width, 228px);
+    height: var(--nile-spacing-xs, var(--ng-spacing-sm));
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
     user-select: none;
-    border-radius: var(--nile-radius-radius-3xl);
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
   }
 
   .range:hover {
@@ -69,50 +91,149 @@ export const styles = css`
     position: absolute;
     height: 100%;
     width: 0%;
-    background-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
     top: 0px;
     left: 0px;
     z-index: 98;
-    border-radius: var(--nile-radius-radius-3xl);
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* Inline value label (valueLabel="bottom")                            */
+  /* ------------------------------------------------------------------ */
+
+  .value-label {
+    position: absolute;
+    /* Start at the track bottom, then push down past the handle and the
+       largest (pressed, 8px) ring */
+    top: 100%;
+    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    transform: translateX(-50%);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
+    font-variant-numeric: tabular-nums;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+    white-space: nowrap;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
-  .range-button {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
+  /* Reserve room below the track for the inline value label */
+  :host([valuelabel='bottom']) .container {
+    padding-bottom: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+  }
+
+  /* Handles    */
+
+  .range-button,
+  .range-button-two {
+    height: var(--nile-spacing-lg, var(--ng-spacing-2xl));
+    width: var(--nile-spacing-lg, var(--ng-spacing-2xl));
+    box-sizing: border-box;
+    /* Enterprise: solid brand dot - NextGen: white fill + brand border */
+    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary));
+    border: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) solid
+      var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
     left: 0;
     z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
-    transition: box-shadow var(--nile-transition-duration-default) ease;
+    cursor: grab;
+    transition:
+      box-shadow var(--nile-transition-duration-short, 120ms) ease,
+      background-color var(--nile-transition-duration-short, 120ms) ease,
+      transform var(--nile-transition-duration-shorter, 80ms) ease;
   }
 
-  .range-button:hover, .range-button-two:hover {
-    cursor: pointer;
-    background-color: var(--nile-colors-primary-700);
+  .range-button-two {
+    left: 100%;
   }
 
-  .range-button:active, .range-button-two:active {
-    transition: box-shadow var(--nile-transition-duration-default) ease;
-    background-color: var(--nile-colors-primary-700);
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  /* Hover: ring (Enterprise 2px - NextGen 6px) */
+  .range-button:hover,
+  .range-button-two:hover {
+    cursor: grab;
+    box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
+      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
   }
 
-  .range-button-two {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
-    position: absolute;
-    top: 50%;
+  /* Focused: theme focus ring */
+  .range-button:focus-visible,
+  .range-button-two:focus-visible {
+    outline: none;
+    box-shadow: var(--nile-focus-ring,
+      var(--ng-focus-ring,
+        0 0 0 var(--nile-spacing-xs) var(--nile-colors-primary-100)));
+  }
+
+  /* Pressed: ring (Enterprise 4px - NextGen 8px) + 1.1x scale */
+  .range-button:active,
+  .range-button-two:active {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(1.1);
+    box-shadow: 0 0 0 var(--nile-spacing-xs, var(--ng-spacing-md))
+      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
+  }
+
+  /* Error state    */
+  :host([error]) .range-completed {
+    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
+  }
+
+  :host([error]) .range-button,
+  :host([error]) .range-button-two {
+    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-red-700, var(--ng-colors-border-error));
+  }
+
+  :host([error]) .range-button:hover,
+  :host([error]) .range-button-two:hover {
+    box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
+      var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary, var(--ng-color-error-100)));
+  }
+
+  :host([error]) .range-button:focus-visible,
+  :host([error]) .range-button-two:focus-visible {
+    box-shadow: var(--nile-focus-ring-error,
+      var(--ng-focus-ring-error,
+        0 0 0 var(--nile-spacing-xs) var(--nile-colors-red-100)));
+  }
+
+  /* Disabled state */
+  :host([disabled]) .range,
+  :host([disabled]) .range:hover {
+    cursor: not-allowed;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
+  }
+
+  :host([disabled]) .range-completed {
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+  }
+
+  :host([disabled]) .range-button,
+  :host([disabled]) .range-button-two {
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .range-button:hover,
+  :host([disabled]) .range-button-two:hover,
+  :host([disabled]) .range-button:active,
+  :host([disabled]) .range-button-two:active {
+    box-shadow: none;
     transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
-    left: 100%;
-    z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
-    transition: box-shadow var(--nile-transition-duration-default) ease;
+  }
+
+  :host([disabled]) .field-label,
+  :host([disabled]) .value-label,
+  :host([disabled]) .label-container span {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    user-select: none;
+    -webkit-user-select: none;
   }
 `;
 

package/src/nile-slider/nile-slider.template.ts

@@ -1,6 +1,10 @@
 import { TemplateResult, html } from 'lit';
 import NileSlider from './nile-slider';
 import { classMap } from 'lit/directives/class-map.js';
+import { valueToPercent } from './utils/nile-slider.utils';
+
+const tooltipDisabled = (nileSlider: NileSlider): boolean =>
+  nileSlider.disabled || nileSlider.valueLabel !== 'tooltip';
 
 export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
   return html`
@@ -8,6 +12,7 @@ export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
       <nile-tooltip
         content=${nileSlider.rangeOneValue}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div 
           id="range-one" 
@@ -24,6 +29,7 @@ export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
       <nile-tooltip
         content=${nileSlider.rangeTwoValue}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div
           id="range-two"
@@ -47,6 +53,7 @@ export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
       <nile-tooltip
         content=${nileSlider.value}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div 
           class=${classMap({
@@ -59,7 +66,7 @@ export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
           aria-valuemin=${nileSlider.minValue}
           aria-valuemax=${nileSlider.maxValue}
           aria-valuenow=${nileSlider.value}
-          aria-label=${nileSlider.ariaLabel || "Slider value"}
+          aria-label=${nileSlider.ariaLabel || nileSlider.label || "Slider value"}
         ></div>
       </nile-tooltip>
     </div>
@@ -74,4 +81,40 @@ export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
       <span id="label-end">${nileSlider.labelEnd}</span>
     </div>
   `;
-};
+};
+
+
+export const fieldHeader = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div part="field-header" class="field-header">
+      <label id="field-label" part="field-label" class="field-label">
+        ${nileSlider.label}
+      </label>
+    </div>
+  `;
+};
+
+
+export const bottomValueLabels = (nileSlider: NileSlider): TemplateResult => {
+  if (!nileSlider.rangeSlider) {
+    return html`
+      <span
+        part="value-label"
+        class="value-label"
+        style="left: ${valueToPercent(nileSlider.value, nileSlider)}%"
+      >${nileSlider.value}</span>
+    `;
+  }
+  return html`
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${valueToPercent(nileSlider.rangeOneValue, nileSlider)}%"
+    >${nileSlider.rangeOneValue}</span>
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${valueToPercent(nileSlider.rangeTwoValue, nileSlider)}%"
+    >${nileSlider.rangeTwoValue}</span>
+  `;
+};

package/src/nile-slider/nile-slider.ts

@@ -10,9 +10,9 @@ import NileElement from '../internal/nile-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { TooltipPosition } from './types/nile-slider.types';
+import { TooltipPosition, ValueLabelMode } from './types/nile-slider.types';
 import { NileSliderEvents } from './types/nile-slider.enums';
-import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
+import { rangeSlider, singleSlider, lableContaier, fieldHeader, bottomValueLabels } from './nile-slider.template';
 import { 
   handleSingleSlider, 
   handleRangeOne, 
@@ -46,6 +46,10 @@ export class NileSlider extends NileElement {
   @property({ type: Boolean}) rangeSlider: boolean = false;
   @property({ type: String }) labelPosition: string = "top";
   @property({ type: String }) tooltipPosition: TooltipPosition = "top";
+  @property({ type: String }) label  = "";
+  @property({ type: Boolean, reflect: true }) disabled  = false;
+  @property({ type: Boolean, reflect: true }) error = false;
+  @property({ type: String, reflect: true }) valueLabel: ValueLabelMode = 'tooltip';
 
   public buttonOne!: HTMLElement;
   public buttonTwo!: HTMLElement;
@@ -88,7 +92,7 @@ export class NileSlider extends NileElement {
   }
 
   checkValueValidity(value: number, min: number, max: number): number {
-    if(max - min <= 1) { 
+    if(max - min <= 1) {
       return Math.max(min, Math.min(value, max));
     }
     return Math.floor(Math.max(min, Math.min(value, max)));
@@ -109,6 +113,7 @@ export class NileSlider extends NileElement {
   }  
 
   public onMouseMove = (e: MouseEvent): void => {
+    if (this.disabled) return;
     const rect = this.range.getBoundingClientRect();
 
     if (!this.rangeSlider) {
@@ -143,6 +148,7 @@ export class NileSlider extends NileElement {
   };
 
   public onMouseDown = (e: MouseEvent): void => {
+    if (this.disabled) return;
     const rect = this.range.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const percent = (clickX / rect.width) * 100;
@@ -166,6 +172,7 @@ export class NileSlider extends NileElement {
     const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;
   
     return html`
+      ${this.label ? fieldHeader(this) : html``}
       <div
         part="base"
         class=${classMap({
@@ -192,6 +199,7 @@ export class NileSlider extends NileElement {
           >
             <span class="range-completed" part="range-completed"></span>
             ${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}
+            ${this.valueLabel === 'bottom' ? bottomValueLabels(this) : html``}
           </div>
         </div>
   

package/src/nile-slider/types/nile-slider.types.ts

@@ -1,3 +1,5 @@
+export type ValueLabelMode = 'tooltip' | 'bottom' | 'none';
+
 export type TooltipPosition =
   | 'top'
   | 'top-start'

package/src/nile-slider/utils/nile-slider.utils.ts

@@ -80,11 +80,13 @@ export const getHtmlElements = (nileSlider: NileSlider) => {
   nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);
 
   nileSlider.buttonOne?.addEventListener('mousedown', () => {
+    if (nileSlider.disabled) return;
     nileSlider.activeThumb = 'one';
     addMoveListeners(nileSlider);
   });
 
   nileSlider.buttonTwo?.addEventListener('mousedown', () => {
+    if (nileSlider.disabled) return;
     nileSlider.activeThumb = 'two';
     addMoveListeners(nileSlider);
   });