@aquera/nile-elements 0.1.57 → 0.1.58-beta-1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/demo/index.html +10 -26
- package/demo/index.js +83 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +276 -281
- package/dist/internal/resizable-table-helper.cjs.js +2 -0
- package/dist/internal/resizable-table-helper.cjs.js.map +1 -0
- package/dist/internal/resizable-table-helper.esm.js +1 -0
- package/dist/internal/resizable-table-styles.cjs.js +2 -0
- package/dist/internal/resizable-table-styles.cjs.js.map +1 -0
- package/dist/internal/resizable-table-styles.esm.js +120 -0
- package/dist/nile-table-body/index.cjs.js +1 -1
- package/dist/nile-table-body/index.esm.js +1 -1
- package/dist/nile-table-body/nile-table-body.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.css.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.css.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.css.esm.js +5 -2
- package/dist/nile-table-body/nile-table-body.esm.js +3 -2
- package/dist/nile-table-cell-item/index.cjs.js +1 -1
- package/dist/nile-table-cell-item/index.esm.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.esm.js +21 -3
- package/dist/nile-table-cell-item/nile-table-cell-item.esm.js +8 -3
- package/dist/nile-table-header-item/index.cjs.js +1 -1
- package/dist/nile-table-header-item/index.esm.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.esm.js +8 -2
- package/dist/nile-table-header-item/nile-table-header-item.esm.js +64 -32
- package/dist/src/index.d.ts +0 -1
- package/dist/src/index.js +0 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/internal/resizable-table-helper.d.ts +59 -0
- package/dist/src/internal/resizable-table-helper.js +111 -0
- package/dist/src/internal/resizable-table-helper.js.map +1 -0
- package/dist/src/internal/resizable-table-styles.d.ts +16 -0
- package/dist/src/internal/resizable-table-styles.js +137 -0
- package/dist/src/internal/resizable-table-styles.js.map +1 -0
- package/dist/src/nile-table-body/nile-table-body.css.js +4 -0
- package/dist/src/nile-table-body/nile-table-body.css.js.map +1 -1
- package/dist/src/nile-table-body/nile-table-body.d.ts +2 -0
- package/dist/src/nile-table-body/nile-table-body.js +11 -0
- package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js +20 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.d.ts +3 -0
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js +27 -8
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js +7 -0
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.d.ts +3 -0
- package/dist/src/nile-table-header-item/nile-table-header-item.js +86 -35
- package/dist/src/nile-table-header-item/nile-table-header-item.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/index.ts +1 -2
- package/src/internal/resizable-table-helper.ts +151 -0
- package/src/internal/resizable-table-styles.ts +144 -0
- package/src/nile-table-body/nile-table-body.css.ts +4 -0
- package/src/nile-table-body/nile-table-body.ts +10 -0
- package/src/nile-table-cell-item/nile-table-cell-item.css.ts +20 -1
- package/src/nile-table-cell-item/nile-table-cell-item.ts +22 -5
- package/src/nile-table-header-item/nile-table-header-item.css.ts +7 -0
- package/src/nile-table-header-item/nile-table-header-item.ts +94 -45
- package/vscode-html-custom-data.json +59 -138
- package/dist/nile-slider/index.cjs.js +0 -2
- package/dist/nile-slider/index.cjs.js.map +0 -1
- package/dist/nile-slider/index.esm.js +0 -1
- package/dist/nile-slider/nile-slider.cjs.js +0 -2
- package/dist/nile-slider/nile-slider.cjs.js.map +0 -1
- package/dist/nile-slider/nile-slider.css.cjs.js +0 -2
- package/dist/nile-slider/nile-slider.css.cjs.js.map +0 -1
- package/dist/nile-slider/nile-slider.css.esm.js +0 -106
- package/dist/nile-slider/nile-slider.esm.js +0 -27
- package/dist/nile-slider/nile-slider.template.cjs.js +0 -2
- package/dist/nile-slider/nile-slider.template.cjs.js.map +0 -1
- package/dist/nile-slider/nile-slider.template.esm.js +0 -59
- package/dist/nile-slider/types/nile-slider.enums.cjs.js +0 -2
- package/dist/nile-slider/types/nile-slider.enums.cjs.js.map +0 -1
- package/dist/nile-slider/types/nile-slider.enums.esm.js +0 -1
- package/dist/nile-slider/types/nile-slider.types.cjs.js +0 -2
- package/dist/nile-slider/types/nile-slider.types.cjs.js.map +0 -1
- package/dist/nile-slider/types/nile-slider.types.esm.js +0 -1
- package/dist/nile-slider/utils/nile-slider.utils.cjs.js +0 -2
- package/dist/nile-slider/utils/nile-slider.utils.cjs.js.map +0 -1
- package/dist/nile-slider/utils/nile-slider.utils.esm.js +0 -1
- package/dist/src/nile-slider/index.d.ts +0 -1
- package/dist/src/nile-slider/index.js +0 -2
- package/dist/src/nile-slider/index.js.map +0 -1
- package/dist/src/nile-slider/nile-slider.css.d.ts +0 -6
- package/dist/src/nile-slider/nile-slider.css.js +0 -118
- package/dist/src/nile-slider/nile-slider.css.js.map +0 -1
- package/dist/src/nile-slider/nile-slider.d.ts +0 -48
- package/dist/src/nile-slider/nile-slider.js +0 -217
- package/dist/src/nile-slider/nile-slider.js.map +0 -1
- package/dist/src/nile-slider/nile-slider.template.d.ts +0 -5
- package/dist/src/nile-slider/nile-slider.template.js +0 -73
- package/dist/src/nile-slider/nile-slider.template.js.map +0 -1
- package/dist/src/nile-slider/types/nile-slider.enums.d.ts +0 -10
- package/dist/src/nile-slider/types/nile-slider.enums.js +0 -2
- package/dist/src/nile-slider/types/nile-slider.enums.js.map +0 -1
- package/dist/src/nile-slider/types/nile-slider.types.d.ts +0 -1
- package/dist/src/nile-slider/types/nile-slider.types.js +0 -2
- package/dist/src/nile-slider/types/nile-slider.types.js.map +0 -1
- package/dist/src/nile-slider/utils/nile-slider.utils.d.ts +0 -11
- package/dist/src/nile-slider/utils/nile-slider.utils.js +0 -99
- package/dist/src/nile-slider/utils/nile-slider.utils.js.map +0 -1
- package/src/nile-slider/index.ts +0 -1
- package/src/nile-slider/nile-slider.css.ts +0 -119
- package/src/nile-slider/nile-slider.template.ts +0 -77
- package/src/nile-slider/nile-slider.ts +0 -215
- package/src/nile-slider/types/nile-slider.enums.ts +0 -10
- package/src/nile-slider/types/nile-slider.types.ts +0 -13
- package/src/nile-slider/utils/nile-slider.utils.ts +0 -136
@@ -1,106 +0,0 @@
|
|
1
|
-
import{css as r}from"lit";const a=r`
|
2
|
-
:host {
|
3
|
-
display: block;
|
4
|
-
}
|
5
|
-
|
6
|
-
.container {
|
7
|
-
display: flex;
|
8
|
-
justify-content: center;
|
9
|
-
align-items: center;
|
10
|
-
gap: 10px;
|
11
|
-
height: 100px;
|
12
|
-
}
|
13
|
-
|
14
|
-
.align-item-center {
|
15
|
-
align-items: center;
|
16
|
-
}
|
17
|
-
|
18
|
-
slot.span {
|
19
|
-
font-size: var(--nile-font-size-micro);
|
20
|
-
margin-top: 14px;
|
21
|
-
}
|
22
|
-
|
23
|
-
.range-container {
|
24
|
-
display: flex;
|
25
|
-
flex-direction: column;
|
26
|
-
gap: var(--nile-spacing-sm);
|
27
|
-
}
|
28
|
-
|
29
|
-
.column-reverse {
|
30
|
-
flex-direction: column-reverse;
|
31
|
-
}
|
32
|
-
|
33
|
-
.label-container {
|
34
|
-
display: flex;
|
35
|
-
justify-content: space-between;
|
36
|
-
}
|
37
|
-
|
38
|
-
.label-container span {
|
39
|
-
margin: var(--nile-spacing-none);
|
40
|
-
padding: var(--nile-spacing-none);
|
41
|
-
font-size: var(--nile-font-size-micro);
|
42
|
-
}
|
43
|
-
|
44
|
-
.range {
|
45
|
-
position: relative;
|
46
|
-
width: 228px;
|
47
|
-
height: 4px;
|
48
|
-
background-color: var(--nile-colors-neutral-400);
|
49
|
-
user-select: none;
|
50
|
-
border-radius: var(--nile-radius-radius-3xl);
|
51
|
-
}
|
52
|
-
|
53
|
-
.range:hover {
|
54
|
-
cursor: pointer;
|
55
|
-
}
|
56
|
-
|
57
|
-
.range-completed {
|
58
|
-
position: absolute;
|
59
|
-
height: 100%;
|
60
|
-
width: 0%;
|
61
|
-
background-color: var(--nile-colors-primary-600);
|
62
|
-
top: 0px;
|
63
|
-
left: 0px;
|
64
|
-
z-index: 98;
|
65
|
-
border-radius: var(--nile-radius-radius-3xl);
|
66
|
-
}
|
67
|
-
|
68
|
-
.range-button {
|
69
|
-
height: 12px;
|
70
|
-
width: 12px;
|
71
|
-
background-color: var(--nile-colors-primary-600);
|
72
|
-
position: absolute;
|
73
|
-
top: 50%;
|
74
|
-
transform: translate(-50%, -50%);
|
75
|
-
border-radius: var(--nile-radius-radius-3xl);
|
76
|
-
left: 0;
|
77
|
-
z-index: 100;
|
78
|
-
box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
|
79
|
-
transition: box-shadow var(--nile-transition-duration-default) ease;
|
80
|
-
}
|
81
|
-
|
82
|
-
.range-button:hover, .range-button-two:hover {
|
83
|
-
cursor: pointer;
|
84
|
-
background-color: var(--nile-colors-primary-700);
|
85
|
-
}
|
86
|
-
|
87
|
-
.range-button:active, .range-button-two:active {
|
88
|
-
transition: box-shadow var(--nile-transition-duration-default) ease;
|
89
|
-
background-color: var(--nile-colors-primary-700);
|
90
|
-
box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
|
91
|
-
}
|
92
|
-
|
93
|
-
.range-button-two {
|
94
|
-
height: 12px;
|
95
|
-
width: 12px;
|
96
|
-
background-color: var(--nile-colors-primary-600);
|
97
|
-
position: absolute;
|
98
|
-
top: 50%;
|
99
|
-
transform: translate(-50%, -50%);
|
100
|
-
border-radius: var(--nile-radius-radius-3xl);
|
101
|
-
left: 100%;
|
102
|
-
z-index: 100;
|
103
|
-
box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
|
104
|
-
transition: box-shadow var(--nile-transition-duration-default) ease;
|
105
|
-
}
|
106
|
-
`;export{a as s};
|
@@ -1,27 +0,0 @@
|
|
1
|
-
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 as o,s as r}from"./nile-slider.template.esm.js";import{h as d,a as c,b as p,v as m,r as u,c as v,d as b,g}from"./utils/nile-slider.utils.esm.js";let f=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?c(t,s,this):"two"===this.activeThumb&&p(t,s,this);const i=m(this.rangeOneValue,this),e=m(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,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 d(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(g(this),!this.rangeSlider&&t.has("value")){this.value=this.checkValueValidity(this.value,this.minValue,this.maxValue);const t=m(this.value,this);this.buttonOne.style.left=`${t}%`,this.completed.style.width=`${t}%`}else if(this.rangeSlider){const t=m(this.rangeOneValue,this),s=m(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`
|
2
|
-
<div
|
3
|
-
part="base"
|
4
|
-
class=${e({container:!0,"align-item-center":!t})}
|
5
|
-
>
|
6
|
-
<slot class="span" name="prefix"></slot>
|
7
|
-
|
8
|
-
<div
|
9
|
-
part="range-container"
|
10
|
-
class=${e({"range-container":!0,"column-reverse":"bottom"===this.labelPosition})}
|
11
|
-
>
|
12
|
-
${t?n(this):h``}
|
13
|
-
|
14
|
-
<div
|
15
|
-
class="range"
|
16
|
-
part="range"
|
17
|
-
role="group"
|
18
|
-
aria-labelledby=${s}
|
19
|
-
>
|
20
|
-
<span class="range-completed" part="range-completed"></span>
|
21
|
-
${this.rangeSlider?o(this):r(this)}
|
22
|
-
</div>
|
23
|
-
</div>
|
24
|
-
|
25
|
-
<slot class="span" name="suffix"></slot>
|
26
|
-
</div>
|
27
|
-
`}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}};t([a({type:Number})],f.prototype,"minValue",void 0),t([a({type:Number})],f.prototype,"value",void 0),t([a({type:Number})],f.prototype,"maxValue",void 0),t([a({type:Number})],f.prototype,"rangeOneValue",void 0),t([a({type:Number})],f.prototype,"rangeTwoValue",void 0),t([a({type:Boolean})],f.prototype,"showLabel",void 0),t([a({type:String})],f.prototype,"labelStart",void 0),t([a({type:String})],f.prototype,"labelEnd",void 0),t([a({type:Boolean})],f.prototype,"rangeSlider",void 0),t([a({type:String})],f.prototype,"labelPosition",void 0),t([a({type:String})],f.prototype,"tooltipPosition",void 0),f=t([l("nile-slider")],f);export{f as N};
|
@@ -1,2 +0,0 @@
|
|
1
|
-
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);});}};});
|
2
|
-
//# sourceMappingURL=nile-slider.template.cjs.js.map
|
@@ -1 +0,0 @@
|
|
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"}
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js";const i=e=>a`
|
2
|
-
<div>
|
3
|
-
<nile-tooltip
|
4
|
-
content=${e.rangeOneValue}
|
5
|
-
placement=${e.tooltipPosition}
|
6
|
-
>
|
7
|
-
<div
|
8
|
-
id="range-one"
|
9
|
-
class="range-button"
|
10
|
-
part="range-button"
|
11
|
-
role="slider"
|
12
|
-
tabindex="0"
|
13
|
-
aria-valuemin=${e.minValue}
|
14
|
-
aria-valuemax=${e.maxValue}
|
15
|
-
aria-valuenow=${e.rangeOneValue}
|
16
|
-
aria-label="Minimum value"
|
17
|
-
></div>
|
18
|
-
</nile-tooltip>
|
19
|
-
<nile-tooltip
|
20
|
-
content=${e.rangeTwoValue}
|
21
|
-
placement=${e.tooltipPosition}
|
22
|
-
>
|
23
|
-
<div
|
24
|
-
id="range-two"
|
25
|
-
class="range-button-two"
|
26
|
-
part="range-button-two"
|
27
|
-
role="slider"
|
28
|
-
tabindex="0"
|
29
|
-
aria-valuemin=${e.minValue}
|
30
|
-
aria-valuemax=${e.maxValue}
|
31
|
-
aria-valuenow=${e.rangeTwoValue}
|
32
|
-
aria-label="Maximum value"
|
33
|
-
></div>
|
34
|
-
</nile-tooltip>
|
35
|
-
</div>
|
36
|
-
`,t=i=>a`
|
37
|
-
<div>
|
38
|
-
<nile-tooltip
|
39
|
-
content=${i.value}
|
40
|
-
placement=${i.tooltipPosition}
|
41
|
-
>
|
42
|
-
<div
|
43
|
-
class=${e({"range-button":!0,"range-button-active":"one"===i.activeThumb})}
|
44
|
-
part="range-button"
|
45
|
-
role="slider"
|
46
|
-
tabindex="0"
|
47
|
-
aria-valuemin=${i.minValue}
|
48
|
-
aria-valuemax=${i.maxValue}
|
49
|
-
aria-valuenow=${i.value}
|
50
|
-
aria-label=${i.ariaLabel||"Slider value"}
|
51
|
-
></div>
|
52
|
-
</nile-tooltip>
|
53
|
-
</div>
|
54
|
-
`,l=e=>a`
|
55
|
-
<div part="label-container" class="label-container">
|
56
|
-
<span id="label-start">${e.labelStart}</span>
|
57
|
-
<span id="label-end">${e.labelEnd}</span>
|
58
|
-
</div>
|
59
|
-
`;export{l,i as r,t as s};
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-slider.enums.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-slider.types.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
|
@@ -1,2 +0,0 @@
|
|
1
|
-
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});});}};});
|
2
|
-
//# sourceMappingURL=nile-slider.utils.cjs.js.map
|
@@ -1 +0,0 @@
|
|
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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"}
|
@@ -1 +0,0 @@
|
|
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};
|
@@ -1 +0,0 @@
|
|
1
|
-
export { NileSlider } from './nile-slider';
|
@@ -1 +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';"]}
|
@@ -1,118 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright Aquera Inc 2025
|
3
|
-
*
|
4
|
-
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
6
|
-
*/
|
7
|
-
import { css } from 'lit';
|
8
|
-
/**
|
9
|
-
* Slider CSS
|
10
|
-
*/
|
11
|
-
export const styles = css `
|
12
|
-
:host {
|
13
|
-
display: block;
|
14
|
-
}
|
15
|
-
|
16
|
-
.container {
|
17
|
-
display: flex;
|
18
|
-
justify-content: center;
|
19
|
-
align-items: center;
|
20
|
-
gap: 10px;
|
21
|
-
height: 100px;
|
22
|
-
}
|
23
|
-
|
24
|
-
.align-item-center {
|
25
|
-
align-items: center;
|
26
|
-
}
|
27
|
-
|
28
|
-
slot.span {
|
29
|
-
font-size: var(--nile-font-size-micro);
|
30
|
-
margin-top: 14px;
|
31
|
-
}
|
32
|
-
|
33
|
-
.range-container {
|
34
|
-
display: flex;
|
35
|
-
flex-direction: column;
|
36
|
-
gap: var(--nile-spacing-sm);
|
37
|
-
}
|
38
|
-
|
39
|
-
.column-reverse {
|
40
|
-
flex-direction: column-reverse;
|
41
|
-
}
|
42
|
-
|
43
|
-
.label-container {
|
44
|
-
display: flex;
|
45
|
-
justify-content: space-between;
|
46
|
-
}
|
47
|
-
|
48
|
-
.label-container span {
|
49
|
-
margin: var(--nile-spacing-none);
|
50
|
-
padding: var(--nile-spacing-none);
|
51
|
-
font-size: var(--nile-font-size-micro);
|
52
|
-
}
|
53
|
-
|
54
|
-
.range {
|
55
|
-
position: relative;
|
56
|
-
width: 228px;
|
57
|
-
height: 4px;
|
58
|
-
background-color: var(--nile-colors-neutral-400);
|
59
|
-
user-select: none;
|
60
|
-
border-radius: var(--nile-radius-radius-3xl);
|
61
|
-
}
|
62
|
-
|
63
|
-
.range:hover {
|
64
|
-
cursor: pointer;
|
65
|
-
}
|
66
|
-
|
67
|
-
.range-completed {
|
68
|
-
position: absolute;
|
69
|
-
height: 100%;
|
70
|
-
width: 0%;
|
71
|
-
background-color: var(--nile-colors-primary-600);
|
72
|
-
top: 0px;
|
73
|
-
left: 0px;
|
74
|
-
z-index: 98;
|
75
|
-
border-radius: var(--nile-radius-radius-3xl);
|
76
|
-
}
|
77
|
-
|
78
|
-
.range-button {
|
79
|
-
height: 12px;
|
80
|
-
width: 12px;
|
81
|
-
background-color: var(--nile-colors-primary-600);
|
82
|
-
position: absolute;
|
83
|
-
top: 50%;
|
84
|
-
transform: translate(-50%, -50%);
|
85
|
-
border-radius: var(--nile-radius-radius-3xl);
|
86
|
-
left: 0;
|
87
|
-
z-index: 100;
|
88
|
-
box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
|
89
|
-
transition: box-shadow var(--nile-transition-duration-default) ease;
|
90
|
-
}
|
91
|
-
|
92
|
-
.range-button:hover, .range-button-two:hover {
|
93
|
-
cursor: pointer;
|
94
|
-
background-color: var(--nile-colors-primary-700);
|
95
|
-
}
|
96
|
-
|
97
|
-
.range-button:active, .range-button-two:active {
|
98
|
-
transition: box-shadow var(--nile-transition-duration-default) ease;
|
99
|
-
background-color: var(--nile-colors-primary-700);
|
100
|
-
box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
|
101
|
-
}
|
102
|
-
|
103
|
-
.range-button-two {
|
104
|
-
height: 12px;
|
105
|
-
width: 12px;
|
106
|
-
background-color: var(--nile-colors-primary-600);
|
107
|
-
position: absolute;
|
108
|
-
top: 50%;
|
109
|
-
transform: translate(-50%, -50%);
|
110
|
-
border-radius: var(--nile-radius-radius-3xl);
|
111
|
-
left: 100%;
|
112
|
-
z-index: 100;
|
113
|
-
box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
|
114
|
-
transition: box-shadow var(--nile-transition-duration-default) ease;
|
115
|
-
}
|
116
|
-
`;
|
117
|
-
export default [styles];
|
118
|
-
//# sourceMappingURL=nile-slider.css.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nile-slider.css.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;EAEE;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2025\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\nimport { css } from 'lit';\n\n/**\n* Slider CSS\n*/\nexport const styles = css`\n :host {\n display: block;\n }\n\n .container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n height: 100px;\n }\n\n .align-item-center {\n align-items: center;\n }\n\n slot.span {\n font-size: var(--nile-font-size-micro);\n margin-top: 14px;\n }\n\n .range-container {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-sm);\n }\n\n .column-reverse {\n flex-direction: column-reverse;\n }\n\n .label-container {\n display: flex;\n justify-content: space-between;\n }\n\n .label-container span {\n margin: var(--nile-spacing-none);\n padding: var(--nile-spacing-none);\n font-size: var(--nile-font-size-micro);\n }\n\n .range {\n position: relative;\n width: 228px;\n height: 4px;\n background-color: var(--nile-colors-neutral-400);\n user-select: none;\n border-radius: var(--nile-radius-radius-3xl);\n }\n\n .range:hover {\n cursor: pointer;\n }\n\n .range-completed {\n position: absolute;\n height: 100%;\n width: 0%;\n background-color: var(--nile-colors-primary-600);\n top: 0px;\n left: 0px;\n z-index: 98;\n border-radius: var(--nile-radius-radius-3xl);\n }\n\n .range-button {\n height: 12px;\n width: 12px;\n background-color: var(--nile-colors-primary-600);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: var(--nile-radius-radius-3xl);\n left: 0;\n z-index: 100;\n box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;\n transition: box-shadow var(--nile-transition-duration-default) ease;\n }\n\n .range-button:hover, .range-button-two:hover {\n cursor: pointer;\n background-color: var(--nile-colors-primary-700);\n }\n\n .range-button:active, .range-button-two:active {\n transition: box-shadow var(--nile-transition-duration-default) ease;\n background-color: var(--nile-colors-primary-700);\n box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;\n }\n\n .range-button-two {\n height: 12px;\n width: 12px;\n background-color: var(--nile-colors-primary-600);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: var(--nile-radius-radius-3xl);\n left: 100%;\n z-index: 100;\n box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;\n transition: box-shadow var(--nile-transition-duration-default) ease;\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -1,48 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright Aquera Inc 2025
|
3
|
-
*
|
4
|
-
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
6
|
-
*/
|
7
|
-
import NileElement from '../internal/nile-element';
|
8
|
-
import { CSSResultArray, TemplateResult } from 'lit';
|
9
|
-
import { TooltipPosition } from './types/nile-slider.types';
|
10
|
-
/**
|
11
|
-
* Nile slider component.
|
12
|
-
*
|
13
|
-
* @tag nile-slider
|
14
|
-
*/
|
15
|
-
export declare class NileSlider extends NileElement {
|
16
|
-
static get styles(): CSSResultArray;
|
17
|
-
minValue: number;
|
18
|
-
value: number;
|
19
|
-
maxValue: number;
|
20
|
-
rangeOneValue: number;
|
21
|
-
rangeTwoValue: number;
|
22
|
-
showLabel: boolean;
|
23
|
-
labelStart: string;
|
24
|
-
labelEnd: string;
|
25
|
-
rangeSlider: boolean;
|
26
|
-
labelPosition: string;
|
27
|
-
tooltipPosition: TooltipPosition;
|
28
|
-
buttonOne: HTMLElement;
|
29
|
-
buttonTwo: HTMLElement;
|
30
|
-
range: HTMLElement;
|
31
|
-
completed: HTMLElement;
|
32
|
-
activeThumb: 'one' | 'two' | null;
|
33
|
-
connectedCallback(): void;
|
34
|
-
firstUpdated(changedProps: Map<string, any>): void;
|
35
|
-
checkValueValidity(value: number, min: number, max: number): number;
|
36
|
-
checkRangeValidity(): void;
|
37
|
-
onMouseMove: (e: MouseEvent) => void;
|
38
|
-
onMouseUp: () => void;
|
39
|
-
onMouseDown: (e: MouseEvent) => void;
|
40
|
-
render(): TemplateResult;
|
41
|
-
disconnectedCallback(): void;
|
42
|
-
}
|
43
|
-
export default NileSlider;
|
44
|
-
declare global {
|
45
|
-
interface HTMLElementTagNameMap {
|
46
|
-
'nile-slider': NileSlider;
|
47
|
-
}
|
48
|
-
}
|