@aquera/nile-elements 0.1.27 → 0.1.28-beta-1.1
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 +3 -0
- package/demo/index.html +0 -97
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.esm.js +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.cjs.js +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.cjs.js.map +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js.map +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.css.esm.js +23 -5
- package/dist/nile-circular-progressbar/nile-circular-progressbar.esm.js +22 -15
- package/dist/nile-progress-bar/nile-progress-bar.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.cjs.js.map +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.css.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.css.cjs.js.map +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.css.esm.js +15 -3
- package/dist/nile-progress-bar/nile-progress-bar.esm.js +3 -3
- package/dist/nile-stepper/nile-stepper.cjs.js +1 -1
- package/dist/nile-stepper/nile-stepper.cjs.js.map +1 -1
- package/dist/nile-stepper/nile-stepper.css.cjs.js +1 -1
- package/dist/nile-stepper/nile-stepper.css.cjs.js.map +1 -1
- package/dist/nile-stepper/nile-stepper.css.esm.js +8 -2
- package/dist/nile-stepper/nile-stepper.esm.js +3 -3
- package/dist/nile-stepper-item/nile-stepper-item.cjs.js +1 -1
- package/dist/nile-stepper-item/nile-stepper-item.cjs.js.map +1 -1
- package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js +1 -1
- package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js.map +1 -1
- package/dist/nile-stepper-item/nile-stepper-item.css.esm.js +37 -16
- package/dist/nile-stepper-item/nile-stepper-item.esm.js +20 -17
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.cjs.js +1 -1
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.cjs.js.map +1 -1
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.css.cjs.js +1 -1
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.css.cjs.js.map +1 -1
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.css.esm.js +28 -14
- package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.esm.js +11 -13
- package/dist/src/nile-auto-complete/nile-auto-complete.js +0 -1
- package/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -1
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.d.ts +5 -5
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js +28 -10
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map +1 -1
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.d.ts +3 -0
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.js +46 -20
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.js.map +1 -1
- package/dist/src/nile-progress-bar/nile-progress-bar.css.js +13 -1
- package/dist/src/nile-progress-bar/nile-progress-bar.css.js.map +1 -1
- package/dist/src/nile-progress-bar/nile-progress-bar.d.ts +1 -0
- package/dist/src/nile-progress-bar/nile-progress-bar.js +6 -1
- package/dist/src/nile-progress-bar/nile-progress-bar.js.map +1 -1
- package/dist/src/nile-stepper/nile-stepper.css.js +6 -0
- package/dist/src/nile-stepper/nile-stepper.css.js.map +1 -1
- package/dist/src/nile-stepper/nile-stepper.d.ts +2 -2
- package/dist/src/nile-stepper/nile-stepper.js +8 -8
- package/dist/src/nile-stepper/nile-stepper.js.map +1 -1
- package/dist/src/nile-stepper-item/nile-stepper-item.css.js +37 -16
- package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map +1 -1
- package/dist/src/nile-stepper-item/nile-stepper-item.d.ts +5 -1
- package/dist/src/nile-stepper-item/nile-stepper-item.js +33 -14
- package/dist/src/nile-stepper-item/nile-stepper-item.js.map +1 -1
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js +28 -14
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js.map +1 -1
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.d.ts +1 -0
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js +10 -8
- package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-auto-complete/nile-auto-complete.ts +0 -1
- package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts +24 -6
- package/src/nile-circular-progressbar/nile-circular-progressbar.ts +39 -15
- package/src/nile-progress-bar/nile-progress-bar.css.ts +14 -2
- package/src/nile-progress-bar/nile-progress-bar.ts +4 -1
- package/src/nile-stepper/nile-stepper.css.ts +6 -0
- package/src/nile-stepper/nile-stepper.ts +11 -11
- package/src/nile-stepper-item/nile-stepper-item.css.ts +37 -16
- package/src/nile-stepper-item/nile-stepper-item.ts +34 -17
- package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts +28 -14
- package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts +12 -8
- package/vscode-html-custom-data.json +37 -6
@@ -3,7 +3,7 @@ import{css as e}from"lit";const t=e`
|
|
3
3
|
--stepper-flex-val:1;
|
4
4
|
--bulletin--dot--seperation:30%;
|
5
5
|
|
6
|
-
display:inline-block;
|
6
|
+
display: inline-block;
|
7
7
|
flex-grow:var(--stepper-flex-val);
|
8
8
|
min-width:var(--nile-stepper-min-width);
|
9
9
|
}
|
@@ -13,7 +13,7 @@ import{css as e}from"lit";const t=e`
|
|
13
13
|
}
|
14
14
|
|
15
15
|
.stepper__item--sm {
|
16
|
-
--item-spacing: var(--nile-spacing-spacing-
|
16
|
+
--item-spacing: var(--nile-spacing-spacing-md);
|
17
17
|
--stepper-item-title-size:14px;
|
18
18
|
--stepper-item-subtitle-size:14px;
|
19
19
|
--stepper-item-text-line-height:20px;
|
@@ -21,17 +21,17 @@ import{css as e}from"lit";const t=e`
|
|
21
21
|
}
|
22
22
|
|
23
23
|
.stepper__item--md {
|
24
|
-
--item-spacing: var(--nile-spacing-spacing-
|
24
|
+
--item-spacing: var(--nile-spacing-spacing-md);
|
25
25
|
--stepper-item-title-size:16px;
|
26
|
-
--stepper-item-subtitle-size:
|
27
|
-
--stepper-item-text-line-
|
26
|
+
--stepper-item-subtitle-size:14px;
|
27
|
+
--stepper-item-text-line-height:24px;
|
28
28
|
--circle-height:20px;
|
29
29
|
}
|
30
30
|
|
31
31
|
.stepper__item--lg {
|
32
|
-
--item-spacing: var(--nile-spacing-spacing-
|
32
|
+
--item-spacing: var(--nile-spacing-spacing-lg);
|
33
33
|
--stepper-item-title-size:16px;
|
34
|
-
--stepper-item-subtitle-size:
|
34
|
+
--stepper-item-subtitle-size:14px;
|
35
35
|
--stepper-item-text-line-height:24px;
|
36
36
|
--circle-height:28px;
|
37
37
|
}
|
@@ -55,13 +55,24 @@ import{css as e}from"lit";const t=e`
|
|
55
55
|
.stepper__line {
|
56
56
|
display: block;
|
57
57
|
border: 0;
|
58
|
-
border-top: 2px solid var(--nile-colors-
|
58
|
+
border-top: 2px solid var(--nile-colors-neutral-500);
|
59
59
|
}
|
60
60
|
|
61
61
|
.stepper__line--active {
|
62
62
|
border-top: 2px solid var(--nile-colors-primary-600);
|
63
63
|
}
|
64
64
|
|
65
|
+
.stepper__item__content--above{
|
66
|
+
position:relative;
|
67
|
+
padding: 0 var(--nile-spacing-spacing-md);
|
68
|
+
}
|
69
|
+
|
70
|
+
.stepper__item__content--above .stepper__content__subtitle{
|
71
|
+
position: absolute;
|
72
|
+
top: 100%;
|
73
|
+
white-space: nowrap;
|
74
|
+
}
|
75
|
+
|
65
76
|
.stepper__item__content--below {
|
66
77
|
margin-top: var(--item-spacing);
|
67
78
|
display:flex;
|
@@ -75,25 +86,35 @@ import{css as e}from"lit";const t=e`
|
|
75
86
|
margin:0 -1px;
|
76
87
|
}
|
77
88
|
|
89
|
+
.stepper__item__bulletin{
|
90
|
+
margin-left: 6px;
|
91
|
+
margin-right: 6px;
|
92
|
+
}
|
93
|
+
|
94
|
+
.stepper__item__bulletin--inline{
|
95
|
+
margin-right: 0px;
|
96
|
+
}
|
97
|
+
|
78
98
|
.stepper__content__title {
|
79
|
-
color:var(--nile-colors-
|
99
|
+
color:var(--nile-colors-dark-900);
|
80
100
|
font-size: var(--stepper-item-title-size);
|
81
101
|
line-height: var(--stepper-item-text-line-height);
|
82
102
|
font-family: var(--nile-font-family-medium);
|
83
|
-
font-weight:
|
103
|
+
font-weight: 400;
|
84
104
|
}
|
85
105
|
|
86
106
|
.stepper__content__title--inline{
|
87
107
|
padding: 0 8px;
|
88
|
-
color:var(--nile-colors-
|
108
|
+
color:var(--nile-colors-dark-900);
|
89
109
|
}
|
90
110
|
|
91
111
|
.stepper__content__title--active{
|
92
|
-
color:var(--nile-colors-primary-
|
112
|
+
color:var(--nile-colors-primary-600);
|
113
|
+
font-weight: 600;
|
93
114
|
}
|
94
115
|
|
95
116
|
.stepper__content__subtitle {
|
96
|
-
color:var(--nile-colors-
|
117
|
+
color:var(--nile-colors-dark-500);
|
97
118
|
font-size: var(--stepper-item-subtitle-size);
|
98
119
|
line-height: var(--stepper-item-text-line-height);
|
99
120
|
font-family: var(--nile-font-family-sans-serif);
|
@@ -108,13 +129,13 @@ import{css as e}from"lit";const t=e`
|
|
108
129
|
width: var(--circle-height);
|
109
130
|
aspect-ratio: 1 / 1;
|
110
131
|
border-radius: 50%;
|
111
|
-
background: radial-gradient(var(--nile-colors-
|
112
|
-
border: 2px solid var(--nile-colors-
|
132
|
+
background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
|
133
|
+
border: 2px solid var(--nile-colors-neutral-500);
|
113
134
|
}
|
114
135
|
|
115
136
|
.stepper__bulletin__dot--active{
|
116
137
|
background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
|
117
|
-
border: 2px solid var(--nile-colors-primary-
|
138
|
+
border: 2px solid var(--nile-colors-primary-500);
|
118
139
|
}
|
119
140
|
|
120
141
|
.stepper__bulletin--icon {
|
@@ -1,39 +1,42 @@
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{
|
2
|
-
<div class="${
|
1
|
+
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{query as s,property as _,state as l,customElement as p}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{s as n}from"./nile-stepper-item.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let d=class extends o{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="md",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[n]}updated(t){if(t.has("subtitle")&&this.isLast&&!this.contentBelow&&this.subtitle){const t=this.absoluteSubtitle?.scrollWidth??"0";this.absoluteTitle.style.minWidth=t+"px"}}render(){this.haveFlex||this.style.setProperty("--stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let _=!1;(s&&!t||this.completedStepValue==this.value)&&(_=!0);let l=!1;return s&&(l=!0,this.calculatedCompletedStepValue==this.value&&(l=!1)),e`
|
2
|
+
<div class="${r({stepper__item:!0,"stepper__item--selected":t,"stepper__item--sm":"sm"==this.size,"stepper__item--md":"md"==this.size,"stepper__item--lg":"lg"==this.size})}">
|
3
3
|
<div class="stepper__line__content">
|
4
4
|
<div class="stepper__line__container">
|
5
5
|
${this.isFirst?i:e`
|
6
|
-
<hr class="${
|
6
|
+
<hr class="${r({stepper__line:!0,"stepper__line--active":s||t})}"/>
|
7
7
|
`}
|
8
8
|
</div>
|
9
9
|
|
10
|
-
<div class
|
11
|
-
${
|
12
|
-
<svg width="${r}" height="${r}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
13
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
|
14
|
-
</svg>
|
15
|
-
</div>`:e`<div class="${p({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
10
|
+
<div class=${r({stepper__item__bulletin:!0,"stepper__item__bulletin--inline":!this.contentBelow})}>
|
11
|
+
${_?e`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`:e`<div class="${r({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
16
12
|
</div>
|
17
13
|
|
18
|
-
<div class="${
|
14
|
+
<div class="${r({stepper__line__container:!0,"stepper__line--hastitle":!this.contentBelow})}">
|
19
15
|
${this.contentBelow||!this.title?i:e`
|
20
|
-
|
21
|
-
class="
|
22
|
-
|
16
|
+
|
17
|
+
<div class="stepper__item__content--above">
|
18
|
+
<div class="${r({stepper__content__title:!0,"stepper__content__title--active":t})}">
|
19
|
+
${this.title}
|
20
|
+
</div>
|
21
|
+
<div class="${r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
|
23
22
|
</div>
|
24
23
|
`}
|
25
24
|
${this.isLast?i:e`
|
26
|
-
<hr class="${
|
25
|
+
<hr class="${r({stepper__line:!0,"stepper__line--active":l})}" style="flex-grow:1;"/>
|
27
26
|
`}
|
28
27
|
</div>
|
29
28
|
</div>
|
30
29
|
${this.contentBelow?e`
|
31
30
|
<div class="stepper__item__content--below">
|
32
|
-
<div class="${
|
31
|
+
<div class="${r({stepper__content__title:!0,"stepper__content__title--active":t})}">
|
33
32
|
${this.title}
|
34
33
|
</div>
|
35
|
-
<div class="${
|
34
|
+
<div class="${r({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
|
36
35
|
</div>
|
37
36
|
`:i}
|
38
37
|
</div>
|
39
|
-
`}
|
38
|
+
`}getSvg(){let t="sm"==this.size?20:"md"==this.size?24:28;return e`
|
39
|
+
<svg width="${t}" height="${t}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
40
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
|
41
|
+
</svg>
|
42
|
+
`}};t([s(".stepper__item__content--above .stepper__content__title")],d.prototype,"absoluteTitle",void 0),t([s(".stepper__item__content--above .stepper__content__subtitle")],d.prototype,"absoluteSubtitle",void 0),t([_()],d.prototype,"title",void 0),t([_()],d.prototype,"subtitle",void 0),t([l()],d.prototype,"contentBelow",void 0),t([l()],d.prototype,"size",void 0),t([l()],d.prototype,"icon",void 0),t([l()],d.prototype,"isFirst",void 0),t([l()],d.prototype,"isLast",void 0),t([l()],d.prototype,"isComplete",void 0),t([l()],d.prototype,"isCurrent",void 0),t([l()],d.prototype,"currentStepValue",void 0),t([l()],d.prototype,"completedStepValue",void 0),t([l()],d.prototype,"calculatedCompletedStepValue",void 0),t([l()],d.prototype,"value",void 0),t([l()],d.prototype,"haveFlex",void 0),d=t([p("nile-stepper-item")],d);export{d as N};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-vertical-stepper-item.css.cjs.js","../internal/nile-element.cjs.js","lit/directives/class-map.js"],function(_export,_context){"use strict";var t,e,i,s,l,p,r,_,
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-vertical-stepper-item.css.cjs.js","../internal/nile-element.cjs.js","lit/directives/class-map.js"],function(_export,_context){"use strict";var t,e,i,s,l,p,r,_,o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,d;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;i=_lit.nothing;},function(_litDecoratorsJs){s=_litDecoratorsJs.property;l=_litDecoratorsJs.state;p=_litDecoratorsJs.customElement;},function(_nileVerticalStepperItemCssCjsJs){r=_nileVerticalStepperItemCssCjsJs.s;},function(_internalNileElementCjsJs){_=_internalNileElementCjsJs.N;},function(_litDirectivesClassMapJs){o=_litDirectivesClassMapJs.classMap;}],execute:function execute(){_export("N",d=/*#__PURE__*/function(_ref){function d(){var _this;_classCallCheck(this,d);_this=_callSuper(this,d,arguments),_this.title="",_this.subtitle="",_this.contentBelow=!1,_this.size="md",_this.icon="tick",_this.isFirst=!1,_this.isLast=!1,_this.isComplete=!1,_this.isCurrent=!1,_this.haveFlex=!0;return _this;}_inherits(d,_ref);return _createClass(d,[{key:"render",value:function render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");var t=this.isCurrent,s=this.isComplete;var l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);var p=!1;return s&&(p=!0,this.calculatedCompletedStepValue==this.value&&(p=!1)),"sm"==this.size||this.size,e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t\t<div class=\"","\">\n\t\t\t\t<div class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"stepper__item__line__container\">\n\t\t\t\t\t\t","\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stepper__item__content\">\n\t\t\t\t\t<div class=\"","\">","</div>\n\t\t\t\t\t<div class=\"","\">","</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t"])),o({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--md":"md"==this.size,"stepper__item--lg":"lg"==this.size}),l?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"stepper__bulletin--icon\">","</div>"])),this.getSvg()):e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div class=\"","\"></div>"])),o({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})),this.isLast?i:e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<div class=\"","\"></div>"])),o({stepper__item__line:!0,"stepper__item__line--active":p})),o({stepper__content__title:!0,"stepper__content__title--alone":!this.subtitle,"stepper__content__title--active":t}),this.title,o({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t}),this.subtitle);}},{key:"getSvg",value:function getSvg(){var t="sm"==this.size?20:"md"==this.size?24:28;return e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n\t\t<svg width=\"","\" height=\"","\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t"])),t,t);}}],[{key:"styles",get:function get(){return[r];}}]);}(_));t([s()],d.prototype,"title",void 0),t([s()],d.prototype,"subtitle",void 0),t([l()],d.prototype,"contentBelow",void 0),t([l()],d.prototype,"size",void 0),t([l()],d.prototype,"icon",void 0),t([l()],d.prototype,"isFirst",void 0),t([l()],d.prototype,"isLast",void 0),t([l()],d.prototype,"isComplete",void 0),t([l()],d.prototype,"isCurrent",void 0),t([l()],d.prototype,"currentStepValue",void 0),t([l()],d.prototype,"completedStepValue",void 0),t([l()],d.prototype,"calculatedCompletedStepValue",void 0),t([l()],d.prototype,"value",void 0),t([l()],d.prototype,"haveFlex",void 0),_export("N",d=t([p("nile-vertical-stepper-item")],d));}};});
|
2
2
|
//# sourceMappingURL=nile-vertical-stepper-item.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-vertical-stepper-item.cjs.js","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property() title: string = '';\n\t@property() subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'md' | 'lg' = 'md';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'md'?16:20;\n\t\treturn html`\n\t\t\t<div class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--md':this.size=='md',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"stepper__bulletin--icon\"
|
1
|
+
{"version":3,"file":"nile-vertical-stepper-item.cjs.js","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property() title: string = '';\n\t@property() subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'md' | 'lg' = 'md';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'md'?16:20;\n\t\treturn html`\n\t\t\t<div class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--md':this.size=='md',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"stepper__bulletin--icon\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"stepper__item__content\">\n\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__title':true, \"stepper__content__title--alone\": !this.subtitle, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-vertical-stepper-item': NileVerticalStepperItem;\n }\n}"],"names":["NileVerticalStepperItem","d","this","title","subtitle","contentBelow","size","icon","isFirst","isLast","isComplete","isCurrent","haveFlex","_this","_inherits","_ref","_createClass","key","value","render","style","setProperty","showCompletedIcon","completedStepValue","suffixStepperLineActive","calculatedCompletedStepValue","html","_templateObject","_taggedTemplateLiteral","classMap","stepper__item","_templateObject2","getSvg","_templateObject3","nothing","_templateObject4","stepper__item__line","stepper__content__title","stepper__content__subtitle","iconSize","_templateObject5","__decorate","get","styles","NileElement","property","prototype","state","_export","customElement"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-title-margin-top:15%;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-title-margin-top:15%;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-title-margin-top:25%;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\t\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t}\n\n\t.stepper__item__bulletin {\n\t\tmargin-top:3px;\n\t\tmargin-bottom:3px;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-primary-500);\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: 2px solid var(--nile-colors-neutral-500);\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: 2px solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__title--alone{\n\t\tmargin-top: var(--stepper-item-title-margin-top);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var( --nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n"]))));}};});
|
2
2
|
//# sourceMappingURL=nile-vertical-stepper-item.css.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-vertical-stepper-item.css.cjs.js","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-
|
1
|
+
{"version":3,"file":"nile-vertical-stepper-item.css.cjs.js","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight:100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-title-margin-top:15%;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-title-margin-top:15%;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-title-margin-top:25%;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\t\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t}\n\n\t.stepper__item__bulletin {\n\t\tmargin-top:3px;\n\t\tmargin-bottom:3px;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-primary-500);\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: 2px solid var(--nile-colors-neutral-500);\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: 2px solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__title--alone{\n\t\tmargin-top: var(--stepper-item-title-margin-top);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var( --nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
@@ -13,25 +13,28 @@ import{css as e}from"lit";const t=e`
|
|
13
13
|
}
|
14
14
|
|
15
15
|
.stepper__item--sm {
|
16
|
-
--item-spacing: var(--nile-spacing-spacing-
|
16
|
+
--item-spacing: var(--nile-spacing-spacing-md);
|
17
17
|
--stepper-item-title-size:14px;
|
18
|
+
--stepper-item-title-margin-top:15%;
|
18
19
|
--stepper-item-subtitle-size:14px;
|
19
20
|
--stepper-item-text-line-height:20px;
|
20
21
|
--circle-height:16px;
|
21
22
|
}
|
22
23
|
|
23
24
|
.stepper__item--md {
|
24
|
-
--item-spacing: var(--nile-spacing-spacing-
|
25
|
+
--item-spacing: var(--nile-spacing-spacing-md);
|
25
26
|
--stepper-item-title-size:16px;
|
26
|
-
--stepper-item-
|
27
|
-
--stepper-item-
|
27
|
+
--stepper-item-title-margin-top:15%;
|
28
|
+
--stepper-item-subtitle-size:14px;
|
29
|
+
--stepper-item-text-line-height:24px;
|
28
30
|
--circle-height:20px;
|
29
31
|
}
|
30
32
|
|
31
33
|
.stepper__item--lg {
|
32
|
-
--item-spacing: var(--nile-spacing-spacing-
|
34
|
+
--item-spacing: var(--nile-spacing-spacing-lg);
|
33
35
|
--stepper-item-title-size:16px;
|
34
|
-
--stepper-item-
|
36
|
+
--stepper-item-title-margin-top:25%;
|
37
|
+
--stepper-item-subtitle-size:14px;
|
35
38
|
--stepper-item-text-line-height:24px;
|
36
39
|
--circle-height:28px;
|
37
40
|
}
|
@@ -40,22 +43,28 @@ import{css as e}from"lit";const t=e`
|
|
40
43
|
display: flex;
|
41
44
|
flex-direction: column;
|
42
45
|
}
|
46
|
+
|
43
47
|
.stepper__item__bulletin {
|
44
48
|
display:grid;
|
45
49
|
place-content:center;
|
46
50
|
}
|
47
51
|
|
52
|
+
.stepper__item__bulletin {
|
53
|
+
margin-top:3px;
|
54
|
+
margin-bottom:3px;
|
55
|
+
}
|
56
|
+
|
48
57
|
.stepper__bulletin--dot {
|
49
58
|
width: var(--circle-height);
|
50
59
|
aspect-ratio: 1 / 1;
|
51
60
|
border-radius: 50%;
|
52
|
-
background: radial-gradient(var(--nile-colors-
|
53
|
-
border: 2px solid var(--nile-colors-
|
61
|
+
background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
|
62
|
+
border: 2px solid var(--nile-colors-neutral-500);
|
54
63
|
}
|
55
64
|
|
56
65
|
.stepper__bulletin__dot--active{
|
57
66
|
background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
|
58
|
-
border: 2px solid var(--nile-colors-primary-
|
67
|
+
border: 2px solid var(--nile-colors-primary-500);
|
59
68
|
}
|
60
69
|
|
61
70
|
.stepper__bulletin--icon {
|
@@ -79,7 +88,7 @@ import{css as e}from"lit";const t=e`
|
|
79
88
|
|
80
89
|
.stepper__item__line{
|
81
90
|
height:100%;
|
82
|
-
border-left: 2px solid var(--nile-colors-
|
91
|
+
border-left: 2px solid var(--nile-colors-neutral-500);
|
83
92
|
}
|
84
93
|
.stepper__item__line--active{
|
85
94
|
border-left: 2px solid var(--nile-colors-primary-600);
|
@@ -91,19 +100,24 @@ import{css as e}from"lit";const t=e`
|
|
91
100
|
justify-content:start;
|
92
101
|
}
|
93
102
|
.stepper__content__title {
|
94
|
-
color:var(--nile-colors-
|
103
|
+
color:var(--nile-colors-dark-900);
|
95
104
|
font-size: var(--stepper-item-title-size);
|
96
105
|
line-height: var(--stepper-item-text-line-height);
|
97
106
|
font-family: var(--nile-font-family-medium);
|
98
|
-
font-weight:
|
107
|
+
font-weight: 400;
|
108
|
+
}
|
109
|
+
|
110
|
+
.stepper__content__title--alone{
|
111
|
+
margin-top: var(--stepper-item-title-margin-top);
|
99
112
|
}
|
100
113
|
|
101
114
|
.stepper__content__title--active{
|
102
|
-
color:var(--nile-colors-primary-
|
115
|
+
color:var(--nile-colors-primary-600);
|
116
|
+
font-weight: 600;
|
103
117
|
}
|
104
118
|
|
105
119
|
.stepper__content__subtitle {
|
106
|
-
color:var(--nile-colors-
|
120
|
+
color:var(--nile-colors-dark-500);
|
107
121
|
font-size: var(--stepper-item-subtitle-size);
|
108
122
|
line-height: var(--stepper-item-text-line-height);
|
109
123
|
font-family: var( --nile-font-family-sans-serif);
|
@@ -1,22 +1,20 @@
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as p}from"lit/decorators.js";import{s as r}from"./nile-vertical-stepper-item.css.esm.js";import{N as _}from"../internal/nile-element.esm.js";import{classMap as
|
2
|
-
<div class="${
|
1
|
+
import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as p}from"lit/decorators.js";import{s as r}from"./nile-vertical-stepper-item.css.esm.js";import{N as _}from"../internal/nile-element.esm.js";import{classMap as o}from"lit/directives/class-map.js";let d=class extends _{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="md",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[r]}render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let p=!1;return s&&(p=!0,this.calculatedCompletedStepValue==this.value&&(p=!1)),"sm"==this.size||this.size,e`
|
2
|
+
<div class="${o({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--md":"md"==this.size,"stepper__item--lg":"lg"==this.size})}">
|
3
3
|
<div class="stepper-item__connector-content">
|
4
4
|
<div class="stepper__item__bulletin">
|
5
|
-
${l?e`<div class="stepper__bulletin--icon"
|
6
|
-
<svg width="${r}" height="${r}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
7
|
-
<g clip-path="url(#clip0_10902_1507)">
|
8
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
|
9
|
-
</g>
|
10
|
-
</svg>
|
11
|
-
</div>`:e`<div class="${d({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
5
|
+
${l?e`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`:e`<div class="${o({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
|
12
6
|
</div>
|
13
7
|
<div class="stepper__item__line__container">
|
14
|
-
${this.isLast?i:e`<div class="${
|
8
|
+
${this.isLast?i:e`<div class="${o({stepper__item__line:!0,"stepper__item__line--active":p})}"></div>`}
|
15
9
|
</div>
|
16
10
|
</div>
|
17
11
|
<div class="stepper__item__content">
|
18
|
-
<div class="${
|
19
|
-
<div class="${
|
12
|
+
<div class="${o({stepper__content__title:!0,"stepper__content__title--alone":!this.subtitle,"stepper__content__title--active":t})}">${this.title}</div>
|
13
|
+
<div class="${o({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
|
20
14
|
</div>
|
21
15
|
</div>
|
22
|
-
`}
|
16
|
+
`}getSvg(){let t="sm"==this.size?20:"md"==this.size?24:28;return e`
|
17
|
+
<svg width="${t}" height="${t}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
18
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
|
19
|
+
</svg>
|
20
|
+
`}};t([s()],d.prototype,"title",void 0),t([s()],d.prototype,"subtitle",void 0),t([l()],d.prototype,"contentBelow",void 0),t([l()],d.prototype,"size",void 0),t([l()],d.prototype,"icon",void 0),t([l()],d.prototype,"isFirst",void 0),t([l()],d.prototype,"isLast",void 0),t([l()],d.prototype,"isComplete",void 0),t([l()],d.prototype,"isCurrent",void 0),t([l()],d.prototype,"currentStepValue",void 0),t([l()],d.prototype,"completedStepValue",void 0),t([l()],d.prototype,"calculatedCompletedStepValue",void 0),t([l()],d.prototype,"value",void 0),t([l()],d.prototype,"haveFlex",void 0),d=t([p("nile-vertical-stepper-item")],d);export{d as N};
|
@@ -88,7 +88,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
88
88
|
handleSelect(event) {
|
89
89
|
this.value = event.detail.value;
|
90
90
|
this.emit('nile-complete', { value: event.detail.value });
|
91
|
-
this.emit('nile-input', { value: event.detail.value });
|
92
91
|
this.isDropdownOpen = false;
|
93
92
|
this.dropdownElement?.hide();
|
94
93
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n }\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.emit('nile-input', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}"]}
|
1
|
+
{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n }\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}"]}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/**
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
2
|
+
* Copyright Aquera Inc 2023
|
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
7
|
/**
|
8
8
|
* Progressbar CSS
|
9
9
|
*/
|