@aquera/nile-elements 1.8.0 → 1.8.2

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

@@ -1,14 +1,33 @@
-import{css as r}from"lit";const a=r`
+import{css as r}from"lit";const e=r`
   :host {
     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 {
@@ -16,14 +35,14 @@ import{css as r}from"lit";const a=r`
   }
 
   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 {
@@ -36,18 +55,21 @@ import{css as r}from"lit";const a=r`
   }
 
   .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 {
@@ -58,49 +80,148 @@ import{css as r}from"lit";const a=r`
     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;
   }
-`;export{a as s};
+
+  :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{e as s};

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

@@ -1,4 +1,5 @@
-import{__decorate as t}from"tslib";import{s}from"./nile-slider.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{classMap as e}from"lit/directives/class-map.js";import{html as h}from"lit";import{property as a,customElement as l}from"lit/decorators.js";import{l as n,r,s as o}from"./nile-slider.template.esm.js";import{h as c,a as m,b as p,v as d,r as u,c as v,d as b,g as y}from"./utils/nile-slider.utils.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let g=class extends i{constructor(){super(...arguments),this.minValue=0,this.value=this.minValue,this.maxValue=100,this.rangeOneValue=this.minValue,this.rangeTwoValue=this.maxValue,this.showLabel=!1,this.labelStart="",this.labelEnd="",this.rangeSlider=!1,this.labelPosition="top",this.tooltipPosition="top",this.activeThumb=null,this.onMouseMove=t=>{const s=this.range.getBoundingClientRect();if(this.rangeSlider){"one"===this.activeThumb?m(t,s,this):"two"===this.activeThumb&&p(t,s,this);const i=d(this.rangeOneValue,this),e=d(this.rangeTwoValue,this),h=Math.min(i,e),a=Math.abs(e-i);this.rangeTwoValue>=this.rangeOneValue&&(this.completed.style.left=`${h}%`,this.completed.style.width=`${a}%`)}else c(t,s,this)},this.onMouseUp=()=>{this.rangeSlider?(this.emit("nile-button-first-change-end",{value:this.rangeOneValue}),this.emit("nile-button-last-change-end",{value:this.rangeTwoValue})):this.emit("nile-change-end",{value:this.value}),this.activeThumb=null,u(this)},this.onMouseDown=t=>{const s=this.range.getBoundingClientRect(),i=(t.clientX-s.left)/s.width*100,e=this.minValue+i/100*(this.maxValue-this.minValue);if(this.rangeSlider){b(e,this);const t=Math.abs(e-this.rangeOneValue),s=Math.abs(e-this.rangeTwoValue);this.activeThumb=t<=s?"one":"two",v(this)}else c(t,s,this),this.activeThumb="one",v(this)}}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit("nile-init"),this.rangeSlider&&this.checkRangeValidity()}firstUpdated(t){if(y(this),!this.rangeSlider&&t.has("value")){this.value=this.checkValueValidity(this.value,this.minValue,this.maxValue);const t=d(this.value,this);this.buttonOne.style.left=`${t}%`,this.completed.style.width=`${t}%`}else if(this.rangeSlider){const t=d(this.rangeOneValue,this),s=d(this.rangeTwoValue,this);this.buttonOne&&(this.buttonOne.style.left=`${t}%`),this.buttonTwo&&(this.buttonTwo.style.left=`${s}%`);const i=Math.min(t,s),e=Math.abs(s-t);this.completed.style.left=`${i}%`,this.completed.style.width=`${e}%`}}checkValueValidity(t,s,i){return i-s<=1?Math.max(s,Math.min(t,i)):Math.floor(Math.max(s,Math.min(t,i)))}checkRangeValidity(){this.rangeTwoValue>this.maxValue?this.rangeTwoValue=this.maxValue:this.rangeTwoValue<this.rangeOneValue&&(this.rangeTwoValue=this.rangeOneValue),this.rangeOneValue<this.minValue?this.rangeOneValue=this.minValue:this.rangeOneValue>this.rangeTwoValue&&(this.rangeOneValue=this.rangeTwoValue)}render(){const t=this.showLabel,s=t?"label-start label-end":void 0;return h`
+import{__decorate as t}from"tslib";import{s}from"./nile-slider.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{classMap as e}from"lit/directives/class-map.js";import{html as h}from"lit";import{property as a,customElement as l}from"lit/decorators.js";import{f as r,l as n,r as o,s as c,b as p}from"./nile-slider.template.esm.js";import{h as d,a as m,b as u,v,r as b,c as y,d as f,g}from"./utils/nile-slider.utils.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let $=class extends i{constructor(){super(...arguments),this.minValue=0,this.value=this.minValue,this.maxValue=100,this.rangeOneValue=this.minValue,this.rangeTwoValue=this.maxValue,this.showLabel=!1,this.labelStart="",this.labelEnd="",this.rangeSlider=!1,this.labelPosition="top",this.tooltipPosition="top",this.label="",this.disabled=!1,this.error=!1,this.valueLabel="tooltip",this.activeThumb=null,this.onMouseMove=t=>{if(this.disabled)return;const s=this.range.getBoundingClientRect();if(this.rangeSlider){"one"===this.activeThumb?m(t,s,this):"two"===this.activeThumb&&u(t,s,this);const i=v(this.rangeOneValue,this),e=v(this.rangeTwoValue,this),h=Math.min(i,e),a=Math.abs(e-i);this.rangeTwoValue>=this.rangeOneValue&&(this.completed.style.left=`${h}%`,this.completed.style.width=`${a}%`)}else d(t,s,this)},this.onMouseUp=()=>{this.rangeSlider?(this.emit("nile-button-first-change-end",{value:this.rangeOneValue}),this.emit("nile-button-last-change-end",{value:this.rangeTwoValue})):this.emit("nile-change-end",{value:this.value}),this.activeThumb=null,b(this)},this.onMouseDown=t=>{if(this.disabled)return;const s=this.range.getBoundingClientRect(),i=(t.clientX-s.left)/s.width*100,e=this.minValue+i/100*(this.maxValue-this.minValue);if(this.rangeSlider){f(e,this);const t=Math.abs(e-this.rangeOneValue),s=Math.abs(e-this.rangeTwoValue);this.activeThumb=t<=s?"one":"two",y(this)}else d(t,s,this),this.activeThumb="one",y(this)}}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit("nile-init"),this.rangeSlider&&this.checkRangeValidity()}firstUpdated(t){if(g(this),!this.rangeSlider&&t.has("value")){this.value=this.checkValueValidity(this.value,this.minValue,this.maxValue);const t=v(this.value,this);this.buttonOne.style.left=`${t}%`,this.completed.style.width=`${t}%`}else if(this.rangeSlider){const t=v(this.rangeOneValue,this),s=v(this.rangeTwoValue,this);this.buttonOne&&(this.buttonOne.style.left=`${t}%`),this.buttonTwo&&(this.buttonTwo.style.left=`${s}%`);const i=Math.min(t,s),e=Math.abs(s-t);this.completed.style.left=`${i}%`,this.completed.style.width=`${e}%`}}checkValueValidity(t,s,i){return i-s<=1?Math.max(s,Math.min(t,i)):Math.floor(Math.max(s,Math.min(t,i)))}checkRangeValidity(){this.rangeTwoValue>this.maxValue?this.rangeTwoValue=this.maxValue:this.rangeTwoValue<this.rangeOneValue&&(this.rangeTwoValue=this.rangeOneValue),this.rangeOneValue<this.minValue?this.rangeOneValue=this.minValue:this.rangeOneValue>this.rangeTwoValue&&(this.rangeOneValue=this.rangeTwoValue)}render(){const t=this.showLabel,s=t?"label-start label-end":void 0;return h`
+      ${this.label?r(this):h``}
       <div
         part="base"
         class=${e({container:!0,"align-item-center":!t})}
@@ -18,10 +19,11 @@ import{__decorate as t}from"tslib";import{s}from"./nile-slider.css.esm.js";impor
             aria-labelledby=${s}
           >
             <span class="range-completed" part="range-completed"></span>
-            ${this.rangeSlider?r(this):o(this)}
+            ${this.rangeSlider?o(this):c(this)}
+            ${"bottom"===this.valueLabel?p(this):h``}
           </div>
         </div>
   
         <slot class="span" name="suffix"></slot>
       </div>
-    `}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}};t([a({type:Number})],g.prototype,"minValue",void 0),t([a({type:Number})],g.prototype,"value",void 0),t([a({type:Number})],g.prototype,"maxValue",void 0),t([a({type:Number})],g.prototype,"rangeOneValue",void 0),t([a({type:Number})],g.prototype,"rangeTwoValue",void 0),t([a({type:Boolean})],g.prototype,"showLabel",void 0),t([a({type:String})],g.prototype,"labelStart",void 0),t([a({type:String})],g.prototype,"labelEnd",void 0),t([a({type:Boolean})],g.prototype,"rangeSlider",void 0),t([a({type:String})],g.prototype,"labelPosition",void 0),t([a({type:String})],g.prototype,"tooltipPosition",void 0),g=t([l("nile-slider")],g);export{g as N};
+    `}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}};t([a({type:Number})],$.prototype,"minValue",void 0),t([a({type:Number})],$.prototype,"value",void 0),t([a({type:Number})],$.prototype,"maxValue",void 0),t([a({type:Number})],$.prototype,"rangeOneValue",void 0),t([a({type:Number})],$.prototype,"rangeTwoValue",void 0),t([a({type:Boolean})],$.prototype,"showLabel",void 0),t([a({type:String})],$.prototype,"labelStart",void 0),t([a({type:String})],$.prototype,"labelEnd",void 0),t([a({type:Boolean})],$.prototype,"rangeSlider",void 0),t([a({type:String})],$.prototype,"labelPosition",void 0),t([a({type:String})],$.prototype,"tooltipPosition",void 0),t([a({type:String})],$.prototype,"label",void 0),t([a({type:Boolean,reflect:!0})],$.prototype,"disabled",void 0),t([a({type:Boolean,reflect:!0})],$.prototype,"error",void 0),t([a({type:String,reflect:!0})],$.prototype,"valueLabel",void 0),$=t([l("nile-slider")],$);export{$ as N};

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

