@aquera/nile-elements 1.2.1-beta-1.5 → 1.2.1-beta-1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/demo/index.html +83 -100
  2. package/demo/variables.css +2 -3
  3. package/dist/index.js +369 -657
  4. package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
  5. package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
  6. package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
  7. package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
  8. package/dist/nile-calendar/nile-calendar.css.esm.js +38 -221
  9. package/dist/nile-calendar/nile-calendar.esm.js +98 -204
  10. package/dist/nile-select/nile-select.cjs.js +1 -1
  11. package/dist/nile-select/nile-select.cjs.js.map +1 -1
  12. package/dist/nile-select/nile-select.esm.js +4 -4
  13. package/dist/nile-select/virtual-scroll-helper.cjs.js +1 -1
  14. package/dist/nile-select/virtual-scroll-helper.cjs.js.map +1 -1
  15. package/dist/nile-select/virtual-scroll-helper.esm.js +1 -0
  16. package/dist/nile-virtual-select/nile-virtual-select.cjs.js +1 -1
  17. package/dist/nile-virtual-select/nile-virtual-select.cjs.js.map +1 -1
  18. package/dist/nile-virtual-select/nile-virtual-select.esm.js +1 -1
  19. package/dist/src/nile-calendar/nile-calendar.css.js +36 -219
  20. package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  21. package/dist/src/nile-calendar/nile-calendar.d.ts +0 -15
  22. package/dist/src/nile-calendar/nile-calendar.js +93 -318
  23. package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
  24. package/dist/src/nile-rich-text-editor/utils.d.ts +0 -13
  25. package/dist/src/nile-rich-text-editor/utils.js +1 -537
  26. package/dist/src/nile-rich-text-editor/utils.js.map +1 -1
  27. package/dist/src/nile-select/nile-select.d.ts +1 -0
  28. package/dist/src/nile-select/nile-select.js +30 -9
  29. package/dist/src/nile-select/nile-select.js.map +1 -1
  30. package/dist/src/nile-select/virtual-scroll-helper.js +1 -0
  31. package/dist/src/nile-select/virtual-scroll-helper.js.map +1 -1
  32. package/dist/src/nile-virtual-select/nile-virtual-select.js +1 -0
  33. package/dist/src/nile-virtual-select/nile-virtual-select.js.map +1 -1
  34. package/dist/src/version.js +1 -1
  35. package/dist/src/version.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +1 -1
  38. package/src/nile-calendar/nile-calendar.css.ts +36 -219
  39. package/src/nile-calendar/nile-calendar.ts +106 -343
  40. package/src/nile-select/nile-select.ts +25 -15
  41. package/src/nile-select/virtual-scroll-helper.ts +2 -0
  42. package/src/nile-virtual-select/nile-virtual-select.ts +1 -0
  43. package/vscode-html-custom-data.json +17 -41
package/demo/index.html CHANGED
@@ -1,104 +1,87 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <!-- <link rel="stylesheet" href="nxtgen.css" id="stylesheet" /> -->
6
- <link rel="stylesheet" href="variables.css" id="stylesheet" />
7
- <!-- <link rel="stylesheet" href="index.css" /> -->
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <link rel="stylesheet" href="variables.css" id="stylesheet" />
7
+ <link rel="stylesheet" href="index.css" />
8
+ <script type="module" src="index.js"></script>
9
+ </head>
10
+ <style>
11
+ .flex-container {
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ gap: 30px;
15
+ padding: 0;
16
+ margin: 0;
17
+ border: 1px solid silver;
18
+ height: 900px;
19
+ }
20
+
21
+ nile-button {
22
+ flex: 0 0 auto;
23
+ height: 38px;
24
+ }
25
+ </style>
26
+
27
+ <body>
28
+
29
+
30
+ <!-- <nile-select #select [value]="selectedArray" [data]="newOptions" placeholder="Please Select multiple options"
31
+ searchEnabled enableVirtualScroll multiple (nile-change)="change($event)"
32
+ (nile-search)="search($event)" (nile-scroll-end)="scroll($event)" [optionsLoading]="loading"></nile-select> -->
33
+
34
+
35
+ <!-- <nile-select class="virtual-scroll" placeholder="Please Select" searchEnabled="true" multiple enableVirtualScroll="true" disableLocalSearch>
36
+ </nile-select> -->
37
+
38
+ <nile-select class="virtual-scroll" multiple searchEnabled enableVirtualScroll portal></nile-select>
39
+ <nile-select multiple searchEnabled portal>
40
+
41
+ <nile-option value="option-1">Option 1</nile-option>
42
+ <nile-option value="option-2">Option 2</nile-option>
43
+ <nile-option value="option-3">Option 3</nile-option>
44
+ <nile-option value="option-4">Option 4</nile-option>
45
+
46
+ </nile-select>
47
+
48
+
49
+ <button onclick="handleClick()">Open</button>
50
+ <button onclick="handleClickClose()">Close</button>
8
51
 
