@aquera/nile-elements 0.1.46-beta-2.4 → 0.1.46-beta-2.5

package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js

@@ -4,9 +4,6 @@ export default css `
     --slide-toggle-width:auto;
     display:inline-block;
     width:var(--slide-toggle-width);
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-slide-toggle {
@@ -26,43 +23,43 @@ export default css `
     display: inline-block;
     width: 36px;
     height: 20px;
-    line-height: var(--nile-height-22px, var(--ng-height-20px));
+    line-height: 22px;
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-left: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    gap: 2px;
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
-    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   .nile-slide-toggle__sublabel {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
   }
 
   .nile-slide--disabled .nile-slide-toggle__label,
   .nile-slide--disabled .nile-slide-toggle__sublabel{
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500);
   }
 
   .nile-slide-toggle__switch input {
@@ -78,17 +75,17 @@ export default css `
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
-    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
+    border-radius: 34px;
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:before {
@@ -98,20 +95,17 @@ export default css `
     width: 16px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
-    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+    border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
-    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
-    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
-    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -119,15 +113,15 @@ export default css `
   }
 
   .nile-slide-toggle__slider.round {
-    border-radius: var(--nile-radius-xl, var(--ng-radius-full));
+    border-radius: 20px;
   }
 
   .nile-slide-toggle__slider.round:before {
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    border-radius: 50%;
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -139,7 +133,7 @@ export default css `
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 `;
 //# sourceMappingURL=nile-slide-toggle.css.js.map

package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host{\n    --slide-toggle-width:auto;\n    display:inline-block;\n    width:var(--slide-toggle-width);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-slide-toggle {\n    display: inline-flex;\n    align-items: baseline;\n    justify-content:space-between;\n    width:100%;\n  }\n\n  .nile-slide-toggle--reverse{\n    flex-direction:row-reverse;\n  }\n\n  .nile-slide-toggle__switch {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-block;\n    width: 36px;\n    height: 20px;\n    line-height: var(--nile-height-22px, var(--ng-height-20px));\n  }\n\n  .nile-slide-toggle__switch--left{\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-slide-toggle__switch--right{\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-slide-toggle__label {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\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-500));\n    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));\n  }\n\n  .nile-slide-toggle__sublabel {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__label,\n  .nile-slide--disabled .nile-slide-toggle__sublabel{\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .nile-slide-toggle__switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .nile-slide-toggle__slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-tertiary));\n    transition: 0.4s;\n    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));\n  }\n\n  .nile-slide-toggle__slider:active {\n    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));\n  }\n\n  .nile-slide-toggle__slider:focus {\n    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));\n  }\n\n  .nile-slide-toggle__slider:before {\n    position: absolute;\n    content: '';\n    height: 16px;\n    width: 16px;\n    bottom: 2px;\n    left: 2px;\n    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));\n    transition: 0.4s;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));\n  }\n\n  .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);\n    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n    transform: translateX(16px);\n  }\n\n  .nile-slide-toggle__slider.round {\n    border-radius: var(--nile-radius-xl, var(--ng-radius-full));\n  }\n\n  .nile-slide-toggle__slider.round:before {\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__switch {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  .nile-slide--disabled\n    .nile-slide-toggle__switch\n    input:checked\n    + .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n  }\n`;\n"]}
+{"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host{\n    --slide-toggle-width:auto;\n    display:inline-block;\n    width:var(--slide-toggle-width);\n  }\n\n  .nile-slide-toggle {\n    display: inline-flex;\n    align-items: baseline;\n    justify-content:space-between;\n    width:100%;\n  }\n\n  .nile-slide-toggle--reverse{\n    flex-direction:row-reverse;\n  }\n\n  .nile-slide-toggle__switch {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-block;\n    width: 36px;\n    height: 20px;\n    line-height: 22px;\n  }\n\n  .nile-slide-toggle__switch--left{\n    margin-right: 8px;\n  }\n\n  .nile-slide-toggle__switch--right{\n    margin-left: 8px;\n  }\n\n  .nile-slide-toggle__label {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    font-family: var(--nile-font-family-serif);\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-dark-900);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  .nile-slide-toggle__sublabel {\n    font-family: var(--nile-font-family-serif);\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__label,\n  .nile-slide--disabled .nile-slide-toggle__sublabel{\n    color: var(--nile-colors-dark-500);\n  }\n\n  .nile-slide-toggle__switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .nile-slide-toggle__slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nile-slide-toggle-color-background-inactive);\n    transition: 0.4s;\n    border-radius: 34px;\n  }\n\n  .nile-slide-toggle__slider:active {\n    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n  }\n\n  .nile-slide-toggle__slider:focus {\n    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n  }\n\n  .nile-slide-toggle__slider:before {\n    position: absolute;\n    content: '';\n    height: 16px;\n    width: 16px;\n    bottom: 2px;\n    left: 2px;\n    background-color: var(--nile-slide-toggle-color-indicator);\n    transition: 0.4s;\n    border-radius: 50%;\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n    background-color: var(--nile-slide-toggle-color-background-active);\n  }\n\n  .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n    transform: translateX(16px);\n  }\n\n  .nile-slide-toggle__slider.round {\n    border-radius: 20px;\n  }\n\n  .nile-slide-toggle__slider.round:before {\n    border-radius: 50%;\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200);\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__switch {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  .nile-slide--disabled\n    .nile-slide-toggle__switch\n    input:checked\n    + .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200);\n  }\n`;\n"]}