@@ -1,2 +1,2 @@
-System.register(["lit","lit/directives/class-map.js"],function(_export,_context){"use strict";var a,e,_templateObject,_templateObject2,_templateObject3,i,t,l;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.html;},function(_litDirectivesClassMapJs){e=_litDirectivesClassMapJs.classMap;}],execute:function execute(){_export("r",i=function i(e){return a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n    <div>\n      <nile-tooltip\n        content=","\n        placement=","\n      >\n        <div \n          id=\"range-one\" \n          class=\"range-button\"\n          part=\"range-button\"\n          role=\"slider\"\n          tabindex=\"0\"\n          aria-valuemin=","\n          aria-valuemax=","\n          aria-valuenow=","\n          aria-label=\"Minimum value\"\n        ></div>\n      </nile-tooltip>\n      <nile-tooltip\n        content=","\n        placement=","\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=","\n          aria-valuemax=","\n          aria-valuenow=","\n          aria-label=\"Maximum value\"\n        ></div>\n      </nile-tooltip>\n    </div>\n  "])),e.rangeOneValue,e.tooltipPosition,e.minValue,e.maxValue,e.rangeOneValue,e.rangeTwoValue,e.tooltipPosition,e.minValue,e.maxValue,e.rangeTwoValue);}),_export("s",t=function t(i){return a(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    <div>\n      <nile-tooltip\n        content=","\n        placement=","\n      >\n        <div \n          class="," \n          part=\"range-button\"\n          role=\"slider\"\n          tabindex=\"0\"\n          aria-valuemin=","\n          aria-valuemax=","\n          aria-valuenow=","\n          aria-label=","\n        ></div>\n      </nile-tooltip>\n    </div>\n  "])),i.value,i.tooltipPosition,e({"range-button":!0,"range-button-active":"one"===i.activeThumb}),i.minValue,i.maxValue,i.value,i.ariaLabel||"Slider value");}),_export("l",l=function l(e){return a(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n    <div part=\"label-container\" class=\"label-container\">\n      <span id=\"label-start\">","</span>\n      <span id=\"label-end\">","</span>\n    </div>\n  "])),e.labelStart,e.labelEnd);});}};});
+System.register(["lit","lit/directives/class-map.js","./utils/nile-slider.utils.cjs.js"],function(_export,_context){"use strict";var a,l,e,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,i,t,n,s,r,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.html;},function(_litDirectivesClassMapJs){l=_litDirectivesClassMapJs.classMap;},function(_utilsNileSliderUtilsCjsJs){e=_utilsNileSliderUtilsCjsJs.v;}],execute:function execute(){i=function i(a){return a.disabled||"tooltip"!==a.valueLabel;},_export("r",t=function t(l){return a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n    <div>\n      <nile-tooltip\n        content=","\n        placement=","\n        ?disabled=","\n      >\n        <div \n          id=\"range-one\" \n          class=\"range-button\"\n          part=\"range-button\"\n          role=\"slider\"\n          tabindex=\"0\"\n          aria-valuemin=","\n          aria-valuemax=","\n          aria-valuenow=","\n          aria-label=\"Minimum value\"\n        ></div>\n      </nile-tooltip>\n      <nile-tooltip\n        content=","\n        placement=","\n        ?disabled=","\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=","\n          aria-valuemax=","\n          aria-valuenow=","\n          aria-label=\"Maximum value\"\n        ></div>\n      </nile-tooltip>\n    </div>\n  "])),l.rangeOneValue,l.tooltipPosition,i(l),l.minValue,l.maxValue,l.rangeOneValue,l.rangeTwoValue,l.tooltipPosition,i(l),l.minValue,l.maxValue,l.rangeTwoValue);}),_export("s",n=function n(e){return a(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    <div>\n      <nile-tooltip\n        content=","\n        placement=","\n        ?disabled=","\n      >\n        <div \n          class="," \n          part=\"range-button\"\n          role=\"slider\"\n          tabindex=\"0\"\n          aria-valuemin=","\n          aria-valuemax=","\n          aria-valuenow=","\n          aria-label=","\n        ></div>\n      </nile-tooltip>\n    </div>\n  "])),e.value,e.tooltipPosition,i(e),l({"range-button":!0,"range-button-active":"one"===e.activeThumb}),e.minValue,e.maxValue,e.value,e.ariaLabel||e.label||"Slider value");}),_export("l",s=function s(l){return a(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n    <div part=\"label-container\" class=\"label-container\">\n      <span id=\"label-start\">","</span>\n      <span id=\"label-end\">","</span>\n    </div>\n  "])),l.labelStart,l.labelEnd);}),_export("f",r=function r(l){return a(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n    <div part=\"field-header\" class=\"field-header\">\n      <label id=\"field-label\" part=\"field-label\" class=\"field-label\">\n        ","\n      </label>\n    </div>\n  "])),l.label);}),_export("b",o=function o(l){return l.rangeSlider?a(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n    <span\n      part=\"value-label\"\n      class=\"value-label\"\n      style=\"left: ","%\"\n    >","</span>\n    <span\n      part=\"value-label\"\n      class=\"value-label\"\n      style=\"left: ","%\"\n    >","</span>\n  "])),e(l.rangeOneValue,l),l.rangeOneValue,e(l.rangeTwoValue,l),l.rangeTwoValue):a(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n      <span\n        part=\"value-label\"\n        class=\"value-label\"\n        style=\"left: ","%\"\n      >","</span>\n    "])),e(l.value,l),l.value);});}};});
 //# sourceMappingURL=nile-slider.template.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-slider.template.cjs.js","sources":["../../../src/nile-slider/nile-slider.template.ts"],"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};"],"names":["rangeSlider","nileSlider","html","_templateObject","_taggedTemplateLiteral","rangeOneValue","tooltipPosition","minValue","maxValue","rangeTwoValue","singleSlider","_templateObject2","value","classMap","activeThumb","ariaLabel","lableContaier","_templateObject3","labelStart","labelEnd"],"mappings":"ocAIaA,CAAAA,CAAeC,QAAfD,CAAAA,CAAAA,CAAeC,SACnBC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,m1BAGKH,CAAWI,CAAAA,aAAAA,CACTJ,CAAWK,CAAAA,eAAAA,CAQLL,CAAWM,CAAAA,QAAAA,CACXN,CAAWO,CAAAA,QAAAA,CACXP,CAAWI,CAAAA,aAAAA,CAKnBJ,CAAWQ,CAAAA,aAAAA,CACTR,CAAWK,CAAAA,eAAAA,CAQLL,CAAWM,CAAAA,QAAAA,CACXN,CAAWO,CAAAA,QAAAA,CACXP,CAAWQ,CAAAA,aAAAA,GAQxBC,EAAAA,OAAAA,KAAAA,CAAAA,CAAgBT,QAAhBS,CAAAA,CAAAA,CAAgBT,SACpBC,CAAAA,CAAI,CAAAS,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,iYAGKH,CAAWW,CAAAA,KAAAA,CACTX,CAAWK,CAAAA,eAAAA,CAGbO,CAAAA,CAAS,CACf,cAAA,CAAA,CAAgB,CAChB,CAAA,qBAAA,CAAkD,QAA3BZ,CAAWa,CAAAA,WAAAA,CAAAA,CAAAA,CAKpBb,CAAWM,CAAAA,QAAAA,CACXN,CAAWO,CAAAA,QAAAA,CACXP,CAAWW,CAAAA,KAAAA,CACdX,CAAAA,CAAWc,SAAa,EAAA,cAAA,GAQlCC,EAAAA,OAAAA,KAAAA,CAAAA,CAAiBf,QAAjBe,CAAAA,CAAAA,CAAiBf,SACrBC,CAAAA,CAAI,CAAAe,gBAAA,GAAAA,gBAAA,CAAAb,sBAAA,0KAEkBH,CAAWiB,CAAAA,UAAAA,CACbjB,CAAWkB,CAAAA,QAAAA"}
