@ojiepermana/angular-component 22.0.27

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 (244) hide show
  1. package/README.md +82 -0
  2. package/accordion/README.md +193 -0
  3. package/alert/README.md +180 -0
  4. package/alert-dialog/README.md +239 -0
  5. package/aspect-ratio/README.md +112 -0
  6. package/avatar/README.md +176 -0
  7. package/badge/README.md +133 -0
  8. package/breadcrumb/README.md +216 -0
  9. package/button/README.md +139 -0
  10. package/button-group/README.md +208 -0
  11. package/calendar/README.md +135 -0
  12. package/card/README.md +220 -0
  13. package/carousel/README.md +276 -0
  14. package/checkbox/README.md +149 -0
  15. package/collapsible/README.md +195 -0
  16. package/combobox/README.md +198 -0
  17. package/command/README.md +275 -0
  18. package/composer/README.md +235 -0
  19. package/context-menu/README.md +267 -0
  20. package/date-picker/README.md +179 -0
  21. package/dialog/README.md +235 -0
  22. package/drawer/README.md +145 -0
  23. package/dropdown-menu/README.md +311 -0
  24. package/editor/README.md +136 -0
  25. package/empty/README.md +183 -0
  26. package/fesm2022/ojiepermana-angular-component-accordion.mjs +186 -0
  27. package/fesm2022/ojiepermana-angular-component-accordion.mjs.map +1 -0
  28. package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +276 -0
  29. package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs.map +1 -0
  30. package/fesm2022/ojiepermana-angular-component-alert.mjs +99 -0
  31. package/fesm2022/ojiepermana-angular-component-alert.mjs.map +1 -0
  32. package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs +37 -0
  33. package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs.map +1 -0
  34. package/fesm2022/ojiepermana-angular-component-avatar.mjs +139 -0
  35. package/fesm2022/ojiepermana-angular-component-avatar.mjs.map +1 -0
  36. package/fesm2022/ojiepermana-angular-component-badge.mjs +50 -0
  37. package/fesm2022/ojiepermana-angular-component-badge.mjs.map +1 -0
  38. package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs +200 -0
  39. package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs.map +1 -0
  40. package/fesm2022/ojiepermana-angular-component-button-group.mjs +103 -0
  41. package/fesm2022/ojiepermana-angular-component-button-group.mjs.map +1 -0
  42. package/fesm2022/ojiepermana-angular-component-button.mjs +68 -0
  43. package/fesm2022/ojiepermana-angular-component-button.mjs.map +1 -0
  44. package/fesm2022/ojiepermana-angular-component-calendar.mjs +103 -0
  45. package/fesm2022/ojiepermana-angular-component-calendar.mjs.map +1 -0
  46. package/fesm2022/ojiepermana-angular-component-card.mjs +152 -0
  47. package/fesm2022/ojiepermana-angular-component-card.mjs.map +1 -0
  48. package/fesm2022/ojiepermana-angular-component-carousel.mjs +334 -0
  49. package/fesm2022/ojiepermana-angular-component-carousel.mjs.map +1 -0
  50. package/fesm2022/ojiepermana-angular-component-checkbox.mjs +165 -0
  51. package/fesm2022/ojiepermana-angular-component-checkbox.mjs.map +1 -0
  52. package/fesm2022/ojiepermana-angular-component-collapsible.mjs +121 -0
  53. package/fesm2022/ojiepermana-angular-component-collapsible.mjs.map +1 -0
  54. package/fesm2022/ojiepermana-angular-component-combobox.mjs +274 -0
  55. package/fesm2022/ojiepermana-angular-component-combobox.mjs.map +1 -0
  56. package/fesm2022/ojiepermana-angular-component-command.mjs +297 -0
  57. package/fesm2022/ojiepermana-angular-component-command.mjs.map +1 -0
  58. package/fesm2022/ojiepermana-angular-component-composer.mjs +352 -0
  59. package/fesm2022/ojiepermana-angular-component-composer.mjs.map +1 -0
  60. package/fesm2022/ojiepermana-angular-component-context-menu.mjs +108 -0
  61. package/fesm2022/ojiepermana-angular-component-context-menu.mjs.map +1 -0
  62. package/fesm2022/ojiepermana-angular-component-date-picker.mjs +186 -0
  63. package/fesm2022/ojiepermana-angular-component-date-picker.mjs.map +1 -0
  64. package/fesm2022/ojiepermana-angular-component-dialog.mjs +283 -0
  65. package/fesm2022/ojiepermana-angular-component-dialog.mjs.map +1 -0
  66. package/fesm2022/ojiepermana-angular-component-drawer.mjs +6 -0
  67. package/fesm2022/ojiepermana-angular-component-drawer.mjs.map +1 -0
  68. package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +494 -0
  69. package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs.map +1 -0
  70. package/fesm2022/ojiepermana-angular-component-editor.mjs +680 -0
  71. package/fesm2022/ojiepermana-angular-component-editor.mjs.map +1 -0
  72. package/fesm2022/ojiepermana-angular-component-empty.mjs +145 -0
  73. package/fesm2022/ojiepermana-angular-component-empty.mjs.map +1 -0
  74. package/fesm2022/ojiepermana-angular-component-form.mjs +364 -0
  75. package/fesm2022/ojiepermana-angular-component-form.mjs.map +1 -0
  76. package/fesm2022/ojiepermana-angular-component-hover-card.mjs +275 -0
  77. package/fesm2022/ojiepermana-angular-component-hover-card.mjs.map +1 -0
  78. package/fesm2022/ojiepermana-angular-component-icon.mjs +86 -0
  79. package/fesm2022/ojiepermana-angular-component-icon.mjs.map +1 -0
  80. package/fesm2022/ojiepermana-angular-component-input-group.mjs +179 -0
  81. package/fesm2022/ojiepermana-angular-component-input-group.mjs.map +1 -0
  82. package/fesm2022/ojiepermana-angular-component-input-otp.mjs +517 -0
  83. package/fesm2022/ojiepermana-angular-component-input-otp.mjs.map +1 -0
  84. package/fesm2022/ojiepermana-angular-component-input.mjs +45 -0
  85. package/fesm2022/ojiepermana-angular-component-input.mjs.map +1 -0
  86. package/fesm2022/ojiepermana-angular-component-item.mjs +264 -0
  87. package/fesm2022/ojiepermana-angular-component-item.mjs.map +1 -0
  88. package/fesm2022/ojiepermana-angular-component-kanban.mjs +314 -0
  89. package/fesm2022/ojiepermana-angular-component-kanban.mjs.map +1 -0
  90. package/fesm2022/ojiepermana-angular-component-kbd.mjs +55 -0
  91. package/fesm2022/ojiepermana-angular-component-kbd.mjs.map +1 -0
  92. package/fesm2022/ojiepermana-angular-component-label.mjs +33 -0
  93. package/fesm2022/ojiepermana-angular-component-label.mjs.map +1 -0
  94. package/fesm2022/ojiepermana-angular-component-menubar.mjs +311 -0
  95. package/fesm2022/ojiepermana-angular-component-menubar.mjs.map +1 -0
  96. package/fesm2022/ojiepermana-angular-component-native-select.mjs +67 -0
  97. package/fesm2022/ojiepermana-angular-component-native-select.mjs.map +1 -0
  98. package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs +408 -0
  99. package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs.map +1 -0
  100. package/fesm2022/ojiepermana-angular-component-pagination.mjs +226 -0
  101. package/fesm2022/ojiepermana-angular-component-pagination.mjs.map +1 -0
  102. package/fesm2022/ojiepermana-angular-component-pillbox.mjs +810 -0
  103. package/fesm2022/ojiepermana-angular-component-pillbox.mjs.map +1 -0
  104. package/fesm2022/ojiepermana-angular-component-popover.mjs +145 -0
  105. package/fesm2022/ojiepermana-angular-component-popover.mjs.map +1 -0
  106. package/fesm2022/ojiepermana-angular-component-progress.mjs +60 -0
  107. package/fesm2022/ojiepermana-angular-component-progress.mjs.map +1 -0
  108. package/fesm2022/ojiepermana-angular-component-radio.mjs +173 -0
  109. package/fesm2022/ojiepermana-angular-component-radio.mjs.map +1 -0
  110. package/fesm2022/ojiepermana-angular-component-resizable.mjs +478 -0
  111. package/fesm2022/ojiepermana-angular-component-resizable.mjs.map +1 -0
  112. package/fesm2022/ojiepermana-angular-component-scroll-area.mjs +54 -0
  113. package/fesm2022/ojiepermana-angular-component-scroll-area.mjs.map +1 -0
  114. package/fesm2022/ojiepermana-angular-component-select.mjs +297 -0
  115. package/fesm2022/ojiepermana-angular-component-select.mjs.map +1 -0
  116. package/fesm2022/ojiepermana-angular-component-separator.mjs +37 -0
  117. package/fesm2022/ojiepermana-angular-component-separator.mjs.map +1 -0
  118. package/fesm2022/ojiepermana-angular-component-sheet.mjs +297 -0
  119. package/fesm2022/ojiepermana-angular-component-sheet.mjs.map +1 -0
  120. package/fesm2022/ojiepermana-angular-component-skeleton.mjs +31 -0
  121. package/fesm2022/ojiepermana-angular-component-skeleton.mjs.map +1 -0
  122. package/fesm2022/ojiepermana-angular-component-slider.mjs +423 -0
  123. package/fesm2022/ojiepermana-angular-component-slider.mjs.map +1 -0
  124. package/fesm2022/ojiepermana-angular-component-spinner.mjs +60 -0
  125. package/fesm2022/ojiepermana-angular-component-spinner.mjs.map +1 -0
  126. package/fesm2022/ojiepermana-angular-component-switch.mjs +140 -0
  127. package/fesm2022/ojiepermana-angular-component-switch.mjs.map +1 -0
  128. package/fesm2022/ojiepermana-angular-component-table.mjs +155 -0
  129. package/fesm2022/ojiepermana-angular-component-table.mjs.map +1 -0
  130. package/fesm2022/ojiepermana-angular-component-tabs.mjs +271 -0
  131. package/fesm2022/ojiepermana-angular-component-tabs.mjs.map +1 -0
  132. package/fesm2022/ojiepermana-angular-component-textarea.mjs +39 -0
  133. package/fesm2022/ojiepermana-angular-component-textarea.mjs.map +1 -0
  134. package/fesm2022/ojiepermana-angular-component-timeline.mjs +237 -0
  135. package/fesm2022/ojiepermana-angular-component-timeline.mjs.map +1 -0
  136. package/fesm2022/ojiepermana-angular-component-toast.mjs +161 -0
  137. package/fesm2022/ojiepermana-angular-component-toast.mjs.map +1 -0
  138. package/fesm2022/ojiepermana-angular-component-toggle-group.mjs +289 -0
  139. package/fesm2022/ojiepermana-angular-component-toggle-group.mjs.map +1 -0
  140. package/fesm2022/ojiepermana-angular-component-toggle.mjs +82 -0
  141. package/fesm2022/ojiepermana-angular-component-toggle.mjs.map +1 -0
  142. package/fesm2022/ojiepermana-angular-component-tooltip.mjs +410 -0
  143. package/fesm2022/ojiepermana-angular-component-tooltip.mjs.map +1 -0
  144. package/fesm2022/ojiepermana-angular-component-utils.mjs +81 -0
  145. package/fesm2022/ojiepermana-angular-component-utils.mjs.map +1 -0
  146. package/fesm2022/ojiepermana-angular-component.mjs +11 -0
  147. package/fesm2022/ojiepermana-angular-component.mjs.map +1 -0
  148. package/form/README.md +210 -0
  149. package/hover-card/README.md +142 -0
  150. package/icon/README.md +25 -0
  151. package/input/README.md +159 -0
  152. package/input-group/README.md +237 -0
  153. package/input-otp/README.md +278 -0
  154. package/item/README.md +247 -0
  155. package/kanban/README.md +81 -0
  156. package/kbd/README.md +139 -0
  157. package/label/README.md +135 -0
  158. package/menubar/README.md +269 -0
  159. package/native-select/README.md +176 -0
  160. package/navigation-menu/README.md +160 -0
  161. package/package.json +291 -0
  162. package/pagination/README.md +144 -0
  163. package/pillbox/README.md +67 -0
  164. package/popover/README.md +43 -0
  165. package/progress/README.md +160 -0
  166. package/radio/README.md +209 -0
  167. package/resizable/README.md +168 -0
  168. package/scroll-area/README.md +143 -0
  169. package/select/README.md +174 -0
  170. package/separator/README.md +170 -0
  171. package/sheet/README.md +183 -0
  172. package/skeleton/README.md +158 -0
  173. package/slider/README.md +207 -0
  174. package/spinner/README.md +160 -0
  175. package/switch/README.md +166 -0
  176. package/table/README.md +291 -0
  177. package/tabs/README.md +214 -0
  178. package/textarea/README.md +153 -0
  179. package/timeline/README.md +94 -0
  180. package/toast/README.md +321 -0
  181. package/toggle/README.md +131 -0
  182. package/toggle-group/README.md +206 -0
  183. package/tooltip/README.md +207 -0
  184. package/types/ojiepermana-angular-component-accordion.d.ts +51 -0
  185. package/types/ojiepermana-angular-component-alert-dialog.d.ts +93 -0
  186. package/types/ojiepermana-angular-component-alert.d.ts +37 -0
  187. package/types/ojiepermana-angular-component-aspect-ratio.d.ts +12 -0
  188. package/types/ojiepermana-angular-component-avatar.d.ts +51 -0
  189. package/types/ojiepermana-angular-component-badge.d.ts +19 -0
  190. package/types/ojiepermana-angular-component-breadcrumb.d.ts +46 -0
  191. package/types/ojiepermana-angular-component-button-group.d.ts +26 -0
  192. package/types/ojiepermana-angular-component-button.d.ts +22 -0
  193. package/types/ojiepermana-angular-component-calendar.d.ts +39 -0
  194. package/types/ojiepermana-angular-component-card.d.ts +60 -0
  195. package/types/ojiepermana-angular-component-carousel.d.ts +86 -0
  196. package/types/ojiepermana-angular-component-checkbox.d.ts +42 -0
  197. package/types/ojiepermana-angular-component-collapsible.d.ts +42 -0
  198. package/types/ojiepermana-angular-component-combobox.d.ts +53 -0
  199. package/types/ojiepermana-angular-component-command.d.ts +102 -0
  200. package/types/ojiepermana-angular-component-composer.d.ts +90 -0
  201. package/types/ojiepermana-angular-component-context-menu.d.ts +36 -0
  202. package/types/ojiepermana-angular-component-date-picker.d.ts +48 -0
  203. package/types/ojiepermana-angular-component-dialog.d.ts +87 -0
  204. package/types/ojiepermana-angular-component-drawer.d.ts +1 -0
  205. package/types/ojiepermana-angular-component-dropdown-menu.d.ts +140 -0
  206. package/types/ojiepermana-angular-component-editor.d.ts +126 -0
  207. package/types/ojiepermana-angular-component-empty.d.ts +50 -0
  208. package/types/ojiepermana-angular-component-form.d.ts +140 -0
  209. package/types/ojiepermana-angular-component-hover-card.d.ts +75 -0
  210. package/types/ojiepermana-angular-component-icon.d.ts +31 -0
  211. package/types/ojiepermana-angular-component-input-group.d.ts +51 -0
  212. package/types/ojiepermana-angular-component-input-otp.d.ts +142 -0
  213. package/types/ojiepermana-angular-component-input.d.ts +16 -0
  214. package/types/ojiepermana-angular-component-item.d.ts +88 -0
  215. package/types/ojiepermana-angular-component-kanban.d.ts +70 -0
  216. package/types/ojiepermana-angular-component-kbd.d.ts +16 -0
  217. package/types/ojiepermana-angular-component-label.d.ts +11 -0
  218. package/types/ojiepermana-angular-component-menubar.d.ts +69 -0
  219. package/types/ojiepermana-angular-component-native-select.d.ts +26 -0
  220. package/types/ojiepermana-angular-component-navigation-menu.d.ts +98 -0
  221. package/types/ojiepermana-angular-component-pagination.d.ts +33 -0
  222. package/types/ojiepermana-angular-component-pillbox.d.ts +156 -0
  223. package/types/ojiepermana-angular-component-popover.d.ts +50 -0
  224. package/types/ojiepermana-angular-component-progress.d.ts +17 -0
  225. package/types/ojiepermana-angular-component-radio.d.ts +57 -0
  226. package/types/ojiepermana-angular-component-resizable.d.ts +99 -0
  227. package/types/ojiepermana-angular-component-scroll-area.d.ts +19 -0
  228. package/types/ojiepermana-angular-component-select.d.ts +56 -0
  229. package/types/ojiepermana-angular-component-separator.d.ts +14 -0
  230. package/types/ojiepermana-angular-component-sheet.d.ts +78 -0
  231. package/types/ojiepermana-angular-component-skeleton.d.ts +10 -0
  232. package/types/ojiepermana-angular-component-slider.d.ts +74 -0
  233. package/types/ojiepermana-angular-component-spinner.d.ts +13 -0
  234. package/types/ojiepermana-angular-component-switch.d.ts +44 -0
  235. package/types/ojiepermana-angular-component-table.d.ts +52 -0
  236. package/types/ojiepermana-angular-component-tabs.d.ts +92 -0
  237. package/types/ojiepermana-angular-component-textarea.d.ts +12 -0
  238. package/types/ojiepermana-angular-component-timeline.d.ts +63 -0
  239. package/types/ojiepermana-angular-component-toast.d.ts +51 -0
  240. package/types/ojiepermana-angular-component-toggle-group.d.ts +89 -0
  241. package/types/ojiepermana-angular-component-toggle.d.ts +25 -0
  242. package/types/ojiepermana-angular-component-tooltip.d.ts +101 -0
  243. package/types/ojiepermana-angular-component-utils.d.ts +30 -0
  244. package/types/ojiepermana-angular-component.d.ts +2 -0
