@star-ng/ui 0.0.0-stage → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +162 -2
  3. package/fesm2022/star-ng-ui-accordion.mjs +376 -0
  4. package/fesm2022/star-ng-ui-accordion.mjs.map +1 -0
  5. package/fesm2022/star-ng-ui-autocomplete.mjs +786 -0
  6. package/fesm2022/star-ng-ui-autocomplete.mjs.map +1 -0
  7. package/fesm2022/star-ng-ui-avatar.mjs +154 -0
  8. package/fesm2022/star-ng-ui-avatar.mjs.map +1 -0
  9. package/fesm2022/star-ng-ui-badge.mjs +153 -0
  10. package/fesm2022/star-ng-ui-badge.mjs.map +1 -0
  11. package/fesm2022/star-ng-ui-breadcrumb.mjs +199 -0
  12. package/fesm2022/star-ng-ui-breadcrumb.mjs.map +1 -0
  13. package/fesm2022/star-ng-ui-button.mjs +282 -0
  14. package/fesm2022/star-ng-ui-button.mjs.map +1 -0
  15. package/fesm2022/star-ng-ui-card.mjs +112 -0
  16. package/fesm2022/star-ng-ui-card.mjs.map +1 -0
  17. package/fesm2022/star-ng-ui-chart.mjs +1904 -0
  18. package/fesm2022/star-ng-ui-chart.mjs.map +1 -0
  19. package/fesm2022/star-ng-ui-checkbox.mjs +345 -0
  20. package/fesm2022/star-ng-ui-checkbox.mjs.map +1 -0
  21. package/fesm2022/star-ng-ui-core.mjs +484 -0
  22. package/fesm2022/star-ng-ui-core.mjs.map +1 -0
  23. package/fesm2022/star-ng-ui-data-display.mjs +1870 -0
  24. package/fesm2022/star-ng-ui-data-display.mjs.map +1 -0
  25. package/fesm2022/star-ng-ui-date-picker.mjs +2786 -0
  26. package/fesm2022/star-ng-ui-date-picker.mjs.map +1 -0
  27. package/fesm2022/star-ng-ui-dialog.mjs +948 -0
  28. package/fesm2022/star-ng-ui-dialog.mjs.map +1 -0
  29. package/fesm2022/star-ng-ui-drawer.mjs +158 -0
  30. package/fesm2022/star-ng-ui-drawer.mjs.map +1 -0
  31. package/fesm2022/star-ng-ui-editor.mjs +416 -0
  32. package/fesm2022/star-ng-ui-editor.mjs.map +1 -0
  33. package/fesm2022/star-ng-ui-field.mjs +378 -0
  34. package/fesm2022/star-ng-ui-field.mjs.map +1 -0
  35. package/fesm2022/star-ng-ui-file-upload.mjs +762 -0
  36. package/fesm2022/star-ng-ui-file-upload.mjs.map +1 -0
  37. package/fesm2022/star-ng-ui-i18n-de.mjs +179 -0
  38. package/fesm2022/star-ng-ui-i18n-de.mjs.map +1 -0
  39. package/fesm2022/star-ng-ui-i18n-es.mjs +179 -0
  40. package/fesm2022/star-ng-ui-i18n-es.mjs.map +1 -0
  41. package/fesm2022/star-ng-ui-input-group.mjs +188 -0
  42. package/fesm2022/star-ng-ui-input-group.mjs.map +1 -0
  43. package/fesm2022/star-ng-ui-input-mask.mjs +434 -0
  44. package/fesm2022/star-ng-ui-input-mask.mjs.map +1 -0
  45. package/fesm2022/star-ng-ui-input-number.mjs +691 -0
  46. package/fesm2022/star-ng-ui-input-number.mjs.map +1 -0
  47. package/fesm2022/star-ng-ui-input-otp.mjs +343 -0
  48. package/fesm2022/star-ng-ui-input-otp.mjs.map +1 -0
  49. package/fesm2022/star-ng-ui-input-tags.mjs +616 -0
  50. package/fesm2022/star-ng-ui-input-tags.mjs.map +1 -0
  51. package/fesm2022/star-ng-ui-knob.mjs +514 -0
  52. package/fesm2022/star-ng-ui-knob.mjs.map +1 -0
  53. package/fesm2022/star-ng-ui-layout.mjs +608 -0
  54. package/fesm2022/star-ng-ui-layout.mjs.map +1 -0
  55. package/fesm2022/star-ng-ui-listbox.mjs +886 -0
  56. package/fesm2022/star-ng-ui-listbox.mjs.map +1 -0
  57. package/fesm2022/star-ng-ui-media.mjs +833 -0
  58. package/fesm2022/star-ng-ui-media.mjs.map +1 -0
  59. package/fesm2022/star-ng-ui-menu.mjs +1840 -0
  60. package/fesm2022/star-ng-ui-menu.mjs.map +1 -0
  61. package/fesm2022/star-ng-ui-message.mjs +191 -0
  62. package/fesm2022/star-ng-ui-message.mjs.map +1 -0
  63. package/fesm2022/star-ng-ui-paginator.mjs +387 -0
  64. package/fesm2022/star-ng-ui-paginator.mjs.map +1 -0
  65. package/fesm2022/star-ng-ui-panel.mjs +324 -0
  66. package/fesm2022/star-ng-ui-panel.mjs.map +1 -0
  67. package/fesm2022/star-ng-ui-password.mjs +517 -0
  68. package/fesm2022/star-ng-ui-password.mjs.map +1 -0
  69. package/fesm2022/star-ng-ui-popover.mjs +241 -0
  70. package/fesm2022/star-ng-ui-popover.mjs.map +1 -0
  71. package/fesm2022/star-ng-ui-progress-bar.mjs +183 -0
  72. package/fesm2022/star-ng-ui-progress-bar.mjs.map +1 -0
  73. package/fesm2022/star-ng-ui-radio.mjs +411 -0
  74. package/fesm2022/star-ng-ui-radio.mjs.map +1 -0
  75. package/fesm2022/star-ng-ui-rating.mjs +211 -0
  76. package/fesm2022/star-ng-ui-rating.mjs.map +1 -0
  77. package/fesm2022/star-ng-ui-select-button.mjs +613 -0
  78. package/fesm2022/star-ng-ui-select-button.mjs.map +1 -0
  79. package/fesm2022/star-ng-ui-select.mjs +2547 -0
  80. package/fesm2022/star-ng-ui-select.mjs.map +1 -0
  81. package/fesm2022/star-ng-ui-skeleton.mjs +160 -0
  82. package/fesm2022/star-ng-ui-skeleton.mjs.map +1 -0
  83. package/fesm2022/star-ng-ui-slider.mjs +552 -0
  84. package/fesm2022/star-ng-ui-slider.mjs.map +1 -0
  85. package/fesm2022/star-ng-ui-spinner.mjs +148 -0
  86. package/fesm2022/star-ng-ui-spinner.mjs.map +1 -0
  87. package/fesm2022/star-ng-ui-stepper.mjs +360 -0
  88. package/fesm2022/star-ng-ui-stepper.mjs.map +1 -0
  89. package/fesm2022/star-ng-ui-table.mjs +3531 -0
  90. package/fesm2022/star-ng-ui-table.mjs.map +1 -0
  91. package/fesm2022/star-ng-ui-tabs.mjs +464 -0
  92. package/fesm2022/star-ng-ui-tabs.mjs.map +1 -0
  93. package/fesm2022/star-ng-ui-tag.mjs +129 -0
  94. package/fesm2022/star-ng-ui-tag.mjs.map +1 -0
  95. package/fesm2022/star-ng-ui-theme-switch.mjs +105 -0
  96. package/fesm2022/star-ng-ui-theme-switch.mjs.map +1 -0
  97. package/fesm2022/star-ng-ui-theme.mjs +98 -0
  98. package/fesm2022/star-ng-ui-theme.mjs.map +1 -0
  99. package/fesm2022/star-ng-ui-toast.mjs +298 -0
  100. package/fesm2022/star-ng-ui-toast.mjs.map +1 -0
  101. package/fesm2022/star-ng-ui-toggle-switch.mjs +316 -0
  102. package/fesm2022/star-ng-ui-toggle-switch.mjs.map +1 -0
  103. package/fesm2022/star-ng-ui-tooltip.mjs +297 -0
  104. package/fesm2022/star-ng-ui-tooltip.mjs.map +1 -0
  105. package/fesm2022/star-ng-ui-transloco.mjs +40 -0
  106. package/fesm2022/star-ng-ui-transloco.mjs.map +1 -0
  107. package/fesm2022/star-ng-ui-tree.mjs +1446 -0
  108. package/fesm2022/star-ng-ui-tree.mjs.map +1 -0
  109. package/fesm2022/star-ng-ui-utility.mjs +2134 -0
  110. package/fesm2022/star-ng-ui-utility.mjs.map +1 -0
  111. package/fesm2022/star-ng-ui.mjs +51 -0
  112. package/package.json +285 -3
  113. package/styles/_base.scss +70 -0
  114. package/styles/_shared.scss +2 -0
  115. package/styles/_tokens.scss +190 -0
  116. package/styles/controls/_accordion.scss +75 -0
  117. package/styles/controls/_autocomplete.scss +44 -0
  118. package/styles/controls/_avatar.scss +39 -0
  119. package/styles/controls/_breadcrumb.scss +45 -0
  120. package/styles/controls/_button.scss +137 -0
  121. package/styles/controls/_card.scss +38 -0
  122. package/styles/controls/_chart.scss +214 -0
  123. package/styles/controls/_chip.scss +51 -0
  124. package/styles/controls/_choice.scss +153 -0
  125. package/styles/controls/_data-display.scss +124 -0
  126. package/styles/controls/_date-picker.scss +300 -0
  127. package/styles/controls/_dialog.scss +123 -0
  128. package/styles/controls/_drawer.scss +118 -0
  129. package/styles/controls/_editor.scss +74 -0
  130. package/styles/controls/_field.scss +92 -0
  131. package/styles/controls/_file-upload.scss +136 -0
  132. package/styles/controls/_input-group.scss +104 -0
  133. package/styles/controls/_input-mask.scss +46 -0
  134. package/styles/controls/_input-number.scss +125 -0
  135. package/styles/controls/_knob.scss +76 -0
  136. package/styles/controls/_layout.scss +182 -0
  137. package/styles/controls/_listbox.scss +38 -0
  138. package/styles/controls/_media.scss +222 -0
  139. package/styles/controls/_menu.scss +254 -0
  140. package/styles/controls/_message.scss +48 -0
  141. package/styles/controls/_org-chart.scss +128 -0
  142. package/styles/controls/_paginator.scss +59 -0
  143. package/styles/controls/_panel.scss +83 -0
  144. package/styles/controls/_popover.scss +40 -0
  145. package/styles/controls/_progress-bar.scss +74 -0
  146. package/styles/controls/_select-button.scss +61 -0
  147. package/styles/controls/_select.scss +216 -0
  148. package/styles/controls/_skeleton.scss +43 -0
  149. package/styles/controls/_slider.scss +163 -0
  150. package/styles/controls/_spinner.scss +34 -0
  151. package/styles/controls/_stepper.scss +109 -0
  152. package/styles/controls/_table.scss +523 -0
  153. package/styles/controls/_tabs.scss +93 -0
  154. package/styles/controls/_tag.scss +84 -0
  155. package/styles/controls/_toast.scss +141 -0
  156. package/styles/controls/_tooltip.scss +14 -0
  157. package/styles/controls/_tree.scss +113 -0
  158. package/styles/controls/_utility.scss +654 -0
  159. package/styles/star-ng.css +5807 -0
  160. package/styles/star-ng.min.css +1 -0
  161. package/styles/star-ng.scss +50 -0
  162. package/theme/star-theme-first-paint.js +1 -0
  163. package/types/star-ng-ui-accordion.d.ts +82 -0
  164. package/types/star-ng-ui-autocomplete.d.ts +171 -0
  165. package/types/star-ng-ui-avatar.d.ts +43 -0
  166. package/types/star-ng-ui-badge.d.ts +46 -0
  167. package/types/star-ng-ui-breadcrumb.d.ts +39 -0
  168. package/types/star-ng-ui-button.d.ts +79 -0
  169. package/types/star-ng-ui-card.d.ts +29 -0
  170. package/types/star-ng-ui-chart.d.ts +337 -0
  171. package/types/star-ng-ui-checkbox.d.ts +92 -0
  172. package/types/star-ng-ui-core.d.ts +373 -0
  173. package/types/star-ng-ui-data-display.d.ts +438 -0
  174. package/types/star-ng-ui-date-picker.d.ts +701 -0
  175. package/types/star-ng-ui-dialog.d.ts +254 -0
  176. package/types/star-ng-ui-drawer.d.ts +29 -0
  177. package/types/star-ng-ui-editor.d.ts +96 -0
  178. package/types/star-ng-ui-field.d.ts +146 -0
  179. package/types/star-ng-ui-file-upload.d.ts +192 -0
  180. package/types/star-ng-ui-i18n-de.d.ts +7 -0
  181. package/types/star-ng-ui-i18n-es.d.ts +7 -0
  182. package/types/star-ng-ui-input-group.d.ts +58 -0
  183. package/types/star-ng-ui-input-mask.d.ts +126 -0
  184. package/types/star-ng-ui-input-number.d.ts +193 -0
  185. package/types/star-ng-ui-input-otp.d.ts +86 -0
  186. package/types/star-ng-ui-input-tags.d.ts +159 -0
  187. package/types/star-ng-ui-knob.d.ts +121 -0
  188. package/types/star-ng-ui-layout.d.ts +154 -0
  189. package/types/star-ng-ui-listbox.d.ts +170 -0
  190. package/types/star-ng-ui-media.d.ts +161 -0
  191. package/types/star-ng-ui-menu.d.ts +332 -0
  192. package/types/star-ng-ui-message.d.ts +52 -0
  193. package/types/star-ng-ui-paginator.d.ts +85 -0
  194. package/types/star-ng-ui-panel.d.ts +65 -0
  195. package/types/star-ng-ui-password.d.ts +129 -0
  196. package/types/star-ng-ui-popover.d.ts +57 -0
  197. package/types/star-ng-ui-progress-bar.d.ts +49 -0
  198. package/types/star-ng-ui-radio.d.ts +116 -0
  199. package/types/star-ng-ui-rating.d.ts +52 -0
  200. package/types/star-ng-ui-select-button.d.ts +169 -0
  201. package/types/star-ng-ui-select.d.ts +563 -0
  202. package/types/star-ng-ui-skeleton.d.ts +47 -0
  203. package/types/star-ng-ui-slider.d.ts +145 -0
  204. package/types/star-ng-ui-spinner.d.ts +29 -0
  205. package/types/star-ng-ui-stepper.d.ts +89 -0
  206. package/types/star-ng-ui-table.d.ts +885 -0
  207. package/types/star-ng-ui-tabs.d.ts +109 -0
  208. package/types/star-ng-ui-tag.d.ts +35 -0
  209. package/types/star-ng-ui-theme-switch.d.ts +36 -0
  210. package/types/star-ng-ui-theme.d.ts +95 -0
  211. package/types/star-ng-ui-toast.d.ts +84 -0
  212. package/types/star-ng-ui-toggle-switch.d.ts +81 -0
  213. package/types/star-ng-ui-tooltip.d.ts +66 -0
  214. package/types/star-ng-ui-transloco.d.ts +14 -0
  215. package/types/star-ng-ui-tree.d.ts +343 -0
  216. package/types/star-ng-ui-utility.d.ts +533 -0
  217. package/types/star-ng-ui.d.ts +51 -0