+{"version":3,"file":"nile-slider.template.cjs.js","sources":["../../../src/nile-slider/nile-slider.template.ts"],"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"],"names":["tooltipDisabled","nileSlider","disabled","valueLabel","rangeSlider","html","_templateObject","_taggedTemplateLiteral","rangeOneValue","tooltipPosition","minValue","maxValue","rangeTwoValue","singleSlider","_templateObject2","value","classMap","activeThumb","ariaLabel","label","lableContaier","_templateObject3","labelStart","labelEnd","fieldHeader","_templateObject4","bottomValueLabels","_templateObject5","valueToPercent","_templateObject6"],"mappings":"4lBAKMA,CAAAA,CAAmBC,QAAnBD,CAAAA,CAAAA,CAAmBC,CACvBA,QAAAA,CAAAA,CAAAA,CAAWC,UAAsC,SAA1BD,GAAAA,CAAAA,CAAWE,UAEvBC,GAAAA,OAAAA,KAAAA,CAAAA,CAAeH,QAAfG,CAAAA,CAAAA,CAAeH,SACnBI,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,i4BAGKN,CAAWO,CAAAA,aAAAA,CACTP,CAAWQ,CAAAA,eAAAA,CACXT,CAAgBC,CAAAA,CAAAA,CAAAA,CAQVA,CAAWS,CAAAA,QAAAA,CACXT,CAAWU,CAAAA,QAAAA,CACXV,CAAWO,CAAAA,aAAAA,CAKnBP,CAAWW,CAAAA,aAAAA,CACTX,CAAWQ,CAAAA,eAAAA,CACXT,CAAgBC,CAAAA,CAAAA,CAAAA,CAQVA,CAAWS,CAAAA,QAAAA,CACXT,CAAWU,CAAAA,QAAAA,CACXV,CAAWW,CAAAA,aAAAA,GAQxBC,EAAAA,OAAAA,KAAAA,CAAAA,CAAgBZ,QAAhBY,CAAAA,CAAAA,CAAgBZ,SACpBI,CAAAA,CAAI,CAAAS,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,wZAGKN,CAAWc,CAAAA,KAAAA,CACTd,CAAWQ,CAAAA,eAAAA,CACXT,CAAgBC,CAAAA,CAAAA,CAAAA,CAGlBe,CAAAA,CAAS,CACf,cAAA,CAAA,CAAgB,CAChB,CAAA,qBAAA,CAAkD,QAA3Bf,CAAWgB,CAAAA,WAAAA,CAAAA,CAAAA,CAKpBhB,CAAWS,CAAAA,QAAAA,CACXT,CAAWU,CAAAA,QAAAA,CACXV,CAAWc,CAAAA,KAAAA,CACdd,CAAWiB,CAAAA,SAAAA,EAAajB,EAAWkB,KAAS,EAAA,cAAA,GAQtDC,EAAAA,OAAAA,KAAAA,CAAAA,CAAiBnB,QAAjBmB,CAAAA,CAAAA,CAAiBnB,SACrBI,CAAAA,CAAI,CAAAgB,gBAAA,GAAAA,gBAAA,CAAAd,sBAAA,0KAEkBN,CAAWqB,CAAAA,UAAAA,CACbrB,CAAWsB,CAAAA,QAAAA,GAM3BC,EAAAA,OAAAA,KAAAA,CAAAA,CAAevB,QAAfuB,CAAAA,CAAAA,CAAevB,SACnBI,CAAAA,CAAI,CAAAoB,gBAAA,GAAAA,gBAAA,CAAAlB,sBAAA,0LAGHN,CAAWkB,CAAAA,KAAAA,iBAORO,CAAqBzB,CAAAA,QAArByB,CAAAA,CAAqBzB,CAAAA,CAAAA,QAC3BA,CAAAA,CAAWG,CAAAA,WAAAA,CASTC,CAAI,CAAAsB,gBAAA,GAAAA,gBAAA,CAAApB,sBAAA,8OAIQqB,CAAAA,CAAe3B,EAAWO,aAAeP,CAAAA,CAAAA,CAAAA,CACvDA,CAAWO,CAAAA,aAAAA,CAIGoB,CAAAA,CAAe3B,EAAWW,aAAeX,CAAAA,CAAAA,CAAAA,CACvDA,CAAWW,CAAAA,aAAAA,EAlBPP,CAAI,CAAAwB,gBAAA,GAAAA,gBAAA,CAAAtB,sBAAA,yIAIQqB,CAAAA,CAAe3B,EAAWc,KAAOd,CAAAA,CAAAA,CAAAA,CAC/CA,CAAWc,CAAAA,KAAAA"}

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