package/dist/src/nile-slider/index.d.ts

@@ -0,0 +1 @@
+export { NileSlider } from './nile-slider';

package/dist/src/nile-slider/index.js

@@ -0,0 +1,2 @@
+export { NileSlider } from './nile-slider';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { NileSlider } from './nile-slider';"]}

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Slider CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,110 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Slider CSS
+ */
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100px;
+  }
+
+  .align-item-center {
+    align-items: center;
+  }
+
+  slot.span {
+    font-size: var(--nile-font-size-micro);
+    margin-top: 14px;
+  }
+
+  .range-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm);
+  }
+
+  .column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .label-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .label-container span {
+    margin: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none);
+    font-size: var(--nile-font-size-micro);
+  }
+
+  .range {
+    position: relative;
+    width: 228px;
+    height: 4px;
+    background-color: var(--nile-colors-white-base);
+	  border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-completed {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background-color: var(--nile-colors-primary-600);
+    top: 0px;
+    left: 0px;
+    z-index: 98;
+    border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-button {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    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 4px;
+  }
+
+  .range-button:hover, .range-button-two:hover {
+    cursor: grab;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button:active, .range-button-two:active {
+    cursor: grabbing;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button-two {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    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 4px;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-slider.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-slider.css.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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 { 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-white-base);\n\t  border-radius: var(--nile-radius-radius-3xl);\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 4px;\n  }\n\n  .range-button:hover, .range-button-two:hover {\n    cursor: grab;\n    background-color: var(--nile-colors-primary-700);\n  }\n\n  .range-button:active, .range-button-two:active {\n    cursor: grabbing;\n    background-color: var(--nile-colors-primary-700);\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 4px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,47 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import NileElement from '../internal/nile-element';
+import { CSSResultArray, TemplateResult } from 'lit';
+import { TooltipPosition } from './types/nile-slider.types';
+/**
+ * Nile slider component.
+ *
+ * @tag nile-slider
+ */
+export declare class NileSlider extends NileElement {
+    static get styles(): CSSResultArray;
+    value: number;
+    minValue: number;
+    maxValue: number;
+    rangeOneValue: number;
+    rangeTwoValue: number;
+    showLabel: boolean;
+    labelStart: string;
+    labelEnd: string;
+    rangeSlider: boolean;
+    labelPosition: string;
+    tooltipPosition: TooltipPosition;
+    buttonOne: HTMLElement;
+    buttonTwo: HTMLElement;
+    range: HTMLElement;
+    completed: HTMLElement;
+    activeThumb: 'one' | 'two' | null;
+    connectedCallback(): void;
+    firstUpdated(changedProps: Map<string, any>): void;
+    checkValueValidity(value: number, min: number, max: number): number;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: () => void;
+    onMouseClick: (e: MouseEvent) => void;
+    render(): TemplateResult;
+    disconnectedCallback(): void;
+}
+export default NileSlider;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-slider': NileSlider;
+    }
+}

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

@@ -0,0 +1,181 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { styles } from './nile-slider.css';
+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 { handleSingleSlider, handleRangeOne, handleRangeTwo, getHtmlElements, removeMoveListeners, valueToPercent, handleTwoThumbClick } from './utils/nile-slider.utils';
+/**
+ * Nile slider component.
+ *
+ * @tag nile-slider
+ */
+let NileSlider = class NileSlider extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.minValue = 0;
+        this.maxValue = 0;
+        this.rangeOneValue = this.minValue;
+        this.rangeTwoValue = this.maxValue;
+        this.showLabel = false;
+        this.labelStart = "";
+        this.labelEnd = "";
+        this.rangeSlider = false;
+        this.labelPosition = "top";
+        this.tooltipPosition = "top";
+        this.activeThumb = null;
+        this.onMouseMove = (e) => {
+            const rect = this.range.getBoundingClientRect();
+            if (!this.rangeSlider) {
+                handleSingleSlider(e, rect, this);
+            }
+            else {
+                if (this.activeThumb === 'one') {
+                    handleRangeOne(e, rect, this);
+                }
+                else if (this.activeThumb === 'two') {
+                    handleRangeTwo(e, rect, this);
+                }
+                const start = valueToPercent(this.rangeOneValue, this);
+                const end = valueToPercent(this.rangeTwoValue, this);
+                const left = Math.min(start, end);
+                const width = Math.abs(end - start);
+                if (this.rangeTwoValue >= this.rangeOneValue) {
+                    this.completed.style.left = `${left}%`;
+                    this.completed.style.width = `${width}%`;
+                }
+            }
+        };
+        this.onMouseUp = () => {
+            if (!this.rangeSlider)
+                this.emit("nile-change-end" /* NileSliderEvents.NILE_CHANGE_END */, { value: this.value });
+            else {
+                this.emit("nile-button-first-change-end" /* NileSliderEvents.NILE_BUTTON_FIRST_CHANGE_END */, { value: this.rangeOneValue });
+                this.emit("nile-button-last-change-end" /* NileSliderEvents.NILE_BUTTON_LAST_CHANGE_END */, { value: this.rangeTwoValue });
+            }
+            this.activeThumb = null;
+            removeMoveListeners(this);
+        };
+        this.onMouseClick = (e) => {
+            const rect = this.range.getBoundingClientRect();
+            const clickX = e.clientX - rect.left;
+            const percent = (clickX / rect.width) * 100;
+            const value = this.minValue + (percent / 100) * (this.maxValue - this.minValue);
+            if (!this.rangeSlider) {
+                handleSingleSlider(e, rect, this);
+            }
+            else {
+                handleTwoThumbClick(value, this);
+            }
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.emit("nile-init" /* NileSliderEvents.NILE_INIT */);
+    }
+    firstUpdated(changedProps) {
+        getHtmlElements(this);
+        if (!this.rangeSlider && changedProps.has('value')) {
+            this.value = this.checkValueValidity(this.value, this.minValue, this.maxValue);
+            const percent = valueToPercent(this.value, this);
+            this.buttonOne.style.left = `${percent}%`;
+            this.completed.style.width = `${percent}%`;
+        }
+        else if (this.rangeSlider && changedProps.has('rangeOneValue') || changedProps.has('rangeTwoValue')) {
+            this.rangeOneValue = this.checkValueValidity(this.rangeOneValue, this.minValue, this.maxValue);
+            this.rangeTwoValue = this.checkValueValidity(this.rangeTwoValue, this.minValue, this.maxValue);
+            const percentOne = valueToPercent(this.rangeOneValue, this);
+            const percentTwo = valueToPercent(this.rangeTwoValue, this);
+            if (this.buttonOne)
+                this.buttonOne.style.left = `${percentOne}%`;
+            if (this.buttonTwo)
+                this.buttonTwo.style.left = `${percentTwo}%`;
+            const left = Math.min(percentOne, percentTwo);
+            const width = Math.abs(percentTwo - percentOne);
+            this.completed.style.left = `${left}%`;
+            this.completed.style.width = `${width}%`;
+        }
+    }
+    checkValueValidity(value, min, max) {
+        return Math.max(min, Math.min(value, max));
+    }
+    render() {
+        return html `
+      <div part="base" class=${classMap({
+            container: true,
+            'align-item-center': !this.showLabel
+        })}>
+        <slot class="span" name="prefix"></slot>
+        <div part="range-container" class=${classMap({
+            'range-container': true,
+            'column-reverse': this.labelPosition === "bottom"
+        })}>
+          ${this.showLabel
+            ? lableContaier(this)
+            : html ``}
+          <div class="range" part="range">
+            <span class="range-completed" part="range-completed"></span>
+            ${this.rangeSlider
+            ? rangeSlider(this)
+            : singleSlider(this)}
+          </div>
+        </div>
+        <slot class="span" name="suffix"></slot>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emit("nile-destroy" /* NileSliderEvents.NILE_DESTROY */);
+    }
+};
+__decorate([
+    property({ type: Number })
+], NileSlider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], NileSlider.prototype, "minValue", void 0);
+__decorate([
+    property({ type: Number })
+], NileSlider.prototype, "maxValue", void 0);
+__decorate([
+    property({ type: Number })
+], NileSlider.prototype, "rangeOneValue", void 0);
+__decorate([
+    property({ type: Number })
+], NileSlider.prototype, "rangeTwoValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSlider.prototype, "showLabel", void 0);
+__decorate([
+    property({ type: String })
+], NileSlider.prototype, "labelStart", void 0);
+__decorate([
+    property({ type: String })
+], NileSlider.prototype, "labelEnd", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSlider.prototype, "rangeSlider", void 0);
+__decorate([
+    property({ type: String })
+], NileSlider.prototype, "labelPosition", void 0);
+__decorate([
+    property({ type: String })
+], NileSlider.prototype, "tooltipPosition", void 0);
+NileSlider = __decorate([
+    customElement('nile-slider')
+], NileSlider);
+export { NileSlider };
+export default NileSlider;
+//# sourceMappingURL=nile-slider.js.map

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

@@ -0,0 +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} 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 }) value: number = 0;\n  @property({ type: Number }) minValue: number = 0;\n  @property({ type: Number }) maxValue: number = 0;\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\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 && changedProps.has('rangeOneValue') || changedProps.has('rangeTwoValue')) {\n      this.rangeOneValue = this.checkValueValidity(this.rangeOneValue, this.minValue, this.maxValue);\n      this.rangeTwoValue = this.checkValueValidity(this.rangeTwoValue, this.minValue, this.maxValue);\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    return Math.max(min, Math.min(value, max));\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 onMouseClick = (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    } else {\n      handleTwoThumbClick(value, this);\n    }\n  };\n  \n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=${classMap({\n        container: true,\n        'align-item-center': !this.showLabel\n      })}>\n        <slot class=\"span\" name=\"prefix\"></slot>\n        <div part=\"range-container\" class=${classMap({\n          'range-container': true,\n          'column-reverse': this.labelPosition === \"bottom\"\n        })}>\n          ${this.showLabel\n            ? lableContaier(this)\n            : html``}\n          <div class=\"range\" part=\"range\">\n            <span class=\"range-completed\" part=\"range-completed\"></span>\n            ${this.rangeSlider\n              ? rangeSlider(this)\n              : singleSlider(this)}\n          </div>\n        </div>\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

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+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;

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

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+export const rangeSlider = (nileSlider) => {
+    return html `
+    <div>
+      <nile-tooltip
+        content=${nileSlider.rangeOneValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div id="range-one" class="range-button" part="range-button"></div>
+      </nile-tooltip>
+      <nile-tooltip
+        content=${nileSlider.rangeTwoValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div
+          id="range-two"
+          class="range-button-two"
+          part="range-button-two"
+        ></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+export const singleSlider = (nileSlider) => {
+    return html `
+    <div>
+      <nile-tooltip
+        content=${nileSlider.value}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div class="range-button" part="range-button"></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+export const lableContaier = (nileSlider) => {
+    return html `
+    <div part="label-container" class="label-container">
+      <span>${nileSlider.labelStart}</span>
+      <span>${nileSlider.labelEnd}</span>
+    </div>
+  `;
+};
+//# sourceMappingURL=nile-slider.template.js.map

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

@@ -0,0 +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;AAG3C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACpE,OAAO,IAAI,CAAA;;;kBAGK,UAAU,CAAC,aAAa;oBACtB,UAAU,CAAC,eAAe;;;;;kBAK5B,UAAU,CAAC,aAAa;oBACtB,UAAU,CAAC,eAAe;;;;;;;;;GAS3C,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;;;;;GAK3C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAsB,EAAkB,EAAE;IACtE,OAAO,IAAI,CAAA;;cAEC,UAAU,CAAC,UAAU;cACrB,UAAU,CAAC,QAAQ;;GAE9B,CAAC;AACJ,CAAC,CAAA","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport NileSlider from './nile-slider';\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 id=\"range-one\" class=\"range-button\" part=\"range-button\"></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        ></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 class=\"range-button\" part=\"range-button\"></div>\n      </nile-tooltip>\n    </div>\n  `;\n};\n\nexport const lableContaier = (nileSlider: NileSlider): TemplateResult => {\n  return html`\n    <div part=\"label-container\" class=\"label-container\">\n      <span>${nileSlider.labelStart}</span>\n      <span>${nileSlider.labelEnd}</span>\n    </div>\n  `;\n}"]}

package/dist/src/nile-slider/types/nile-slider.enums.d.ts

@@ -0,0 +1,10 @@
+export declare const enum NileSliderEvents {
+    NILE_INIT = "nile-init",
+    NILE_CHANGE = "nile-change",
+    NILE_CHANGE_END = "nile-change-end",
+    NILE_BUTTON_FIRST_CHANGE = "nile-button-first-change",
+    NILE_BUTTON_LAST_CHANGE = "nile-button-last-change",
+    NILE_BUTTON_FIRST_CHANGE_END = "nile-button-first-change-end",
+    NILE_BUTTON_LAST_CHANGE_END = "nile-button-last-change-end",
+    NILE_DESTROY = "nile-destroy"
+}

package/dist/src/nile-slider/types/nile-slider.enums.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nile-slider.enums.js.map

package/dist/src/nile-slider/types/nile-slider.enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-slider.enums.js","sourceRoot":"","sources":["../../../../src/nile-slider/types/nile-slider.enums.ts"],"names":[],"mappings":"","sourcesContent":["export const enum NileSliderEvents {\n  NILE_INIT = \"nile-init\",\n  NILE_CHANGE = \"nile-change\",\n  NILE_CHANGE_END = \"nile-change-end\",\n  NILE_BUTTON_FIRST_CHANGE = \"nile-button-first-change\",\n  NILE_BUTTON_LAST_CHANGE =  \"nile-button-last-change\",\n  NILE_BUTTON_FIRST_CHANGE_END = \"nile-button-first-change-end\",\n  NILE_BUTTON_LAST_CHANGE_END =  \"nile-button-last-change-end\",\n  NILE_DESTROY = \"nile-destroy\",\n}"]}

package/dist/src/nile-slider/types/nile-slider.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=nile-slider.type.js.map

package/dist/src/nile-slider/types/nile-slider.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-slider.type.js","sourceRoot":"","sources":["../../../../src/nile-slider/types/nile-slider.type.ts"],"names":[],"mappings":"","sourcesContent":[""]}

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

@@ -0,0 +1 @@
+export type TooltipPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';