9
- <script type="module" src="index.js"></script>
10
- </head>
11
- <body>
12
-
13
- <style>
14
- body {
15
- font-family: sans-serif;
16
- display: flex;
17
- flex-direction: column;
18
- gap: 2rem;
19
- padding: 2rem;
20
- }
21
- .calendar-block {
22
- border: 1px solid #ccc;
23
- border-radius: 8px;
24
- padding: 1rem;
25
- }
26
- pre {
27
- background: #f7f7f7;
28
- padding: 0.75rem;
29
- border-radius: 4px;
30
- max-height: 200px;
31
- overflow-y: auto;
32
- font-size: 0.9rem;
33
- }
34
- </style>
35
- </head>
36
- <body>
37
- <div class="calendar-block">
38
- <h3>Calendar 1 — Range + hideTypes</h3>
39
- <nile-calendar id="cal1" range hideTypes showMonthDropdown showYearDropdown showManualInputs allowClear></nile-calendar>
40
- <pre id="log1"></pre>
41
- </div>
42
-
43
- <div class="calendar-block">
44
- <h3>Calendar 2 — Range (default types shown)</h3>
45
- <nile-calendar id="cal2" range></nile-calendar>
46
- <pre id="log2"></pre>
47
- </div>
48
-
49
- <div class="calendar-block">
50
- <h3>Calendar 3 — Year Range (2010–2030)</h3>
51
- <nile-calendar id="cal3" startYear="2010" endYear="2030"></nile-calendar>
52
- <pre id="log3"></pre>
53
- </div>
54
-
55
- <div class="calendar-block">
56
- <h3>Calendar 4 — Range + allowClear</h3>
57
- <nile-calendar
58
- type="relative"
59
- hide-duration-fields='["minutes","hours"]'
60
- ></nile-calendar>
61
-
62
- <pre id="log4"></pre>
63
- </div>
64
-
65
- <script type="module">
66
- const calendars = [
67
- { id: 'cal1', log: 'log1' },
68
- { id: 'cal2', log: 'log2' },
69
- { id: 'cal3', log: 'log3' },
70
- { id: 'cal4', log: 'log4' },
71
- ];
72
-
73
- const eventList = [
74
- 'nile-init',
75
- 'nile-destroy',
76
- 'nile-change',
77
- 'nile-changed',
78
- 'nile-clear',
79
- 'nile-type-change',
80
- 'nile-month-change',
81
- 'nile-year-change',
82
- ];
83
-
84
- calendars.forEach(({ id, log }) => {
85
- const cal = document.getElementById(id);
86
- const logEl = document.getElementById(log);
87
-
88
- const logEvent = (eventName, detail) => {
89
- const time = new Date().toLocaleTimeString();
90
- const message = `[${time}] ${eventName}: ${JSON.stringify(detail, null, 2)}\n`;
91
- logEl.textContent = message + logEl.textContent;
92
- };
93
-
94
- eventList.forEach(eventName => {
95
- cal.addEventListener(eventName, e => {
96
- logEvent(eventName, e.detail);
97
- });
98
- });
99
- });
100
- </script>
101
- </body>
102
-
103
- </body>
52
+
53
+
54
+ <script>
55
+
56
+ // const options = Array.from({ length: 40 }, (_, i) => ({
57
+ // value: `option-${i + 1}`,
58
+ // label: `Option ${i + 1}`,
59
+ // }));
60
+ // const e = document.querySelector('nile-select.virtual-scroll');
61
+ // e.data = options;
62
+
63
+ const selectedOption = ['option-1', 'option-2', 'option-3', 'option-4'];
64
+
65
+
66
+ const select = document.querySelector('nile-select.virtual-scroll');
67
+ const options = Array.from({ length: 40000 }, (_, i) => ({
68
+ value: `option-${i + 1}`,
69
+ label: `Option ${i + 1}`,
70
+ }));
71
+
72
+ select.data = options;
73
+
74
+ function handleClick() {
75
+ console.log('select.open', select.open);
76
+ select.open = true;
77
+ }
78
+
79
+ function handleClickClose() {
80
+ console.log('select.open', select.open);
81
+ select.open = false;
82
+ }
83
+
84
+ </script>
85
+ </body>
86
+
104
87
  </html>
package/demo/variables.css CHANGED
@@ -307,8 +307,8 @@
307
307
  --nile-colors-primary-700: #005291;
308
308
  --nile-colors-primary-600: #005EA6;
309
309
  --nile-colors-primary-500: #80AED3;
310
- --nile-colors-primary-400: #BFD7E9;
311
- --nile-colors-primary-100: #E6EFF6;
310
+ --nile-colors-primary-400: rgba(0, 94, 166, 0.25);
311
+ --nile-colors-primary-100: rgba(0, 94, 166, 0.1);
312
312
  --nile-colors-neutral-700: #777D82;
313
313
  --nile-colors-neutral-500: #C7CED4;
314
314
  --nile-colors-neutral-400: #E6E9EB;
@@ -525,7 +525,6 @@
525
525
  --nile-box-shadow-10: 0 0 0 1px rgba(14, 165, 233, 0.4);
526
526
  --nile-box-shadow-11: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
527
527
  --nile-box-shadow-12: hsl(198.6 88.7% 48.4% / 40%);
528
- --nile-box-shadow-13: 0 2px 4px 0 rgba(119, 125, 130, 0.15);
529
528
 
530
529
  /* Border Radius */
531
530