@@ -0,0 +1,226 @@
1
+ import { buttonVariants } from '@ojiepermana/angular-component/button';
2
+ import * as i0 from '@angular/core';
3
+ import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
4
+ import { cn } from '@ojiepermana/angular-component/utils';
5
+
6
+ /**
7
+ * Simple pagination. Emits the desired page via `(pageChange)` and reflects
8
+ * the current page through the `page` model input while allowing lightweight
9
+ * label and visibility tweaks for localized and icon-only demos.
10
+ */
11
+ class PaginationComponent {
12
+ page = model(1, /* @ts-ignore */
13
+ ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
14
+ total = input(1, /* @ts-ignore */
15
+ ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
16
+ /** Number of sibling pages on each side of current. */
17
+ siblingCount = input(1, /* @ts-ignore */
18
+ ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
19
+ showPageNumbers = input(true, /* @ts-ignore */
20
+ ...(ngDevMode ? [{ debugName: "showPageNumbers" }] : /* istanbul ignore next */ []));
21
+ previousText = input('Previous', /* @ts-ignore */
22
+ ...(ngDevMode ? [{ debugName: "previousText" }] : /* istanbul ignore next */ []));
23
+ nextText = input('Next', /* @ts-ignore */
24
+ ...(ngDevMode ? [{ debugName: "nextText" }] : /* istanbul ignore next */ []));
25
+ previousAriaLabel = input('Go to previous page', /* @ts-ignore */
26
+ ...(ngDevMode ? [{ debugName: "previousAriaLabel" }] : /* istanbul ignore next */ []));
27
+ nextAriaLabel = input('Go to next page', /* @ts-ignore */
28
+ ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
29
+ formatPageLabel = input((page) => page.toString(), /* @ts-ignore */
30
+ ...(ngDevMode ? [{ debugName: "formatPageLabel" }] : /* istanbul ignore next */ []));
31
+ class = input('', /* @ts-ignore */
32
+ ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
33
+ classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()), /* @ts-ignore */
34
+ ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
35
+ pages = computed(() => {
36
+ if (!this.showPageNumbers()) {
37
+ return [];
38
+ }
39
+ const total = Math.max(1, this.total());
40
+ const current = Math.min(Math.max(1, this.page()), total);
41
+ const siblings = Math.max(0, this.siblingCount());
42
+ const range = [];
43
+ const start = Math.max(2, current - siblings);
44
+ const end = Math.min(total - 1, current + siblings);
45
+ range.push({ key: 'p-1', kind: 'page', value: 1 });
46
+ if (start > 2)
47
+ range.push({ key: 'e-start', kind: 'ellipsis', value: -1 });
48
+ for (let i = start; i <= end; i++)
49
+ range.push({ key: `p-${i}`, kind: 'page', value: i });
50
+ if (end < total - 1)
51
+ range.push({ key: 'e-end', kind: 'ellipsis', value: -1 });
52
+ if (total > 1)
53
+ range.push({ key: `p-${total}`, kind: 'page', value: total });
54
+ return range;
55
+ }, /* @ts-ignore */
56
+ ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
57
+ navClasses(hasText) {
58
+ return hasText
59
+ ? cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5')
60
+ : cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'h-9 w-9');
61
+ }
62
+ pageClasses(active) {
63
+ return cn(buttonVariants({ variant: active ? 'outline' : 'ghost', size: 'icon' }), 'h-9 w-9');
64
+ }
65
+ go(target) {
66
+ const total = Math.max(1, this.total());
67
+ const next = Math.min(Math.max(1, target), total);
68
+ if (next === this.page())
69
+ return;
70
+ this.page.set(next);
71
+ }
72
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
73
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PaginationComponent, isStandalone: true, selector: "Pagination, nav[Pagination]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, previousAriaLabel: { classPropertyName: "previousAriaLabel", publicName: "previousAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, formatPageLabel: { classPropertyName: "formatPageLabel", publicName: "formatPageLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation", "aria-label": "pagination" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
74
+ <ul class="flex flex-row items-center gap-1">
75
+ <li>
76
+ <button
77
+ type="button"
78
+ [disabled]="page() <= 1 || null"
79
+ [attr.aria-label]="previousAriaLabel()"
80
+ [class]="navClasses(previousText().length > 0)"
81
+ (click)="go(page() - 1)">
82
+ <svg
83
+ aria-hidden="true"
84
+ class="h-4 w-4"
85
+ viewBox="0 0 24 24"
86
+ fill="none"
87
+ stroke="currentColor"
88
+ stroke-width="2"
89
+ stroke-linecap="round"
90
+ stroke-linejoin="round">
91
+ <polyline points="15 18 9 12 15 6" />
92
+ </svg>
93
+ @if (previousText()) {
94
+ <span>{{ previousText() }}</span>
95
+ }
96
+ </button>
97
+ </li>
98
+
99
+ @for (p of pages(); track p.key) {
100
+ <li>
101
+ @if (p.kind === 'page') {
102
+ <button
103
+ type="button"
104
+ [attr.aria-current]="p.value === page() ? 'page' : null"
105
+ [class]="pageClasses(p.value === page())"
106
+ (click)="go(p.value)">
107
+ {{ formatPageLabel()(p.value) }}
108
+ </button>
109
+ } @else {
110
+ <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">…</span>
111
+ }
112
+ </li>
113
+ }
114
+
115
+ <li>
116
+ <button
117
+ type="button"
118
+ [disabled]="page() >= total() || null"
119
+ [attr.aria-label]="nextAriaLabel()"
120
+ [class]="navClasses(nextText().length > 0)"
121
+ (click)="go(page() + 1)">
122
+ @if (nextText()) {
123
+ <span>{{ nextText() }}</span>
124
+ }
125
+ <svg
126
+ aria-hidden="true"
127
+ class="h-4 w-4"
128
+ viewBox="0 0 24 24"
129
+ fill="none"
130
+ stroke="currentColor"
131
+ stroke-width="2"
132
+ stroke-linecap="round"
133
+ stroke-linejoin="round">
134
+ <polyline points="9 18 15 12 9 6" />
135
+ </svg>
136
+ </button>
137
+ </li>
138
+ </ul>
139
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
140
+ }
141
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PaginationComponent, decorators: [{
142
+ type: Component,
143
+ args: [{
144
+ selector: 'Pagination, nav[Pagination]',
145
+ changeDetection: ChangeDetectionStrategy.OnPush,
146
+ host: {
147
+ role: 'navigation',
148
+ 'aria-label': 'pagination',
149
+ '[class]': 'classes()',
150
+ },
151
+ template: `
152
+ <ul class="flex flex-row items-center gap-1">
153
+ <li>
154
+ <button
155
+ type="button"
156
+ [disabled]="page() <= 1 || null"
157
+ [attr.aria-label]="previousAriaLabel()"
158
+ [class]="navClasses(previousText().length > 0)"
159
+ (click)="go(page() - 1)">
160
+ <svg
161
+ aria-hidden="true"
162
+ class="h-4 w-4"
163
+ viewBox="0 0 24 24"
164
+ fill="none"
165
+ stroke="currentColor"
166
+ stroke-width="2"
167
+ stroke-linecap="round"
168
+ stroke-linejoin="round">
169
+ <polyline points="15 18 9 12 15 6" />
170
+ </svg>
171
+ @if (previousText()) {
172
+ <span>{{ previousText() }}</span>
173
+ }
174
+ </button>
175
+ </li>
176
+
177
+ @for (p of pages(); track p.key) {
178
+ <li>
179
+ @if (p.kind === 'page') {
180
+ <button
181
+ type="button"
182
+ [attr.aria-current]="p.value === page() ? 'page' : null"
183
+ [class]="pageClasses(p.value === page())"
184
+ (click)="go(p.value)">
185
+ {{ formatPageLabel()(p.value) }}
186
+ </button>
187
+ } @else {
188
+ <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">…</span>
189
+ }
190
+ </li>
191
+ }
192
+
193
+ <li>
194
+ <button
195
+ type="button"
196
+ [disabled]="page() >= total() || null"
197
+ [attr.aria-label]="nextAriaLabel()"
198
+ [class]="navClasses(nextText().length > 0)"
199
+ (click)="go(page() + 1)">
200
+ @if (nextText()) {
201
+ <span>{{ nextText() }}</span>
202
+ }
203
+ <svg
204
+ aria-hidden="true"
205
+ class="h-4 w-4"
206
+ viewBox="0 0 24 24"
207
+ fill="none"
208
+ stroke="currentColor"
209
+ stroke-width="2"
210
+ stroke-linecap="round"
211
+ stroke-linejoin="round">
212
+ <polyline points="9 18 15 12 9 6" />
213
+ </svg>
214
+ </button>
215
+ </li>
216
+ </ul>
217
+ `,
218
+ }]
219
+ }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], previousAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousAriaLabel", required: false }] }], nextAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextAriaLabel", required: false }] }], formatPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPageLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
220
+
221
+ /**
222
+ * Generated bundle index. Do not edit.
223
+ */
224
+
225
+ export { PaginationComponent };
226
+ //# sourceMappingURL=ojiepermana-angular-component-pagination.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ojiepermana-angular-component-pagination.mjs","sources":["../../../library/component/pagination/pagination.component.ts","../../../library/component/pagination/ojiepermana-angular-component-pagination.ts"],"sourcesContent":["import { buttonVariants } from '@ojiepermana/angular-component/button';\nimport { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\n\n/**\n * Simple pagination. Emits the desired page via `(pageChange)` and reflects\n * the current page through the `page` model input while allowing lightweight\n * label and visibility tweaks for localized and icon-only demos.\n */\n@Component({\n selector: 'Pagination, nav[Pagination]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n role: 'navigation',\n 'aria-label': 'pagination',\n '[class]': 'classes()',\n },\n template: `\n <ul class=\"flex flex-row items-center gap-1\">\n <li>\n <button\n type=\"button\"\n [disabled]=\"page() <= 1 || null\"\n [attr.aria-label]=\"previousAriaLabel()\"\n [class]=\"navClasses(previousText().length > 0)\"\n (click)=\"go(page() - 1)\">\n <svg\n aria-hidden=\"true\"\n class=\"h-4 w-4\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n @if (previousText()) {\n <span>{{ previousText() }}</span>\n }\n </button>\n </li>\n\n @for (p of pages(); track p.key) {\n <li>\n @if (p.kind === 'page') {\n <button\n type=\"button\"\n [attr.aria-current]=\"p.value === page() ? 'page' : null\"\n [class]=\"pageClasses(p.value === page())\"\n (click)=\"go(p.value)\">\n {{ formatPageLabel()(p.value) }}\n </button>\n } @else {\n <span class=\"flex h-9 w-9 items-center justify-center\" aria-hidden=\"true\">…</span>\n }\n </li>\n }\n\n <li>\n <button\n type=\"button\"\n [disabled]=\"page() >= total() || null\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [class]=\"navClasses(nextText().length > 0)\"\n (click)=\"go(page() + 1)\">\n @if (nextText()) {\n <span>{{ nextText() }}</span>\n }\n <svg\n aria-hidden=\"true\"\n class=\"h-4 w-4\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </button>\n </li>\n </ul>\n `,\n})\nexport class PaginationComponent {\n readonly page = model<number>(1);\n readonly total = input<number>(1);\n /** Number of sibling pages on each side of current. */\n readonly siblingCount = input<number>(1);\n readonly showPageNumbers = input<boolean>(true);\n readonly previousText = input<string>('Previous');\n readonly nextText = input<string>('Next');\n readonly previousAriaLabel = input<string>('Go to previous page');\n readonly nextAriaLabel = input<string>('Go to next page');\n readonly formatPageLabel = input<(page: number) => string>((page) => page.toString());\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()));\n\n protected readonly pages = computed(() => {\n if (!this.showPageNumbers()) {\n return [];\n }\n\n const total = Math.max(1, this.total());\n const current = Math.min(Math.max(1, this.page()), total);\n const siblings = Math.max(0, this.siblingCount());\n const range: Array<{ key: string; kind: 'page' | 'ellipsis'; value: number }> = [];\n const start = Math.max(2, current - siblings);\n const end = Math.min(total - 1, current + siblings);\n\n range.push({ key: 'p-1', kind: 'page', value: 1 });\n if (start > 2) range.push({ key: 'e-start', kind: 'ellipsis', value: -1 });\n for (let i = start; i <= end; i++) range.push({ key: `p-${i}`, kind: 'page', value: i });\n if (end < total - 1) range.push({ key: 'e-end', kind: 'ellipsis', value: -1 });\n if (total > 1) range.push({ key: `p-${total}`, kind: 'page', value: total });\n return range;\n });\n\n protected navClasses(hasText: boolean): string {\n return hasText\n ? cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5')\n : cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'h-9 w-9');\n }\n\n protected pageClasses(active: boolean): string {\n return cn(buttonVariants({ variant: active ? 'outline' : 'ghost', size: 'icon' }), 'h-9 w-9');\n }\n\n protected go(target: number): void {\n const total = Math.max(1, this.total());\n const next = Math.min(Math.max(1, target), total);\n if (next === this.page()) return;\n this.page.set(next);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}