@yoozsoft/yoozsoft-ng 6.2.0 → 7.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 +206 -94
- package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs +70 -38
- package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs +194 -109
- package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs +70 -55
- package/fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs +55 -33
- package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-footer.mjs +13 -11
- package/fesm2022/yoozsoft-yoozsoft-ng-footer.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-loading.mjs +17 -11
- package/fesm2022/yoozsoft-yoozsoft-ng-loading.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs +37 -28
- package/fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-overlay.mjs +7 -6
- package/fesm2022/yoozsoft-yoozsoft-ng-overlay.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-pagination.mjs +39 -28
- package/fesm2022/yoozsoft-yoozsoft-ng-pagination.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs +65 -39
- package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-pipes.mjs +3 -3
- package/fesm2022/yoozsoft-yoozsoft-ng-pipes.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-progress.mjs +26 -17
- package/fesm2022/yoozsoft-yoozsoft-ng-progress.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-rating.mjs +155 -0
- package/fesm2022/yoozsoft-yoozsoft-ng-rating.mjs.map +1 -0
- package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs +47 -33
- package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs +30 -29
- package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-table.mjs +93 -84
- package/fesm2022/yoozsoft-yoozsoft-ng-table.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs +41 -27
- package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-toast.mjs +20 -18
- package/fesm2022/yoozsoft-yoozsoft-ng-toast.mjs.map +1 -1
- package/package.json +12 -4
- package/rating/package.json +4 -0
- package/types/yoozsoft-yoozsoft-ng-rating.d.ts +56 -0
package/README.md
CHANGED
|
@@ -1,94 +1,206 @@
|
|
|
1
|
-
# Yoozsoft Ng
|
|
2
|
-
|
|
3
|
-
Angular widgets built
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
The
|
|
8
|
-
|
|
9
|
-
##
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<th scope="
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
<td
|
|
52
|
-
<td>
|
|
53
|
-
<td>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<
|
|
58
|
-
<td
|
|
59
|
-
<td>
|
|
60
|
-
<td>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
<td
|
|
66
|
-
<td>
|
|
67
|
-
<td>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<
|
|
72
|
-
<td
|
|
73
|
-
<td>
|
|
74
|
-
<td>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
<td
|
|
80
|
-
<td>
|
|
81
|
-
<td>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
1
|
+
# Yoozsoft Ng
|
|
2
|
+
|
|
3
|
+
Angular UI components and widgets built with Bootstrap 5 CSS and ng-bootstrap.
|
|
4
|
+
|
|
5
|
+
`@yoozsoft/yoozsoft-ng` provides standalone Angular components with APIs designed for the Angular ecosystem.
|
|
6
|
+
|
|
7
|
+
The library is built with TypeScript and is designed to work with Angular, Bootstrap 5 CSS, and ng-bootstrap.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Standalone Angular components
|
|
12
|
+
- Signal-based APIs
|
|
13
|
+
- Zoneless-ready
|
|
14
|
+
- SSR-friendly
|
|
15
|
+
- Bootstrap 5 based components
|
|
16
|
+
|
|
17
|
+
## Table of Contents
|
|
18
|
+
|
|
19
|
+
<ul>
|
|
20
|
+
<li><a href="#demo">Demo</a></li>
|
|
21
|
+
<li><a href="#compatibility">Compatibility</a></li>
|
|
22
|
+
<li><a href="#dependencies">Dependencies</a></li>
|
|
23
|
+
<li><a href="#installation">Installation</a></li>
|
|
24
|
+
<li><a href="#usage">Usage</a></li>
|
|
25
|
+
<li><a href="#styles">Styles</a></li>
|
|
26
|
+
<li><a href="#icons">Icons</a></li>
|
|
27
|
+
<li><a href="#license">License</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
|
|
30
|
+
## Demo
|
|
31
|
+
|
|
32
|
+
Visit the [Yoozsoft Website](https://www.yoozsoft.com/ys-ng) for general information, demos and documentation.
|
|
33
|
+
|
|
34
|
+
## Compatibility
|
|
35
|
+
|
|
36
|
+
The library versions are aligned with the corresponding Angular versions.
|
|
37
|
+
|
|
38
|
+
<table>
|
|
39
|
+
<thead>
|
|
40
|
+
<tr>
|
|
41
|
+
<th scope="col">yoozsoft-ng</th>
|
|
42
|
+
<th scope="col">Angular</th>
|
|
43
|
+
<th scope="col">ng-bootstrap</th>
|
|
44
|
+
<th scope="col">Bootstrap CSS</th>
|
|
45
|
+
<th scope="col">Popper</th>
|
|
46
|
+
</tr>
|
|
47
|
+
</thead>
|
|
48
|
+
<tbody>
|
|
49
|
+
<tr>
|
|
50
|
+
<th scope="row">1.x.x-alpha.x</th>
|
|
51
|
+
<td>^16.1.0</td>
|
|
52
|
+
<td>15.0.1</td>
|
|
53
|
+
<td>5.3.0</td>
|
|
54
|
+
<td>2.11.8</td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<th scope="row">2.x.x</th>
|
|
58
|
+
<td>^17.3.0</td>
|
|
59
|
+
<td>16.0.0</td>
|
|
60
|
+
<td>5.3.2</td>
|
|
61
|
+
<td>2.11.8</td>
|
|
62
|
+
</tr>
|
|
63
|
+
<tr>
|
|
64
|
+
<th scope="row">3.x.x</th>
|
|
65
|
+
<td>^18.0.0</td>
|
|
66
|
+
<td>17.0.0</td>
|
|
67
|
+
<td>5.3.2</td>
|
|
68
|
+
<td>2.11.8</td>
|
|
69
|
+
</tr>
|
|
70
|
+
<tr>
|
|
71
|
+
<th scope="row">4.x.x</th>
|
|
72
|
+
<td>^19.0.0</td>
|
|
73
|
+
<td>18.0.0</td>
|
|
74
|
+
<td>5.3.3</td>
|
|
75
|
+
<td>2.11.8</td>
|
|
76
|
+
</tr>
|
|
77
|
+
<tr>
|
|
78
|
+
<th scope="row">5.x.x</th>
|
|
79
|
+
<td>^20.0.0</td>
|
|
80
|
+
<td>19.0.0</td>
|
|
81
|
+
<td>5.3.6</td>
|
|
82
|
+
<td>2.11.8</td>
|
|
83
|
+
</tr>
|
|
84
|
+
<tr>
|
|
85
|
+
<th scope="row">6.x.x</th>
|
|
86
|
+
<td>^21.0.0</td>
|
|
87
|
+
<td>20.0.0</td>
|
|
88
|
+
<td>5.3.8</td>
|
|
89
|
+
<td>2.11.8</td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<th scope="row">7.x.x</th>
|
|
93
|
+
<td>^22.0.0</td>
|
|
94
|
+
<td>21.0.0</td>
|
|
95
|
+
<td>5.3.8</td>
|
|
96
|
+
<td>2.11.8</td>
|
|
97
|
+
</tr>
|
|
98
|
+
</tbody>
|
|
99
|
+
</table>
|
|
100
|
+
|
|
101
|
+
## Dependencies
|
|
102
|
+
|
|
103
|
+
The library is designed to work with:
|
|
104
|
+
|
|
105
|
+
- [Angular](https://angular.io/)
|
|
106
|
+
- [ng-bootstrap](https://ng-bootstrap.github.io/)
|
|
107
|
+
- [Bootstrap 5](https://getbootstrap.com/)
|
|
108
|
+
- [Popper](https://popper.js.org/)
|
|
109
|
+
|
|
110
|
+
For the exact Angular peer dependency requirements, please refer to the package metadata.
|
|
111
|
+
|
|
112
|
+
## Installation
|
|
113
|
+
|
|
114
|
+
Install the library from npm:
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
npm i @yoozsoft/yoozsoft-ng
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Install the required UI dependencies:
|
|
121
|
+
|
|
122
|
+
```bash
|
|
123
|
+
npm install @ng-bootstrap/ng-bootstrap@21 bootstrap@5.3.8 @popperjs/core@2.11.8
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Bootstrap CSS
|
|
127
|
+
|
|
128
|
+
Add Bootstrap CSS to your application.
|
|
129
|
+
|
|
130
|
+
For example, in `angular.json`:
|
|
131
|
+
|
|
132
|
+
```json
|
|
133
|
+
{
|
|
134
|
+
"styles": [
|
|
135
|
+
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
|
136
|
+
"src/styles.scss"
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Usage
|
|
142
|
+
|
|
143
|
+
The library is built using standalone Angular components.
|
|
144
|
+
|
|
145
|
+
Import the components and directives you need directly into your Angular components.
|
|
146
|
+
|
|
147
|
+
Example:
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { Component } from '@angular/core';
|
|
151
|
+
import { YsNavbarComponent } from '@yoozsoft/yoozsoft-ng';
|
|
152
|
+
|
|
153
|
+
@Component({
|
|
154
|
+
imports: [YsNavbarComponent],
|
|
155
|
+
template: '<ys-navbar></ys-navbar>'
|
|
156
|
+
})
|
|
157
|
+
export class AppComponent {}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Styles
|
|
161
|
+
|
|
162
|
+
Some components require additional global styles to be included in your application.
|
|
163
|
+
|
|
164
|
+
You can import all library styles from the main styles entry point:
|
|
165
|
+
|
|
166
|
+
```scss
|
|
167
|
+
@use "@yoozsoft/yoozsoft-ng/styles";
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
Or import only the styles required by your application:
|
|
171
|
+
|
|
172
|
+
```scss
|
|
173
|
+
@use "@yoozsoft/yoozsoft-ng/styles/ys-navbar";
|
|
174
|
+
@use "@yoozsoft/yoozsoft-ng/styles/ys-pagination";
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Available component styles:
|
|
178
|
+
|
|
179
|
+
<table>
|
|
180
|
+
<thead>
|
|
181
|
+
<tr>
|
|
182
|
+
<th scope="col">Component</th>
|
|
183
|
+
<th scope="col">Required style</th>
|
|
184
|
+
</tr>
|
|
185
|
+
</thead>
|
|
186
|
+
<tbody>
|
|
187
|
+
<tr>
|
|
188
|
+
<th scope="row">Navbar</th>
|
|
189
|
+
<td>_ys-navbar.scss</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<th scope="row">Pagination</th>
|
|
193
|
+
<td>_ys-pagination.scss</td>
|
|
194
|
+
</tr>
|
|
195
|
+
</tbody>
|
|
196
|
+
</table>
|
|
197
|
+
|
|
198
|
+
## Icons
|
|
199
|
+
|
|
200
|
+
The library primarily uses Font Awesome icon classes by default.
|
|
201
|
+
|
|
202
|
+
When using components that rely on Font Awesome icons, make sure the required Font Awesome styles are available in your application.
|
|
203
|
+
|
|
204
|
+
## License
|
|
205
|
+
|
|
206
|
+
MIT
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i1 from '@angular/cdk/scrolling';
|
|
2
2
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
3
|
-
import { isPlatformBrowser, NgTemplateOutlet
|
|
3
|
+
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { input, output, signal, computed, viewChild, inject, DestroyRef, ElementRef, PLATFORM_ID, TemplateRef, forwardRef, ContentChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
6
6
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
@@ -9,43 +9,74 @@ import { fromEvent, debounceTime, distinctUntilChanged, switchMap, of, catchErro
|
|
|
9
9
|
|
|
10
10
|
class YsAutocomplete {
|
|
11
11
|
/********************* Inputs */
|
|
12
|
-
options = input([],
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
12
|
+
options = input([], /* @ts-ignore */
|
|
13
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
14
|
+
loading = input(false, /* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
16
|
+
loadingMessage = input('Loading...', /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "loadingMessage" }] : /* istanbul ignore next */ []));
|
|
18
|
+
noResultMessage = input('No results found.', /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "noResultMessage" }] : /* istanbul ignore next */ []));
|
|
20
|
+
optionLabel = input('label', /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
|
|
22
|
+
placeholder = input('', /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
24
|
+
multiple = input(false, /* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
26
|
+
showClear = input(false, /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
28
|
+
disabled = input(false, /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
30
|
+
styleClass = input(/* @ts-ignore */
|
|
31
|
+
...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
32
|
+
selectionStyleClass = input('text-bg-light', /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "selectionStyleClass" }] : /* istanbul ignore next */ []));
|
|
34
|
+
clearIconClass = input('fa fa-times', /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "clearIconClass" }] : /* istanbul ignore next */ []));
|
|
36
|
+
searchIconClass = input('fa fa-search', /* @ts-ignore */
|
|
37
|
+
...(ngDevMode ? [{ debugName: "searchIconClass" }] : /* istanbul ignore next */ []));
|
|
38
|
+
loadingIconClass = input('fa fa-spinner fa-spin', /* @ts-ignore */
|
|
39
|
+
...(ngDevMode ? [{ debugName: "loadingIconClass" }] : /* istanbul ignore next */ []));
|
|
40
|
+
multipleCheckIconClass = input('fa fa-check', /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "multipleCheckIconClass" }] : /* istanbul ignore next */ []));
|
|
42
|
+
infiniteScroll = input(false, /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []));
|
|
44
|
+
virtualScroll = input(true, /* @ts-ignore */
|
|
45
|
+
...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
|
|
46
|
+
virtualScrollItemSize = input(36, /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
|
|
48
|
+
virtualScrollThreshold = input(100, /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : /* istanbul ignore next */ []));
|
|
50
|
+
trackBy = input(/* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [undefined, { debugName: "trackBy" }] : /* istanbul ignore next */ []));
|
|
52
|
+
compareWith = input(/* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [undefined, { debugName: "compareWith" }] : /* istanbul ignore next */ []));
|
|
33
54
|
/********************* Outputs */
|
|
34
55
|
/** Event to request more items */
|
|
35
56
|
loadMore = output();
|
|
36
57
|
/** Return selected options */
|
|
37
58
|
selectionChange = output();
|
|
38
59
|
/********************* Signals */
|
|
39
|
-
searchTerm = signal('',
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
60
|
+
searchTerm = signal('', /* @ts-ignore */
|
|
61
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
62
|
+
filteredOptions = signal([], /* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
64
|
+
selectedOptions = signal([], /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
66
|
+
showDropdown = signal(false, /* @ts-ignore */
|
|
67
|
+
...(ngDevMode ? [{ debugName: "showDropdown" }] : /* istanbul ignore next */ []));
|
|
68
|
+
activeIndex = signal(-1, /* @ts-ignore */
|
|
69
|
+
...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
70
|
+
error = signal(null, /* @ts-ignore */
|
|
71
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
72
|
+
internalLoading = signal(false, /* @ts-ignore */
|
|
73
|
+
...(ngDevMode ? [{ debugName: "internalLoading" }] : /* istanbul ignore next */ []));
|
|
74
|
+
isLoading = computed(() => this.loading() || this.internalLoading(), /* @ts-ignore */
|
|
75
|
+
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
76
|
+
disabledState = signal(false, /* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
78
|
+
isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
49
80
|
static nextId = 0;
|
|
50
81
|
componentId = `ys-autocomplete-${YsAutocomplete.nextId++}`;
|
|
51
82
|
activeOptionId = computed(() => {
|
|
@@ -53,9 +84,11 @@ class YsAutocomplete {
|
|
|
53
84
|
return index >= 0
|
|
54
85
|
? `${this.componentId}-option-${index}`
|
|
55
86
|
: null;
|
|
56
|
-
},
|
|
87
|
+
}, /* @ts-ignore */
|
|
88
|
+
...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
|
|
57
89
|
/********************* ViewChild */
|
|
58
|
-
inputRef = viewChild('inputRef',
|
|
90
|
+
inputRef = viewChild('inputRef', /* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
|
|
59
92
|
/********************* Inject */
|
|
60
93
|
destroyRef = inject(DestroyRef);
|
|
61
94
|
host = inject((ElementRef));
|
|
@@ -273,8 +306,8 @@ class YsAutocomplete {
|
|
|
273
306
|
return this.trackBy()?.(item)
|
|
274
307
|
?? this.getLabel(item);
|
|
275
308
|
}
|
|
276
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
277
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsAutocomplete, isStandalone: true, selector: "ys-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, noResultMessage: { classPropertyName: "noResultMessage", publicName: "noResultMessage", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, selectionStyleClass: { classPropertyName: "selectionStyleClass", publicName: "selectionStyleClass", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null }, searchIconClass: { classPropertyName: "searchIconClass", publicName: "searchIconClass", isSignal: true, isRequired: false, transformFunction: null }, loadingIconClass: { classPropertyName: "loadingIconClass", publicName: "loadingIconClass", isSignal: true, isRequired: false, transformFunction: null }, multipleCheckIconClass: { classPropertyName: "multipleCheckIconClass", publicName: "multipleCheckIconClass", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", selectionChange: "selectionChange" }, providers: [
|
|
278
311
|
{
|
|
279
312
|
provide: NG_VALUE_ACCESSOR,
|
|
280
313
|
useExisting: forwardRef(() => YsAutocomplete),
|
|
@@ -282,12 +315,11 @@ class YsAutocomplete {
|
|
|
282
315
|
},
|
|
283
316
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ys-autocomplete position-relative\">\n <div class=\"input-group flex-wrap\">\n @if (multiple() && selectedOptions().length > 0) {\n <div class=\"d-flex flex-wrap\">\n @for (item of selectedOptions(); track trackItem(item)) {\n <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [class]=\"selectionStyleClass()\">\n {{ getLabel(item) }}\n <i class=\"ms-2 cursor-pointer\" [class]=\"clearIconClass()\" (click)=\"removeItem(item)\"></i>\n </span>\n }\n </div>\n }\n\n <div class=\"input-group w-100\">\n <input #inputRef type=\"text\" class=\"form-control\" [class]=\"styleClass()\" [placeholder]=\"placeholder()\"\n [value]=\"searchTerm()\" (input)=\"onInput($event)\" (keydown)=\"handleKeyboard($event)\"\n (focus)=\"showDropdown.set(true)\" (click)=\"showDropdown.set(true)\" role=\"combobox\"\n aria-autocomplete=\"list\" [attr.aria-expanded]=\"showDropdown()\" aria-haspopup=\"listbox\"\n [attr.aria-activedescendant]=\"activeOptionId()\" [disabled]=\"isDisabled()\" />\n\n @if (showClear()) {\n @if ((multiple() && selectedOptions().length > 0) || (!multiple() && searchTerm())) {\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\n [disabled]=\"isDisabled()\">\n <span [class]=\"clearIconClass()\"></span>\n </button>\n }\n }\n <span class=\"input-group-text\" (click)=\"showDropdown.set( !showDropdown())\">\n <i [class]=\"searchIconClass()\"></i>\n </span>\n </div>\n </div>\n\n @if (showDropdown()) {\n <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\n @if (isLoading()) {\n <div class=\"list-group-item text-center\">\n <i class=\"me-2\" [class]=\"loadingIconClass()\"></i>{{ loadingMessage() }}\n </div>\n }\n @else if (error()) {\n <div class=\"list-group-item text-danger text-center\">{{ error() }}</div>\n }\n @else if (filteredOptions().length === 0) {\n <div class=\"list-group-item text-muted text-center\">\n {{ noResultMessage() }}\n </div>\n }\n <!-- \u2705 \u062D\u0627\u0644\u062A Virtual Scroll \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u0628\u0632\u0631\u06AF -->\n @else if (virtualScroll() && filteredOptions().length > virtualScrollThreshold()) {\n <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize()\" class=\"list-group w-100\">\n\n <div [id]=\"componentId + '-option-' + i\" *cdkVirtualFor=\"let item of filteredOptions(); let i = index\"\n class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex()\"\n [class.selected]=\"isSelected(item)\" (click)=\"onSelect(item)\">\n\n @if (itemTemplate) {\n\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"> </ng-container>\n\n } @else {\n\n @if(multiple()){\n <i class=\"me-1 text-success\" [class]=\"multipleCheckIconClass()\" [class.invisible]=\"!isSelected(item)\">\n </i>\n }\n\n {{ getLabel(item) }}\n\n }\n\n </div>\n\n </cdk-virtual-scroll-viewport>\n\n }\n <!-- \u2705 \u062D\u0627\u0644\u062A \u0645\u0639\u0645\u0648\u0644\u06CC \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u06A9\u0648\u0686\u06A9 -->\n @else {\n <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll()\" (scroll)=\"onScroll($event)\"\n role=\"listbox\">\n @for (item of filteredOptions(); track trackItem(item); let i = $index) {\n <li [id]=\"componentId + '-option-' + i\" class=\"list-group-item list-group-item-action\"\n [class.active]=\"i === activeIndex()\" [class.selected]=\"isSelected(item)\" (click)=\"onSelect(item)\"\n role=\"option\" [attr.aria-selected]=\"isSelected(item)\">\n @if (itemTemplate) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n } @else {\n @if(multiple()){\n <i class=\"me-1 text-success\" [class]=\"multipleCheckIconClass()\" [class.invisible]=\"!isSelected(item)\">\n </i>\n }\n {{ getLabel(item) }}\n }\n </li>\n }\n </ul>\n }\n </div>\n\n }\n\n</div>", styles: [".ys-autocomplete .dropdown-container,.ys-autocomplete .list-group{z-index:1000;max-height:200px}.ys-autocomplete cdk-virtual-scroll-viewport{height:200px;display:block}.ys-autocomplete .list-group-item-action{font-size:13px;font-weight:500;line-height:22px;text-transform:uppercase}.ys-autocomplete .list-group-item-action.selected{color:var(--bs-list-group-action-hover-color);background-color:var(--bs-list-group-action-hover-bg)}.ys-autocomplete .btn-clear:hover{background-color:var(--bs-btn-hover-bg)}.ys-autocomplete .badge{font-size:.9rem;cursor:default;font-weight:var(--bs-body-font-weight)}.ys-autocomplete .badge i{cursor:pointer;font-size:.8rem}.ys-autocomplete .badge:hover{font-weight:var(--bs-badge-font-weight)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
284
317
|
}
|
|
285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsAutocomplete, decorators: [{
|
|
286
319
|
type: Component,
|
|
287
320
|
args: [{ selector: 'ys-autocomplete', imports: [
|
|
288
321
|
FormsModule,
|
|
289
322
|
NgTemplateOutlet,
|
|
290
|
-
NgClass,
|
|
291
323
|
ScrollingModule
|
|
292
324
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
293
325
|
{
|