npm - @aquera/nile-elements - Versions diffs - 1.8.0 → 1.8.2 - Mend

@aquera/nile-elements 1.8.0 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/src/nile-slider/nile-slider.css.js CHANGED Viewed

@@ -13,12 +13,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 {
@@ -26,14 +45,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 {
@@ -46,18 +65,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 {
@@ -68,50 +90,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;
   }
 `;
 export default [styles];

package/dist/src/nile-slider/nile-slider.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slider.css.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;EAEE;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\nimport { css } from 'lit';\n\n/\n Slider CSS\n*/\nexport const styles = css`\n :host {\n display: block;\n }\n\n .container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ~~10px~~;\n height: ~~100px~~;\n }\n\n .align-item-center {\n align-items: center;\n }\n\n slot.span {\n font-size: var(--nile-font-size-micro);\n ~~margin-top: 14px;\n~~ }\n\n .range-container {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-sm);\n }\n\n .column-reverse {\n flex-direction: column-reverse;\n }\n\n .label-container {\n display: flex;\n justify-content: space-between;\n }\n\n .label-container span {\n margin: var(--nile-spacing-none);\n padding: var(--nile-spacing-none);\n font-size: var(--nile-font-size-micro);\n }\n\n .range {\n position: relative;\n width: 228px;\n height: ~~4px~~;\n background-color: var(--nile-colors-neutral-400);\n user-select: none;\n border-radius: var(--nile-radius-radius-3xl);\n }\n\n .range:hover {\n cursor: pointer;\n }\n\n .range-completed {\n position: absolute;\n height: 100%;\n width: 0%;\n background-color: var(--nile-colors-primary-600);\n top: 0px;\n left: 0px;\n z-index: 98;\n border-radius: var(--nile-radius-radius-3xl);\n }\n\n .range-button {\n height: ~~12px~~;\n width: ~~12px~~;\n background-color: var(--nile-colors-primary-600);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: var(--nile-radius-radius-3xl);\n left: 0;\n z-index: 100;\n box-shadow: ~~rgba~~(0, 82, ~~145~~, ~~0.1~~) ~~0px~~ ~~1px~~ ~~2px~~ ~~0px,~~ ~~rgba~~(0, ~~94,~~ ~~166,~~ ~~0.15~~) ~~0px~~ ~~0px~~ ~~0px 2px~~;\n ~~transition:~~ box-shadow var(--nile-~~transition~~-~~duration~~-~~default~~) ~~ease~~;\n }\n\n .range-button:~~hover,~~ .range-button-two:~~hover~~ {\n ~~cursor~~: ~~pointer~~;\n ~~background~~-~~color~~: var(--nile-colors-primary-~~700~~);\n }\n\n .range-button:active, .range-button-two:active {\n ~~transition~~: box-shadow var(--nile-~~transition~~-~~duration~~-~~default~~) ~~ease~~;\n background-color: var(--nile-colors-~~primary~~-700);\n ~~box~~-~~shadow~~: ~~rgba~~(0, ~~82,~~ ~~145~~, 0.1) ~~0px~~ ~~1px~~ ~~2px~~ ~~0px,~~ ~~rgba~~(0, 94, ~~166~~, ~~0.15~~) ~~0px 0px 0px 4px~~;\n }\n\n .range-button-two {\n ~~height~~: ~~12px~~;\n ~~width~~: ~~12px~~;\n background-color: var(--nile-colors-~~primary~~-~~600~~);\n ~~position~~: ~~absolute~~;\n ~~top~~: ~~50%;\~~n ~~transform~~: ~~translate~~(-~~50%,~~ -~~50%~~);\n border-~~radius~~: var(--nile-~~radius~~-~~radius~~-~~3xl~~);\n ~~left~~: ~~100%;\~~n z-~~index~~: ~~100;\n box~~-~~shadow~~: ~~rgba~~(0, ~~82, 145, 0~~.1) ~~0px~~ ~~1px~~ ~~2px~~ ~~0px,~~ ~~rgba~~(0, ~~94,~~ ~~166, 0~~.15) ~~0px~~ ~~0px~~ ~~0px 2px;\~~n ~~transition~~: ~~box~~-~~shadow~~ var(--~~nile~~-~~transition~~-~~duration~~-~~default~~) ~~ease~~;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-slider.css.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;EAEE;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\nimport { css } from 'lit';\n\n/\n Slider CSS\n/\nexport const styles = css`\n :host {\n display: block;\n }\n\n / Field header /\n\n .field-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .field-label {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n / Layout /\n\n .container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n min-height: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n .align-item-center {\n align-items: center;\n }\n\n slot.span {\n font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));\n }\n\n .range-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .column-reverse {\n flex-direction: column-reverse;\n }\n\n .label-container {\n display: flex;\n justify-content: space-between;\n }\n\n .label-container span {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n / track & fill /\n\n .range {\n position: relative;\n width: var(--nile-slider-width, 228px);\n height: var(--nile-spacing-xs, var(--ng-spacing-sm));\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n user-select: none;\n border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));\n }\n\n .range:hover {\n cursor: pointer;\n }\n\n .range-completed {\n position: absolute;\n height: 100%;\n width: 0%;\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n top: 0px;\n left: 0px;\n z-index: 98;\n border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));\n }\n\n / ------------------------------------------------------------------ /\n / Inline value label (valueLabel=\"bottom\") /\n / ------------------------------------------------------------------ /\n\n .value-label {\n position: absolute;\n / Start at the track bottom, then push down past the handle and the\n largest (pressed, 8px) ring /\n top: 100%;\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n transform: translateX(-50%);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));\n font-variant-numeric: tabular-nums;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n -webkit-user-select: none;\n }\n\n / Reserve room below the track for the inline value label /\n :host([valuelabel='bottom']) .container {\n padding-bottom: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n }\n\n / Handles /\n\n .range-button,\n .range-button-two {\n height: var(--nile-spacing-lg, var(--ng-spacing-2xl));\n width: var(--nile-spacing-lg, var(--ng-spacing-2xl));\n box-sizing: border-box;\n / Enterprise: solid brand dot - NextGen: white fill + brand border /\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary));\n border: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) solid\n var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));\n left: 0;\n z-index: 100;\n cursor: grab;\n transition:\n box-shadow var(--nile-transition-duration-short, 120ms) ease,\n background-color var(--nile-transition-duration-short, 120ms) ease,\n transform var(--nile-transition-duration-shorter, 80ms) ease;\n }\n\n .range-button-two {\n left: 100%;\n }\n\n / Hover: ring (Enterprise 2px - NextGen 6px) /\n .range-button:hover,\n .range-button-two:hover {\n cursor: grab;\n box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))\n var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));\n }\n\n / Focused: theme focus ring /\n .range-button:focus-visible,\n .range-button-two:focus-visible {\n outline: none;\n box-shadow: var(--nile-focus-ring,\n var(--ng-focus-ring,\n 0 0 0 var(--nile-spacing-xs) var(--nile-colors-primary-100)));\n }\n\n / Pressed: ring (Enterprise 4px - NextGen 8px) + 1.1x scale /\n .range-button:active,\n .range-button-two:active {\n cursor: grabbing;\n transform: translate(-50%, -50%) scale(1.1);\n box-shadow: 0 0 0 var(--nile-spacing-xs, var(--ng-spacing-md))\n var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));\n }\n\n / Error state /\n :host([error]) .range-completed {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));\n }\n\n :host([error]) .range-button,\n :host([error]) .range-button-two {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-red-700, var(--ng-colors-border-error));\n }\n\n :host([error]) .range-button:hover,\n :host([error]) .range-button-two:hover {\n box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))\n var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary, var(--ng-color-error-100)));\n }\n\n :host([error]) .range-button:focus-visible,\n :host([error]) .range-button-two:focus-visible {\n box-shadow: var(--nile-focus-ring-error,\n var(--ng-focus-ring-error,\n 0 0 0 var(--nile-spacing-xs) var(--nile-colors-red-100)));\n }\n\n / Disabled state */\n :host([disabled]) .range,\n :host([disabled]) .range:hover {\n cursor: not-allowed;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n }\n\n :host([disabled]) .range-completed {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n }\n\n :host([disabled]) .range-button,\n :host([disabled]) .range-button-two {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n cursor: not-allowed;\n }\n\n :host([disabled]) .range-button:hover,\n :host([disabled]) .range-button-two:hover,\n :host([disabled]) .range-button:active,\n :host([disabled]) .range-button-two:active {\n box-shadow: none;\n transform: translate(-50%, -50%);\n }\n\n :host([disabled]) .field-label,\n :host([disabled]) .value-label,\n :host([disabled]) .label-container span {\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n user-select: none;\n -webkit-user-select: none;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-slider/nile-slider.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  */
 import NileElement from '../internal/nile-element';
 import { CSSResultArray, TemplateResult } from 'lit';
-import { TooltipPosition } from './types/nile-slider.types';
+import { TooltipPosition, ValueLabelMode } from './types/nile-slider.types';
 /**
  * Nile slider component.
  *
@@ -25,6 +25,10 @@ export declare class NileSlider extends NileElement {
     rangeSlider: boolean;
     labelPosition: string;
     tooltipPosition: TooltipPosition;
+    label: string;
+    disabled: boolean;
+    error: boolean;
+    valueLabel: ValueLabelMode;
     buttonOne: HTMLElement;
     buttonTwo: HTMLElement;
     range: HTMLElement;

package/dist/src/nile-slider/nile-slider.js CHANGED Viewed

@@ -10,7 +10,7 @@ import NileElement from '../internal/nile-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
+import { rangeSlider, singleSlider, lableContaier, fieldHeader, bottomValueLabels } from './nile-slider.template';
 import { handleSingleSlider, handleRangeOne, handleRangeTwo, getHtmlElements, removeMoveListeners, valueToPercent, handleTwoThumbClick, addMoveListeners } from './utils/nile-slider.utils';
 /**
  * Nile slider component.
@@ -31,8 +31,14 @@ let NileSlider = class NileSlider extends NileElement {
         this.rangeSlider = false;
         this.labelPosition = "top";
         this.tooltipPosition = "top";
+        this.label = "";
+        this.disabled = false;
+        this.error = false;
+        this.valueLabel = 'tooltip';
         this.activeThumb = null;
         this.onMouseMove = (e) => {
+            if (this.disabled)
+                return;
             const rect = this.range.getBoundingClientRect();
             if (!this.rangeSlider) {
                 handleSingleSlider(e, rect, this);
@@ -65,6 +71,8 @@ let NileSlider = class NileSlider extends NileElement {
             removeMoveListeners(this);
         };
         this.onMouseDown = (e) => {
+            if (this.disabled)
+                return;
             const rect = this.range.getBoundingClientRect();
             const clickX = e.clientX - rect.left;
             const percent = (clickX / rect.width) * 100;
@@ -138,6 +146,7 @@ let NileSlider = class NileSlider extends NileElement {
         const hasLabels = this.showLabel;
         const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;
         return html `
+      ${this.label ? fieldHeader(this) : html ``}
       <div
         part="base"
         class=${classMap({
@@ -164,6 +173,7 @@ let NileSlider = 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>
@@ -209,6 +219,18 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileSlider.prototype, "tooltipPosition", void 0);
+__decorate([
+    property({ type: String })
+], NileSlider.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSlider.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSlider.prototype, "error", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileSlider.prototype, "valueLabel", void 0);
 NileSlider = __decorate([
     customElement('nile-slider')
 ], NileSlider);

package/dist/src/nile-slider/nile-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slider.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { styles } from './nile-slider.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TooltipPosition } from './types/nile-slider.types';\nimport { NileSliderEvents } from './types/nile-slider.enums';\nimport { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';\nimport { \n handleSingleSlider, \n handleRangeOne, \n handleRangeTwo, \n getHtmlElements, \n removeMoveListeners,\n valueToPercent,\n handleTwoThumbClick,\n addMoveListeners\n} from './utils/nile-slider.utils'\n\n/* \n * Nile slider component.\n \n @tag nile-slider\n /\n@customElement('nile-slider')\nexport class NileSlider extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Number }) minValue: number = 0;\n @property({ type: Number }) value: number = this.minValue;\n @property({ type: Number }) maxValue: number = 100;\n @property({ type: Number }) rangeOneValue: number = this.minValue;\n @property({ type: Number }) rangeTwoValue: number = this.maxValue;\n @property({ type: Boolean}) showLabel: boolean = false;\n @property({ type: String }) labelStart: string = \"\";\n @property({ type: String }) labelEnd: string = \"\";\n @property({ type: Boolean}) rangeSlider: boolean = false;\n @property({ type: String }) labelPosition: string = \"top\";\n @property({ type: String }) tooltipPosition: TooltipPosition = \"top\";\n\n public buttonOne!: HTMLElement;\n public buttonTwo!: HTMLElement;\n public range!: HTMLElement;\n public completed!: HTMLElement;\n public activeThumb: 'one' \| 'two' \| null = null;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(NileSliderEvents.NILE_INIT); \n\n if(this.rangeSlider) {\n this.checkRangeValidity();\n }\n }\n\n firstUpdated(changedProps: Map<string, any>): void {\n getHtmlElements(this);\n\n if (!this.rangeSlider && changedProps.has('value')) {\n this.value = this.checkValueValidity(this.value, this.minValue, this.maxValue);\n const percent = valueToPercent(this.value, this);\n \n this.buttonOne.style.left = `${percent}%`;\n this.completed.style.width = `${percent}%`;\n } else if (this.rangeSlider) {\n \n const percentOne = valueToPercent(this.rangeOneValue, this);\n const percentTwo = valueToPercent(this.rangeTwoValue, this);\n \n if (this.buttonOne) this.buttonOne.style.left = `${percentOne}%`;\n if (this.buttonTwo) this.buttonTwo.style.left = `${percentTwo}%`;\n \n const left = Math.min(percentOne, percentTwo);\n const width = Math.abs(percentTwo - percentOne);\n \n this.completed.style.left = `${left}%`;\n this.completed.style.width = `${width}%`;\n }\n }\n\n checkValueValidity(value: number, min: number, max: number): number {\n if(max - min <= 1) { \n return Math.max(min, Math.min(value, max));\n }\n return Math.floor(Math.max(min, Math.min(value, max)));\n }\n\n checkRangeValidity(): void {\n if(this.rangeTwoValue > this.maxValue) {\n this.rangeTwoValue = this.maxValue;\n } else if(this.rangeTwoValue < this.rangeOneValue) {\n this.rangeTwoValue = this.rangeOneValue;\n }\n\n if(this.rangeOneValue < this.minValue) {\n this.rangeOneValue = this.minValue;\n } else if(this.rangeOneValue > this.rangeTwoValue) {\n this.rangeOneValue = this.rangeTwoValue;\n }\n } \n\n public onMouseMove = (e: MouseEvent): void => {\n const rect = this.range.getBoundingClientRect();\n\n if (!this.rangeSlider) {\n handleSingleSlider(e, rect, this);\n } else {\n if (this.activeThumb === 'one') {\n handleRangeOne(e, rect, this);\n } else if (this.activeThumb === 'two') {\n handleRangeTwo(e, rect, this);\n }\n\n const start = valueToPercent(this.rangeOneValue, this);\n const end = valueToPercent(this.rangeTwoValue, this);\n const left = Math.min(start, end);\n const width = Math.abs(end - start);\n\n if(this.rangeTwoValue >= this.rangeOneValue) {\n this.completed.style.left = `${left}%`;\n this.completed.style.width = `${width}%`;\n }\n }\n };\n\n public onMouseUp = (): void => {\n if(!this.rangeSlider) this.emit(NileSliderEvents.NILE_CHANGE_END, { value: this.value });\n else {\n this.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE_END, { value: this.rangeOneValue });\n this.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE_END, { value: this.rangeTwoValue });\n }\n this.activeThumb = null;\n removeMoveListeners(this);\n };\n\n public onMouseDown = (e: MouseEvent): void => {\n const rect = this.range.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const percent = (clickX / rect.width) 100;\n const value = this.minValue + (percent / 100) * (this.maxValue - this.minValue);\n \n if (!this.rangeSlider) {\n handleSingleSlider(e, rect, this);\n this.activeThumb = 'one';\n addMoveListeners(this);\n } else {\n handleTwoThumbClick(value, this);\n const distToOne = Math.abs(value - this.rangeOneValue);\n const distToTwo = Math.abs(value - this.rangeTwoValue);\n this.activeThumb = distToOne <= distToTwo ? 'one' : 'two';\n addMoveListeners(this);\n }\n };\n\n public render(): TemplateResult {\n const hasLabels = this.showLabel;\n const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;\n \n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'container': true,\n 'align-item-center': !hasLabels\n })}\n >\n <slot class=\"span\" name=\"prefix\"></slot>\n \n <div\n part=\"range-container\"\n class=${classMap({\n 'range-container': true,\n 'column-reverse': this.labelPosition === 'bottom'\n })}\n >\n ${hasLabels ? lableContaier(this) : html``}\n \n <div\n class=\"range\"\n part=\"range\"\n role=\"group\"\n aria-labelledby=${ariaLabelledby}\n >\n <span class=\"range-completed\" part=\"range-completed\"></span>\n ${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}\n </div>\n </div>\n \n <slot class=\"span\" name=\"suffix\"></slot>\n </div>\n `;\n } \n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit(NileSliderEvents.NILE_DESTROY);\n }\n}\n\nexport default NileSlider;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-slider': NileSlider;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-slider.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { styles } from './nile-slider.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TooltipPosition, ValueLabelMode } from './types/nile-slider.types';\nimport { NileSliderEvents } from './types/nile-slider.enums';\nimport { rangeSlider, singleSlider, lableContaier, fieldHeader, bottomValueLabels } from './nile-slider.template';\nimport { \n handleSingleSlider, \n handleRangeOne, \n handleRangeTwo, \n getHtmlElements, \n removeMoveListeners,\n valueToPercent,\n handleTwoThumbClick,\n addMoveListeners\n} from './utils/nile-slider.utils'\n\n/* \n * Nile slider component.\n \n @tag nile-slider\n /\n@customElement('nile-slider')\nexport class NileSlider extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Number }) minValue: number = 0;\n @property({ type: Number }) value: number = this.minValue;\n @property({ type: Number }) maxValue: number = 100;\n @property({ type: Number }) rangeOneValue: number = this.minValue;\n @property({ type: Number }) rangeTwoValue: number = this.maxValue;\n @property({ type: Boolean}) showLabel: boolean = false;\n @property({ type: String }) labelStart: string = \"\";\n @property({ type: String }) labelEnd: string = \"\";\n @property({ type: Boolean}) rangeSlider: boolean = false;\n @property({ type: String }) labelPosition: string = \"top\";\n @property({ type: String }) tooltipPosition: TooltipPosition = \"top\";\n @property({ type: String }) label = \"\";\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) error = false;\n @property({ type: String, reflect: true }) valueLabel: ValueLabelMode = 'tooltip';\n\n public buttonOne!: HTMLElement;\n public buttonTwo!: HTMLElement;\n public range!: HTMLElement;\n public completed!: HTMLElement;\n public activeThumb: 'one' \| 'two' \| null = null;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(NileSliderEvents.NILE_INIT); \n\n if(this.rangeSlider) {\n this.checkRangeValidity();\n }\n }\n\n firstUpdated(changedProps: Map<string, any>): void {\n getHtmlElements(this);\n\n if (!this.rangeSlider && changedProps.has('value')) {\n this.value = this.checkValueValidity(this.value, this.minValue, this.maxValue);\n const percent = valueToPercent(this.value, this);\n \n this.buttonOne.style.left = `${percent}%`;\n this.completed.style.width = `${percent}%`;\n } else if (this.rangeSlider) {\n \n const percentOne = valueToPercent(this.rangeOneValue, this);\n const percentTwo = valueToPercent(this.rangeTwoValue, this);\n \n if (this.buttonOne) this.buttonOne.style.left = `${percentOne}%`;\n if (this.buttonTwo) this.buttonTwo.style.left = `${percentTwo}%`;\n \n const left = Math.min(percentOne, percentTwo);\n const width = Math.abs(percentTwo - percentOne);\n \n this.completed.style.left = `${left}%`;\n this.completed.style.width = `${width}%`;\n }\n }\n\n checkValueValidity(value: number, min: number, max: number): number {\n if(max - min <= 1) {\n return Math.max(min, Math.min(value, max));\n }\n return Math.floor(Math.max(min, Math.min(value, max)));\n }\n\n checkRangeValidity(): void {\n if(this.rangeTwoValue > this.maxValue) {\n this.rangeTwoValue = this.maxValue;\n } else if(this.rangeTwoValue < this.rangeOneValue) {\n this.rangeTwoValue = this.rangeOneValue;\n }\n\n if(this.rangeOneValue < this.minValue) {\n this.rangeOneValue = this.minValue;\n } else if(this.rangeOneValue > this.rangeTwoValue) {\n this.rangeOneValue = this.rangeTwoValue;\n }\n } \n\n public onMouseMove = (e: MouseEvent): void => {\n if (this.disabled) return;\n const rect = this.range.getBoundingClientRect();\n\n if (!this.rangeSlider) {\n handleSingleSlider(e, rect, this);\n } else {\n if (this.activeThumb === 'one') {\n handleRangeOne(e, rect, this);\n } else if (this.activeThumb === 'two') {\n handleRangeTwo(e, rect, this);\n }\n\n const start = valueToPercent(this.rangeOneValue, this);\n const end = valueToPercent(this.rangeTwoValue, this);\n const left = Math.min(start, end);\n const width = Math.abs(end - start);\n\n if(this.rangeTwoValue >= this.rangeOneValue) {\n this.completed.style.left = `${left}%`;\n this.completed.style.width = `${width}%`;\n }\n }\n };\n\n public onMouseUp = (): void => {\n if(!this.rangeSlider) this.emit(NileSliderEvents.NILE_CHANGE_END, { value: this.value });\n else {\n this.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE_END, { value: this.rangeOneValue });\n this.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE_END, { value: this.rangeTwoValue });\n }\n this.activeThumb = null;\n removeMoveListeners(this);\n };\n\n public onMouseDown = (e: MouseEvent): void => {\n if (this.disabled) return;\n const rect = this.range.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const percent = (clickX / rect.width) 100;\n const value = this.minValue + (percent / 100) * (this.maxValue - this.minValue);\n \n if (!this.rangeSlider) {\n handleSingleSlider(e, rect, this);\n this.activeThumb = 'one';\n addMoveListeners(this);\n } else {\n handleTwoThumbClick(value, this);\n const distToOne = Math.abs(value - this.rangeOneValue);\n const distToTwo = Math.abs(value - this.rangeTwoValue);\n this.activeThumb = distToOne <= distToTwo ? 'one' : 'two';\n addMoveListeners(this);\n }\n };\n\n public render(): TemplateResult {\n const hasLabels = this.showLabel;\n const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;\n \n return html`\n ${this.label ? fieldHeader(this) : html``}\n <div\n part=\"base\"\n class=${classMap({\n 'container': true,\n 'align-item-center': !hasLabels\n })}\n >\n <slot class=\"span\" name=\"prefix\"></slot>\n \n <div\n part=\"range-container\"\n class=${classMap({\n 'range-container': true,\n 'column-reverse': this.labelPosition === 'bottom'\n })}\n >\n ${hasLabels ? lableContaier(this) : html``}\n \n <div\n class=\"range\"\n part=\"range\"\n role=\"group\"\n aria-labelledby=${ariaLabelledby}\n >\n <span class=\"range-completed\" part=\"range-completed\"></span>\n ${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}\n ${this.valueLabel === 'bottom' ? bottomValueLabels(this) : html``}\n </div>\n </div>\n \n <slot class=\"span\" name=\"suffix\"></slot>\n </div>\n `;\n } \n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit(NileSliderEvents.NILE_DESTROY);\n }\n}\n\nexport default NileSlider;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-slider': NileSlider;\n }\n}\n"]}

package/dist/src/nile-slider/nile-slider.template.d.ts CHANGED Viewed

@@ -3,3 +3,5 @@ import NileSlider from './nile-slider';
 export declare const rangeSlider: (nileSlider: NileSlider) => TemplateResult;
 export declare const singleSlider: (nileSlider: NileSlider) => TemplateResult;
 export declare const lableContaier: (nileSlider: NileSlider) => TemplateResult;
+export declare const fieldHeader: (nileSlider: NileSlider) => TemplateResult;
+export declare const bottomValueLabels: (nileSlider: NileSlider) => TemplateResult;

package/dist/src/nile-slider/nile-slider.template.js CHANGED Viewed

@@ -1,11 +1,14 @@
 import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { valueToPercent } from './utils/nile-slider.utils';
+const tooltipDisabled = (nileSlider) => nileSlider.disabled || nileSlider.valueLabel !== 'tooltip';
 export const rangeSlider = (nileSlider) => {
     return html `
     <div>
       <nile-tooltip
         content=${nileSlider.rangeOneValue}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div
           id="range-one"
@@ -22,6 +25,7 @@ export const rangeSlider = (nileSlider) => {
       <nile-tooltip
         content=${nileSlider.rangeTwoValue}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div
           id="range-two"
@@ -44,6 +48,7 @@ export const singleSlider = (nileSlider) => {
       <nile-tooltip
         content=${nileSlider.value}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div
           class=${classMap({
@@ -56,7 +61,7 @@ export const singleSlider = (nileSlider) => {
           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>
@@ -70,4 +75,36 @@ export const lableContaier = (nileSlider) => {
     </div>
   `;
 };
+export const fieldHeader = (nileSlider) => {
+    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) => {
+    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>
+  `;
+};
 //# sourceMappingURL=nile-slider.template.js.map

package/dist/src/nile-slider/nile-slider.template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slider.template.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;~~AAEvD~~,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACpE,OAAO,IAAI,CAAA;;;kBAGK,UAAU,CAAC,aAAa;oBACtB,UAAU,CAAC,eAAe;;;;;;;;~~0BAQpB~~,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,aAAa;;;;;kBAKhC,UAAU,CAAC,aAAa;oBACtB,UAAU,CAAC,eAAe;;;;;;;;~~0BAQpB~~,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,aAAa;;;;;GAK/C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACrE,OAAO,IAAI,CAAA;;;kBAGK,UAAU,CAAC,KAAK;oBACd,UAAU,CAAC,eAAe;;;~~kBAG5B~~,QAAQ,CAAC;QACf,cAAc,EAAE,IAAI;QACpB,qBAAqB,EAAE,UAAU,CAAC,WAAW,KAAK,KAAK;KACxD,CAAC;;;;0BAIc,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,KAAK;uBACnB,UAAU,CAAC,SAAS,IAAI,cAAc;;;;~~GAI1D~~,CAAC;AACJ,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACtE,OAAO,IAAI,CAAA;;+BAEkB,UAAU,CAAC,UAAU;6BACvB,UAAU,CAAC,QAAQ;;GAE7C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport NileSlider from './nile-slider';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport const rangeSlider = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div>\n <nile-tooltip\n content=${nileSlider.rangeOneValue}\n placement=${nileSlider.tooltipPosition}\n >\n <div \n id=\"range-one\" \n class=\"range-button\"\n part=\"range-button\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=${nileSlider.minValue}\n aria-valuemax=${nileSlider.maxValue}\n aria-valuenow=${nileSlider.rangeOneValue}\n aria-label=\"Minimum value\"\n ></div>\n </nile-tooltip>\n <nile-tooltip\n content=${nileSlider.rangeTwoValue}\n placement=${nileSlider.tooltipPosition}\n >\n <div\n id=\"range-two\"\n class=\"range-button-two\"\n part=\"range-button-two\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=${nileSlider.minValue}\n aria-valuemax=${nileSlider.maxValue}\n aria-valuenow=${nileSlider.rangeTwoValue}\n aria-label=\"Maximum value\"\n ></div>\n </nile-tooltip>\n </div>\n `;\n};\n\nexport const singleSlider = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div>\n <nile-tooltip\n content=${nileSlider.value}\n placement=${nileSlider.tooltipPosition}\n >\n <div \n class=${classMap({\n 'range-button': true,\n 'range-button-active': nileSlider.activeThumb === 'one',\n })} \n part=\"range-button\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=${nileSlider.minValue}\n aria-valuemax=${nileSlider.maxValue}\n aria-valuenow=${nileSlider.value}\n aria-label=${nileSlider.ariaLabel \|\| \"Slider value\"}\n ></div>\n </nile-tooltip>\n </div>\n `;\n};\n\n\nexport const lableContaier = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div part=\"label-container\" class=\"label-container\">\n <span id=\"label-start\">${nileSlider.labelStart}</span>\n <span id=\"label-end\">${nileSlider.labelEnd}</span>\n </div>\n `;\n};"]}
1	+ {"version":3,"file":"nile-slider.template.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,eAAe,GAAG,CAAC,UAAsB,EAAW,EAAE,CAC1D,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,UAAU,KAAK,SAAS,CAAC;AAE7D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACpE,OAAO,IAAI,CAAA;;;kBAGK,UAAU,CAAC,aAAa;oBACtB,UAAU,CAAC,eAAe;oBAC1B,eAAe,CAAC,UAAU,CAAC;;;;;;;;0BAQrB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,aAAa;;;;;kBAKhC,UAAU,CAAC,aAAa;oBACtB,UAAU,CAAC,eAAe;oBAC1B,eAAe,CAAC,UAAU,CAAC;;;;;;;;0BAQrB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,aAAa;;;;;GAK/C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACrE,OAAO,IAAI,CAAA;;;kBAGK,UAAU,CAAC,KAAK;oBACd,UAAU,CAAC,eAAe;oBAC1B,eAAe,CAAC,UAAU,CAAC;;;kBAG7B,QAAQ,CAAC;QACf,cAAc,EAAE,IAAI;QACpB,qBAAqB,EAAE,UAAU,CAAC,WAAW,KAAK,KAAK;KACxD,CAAC;;;;0BAIc,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,QAAQ;0BACnB,UAAU,CAAC,KAAK;uBACnB,UAAU,CAAC,SAAS,IAAI,UAAU,CAAC,KAAK,IAAI,cAAc;;;;GAI9E,CAAC;AACJ,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACtE,OAAO,IAAI,CAAA;;+BAEkB,UAAU,CAAC,UAAU;6BACvB,UAAU,CAAC,QAAQ;;GAE7C,CAAC;AACJ,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACpE,OAAO,IAAI,CAAA;;;UAGH,UAAU,CAAC,KAAK;;;GAGvB,CAAC;AACJ,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,UAAsB,EAAkB,EAAE;IAC1E,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAA;;;;uBAIQ,cAAc,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;SAC1D,UAAU,CAAC,KAAK;KACpB,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAA;;;;qBAIQ,cAAc,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC;OAClE,UAAU,CAAC,aAAa;;;;qBAIV,cAAc,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC;OAClE,UAAU,CAAC,aAAa;GAC5B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport NileSlider from './nile-slider';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { valueToPercent } from './utils/nile-slider.utils';\n\nconst tooltipDisabled = (nileSlider: NileSlider): boolean =>\n nileSlider.disabled \|\| nileSlider.valueLabel !== 'tooltip';\n\nexport const rangeSlider = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div>\n <nile-tooltip\n content=${nileSlider.rangeOneValue}\n placement=${nileSlider.tooltipPosition}\n ?disabled=${tooltipDisabled(nileSlider)}\n >\n <div \n id=\"range-one\" \n class=\"range-button\"\n part=\"range-button\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=${nileSlider.minValue}\n aria-valuemax=${nileSlider.maxValue}\n aria-valuenow=${nileSlider.rangeOneValue}\n aria-label=\"Minimum value\"\n ></div>\n </nile-tooltip>\n <nile-tooltip\n content=${nileSlider.rangeTwoValue}\n placement=${nileSlider.tooltipPosition}\n ?disabled=${tooltipDisabled(nileSlider)}\n >\n <div\n id=\"range-two\"\n class=\"range-button-two\"\n part=\"range-button-two\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=${nileSlider.minValue}\n aria-valuemax=${nileSlider.maxValue}\n aria-valuenow=${nileSlider.rangeTwoValue}\n aria-label=\"Maximum value\"\n ></div>\n </nile-tooltip>\n </div>\n `;\n};\n\nexport const singleSlider = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div>\n <nile-tooltip\n content=${nileSlider.value}\n placement=${nileSlider.tooltipPosition}\n ?disabled=${tooltipDisabled(nileSlider)}\n >\n <div \n class=${classMap({\n 'range-button': true,\n 'range-button-active': nileSlider.activeThumb === 'one',\n })} \n part=\"range-button\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=${nileSlider.minValue}\n aria-valuemax=${nileSlider.maxValue}\n aria-valuenow=${nileSlider.value}\n aria-label=${nileSlider.ariaLabel \|\| nileSlider.label \|\| \"Slider value\"}\n ></div>\n </nile-tooltip>\n </div>\n `;\n};\n\n\nexport const lableContaier = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div part=\"label-container\" class=\"label-container\">\n <span id=\"label-start\">${nileSlider.labelStart}</span>\n <span id=\"label-end\">${nileSlider.labelEnd}</span>\n </div>\n `;\n};\n\n\nexport const fieldHeader = (nileSlider: NileSlider): TemplateResult => {\n return html`\n <div part=\"field-header\" class=\"field-header\">\n <label id=\"field-label\" part=\"field-label\" class=\"field-label\">\n ${nileSlider.label}\n </label>\n </div>\n `;\n};\n\n\nexport const bottomValueLabels = (nileSlider: NileSlider): TemplateResult => {\n if (!nileSlider.rangeSlider) {\n return html`\n <span\n part=\"value-label\"\n class=\"value-label\"\n style=\"left: ${valueToPercent(nileSlider.value, nileSlider)}%\"\n >${nileSlider.value}</span>\n `;\n }\n return html`\n <span\n part=\"value-label\"\n class=\"value-label\"\n style=\"left: ${valueToPercent(nileSlider.rangeOneValue, nileSlider)}%\"\n >${nileSlider.rangeOneValue}</span>\n <span\n part=\"value-label\"\n class=\"value-label\"\n style=\"left: ${valueToPercent(nileSlider.rangeTwoValue, nileSlider)}%\"\n >${nileSlider.rangeTwoValue}</span>\n `;\n};\n"]}

package/dist/src/nile-slider/types/nile-slider.types.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1	+ export type ValueLabelMode = 'tooltip' \| 'bottom' \| 'none';
1 2	export type TooltipPosition = 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end';

package/dist/src/nile-slider/types/nile-slider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slider.types.js","sourceRoot":"","sources":["../../../../src/nile-slider/types/nile-slider.types.ts"],"names":[],"mappings":"","sourcesContent":["export type TooltipPosition =\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n"]}
1	+ {"version":3,"file":"nile-slider.types.js","sourceRoot":"","sources":["../../../../src/nile-slider/types/nile-slider.types.ts"],"names":[],"mappings":"","sourcesContent":["export type ValueLabelMode = 'tooltip' \| 'bottom' \| 'none';\n\nexport type TooltipPosition =\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n"]}

package/dist/src/nile-slider/utils/nile-slider.utils.js CHANGED Viewed

@@ -54,10 +54,14 @@ export const getHtmlElements = (nileSlider) => {
     nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed');
     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);
     });

package/dist/src/nile-slider/utils/nile-slider.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slider.utils.js","sourceRoot":"","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import NileSlider from '../nile-slider';\nimport { NileSliderEvents } from '../types/nile-slider.enums';\n\nexport const getClampedPercent = (\n rect: DOMRect,\n x: number,\n): number => {\n const clampedX = Math.max(0, Math.min(x, rect.width)); \n const percent = (clampedX / rect.width) * 100;\n return percent;\n};\n\nexport const percentToValue = (percent: number, nileSlider: NileSlider): number => {\n const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);\n if(nileSlider.maxValue - nileSlider.minValue < 1) {\n return parseFloat(value.toFixed(2));\n } else {\n return Math.floor(value);\n }\n};\n\nexport const valueToPercent = (value: number, nileSlider: NileSlider): number => {\n return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;\n};\n\nexport const handleSingleSlider = (\n e: MouseEvent,\n rect: DOMRect,\n nileSlider: NileSlider\n): void => {\n const x = e.clientX - rect.left;\n const percent = getClampedPercent(rect, x);\n nileSlider.value = percentToValue(percent, nileSlider);\n nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });\n nileSlider.buttonOne.style.left = `${percent}%`;\n nileSlider.completed.style.width = `${percent}%`;\n};\n\nexport const handleRangeOne = (\n e: MouseEvent,\n rect: DOMRect,\n nileSlider: NileSlider\n): void => {\n const x = e.clientX - rect.left;\n const percent = getClampedPercent(rect, x);\n nileSlider.rangeOneValue = percentToValue(percent, nileSlider);\n nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n value: nileSlider.rangeOneValue,\n });\n if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n nileSlider.buttonOne.style.left = `${percent}%`;\n }\n};\n\nexport const handleRangeTwo = (\n e: MouseEvent,\n rect: DOMRect,\n nileSlider: NileSlider\n): void => {\n const x = e.clientX - rect.left;\n const percent = getClampedPercent(rect, x);\n nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);\n nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n value: nileSlider.rangeTwoValue,\n });\n\n if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n nileSlider.buttonTwo.style.left = `${percent}%`;\n }\n};\n\nexport const getHtmlElements = (nileSlider: NileSlider) => {\n nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;\n nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;\n nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;\n nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;\n\n nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);\n\n nileSlider.buttonOne?.addEventListener('mousedown', () => {\n nileSlider.activeThumb = 'one';\n addMoveListeners(nileSlider);\n });\n\n nileSlider.buttonTwo?.addEventListener('mousedown', () => {\n nileSlider.activeThumb = 'two';\n addMoveListeners(nileSlider);\n });\n};\n\nexport const addMoveListeners = (nileSlider: NileSlider): void => {\n window.addEventListener('mousemove', nileSlider.onMouseMove);\n window.addEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const removeMoveListeners = (nileSlider: NileSlider): void => {\n window.removeEventListener('mousemove', nileSlider.onMouseMove);\n window.removeEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const handleTwoThumbClick = (\n value: number,\n nileSlider: NileSlider\n): void => {\n const distToOne = Math.abs(value - nileSlider.rangeOneValue);\n const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);\n\n if (distToOne <= distToTwo) {\n const clamped = Math.min(value, nileSlider.rangeTwoValue);\n nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n } else {\n const clamped = Math.max(value, nileSlider.rangeOneValue);\n nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n } \n\n const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);\n const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);\n\n nileSlider.buttonOne.style.left = `${percentOne}%`;\n nileSlider.buttonTwo.style.left = `${percentTwo}%`;\n\n const left = Math.min(percentOne, percentTwo);\n const width = Math.abs(percentTwo - percentOne);\n\n nileSlider.completed.style.left = `${left}%`;\n nileSlider.completed.style.width = `${width}%`;\n\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n value: nileSlider.rangeOneValue,\n });\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n value: nileSlider.rangeTwoValue,\n });\n};\n"]}
1	+ {"version":3,"file":"nile-slider.utils.js","sourceRoot":"","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import NileSlider from '../nile-slider';\nimport { NileSliderEvents } from '../types/nile-slider.enums';\n\nexport const getClampedPercent = (\n rect: DOMRect,\n x: number,\n): number => {\n const clampedX = Math.max(0, Math.min(x, rect.width)); \n const percent = (clampedX / rect.width) * 100;\n return percent;\n};\n\nexport const percentToValue = (percent: number, nileSlider: NileSlider): number => {\n const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);\n if(nileSlider.maxValue - nileSlider.minValue < 1) {\n return parseFloat(value.toFixed(2));\n } else {\n return Math.floor(value);\n }\n};\n\nexport const valueToPercent = (value: number, nileSlider: NileSlider): number => {\n return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;\n};\n\nexport const handleSingleSlider = (\n e: MouseEvent,\n rect: DOMRect,\n nileSlider: NileSlider\n): void => {\n const x = e.clientX - rect.left;\n const percent = getClampedPercent(rect, x);\n nileSlider.value = percentToValue(percent, nileSlider);\n nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });\n nileSlider.buttonOne.style.left = `${percent}%`;\n nileSlider.completed.style.width = `${percent}%`;\n};\n\nexport const handleRangeOne = (\n e: MouseEvent,\n rect: DOMRect,\n nileSlider: NileSlider\n): void => {\n const x = e.clientX - rect.left;\n const percent = getClampedPercent(rect, x);\n nileSlider.rangeOneValue = percentToValue(percent, nileSlider);\n nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n value: nileSlider.rangeOneValue,\n });\n if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n nileSlider.buttonOne.style.left = `${percent}%`;\n }\n};\n\nexport const handleRangeTwo = (\n e: MouseEvent,\n rect: DOMRect,\n nileSlider: NileSlider\n): void => {\n const x = e.clientX - rect.left;\n const percent = getClampedPercent(rect, x);\n nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);\n nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n value: nileSlider.rangeTwoValue,\n });\n\n if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n nileSlider.buttonTwo.style.left = `${percent}%`;\n }\n};\n\nexport const getHtmlElements = (nileSlider: NileSlider) => {\n nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;\n nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;\n nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;\n nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;\n\n nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);\n\n nileSlider.buttonOne?.addEventListener('mousedown', () => {\n if (nileSlider.disabled) return;\n nileSlider.activeThumb = 'one';\n addMoveListeners(nileSlider);\n });\n\n nileSlider.buttonTwo?.addEventListener('mousedown', () => {\n if (nileSlider.disabled) return;\n nileSlider.activeThumb = 'two';\n addMoveListeners(nileSlider);\n });\n};\n\nexport const addMoveListeners = (nileSlider: NileSlider): void => {\n window.addEventListener('mousemove', nileSlider.onMouseMove);\n window.addEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const removeMoveListeners = (nileSlider: NileSlider): void => {\n window.removeEventListener('mousemove', nileSlider.onMouseMove);\n window.removeEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const handleTwoThumbClick = (\n value: number,\n nileSlider: NileSlider\n): void => {\n const distToOne = Math.abs(value - nileSlider.rangeOneValue);\n const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);\n\n if (distToOne <= distToTwo) {\n const clamped = Math.min(value, nileSlider.rangeTwoValue);\n nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n } else {\n const clamped = Math.max(value, nileSlider.rangeOneValue);\n nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n } \n\n const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);\n const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);\n\n nileSlider.buttonOne.style.left = `${percentOne}%`;\n nileSlider.buttonTwo.style.left = `${percentTwo}%`;\n\n const left = Math.min(percentOne, percentTwo);\n const width = Math.abs(percentTwo - percentOne);\n\n nileSlider.completed.style.left = `${left}%`;\n nileSlider.completed.style.width = `${width}%`;\n\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n value: nileSlider.rangeOneValue,\n });\n nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n value: nileSlider.rangeTwoValue,\n });\n};\n"]}