@@ -1,8 +1,9 @@
-import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js";const i=e=>a`
+import{html as a}from"lit";import{classMap as l}from"lit/directives/class-map.js";import{v as e}from"./utils/nile-slider.utils.esm.js";const i=a=>a.disabled||"tooltip"!==a.valueLabel,t=l=>a`
     <div>
       <nile-tooltip
-        content=${e.rangeOneValue}
-        placement=${e.tooltipPosition}
+        content=${l.rangeOneValue}
+        placement=${l.tooltipPosition}
+        ?disabled=${i(l)}
       >
         <div 
           id="range-one" 
@@ -10,15 +11,16 @@ import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js
           part="range-button"
           role="slider"
           tabindex="0"
-          aria-valuemin=${e.minValue}
-          aria-valuemax=${e.maxValue}
-          aria-valuenow=${e.rangeOneValue}
+          aria-valuemin=${l.minValue}
+          aria-valuemax=${l.maxValue}
+          aria-valuenow=${l.rangeOneValue}
           aria-label="Minimum value"
         ></div>
       </nile-tooltip>
       <nile-tooltip
-        content=${e.rangeTwoValue}
-        placement=${e.tooltipPosition}
+        content=${l.rangeTwoValue}
+        placement=${l.tooltipPosition}
+        ?disabled=${i(l)}
       >
         <div
           id="range-two"
@@ -26,34 +28,58 @@ import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js
           part="range-button-two"
           role="slider"
           tabindex="0"
-          aria-valuemin=${e.minValue}
-          aria-valuemax=${e.maxValue}
-          aria-valuenow=${e.rangeTwoValue}
+          aria-valuemin=${l.minValue}
+          aria-valuemax=${l.maxValue}
+          aria-valuenow=${l.rangeTwoValue}
           aria-label="Maximum value"
         ></div>
       </nile-tooltip>
     </div>
-  `,t=i=>a`
+  `,n=e=>a`
     <div>
       <nile-tooltip
-        content=${i.value}
-        placement=${i.tooltipPosition}
+        content=${e.value}
+        placement=${e.tooltipPosition}
+        ?disabled=${i(e)}
       >
         <div 
-          class=${e({"range-button":!0,"range-button-active":"one"===i.activeThumb})} 
+          class=${l({"range-button":!0,"range-button-active":"one"===e.activeThumb})} 
           part="range-button"
           role="slider"
           tabindex="0"
-          aria-valuemin=${i.minValue}
-          aria-valuemax=${i.maxValue}
-          aria-valuenow=${i.value}
-          aria-label=${i.ariaLabel||"Slider value"}
+          aria-valuemin=${e.minValue}
+          aria-valuemax=${e.maxValue}
+          aria-valuenow=${e.value}
+          aria-label=${e.ariaLabel||e.label||"Slider value"}
         ></div>
       </nile-tooltip>
     </div>
-  `,l=e=>a`
+  `,s=l=>a`
     <div part="label-container" class="label-container">
-      <span id="label-start">${e.labelStart}</span>
-      <span id="label-end">${e.labelEnd}</span>
+      <span id="label-start">${l.labelStart}</span>
+      <span id="label-end">${l.labelEnd}</span>
+    </div>
+  `,r=l=>a`
+    <div part="field-header" class="field-header">
+      <label id="field-label" part="field-label" class="field-label">
+        ${l.label}
+      </label>
     </div>
-  `;export{l,i as r,t as s};
+  `,o=l=>l.rangeSlider?a`
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${e(l.rangeOneValue,l)}%"
+    >${l.rangeOneValue}</span>
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${e(l.rangeTwoValue,l)}%"
+    >${l.rangeTwoValue}</span>
+  `:a`
+      <span
+        part="value-label"
+        class="value-label"
+        style="left: ${e(l.value,l)}%"
+      >${l.value}</span>
+    `;export{o as b,r as f,s as l,t as r,n as s};

package/dist/nile-slider/utils/nile-slider.utils.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";var t,a,n,o,e,s,u,h,c,l;return{setters:[],execute:function execute(){t=function t(_t,a){return Math.max(0,Math.min(a,_t.width))/_t.width*100;},a=function a(t,_a){var n=_a.minValue+t/100*(_a.maxValue-_a.minValue);return _a.maxValue-_a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n);},_export("v",n=function n(t,a){return(t-a.minValue)/(a.maxValue-a.minValue)*100;}),_export("h",o=function o(n,_o,e){var s=n.clientX-_o.left,u=t(_o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left="".concat(u,"%"),e.completed.style.width="".concat(u,"%");}),_export("a",e=function e(n,o,_e){var s=n.clientX-o.left,u=t(o,s);_e.rangeOneValue=a(u,_e),_e.rangeOneValue=Math.min(_e.rangeOneValue,_e.rangeTwoValue),_e.emit("nile-button-first-change",{value:_e.rangeOneValue}),_e.rangeTwoValue>_e.rangeOneValue&&(_e.buttonOne.style.left="".concat(u,"%"));}),_export("b",s=function s(n,o,e){var s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left="".concat(u,"%"));}),_export("g",u=function u(t){var _t$buttonOne,_t$buttonTwo;t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),(_t$buttonOne=t.buttonOne)!==null&&_t$buttonOne!==void 0&&_t$buttonOne.addEventListener("mousedown",function(){t.activeThumb="one",h(t);}),(_t$buttonTwo=t.buttonTwo)===null||_t$buttonTwo===void 0?void 0:_t$buttonTwo.addEventListener("mousedown",function(){t.activeThumb="two",h(t);});}),_export("c",h=function h(t){window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp);}),_export("r",c=function c(t){window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp);}),_export("d",l=function l(t,a){if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){var _n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(_n,a.minValue,a.maxValue);}else{var _n2=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(_n2,a.minValue,a.maxValue);}var o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left="".concat(o,"%"),a.buttonTwo.style.left="".concat(e,"%");var s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left="".concat(s,"%"),a.completed.style.width="".concat(u,"%"),a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue});});}};});
+System.register([],function(_export,_context){"use strict";var t,a,n,o,e,s,u,h,c,l;return{setters:[],execute:function execute(){t=function t(_t,a){return Math.max(0,Math.min(a,_t.width))/_t.width*100;},a=function a(t,_a){var n=_a.minValue+t/100*(_a.maxValue-_a.minValue);return _a.maxValue-_a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n);},_export("v",n=function n(t,a){return(t-a.minValue)/(a.maxValue-a.minValue)*100;}),_export("h",o=function o(n,_o,e){var s=n.clientX-_o.left,u=t(_o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left="".concat(u,"%"),e.completed.style.width="".concat(u,"%");}),_export("a",e=function e(n,o,_e){var s=n.clientX-o.left,u=t(o,s);_e.rangeOneValue=a(u,_e),_e.rangeOneValue=Math.min(_e.rangeOneValue,_e.rangeTwoValue),_e.emit("nile-button-first-change",{value:_e.rangeOneValue}),_e.rangeTwoValue>_e.rangeOneValue&&(_e.buttonOne.style.left="".concat(u,"%"));}),_export("b",s=function s(n,o,e){var s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left="".concat(u,"%"));}),_export("g",u=function u(t){var _t$buttonOne,_t$buttonTwo;t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),(_t$buttonOne=t.buttonOne)!==null&&_t$buttonOne!==void 0&&_t$buttonOne.addEventListener("mousedown",function(){t.disabled||(t.activeThumb="one",h(t));}),(_t$buttonTwo=t.buttonTwo)===null||_t$buttonTwo===void 0?void 0:_t$buttonTwo.addEventListener("mousedown",function(){t.disabled||(t.activeThumb="two",h(t));});}),_export("c",h=function h(t){window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp);}),_export("r",c=function c(t){window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp);}),_export("d",l=function l(t,a){if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){var _n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(_n,a.minValue,a.maxValue);}else{var _n2=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(_n2,a.minValue,a.maxValue);}var o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left="".concat(o,"%"),a.buttonTwo.style.left="".concat(e,"%");var s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left="".concat(s,"%"),a.completed.style.width="".concat(u,"%"),a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue});});}};});
 //# sourceMappingURL=nile-slider.utils.cjs.js.map

package/dist/nile-slider/utils/nile-slider.utils.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-slider.utils.cjs.js","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"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"],"names":["getClampedPercent","rect","x","Math","max","min","width","percentToValue","percent","nileSlider","value","minValue","maxValue","parseFloat","toFixed","floor","_export","valueToPercent","handleSingleSlider","e","clientX","left","emit","buttonOne","style","completed","concat","handleRangeOne","rangeOneValue","rangeTwoValue","handleRangeTwo","buttonTwo","getHtmlElements","range","renderRoot","querySelector","addEventListener","onMouseDown","activeThumb","addMoveListeners","window","onMouseMove","onMouseUp","removeMoveListeners","removeEventListener","handleTwoThumbClick","abs","clamped","checkValueValidity","percentOne","percentTwo"],"mappings":"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"}
+{"version":3,"file":"nile-slider.utils.cjs.js","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"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"],"names":["getClampedPercent","rect","x","Math","max","min","width","percentToValue","percent","nileSlider","value","minValue","maxValue","parseFloat","toFixed","floor","_export","valueToPercent","n","handleSingleSlider","e","clientX","left","emit","buttonOne","style","completed","handleRangeOne","rangeOneValue","rangeTwoValue","handleRangeTwo","s","buttonTwo","concat","getHtmlElements","range","renderRoot","querySelector","addEventListener","onMouseDown","disabled","activeThumb","addMoveListeners","window","onMouseMove","onMouseUp","removeMoveListeners","removeEventListener","handleTwoThumbClick","l","abs","clamped","checkValueValidity","percentOne","percentTwo"],"mappings":"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"}

package/dist/nile-slider/utils/nile-slider.utils.esm.js

@@ -1 +1 @@
-const t=(t,a)=>Math.max(0,Math.min(a,t.width))/t.width*100,a=(t,a)=>{const n=a.minValue+t/100*(a.maxValue-a.minValue);return a.maxValue-a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n)},n=(t,a)=>(t-a.minValue)/(a.maxValue-a.minValue)*100,o=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left=`${u}%`,e.completed.style.width=`${u}%`},e=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeOneValue=a(u,e),e.rangeOneValue=Math.min(e.rangeOneValue,e.rangeTwoValue),e.emit("nile-button-first-change",{value:e.rangeOneValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonOne.style.left=`${u}%`)},s=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left=`${u}%`)},u=t=>{t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),t.buttonOne?.addEventListener("mousedown",(()=>{t.activeThumb="one",h(t)})),t.buttonTwo?.addEventListener("mousedown",(()=>{t.activeThumb="two",h(t)}))},h=t=>{window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp)},c=t=>{window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp)},l=(t,a)=>{if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){const n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(n,a.minValue,a.maxValue)}else{const n=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(n,a.minValue,a.maxValue)}const o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left=`${o}%`,a.buttonTwo.style.left=`${e}%`;const s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left=`${s}%`,a.completed.style.width=`${u}%`,a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue})};export{e as a,s as b,h as c,l as d,u as g,o as h,c as r,n as v};
+const t=(t,a)=>Math.max(0,Math.min(a,t.width))/t.width*100,a=(t,a)=>{const n=a.minValue+t/100*(a.maxValue-a.minValue);return a.maxValue-a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n)},n=(t,a)=>(t-a.minValue)/(a.maxValue-a.minValue)*100,o=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left=`${u}%`,e.completed.style.width=`${u}%`},e=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeOneValue=a(u,e),e.rangeOneValue=Math.min(e.rangeOneValue,e.rangeTwoValue),e.emit("nile-button-first-change",{value:e.rangeOneValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonOne.style.left=`${u}%`)},s=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left=`${u}%`)},u=t=>{t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),t.buttonOne?.addEventListener("mousedown",(()=>{t.disabled||(t.activeThumb="one",h(t))})),t.buttonTwo?.addEventListener("mousedown",(()=>{t.disabled||(t.activeThumb="two",h(t))}))},h=t=>{window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp)},c=t=>{window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp)},l=(t,a)=>{if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){const n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(n,a.minValue,a.maxValue)}else{const n=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(n,a.minValue,a.maxValue)}const o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left=`${o}%`,a.buttonTwo.style.left=`${e}%`;const s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left=`${s}%`,a.completed.style.width=`${u}%`,a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue})};export{e as a,s as b,h as c,l as d,u as g,o as h,c as r,n as v};

package/dist/src/nile-context-menu/nile-context-menu.d.ts

@@ -24,6 +24,7 @@ export interface NileContextMenuItemData {
     iconMethod?: 'fill' | 'stroke' | string;
     iconColor?: string;
     submenu?: NileContextMenuData[];
+    open?: boolean;
 }
 export interface NileContextMenuGroupData {
     type: 'group';
@@ -61,11 +62,13 @@ export declare class NileContextMenu extends NileElement {
     trigger: NileContextMenuTrigger;
     skipOn: string;
     zIndex: number;
+    open: boolean;
     items: NileContextMenuData[];
     private get _isDataMode();
     private _floatingPanel?;
     private _items;
     private _open;
+    private _pinned;
     protected _openContext: NileContextMenuOpenContext | null;
     protected _targetEl: Element | null;
     private _previouslyFocused;
@@ -78,6 +81,10 @@ export declare class NileContextMenu extends NileElement {
     private _wasDataMode;
     connectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /** Open anchored to the `for` target (used when the `open` property is set). */
+    private _openAtTarget;
+    /** Re-anchor a pinned menu to its target after layout changes. */
+    private _onPinnedReposition;
     private _resolveTarget;
     get targetElement(): Element | null;
     private _attachTriggers;
@@ -95,7 +102,7 @@ export declare class NileContextMenu extends NileElement {
     get menuItems(): readonly NileContextMenuItem[];
     getItemByValue(value: string): NileContextMenuItem | undefined;
     get isOpen(): boolean;
-    open(options: NileContextMenuOpenOptions): void;
+    openAt(options: NileContextMenuOpenOptions): void;
     close(reason?: NileContextMenuCloseReason): void;
     private _enabledItems;
     private _getFocusedItem;
@@ -110,6 +117,8 @@ export declare class NileContextMenu extends NileElement {
     private _onDescendantSelect;
     private _stop;
     private _onPanelShown;
+    /** Open the submenu of every top-level item carrying the `open` attribute. */
+    private _openPinnedSubmenus;
     private _onMenuMouseOver;
     private _onMenuClick;
     private _selectItem;