@@ -0,0 +1,387 @@
1
+ import { _IdGenerator } from "@angular/cdk/a11y";
2
+ import * as i0 from "@angular/core";
3
+ import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output } from "@angular/core";
4
+ import { STAR_UI_TEXT } from "@star-ng/ui/core";
5
+ var StarPaginator = class StarPaginator {
6
+ text = inject(STAR_UI_TEXT);
7
+ rowsId = inject(_IdGenerator).getId("star-paginator-rows-");
8
+ totalRecords = input(0, ...ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []);
9
+ first = model(0, ...ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []);
10
+ rows = model(10, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
11
+ rowsPerPageOptions = input([
12
+ 10,
13
+ 25,
14
+ 50
15
+ ], ...ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []);
16
+ pageLinkSize = input(5, ...ngDevMode ? [{ debugName: "pageLinkSize" }] : /* istanbul ignore next */ []);
17
+ showCurrentPageReport = input(true, {
18
+ ...ngDevMode ? { debugName: "showCurrentPageReport" } : /* istanbul ignore next */ {},
19
+ transform: booleanAttribute
20
+ });
21
+ showFirstLast = input(true, {
22
+ ...ngDevMode ? { debugName: "showFirstLast" } : /* istanbul ignore next */ {},
23
+ transform: booleanAttribute
24
+ });
25
+ ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
26
+ pageChange = output();
27
+ pageCount = computed(() => Math.max(1, Math.ceil(this.totalRecords() / Math.max(1, this.rows()))), ...ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []);
28
+ page = computed(() => Math.min(Math.floor(this.first() / Math.max(1, this.rows())), this.pageCount() - 1), ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
29
+ isFirst = computed(() => this.page() === 0, ...ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []);
30
+ isLast = computed(() => this.page() >= this.pageCount() - 1, ...ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []);
31
+ links = computed(() => {
32
+ const count = this.pageCount();
33
+ const size = Math.min(this.pageLinkSize(), count);
34
+ let start = Math.max(0, this.page() - Math.floor(size / 2));
35
+ start = Math.min(start, count - size);
36
+ return Array.from({ length: size }, (_, i) => start + i);
37
+ }, ...ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []);
38
+ report = computed(() => {
39
+ const total = this.totalRecords();
40
+ if (!total) return this.text.pageReport(0, 0, 0);
41
+ const first = this.page() * this.rows();
42
+ return this.text.pageReport(first + 1, Math.min(first + this.rows(), total), total);
43
+ }, ...ngDevMode ? [{ debugName: "report" }] : /* istanbul ignore next */ []);
44
+ goTo(page) {
45
+ const target = Math.min(Math.max(page, 0), this.pageCount() - 1);
46
+ if (target === this.page()) return;
47
+ this.first.set(target * this.rows());
48
+ this.emit();
49
+ }
50
+ changeRows(rows) {
51
+ const first = Math.floor(this.first() / rows) * rows;
52
+ this.rows.set(rows);
53
+ this.first.set(first);
54
+ this.emit();
55
+ }
56
+ emit() {
57
+ this.pageChange.emit({
58
+ first: this.first(),
59
+ rows: this.rows(),
60
+ page: this.page(),
61
+ pageCount: this.pageCount()
62
+ });
63
+ }
64
+ static ɵfac = i0.ɵɵngDeclareFactory({
65
+ minVersion: "12.0.0",
66
+ version: "22.2.6",
67
+ ngImport: i0,
68
+ type: StarPaginator,
69
+ deps: [],
70
+ target: i0.ɵɵFactoryTarget.Component
71
+ });
72
+ static ɵcmp = i0.ɵɵngDeclareComponent({
73
+ minVersion: "17.0.0",
74
+ version: "22.2.6",
75
+ type: StarPaginator,
76
+ isStandalone: true,
77
+ selector: "star-paginator",
78
+ inputs: {
79
+ totalRecords: {
80
+ classPropertyName: "totalRecords",
81
+ publicName: "totalRecords",
82
+ isSignal: true,
83
+ isRequired: false,
84
+ transformFunction: null
85
+ },
86
+ first: {
87
+ classPropertyName: "first",
88
+ publicName: "first",
89
+ isSignal: true,
90
+ isRequired: false,
91
+ transformFunction: null
92
+ },
93
+ rows: {
94
+ classPropertyName: "rows",
95
+ publicName: "rows",
96
+ isSignal: true,
97
+ isRequired: false,
98
+ transformFunction: null
99
+ },
100
+ rowsPerPageOptions: {
101
+ classPropertyName: "rowsPerPageOptions",
102
+ publicName: "rowsPerPageOptions",
103
+ isSignal: true,
104
+ isRequired: false,
105
+ transformFunction: null
106
+ },
107
+ pageLinkSize: {
108
+ classPropertyName: "pageLinkSize",
109
+ publicName: "pageLinkSize",
110
+ isSignal: true,
111
+ isRequired: false,
112
+ transformFunction: null
113
+ },
114
+ showCurrentPageReport: {
115
+ classPropertyName: "showCurrentPageReport",
116
+ publicName: "showCurrentPageReport",
117
+ isSignal: true,
118
+ isRequired: false,
119
+ transformFunction: null
120
+ },
121
+ showFirstLast: {
122
+ classPropertyName: "showFirstLast",
123
+ publicName: "showFirstLast",
124
+ isSignal: true,
125
+ isRequired: false,
126
+ transformFunction: null
127
+ },
128
+ ariaLabel: {
129
+ classPropertyName: "ariaLabel",
130
+ publicName: "ariaLabel",
131
+ isSignal: true,
132
+ isRequired: false,
133
+ transformFunction: null
134
+ }
135
+ },
136
+ outputs: {
137
+ first: "firstChange",
138
+ rows: "rowsChange",
139
+ pageChange: "pageChange"
140
+ },
141
+ host: { classAttribute: "star-paginator" },
142
+ ngImport: i0,
143
+ template: `
144
+ @if (showCurrentPageReport()) {
145
+ <span class="star-paginator__report" aria-live="polite">{{ report() }}</span>
146
+ }
147
+ <nav class="star-paginator__pages" [attr.aria-label]="ariaLabel() ?? text.pagination">
148
+ @if (showFirstLast()) {
149
+ <button
150
+ type="button"
151
+ class="star-paginator__btn"
152
+ [disabled]="isFirst()"
153
+ [attr.aria-label]="text.firstPage"
154
+ (click)="goTo(0)"
155
+ >
156
+ <i class="ph-bold ph-caret-double-left star-icon-mirror" aria-hidden="true"></i>
157
+ </button>
158
+ }
159
+ <button
160
+ type="button"
161
+ class="star-paginator__btn"
162
+ [disabled]="isFirst()"
163
+ [attr.aria-label]="text.previousPage"
164
+ (click)="goTo(page() - 1)"
165
+ >
166
+ <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
167
+ </button>
168
+ @for (link of links(); track link) {
169
+ <button
170
+ type="button"
171
+ class="star-paginator__btn star-paginator__page"
172
+ [class.star-paginator__page--active]="link === page()"
173
+ [attr.aria-current]="link === page() ? 'page' : null"
174
+ [attr.aria-label]="text.page(link + 1)"
175
+ (click)="goTo(link)"
176
+ >
177
+ {{ link + 1 }}
178
+ </button>
179
+ }
180
+ <button
181
+ type="button"
182
+ class="star-paginator__btn"
183
+ [disabled]="isLast()"
184
+ [attr.aria-label]="text.nextPage"
185
+ (click)="goTo(page() + 1)"
186
+ >
187
+ <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
188
+ </button>
189
+ @if (showFirstLast()) {
190
+ <button
191
+ type="button"
192
+ class="star-paginator__btn"
193
+ [disabled]="isLast()"
194
+ [attr.aria-label]="text.lastPage"
195
+ (click)="goTo(pageCount() - 1)"
196
+ >
197
+ <i class="ph-bold ph-caret-double-right star-icon-mirror" aria-hidden="true"></i>
198
+ </button>
199
+ }
200
+ </nav>
201
+ @if (rowsPerPageOptions().length) {
202
+ <label class="star-paginator__rows" [for]="rowsId">
203
+ <span>{{ text.rowsPerPage }}</span>
204
+ <select
205
+ class="star-input star-input--sm star-paginator__select"
206
+ [id]="rowsId"
207
+ [value]="rows()"
208
+ (change)="changeRows(+$any($event.target).value)"
209
+ >
210
+ @for (option of rowsPerPageOptions(); track option) {
211
+ <option [value]="option" [selected]="option === rows()">{{ option }}</option>
212
+ }
213
+ </select>
214
+ </label>
215
+ }
216
+ `,
217
+ isInline: true,
218
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
219
+ });
220
+ };
221
+ i0.ɵɵngDeclareClassMetadata({
222
+ minVersion: "12.0.0",
223
+ version: "22.2.6",
224
+ ngImport: i0,
225
+ type: StarPaginator,
226
+ decorators: [{
227
+ type: Component,
228
+ args: [{
229
+ selector: "star-paginator",
230
+ changeDetection: ChangeDetectionStrategy.OnPush,
231
+ host: { class: "star-paginator" },
232
+ template: `
233
+ @if (showCurrentPageReport()) {
234
+ <span class="star-paginator__report" aria-live="polite">{{ report() }}</span>
235
+ }
236
+ <nav class="star-paginator__pages" [attr.aria-label]="ariaLabel() ?? text.pagination">
237
+ @if (showFirstLast()) {
238
+ <button
239
+ type="button"
240
+ class="star-paginator__btn"
241
+ [disabled]="isFirst()"
242
+ [attr.aria-label]="text.firstPage"
243
+ (click)="goTo(0)"
244
+ >
245
+ <i class="ph-bold ph-caret-double-left star-icon-mirror" aria-hidden="true"></i>
246
+ </button>
247
+ }
248
+ <button
249
+ type="button"
250
+ class="star-paginator__btn"
251
+ [disabled]="isFirst()"
252
+ [attr.aria-label]="text.previousPage"
253
+ (click)="goTo(page() - 1)"
254
+ >
255
+ <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
256
+ </button>
257
+ @for (link of links(); track link) {
258
+ <button
259
+ type="button"
260
+ class="star-paginator__btn star-paginator__page"
261
+ [class.star-paginator__page--active]="link === page()"
262
+ [attr.aria-current]="link === page() ? 'page' : null"
263
+ [attr.aria-label]="text.page(link + 1)"
264
+ (click)="goTo(link)"
265
+ >
266
+ {{ link + 1 }}
267
+ </button>
268
+ }
269
+ <button
270
+ type="button"
271
+ class="star-paginator__btn"
272
+ [disabled]="isLast()"
273
+ [attr.aria-label]="text.nextPage"
274
+ (click)="goTo(page() + 1)"
275
+ >
276
+ <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
277
+ </button>
278
+ @if (showFirstLast()) {
279
+ <button
280
+ type="button"
281
+ class="star-paginator__btn"
282
+ [disabled]="isLast()"
283
+ [attr.aria-label]="text.lastPage"
284
+ (click)="goTo(pageCount() - 1)"
285
+ >
286
+ <i class="ph-bold ph-caret-double-right star-icon-mirror" aria-hidden="true"></i>
287
+ </button>
288
+ }
289
+ </nav>
290
+ @if (rowsPerPageOptions().length) {
291
+ <label class="star-paginator__rows" [for]="rowsId">
292
+ <span>{{ text.rowsPerPage }}</span>
293
+ <select
294
+ class="star-input star-input--sm star-paginator__select"
295
+ [id]="rowsId"
296
+ [value]="rows()"
297
+ (change)="changeRows(+$any($event.target).value)"
298
+ >
299
+ @for (option of rowsPerPageOptions(); track option) {
300
+ <option [value]="option" [selected]="option === rows()">{{ option }}</option>
301
+ }
302
+ </select>
303
+ </label>
304
+ }
305
+ `
306
+ }]
307
+ }],
308
+ propDecorators: {
309
+ totalRecords: [{
310
+ type: i0.Input,
311
+ args: [{
312
+ isSignal: true,
313
+ alias: "totalRecords",
314
+ required: false
315
+ }]
316
+ }],
317
+ first: [{
318
+ type: i0.Input,
319
+ args: [{
320
+ isSignal: true,
321
+ alias: "first",
322
+ required: false
323
+ }]
324
+ }, {
325
+ type: i0.Output,
326
+ args: ["firstChange"]
327
+ }],
328
+ rows: [{
329
+ type: i0.Input,
330
+ args: [{
331
+ isSignal: true,
332
+ alias: "rows",
333
+ required: false
334
+ }]
335
+ }, {
336
+ type: i0.Output,
337
+ args: ["rowsChange"]
338
+ }],
339
+ rowsPerPageOptions: [{
340
+ type: i0.Input,
341
+ args: [{
342
+ isSignal: true,
343
+ alias: "rowsPerPageOptions",
344
+ required: false
345
+ }]
346
+ }],
347
+ pageLinkSize: [{
348
+ type: i0.Input,
349
+ args: [{
350
+ isSignal: true,
351
+ alias: "pageLinkSize",
352
+ required: false
353
+ }]
354
+ }],
355
+ showCurrentPageReport: [{
356
+ type: i0.Input,
357
+ args: [{
358
+ isSignal: true,
359
+ alias: "showCurrentPageReport",
360
+ required: false
361
+ }]
362
+ }],
363
+ showFirstLast: [{
364
+ type: i0.Input,
365
+ args: [{
366
+ isSignal: true,
367
+ alias: "showFirstLast",
368
+ required: false
369
+ }]
370
+ }],
371
+ ariaLabel: [{
372
+ type: i0.Input,
373
+ args: [{
374
+ isSignal: true,
375
+ alias: "ariaLabel",
376
+ required: false
377
+ }]
378
+ }],
379
+ pageChange: [{
380
+ type: i0.Output,
381
+ args: ["pageChange"]
382
+ }]
383
+ }
384
+ });
385
+ export { StarPaginator };
386
+
387
+ //# sourceMappingURL=star-ng-ui-paginator.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"star-ng-ui-paginator.mjs","names":[],"sources":["../../../projects/star-ng/paginator/paginator.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n model,\n output,\n} from '@angular/core';\nimport { STAR_UI_TEXT } from '@star-ng/ui/core';\n\nexport interface StarPageEvent {\n /** Index of the first record on the page (0-based). */\n readonly first: number;\n readonly rows: number;\n /** Page index (0-based). */\n readonly page: number;\n readonly pageCount: number;\n}\n\n/**\n * Paginator (PrimeNG `p-paginator`): `[(first)]` / `[(rows)]`, page links window,\n * first / last buttons, rows-per-page select and a \"1–10 of 240\" report.\n *\n * `<star-paginator [totalRecords]=\"240\" [(first)]=\"first\" [(rows)]=\"rows\" />`\n */\n@Component({\n selector: 'star-paginator',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'star-paginator' },\n template: `\n @if (showCurrentPageReport()) {\n <span class=\"star-paginator__report\" aria-live=\"polite\">{{ report() }}</span>\n }\n <nav class=\"star-paginator__pages\" [attr.aria-label]=\"ariaLabel() ?? text.pagination\">\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"star-paginator__btn\"\n [disabled]=\"isFirst()\"\n [attr.aria-label]=\"text.firstPage\"\n (click)=\"goTo(0)\"\n >\n <i class=\"ph-bold ph-caret-double-left star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n }\n <button\n type=\"button\"\n class=\"star-paginator__btn\"\n [disabled]=\"isFirst()\"\n [attr.aria-label]=\"text.previousPage\"\n (click)=\"goTo(page() - 1)\"\n >\n <i class=\"ph-bold ph-caret-left star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n @for (link of links(); track link) {\n <button\n type=\"button\"\n class=\"star-paginator__btn star-paginator__page\"\n [class.star-paginator__page--active]=\"link === page()\"\n [attr.aria-current]=\"link === page() ? 'page' : null\"\n [attr.aria-label]=\"text.page(link + 1)\"\n (click)=\"goTo(link)\"\n >\n {{ link + 1 }}\n </button>\n }\n <button\n type=\"button\"\n class=\"star-paginator__btn\"\n [disabled]=\"isLast()\"\n [attr.aria-label]=\"text.nextPage\"\n (click)=\"goTo(page() + 1)\"\n >\n <i class=\"ph-bold ph-caret-right star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"star-paginator__btn\"\n [disabled]=\"isLast()\"\n [attr.aria-label]=\"text.lastPage\"\n (click)=\"goTo(pageCount() - 1)\"\n >\n <i class=\"ph-bold ph-caret-double-right star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n }\n </nav>\n @if (rowsPerPageOptions().length) {\n <label class=\"star-paginator__rows\" [for]=\"rowsId\">\n <span>{{ text.rowsPerPage }}</span>\n <select\n class=\"star-input star-input--sm star-paginator__select\"\n [id]=\"rowsId\"\n [value]=\"rows()\"\n (change)=\"changeRows(+$any($event.target).value)\"\n >\n @for (option of rowsPerPageOptions(); track option) {\n <option [value]=\"option\" [selected]=\"option === rows()\">{{ option }}</option>\n }\n </select>\n </label>\n }\n `,\n})\nexport class StarPaginator {\n protected readonly text = inject(STAR_UI_TEXT);\n protected readonly rowsId = inject(_IdGenerator).getId('star-paginator-rows-');\n\n readonly totalRecords = input(0);\n readonly first = model(0);\n readonly rows = model(10);\n readonly rowsPerPageOptions = input<readonly number[]>([10, 25, 50]);\n /** Number of page links shown around the current page. */\n readonly pageLinkSize = input(5);\n readonly showCurrentPageReport = input(true, { transform: booleanAttribute });\n readonly showFirstLast = input(true, { transform: booleanAttribute });\n readonly ariaLabel = input<string | null>(null);\n\n readonly pageChange = output<StarPageEvent>();\n\n readonly pageCount = computed(() =>\n Math.max(1, Math.ceil(this.totalRecords() / Math.max(1, this.rows()))),\n );\n readonly page = computed(() =>\n Math.min(Math.floor(this.first() / Math.max(1, this.rows())), this.pageCount() - 1),\n );\n protected readonly isFirst = computed(() => this.page() === 0);\n protected readonly isLast = computed(() => this.page() >= this.pageCount() - 1);\n\n protected readonly links = computed(() => {\n const count = this.pageCount();\n const size = Math.min(this.pageLinkSize(), count);\n let start = Math.max(0, this.page() - Math.floor(size / 2));\n start = Math.min(start, count - size);\n return Array.from({ length: size }, (_, i) => start + i);\n });\n\n protected readonly report = computed(() => {\n const total = this.totalRecords();\n if (!total) return this.text.pageReport(0, 0, 0);\n const first = this.page() * this.rows();\n return this.text.pageReport(first + 1, Math.min(first + this.rows(), total), total);\n });\n\n goTo(page: number): void {\n const target = Math.min(Math.max(page, 0), this.pageCount() - 1);\n if (target === this.page()) return;\n this.first.set(target * this.rows());\n this.emit();\n }\n\n protected changeRows(rows: number): void {\n // Keep the first visible record on screen.\n const first = Math.floor(this.first() / rows) * rows;\n this.rows.set(rows);\n this.first.set(first);\n this.emit();\n }\n\n private emit(): void {\n this.pageChange.emit({\n first: this.first(),\n rows: this.rows(),\n page: this.page(),\n pageCount: this.pageCount(),\n });\n }\n}\n"],"mappings":"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"}