@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 @@
1
+ {"version":3,"file":"star-ng-ui-media.mjs","names":[],"sources":["../../../projects/star-ng/media/media.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n model,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\nimport { STAR_UI_TEXT, starInlineKey, starIsRtl } from '@star-ng/ui/core';\nimport { StarDialog } from '@star-ng/ui/dialog';\n\n// ---------------------------------------------------------------- Carousel\n\n/** Slide template: `<ng-template starCarouselItem let-item>`. */\n@Directive({ selector: 'ng-template[starCarouselItem]' })\nexport class StarCarouselItem<T = unknown> {\n readonly starCarouselItemOf = input<readonly T[] | null>(null);\n readonly template = inject<TemplateRef<{ $implicit: T; index: number }>>(TemplateRef);\n static ngTemplateContextGuard<T>(\n _dir: StarCarouselItem<T>,\n _ctx: unknown,\n ): _ctx is { $implicit: T; index: number } {\n return true;\n }\n}\n\n/**\n * Carousel (PrimeNG `p-carousel`) on CSS scroll snap: swipe and trackpad work natively,\n * previous / next buttons, page dots, `numVisible` items per page, optional autoplay with a\n * pause button (WCAG 2.2.2) that also pauses on hover and focus.\n *\n * `<star-carousel [items]=\"news\" [numVisible]=\"3\" ariaLabel=\"News\"><ng-template starCarouselItem let-n>…</ng-template></star-carousel>`\n */\n@Component({\n selector: 'star-carousel',\n imports: [NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'star-carousel',\n role: 'region',\n 'aria-roledescription': 'carousel',\n '[attr.aria-label]': 'ariaLabel()',\n '[style.--star-visible]': 'numVisible()',\n '(mouseenter)': 'hovering.set(true)',\n '(mouseleave)': 'hovering.set(false)',\n '(focusin)': 'hovering.set(true)',\n '(focusout)': 'hovering.set(false)',\n },\n template: `\n <div class=\"star-carousel__controls\">\n @if (autoplay()) {\n <button\n type=\"button\"\n class=\"star-select__icon-btn\"\n [attr.aria-label]=\"playing() ? text.pauseSlides : text.playSlides\"\n (click)=\"playing.set(!playing())\"\n >\n <i\n class=\"ph-bold\"\n [class.ph-pause]=\"playing()\"\n [class.ph-play]=\"!playing()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n <button\n type=\"button\"\n class=\"star-select__icon-btn\"\n [attr.aria-label]=\"text.previousSlides\"\n [disabled]=\"page() === 0\"\n (click)=\"goTo(page() - 1)\"\n >\n <i class=\"ph-bold ph-caret-left star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n <button\n type=\"button\"\n class=\"star-select__icon-btn\"\n [attr.aria-label]=\"text.nextSlides\"\n [disabled]=\"page() >= pages() - 1\"\n (click)=\"goTo(page() + 1)\"\n >\n <i class=\"ph-bold ph-caret-right star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div\n #track\n class=\"star-carousel__track\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-live]=\"playing() ? 'off' : 'polite'\"\n (scrollend)=\"syncPage()\"\n >\n @for (item of items(); track $index; let i = $index) {\n <div\n class=\"star-carousel__slide\"\n role=\"group\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"text.ofTotal(i + 1, items().length)\"\n >\n @if (itemTemplate(); as custom) {\n <ng-container\n *ngTemplateOutlet=\"custom.template; context: { $implicit: item, index: i }\"\n />\n }\n </div>\n }\n </div>\n @if (pages() > 1) {\n <div class=\"star-carousel__dots\">\n @for (dot of dots(); track dot) {\n <button\n type=\"button\"\n class=\"star-carousel__dot\"\n [class.star-carousel__dot--on]=\"dot === page()\"\n [attr.aria-label]=\"text.page(dot + 1)\"\n [attr.aria-current]=\"dot === page() || null\"\n (click)=\"goTo(dot)\"\n ></button>\n }\n </div>\n }\n `,\n})\nexport class StarCarousel<T = unknown> {\n protected readonly text = inject(STAR_UI_TEXT);\n /** The slides: one item per slide. The `starCarouselItem` template draws each item. */\n readonly items = input<readonly T[]>([]);\n /** Number of slides in one page. */\n readonly numVisible = input(1);\n /** Autoplay interval in milliseconds (0 = off). */\n readonly autoplay = input(0);\n /** Accessible name of the carousel region. */\n readonly ariaLabel = input<string | null>(null);\n protected readonly itemTemplate = contentChild(StarCarouselItem);\n private readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n\n protected readonly page = signal(0);\n protected readonly playing = signal(true);\n protected readonly hovering = signal(false);\n protected readonly pages = computed(() =>\n Math.max(1, Math.ceil(this.items().length / this.numVisible())),\n );\n protected readonly dots = computed(() => Array.from({ length: this.pages() }, (_, i) => i));\n\n constructor() {\n // Autoplay restarts when its interval changes; the callback pauses on hover, focus or Pause.\n effect((onCleanup) => {\n const ms = this.autoplay();\n if (!ms) return;\n const id = setInterval(() => {\n if (!this.playing() || this.hovering()) return;\n this.goTo(this.page() >= this.pages() - 1 ? 0 : this.page() + 1);\n }, ms);\n onCleanup(() => clearInterval(id));\n });\n }\n\n goTo(page: number): void {\n const target = Math.min(Math.max(page, 0), this.pages() - 1);\n this.page.set(target);\n const track = this.track().nativeElement;\n const slide = track.children[target * this.numVisible()] as HTMLElement | undefined;\n const reduce = matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n // Scroll by the distance between the slide and the track at their inline-start edge. In\n // right-to-left the scroll offset is negative and the first slide is at the right edge, so a\n // distance (not an absolute `scrollLeft`) works in both directions.\n const distance = slide ? this.distanceToStart(slide, track) : -track.scrollLeft;\n track.scrollBy?.({ left: distance, behavior: reduce ? 'auto' : 'smooth' });\n }\n\n /** Pixels to scroll so that the inline-start edge of the slide meets the one of the track. */\n private distanceToStart(slide: HTMLElement, track: HTMLElement): number {\n const slideBox = slide.getBoundingClientRect();\n const trackBox = track.getBoundingClientRect();\n return starIsRtl(track) ? slideBox.right - trackBox.right : slideBox.left - trackBox.left;\n }\n\n /** Keeps dots in sync after a swipe. */\n protected syncPage(): void {\n const track = this.track().nativeElement;\n const slideWidth = (track.children[0] as HTMLElement | undefined)?.offsetWidth ?? 1;\n // `scrollLeft` is zero or negative in right-to-left: its size is the distance from the start.\n this.page.set(Math.round(Math.abs(track.scrollLeft) / (slideWidth * this.numVisible())));\n }\n}\n\n// ---------------------------------------------------------------- Galleria and image\n\nexport interface StarGalleryImage {\n readonly src: string;\n readonly thumbnail?: string;\n readonly alt: string;\n readonly caption?: string;\n}\n\n/**\n * Image gallery (PrimeNG `p-galleria`): main image with caption, previous / next, Arrow keys,\n * and a thumbnail strip (`aria-current` on the active one).\n * `<star-galleria [images]=\"photos\" [(activeIndex)]=\"current\" />`\n */\n@Component({\n selector: 'star-galleria',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'star-galleria',\n role: 'region',\n 'aria-roledescription': 'gallery',\n '[attr.aria-label]': 'ariaLabel() ?? text.galleryLabel',\n },\n template: `\n @if (current(); as image) {\n <figure class=\"star-galleria__stage\" tabindex=\"0\" (keydown)=\"onKeydown($event)\">\n <img [src]=\"image.src\" [alt]=\"image.alt\" loading=\"lazy\" />\n @if (image.caption) {\n <figcaption class=\"star-galleria__caption\">{{ image.caption }}</figcaption>\n }\n <button\n type=\"button\"\n class=\"star-galleria__nav star-galleria__nav--prev\"\n [attr.aria-label]=\"text.previousImage\"\n (click)=\"step(-1)\"\n >\n <i class=\"ph-bold ph-caret-left star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n <button\n type=\"button\"\n class=\"star-galleria__nav star-galleria__nav--next\"\n [attr.aria-label]=\"text.nextImage\"\n (click)=\"step(1)\"\n >\n <i class=\"ph-bold ph-caret-right star-icon-mirror\" aria-hidden=\"true\"></i>\n </button>\n <span class=\"star-galleria__count\" aria-live=\"polite\"\n >{{ activeIndex() + 1 }} / {{ images().length }}</span\n >\n </figure>\n }\n <div class=\"star-galleria__thumbs\">\n @for (image of images(); track $index; let i = $index) {\n <button\n type=\"button\"\n class=\"star-galleria__thumb\"\n [attr.aria-current]=\"i === activeIndex() || null\"\n [attr.aria-label]=\"text.showImage(image.alt)\"\n (click)=\"activeIndex.set(i)\"\n >\n <img [src]=\"image.thumbnail ?? image.src\" alt=\"\" loading=\"lazy\" />\n </button>\n }\n </div>\n `,\n})\nexport class StarGalleria {\n protected readonly text = inject(STAR_UI_TEXT);\n /** The images: `src`, `alt`, and optional `thumbnail` and `caption`. */\n readonly images = input<readonly StarGalleryImage[]>([]);\n /** Index of the image on show. */\n readonly activeIndex = model(0);\n /** Accessible name of the gallery region (default: the `galleryLabel` text). */\n readonly ariaLabel = input<string | null>(null);\n protected readonly current = computed(() => this.images()[this.activeIndex()] ?? null);\n\n step(delta: number): void {\n const count = this.images().length;\n if (count) this.activeIndex.set((this.activeIndex() + delta + count) % count);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n // Arrow right is the next image in reading order: the left arrow in right-to-left.\n const key = starInlineKey(event);\n if (key === 'ArrowLeft' || key === 'ArrowRight') {\n event.preventDefault();\n this.step(key === 'ArrowLeft' ? -1 : 1);\n }\n }\n}\n\n/**\n * Image with preview (PrimeNG `p-image [preview]`): lazy-loaded thumbnail; click opens the\n * full image in a modal `star-dialog` with zoom in / out.\n * `<star-image src=\"label.png\" alt=\"Product label\" width=\"160\" preview />`\n */\n@Component({\n selector: 'star-image',\n imports: [StarDialog],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'star-image' },\n template: `\n @if (preview()) {\n <button\n type=\"button\"\n class=\"star-image__trigger\"\n [attr.aria-label]=\"text.previewImage(alt())\"\n (click)=\"open.set(true)\"\n >\n <img [src]=\"src()\" [alt]=\"alt()\" [attr.width]=\"width()\" loading=\"lazy\" />\n <span class=\"star-image__hint\" aria-hidden=\"true\"\n ><i class=\"ph-bold ph-magnifying-glass-plus\"></i\n ></span>\n </button>\n <star-dialog [(visible)]=\"open\" [header]=\"alt()\" size=\"xl\" dismissableMask>\n <div class=\"star-image__zoom-bar\">\n <button\n type=\"button\"\n class=\"star-select__icon-btn\"\n [attr.aria-label]=\"text.zoomOut\"\n [disabled]=\"zoom() <= 0.5\"\n (click)=\"zoom.set(zoom() - 0.25)\"\n >\n <i class=\"ph-bold ph-magnifying-glass-minus\" aria-hidden=\"true\"></i>\n </button>\n <span aria-live=\"polite\">{{ zoom() * 100 }}%</span>\n <button\n type=\"button\"\n class=\"star-select__icon-btn\"\n [attr.aria-label]=\"text.zoomIn\"\n [disabled]=\"zoom() >= 3\"\n (click)=\"zoom.set(zoom() + 0.25)\"\n >\n <i class=\"ph-bold ph-magnifying-glass-plus\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <!-- Focusable, so the arrow keys scroll a zoomed image. -->\n <div class=\"star-image__stage\" role=\"group\" tabindex=\"0\" [attr.aria-label]=\"alt()\">\n <img [src]=\"src()\" [alt]=\"alt()\" [style.transform]=\"'scale(' + zoom() + ')'\" />\n </div>\n </star-dialog>\n } @else {\n <img [src]=\"src()\" [alt]=\"alt()\" [attr.width]=\"width()\" loading=\"lazy\" />\n }\n `,\n})\nexport class StarImage {\n protected readonly text = inject(STAR_UI_TEXT);\n /** Image address. */\n readonly src = input.required<string>();\n /** Alternative text. It is also the title of the preview dialog. */\n readonly alt = input.required<string>();\n /** Width attribute of the thumbnail. */\n readonly width = input<string | number | null>(null);\n /** The image opens in a dialog with zoom buttons when the user activates it. */\n readonly preview = input(false, { transform: booleanAttribute });\n protected readonly open = signal(false);\n protected readonly zoom = signal(1);\n protected readonly id = inject(_IdGenerator).getId('star-image-');\n}\n"],"mappings":"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"}