@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.
- package/LICENSE +21 -0
- package/README.md +162 -2
- package/fesm2022/star-ng-ui-accordion.mjs +376 -0
- package/fesm2022/star-ng-ui-accordion.mjs.map +1 -0
- package/fesm2022/star-ng-ui-autocomplete.mjs +786 -0
- package/fesm2022/star-ng-ui-autocomplete.mjs.map +1 -0
- package/fesm2022/star-ng-ui-avatar.mjs +154 -0
- package/fesm2022/star-ng-ui-avatar.mjs.map +1 -0
- package/fesm2022/star-ng-ui-badge.mjs +153 -0
- package/fesm2022/star-ng-ui-badge.mjs.map +1 -0
- package/fesm2022/star-ng-ui-breadcrumb.mjs +199 -0
- package/fesm2022/star-ng-ui-breadcrumb.mjs.map +1 -0
- package/fesm2022/star-ng-ui-button.mjs +282 -0
- package/fesm2022/star-ng-ui-button.mjs.map +1 -0
- package/fesm2022/star-ng-ui-card.mjs +112 -0
- package/fesm2022/star-ng-ui-card.mjs.map +1 -0
- package/fesm2022/star-ng-ui-chart.mjs +1904 -0
- package/fesm2022/star-ng-ui-chart.mjs.map +1 -0
- package/fesm2022/star-ng-ui-checkbox.mjs +345 -0
- package/fesm2022/star-ng-ui-checkbox.mjs.map +1 -0
- package/fesm2022/star-ng-ui-core.mjs +484 -0
- package/fesm2022/star-ng-ui-core.mjs.map +1 -0
- package/fesm2022/star-ng-ui-data-display.mjs +1870 -0
- package/fesm2022/star-ng-ui-data-display.mjs.map +1 -0
- package/fesm2022/star-ng-ui-date-picker.mjs +2786 -0
- package/fesm2022/star-ng-ui-date-picker.mjs.map +1 -0
- package/fesm2022/star-ng-ui-dialog.mjs +948 -0
- package/fesm2022/star-ng-ui-dialog.mjs.map +1 -0
- package/fesm2022/star-ng-ui-drawer.mjs +158 -0
- package/fesm2022/star-ng-ui-drawer.mjs.map +1 -0
- package/fesm2022/star-ng-ui-editor.mjs +416 -0
- package/fesm2022/star-ng-ui-editor.mjs.map +1 -0
- package/fesm2022/star-ng-ui-field.mjs +378 -0
- package/fesm2022/star-ng-ui-field.mjs.map +1 -0
- package/fesm2022/star-ng-ui-file-upload.mjs +762 -0
- package/fesm2022/star-ng-ui-file-upload.mjs.map +1 -0
- package/fesm2022/star-ng-ui-i18n-de.mjs +179 -0
- package/fesm2022/star-ng-ui-i18n-de.mjs.map +1 -0
- package/fesm2022/star-ng-ui-i18n-es.mjs +179 -0
- package/fesm2022/star-ng-ui-i18n-es.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-group.mjs +188 -0
- package/fesm2022/star-ng-ui-input-group.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-mask.mjs +434 -0
- package/fesm2022/star-ng-ui-input-mask.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-number.mjs +691 -0
- package/fesm2022/star-ng-ui-input-number.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-otp.mjs +343 -0
- package/fesm2022/star-ng-ui-input-otp.mjs.map +1 -0
- package/fesm2022/star-ng-ui-input-tags.mjs +616 -0
- package/fesm2022/star-ng-ui-input-tags.mjs.map +1 -0
- package/fesm2022/star-ng-ui-knob.mjs +514 -0
- package/fesm2022/star-ng-ui-knob.mjs.map +1 -0
- package/fesm2022/star-ng-ui-layout.mjs +608 -0
- package/fesm2022/star-ng-ui-layout.mjs.map +1 -0
- package/fesm2022/star-ng-ui-listbox.mjs +886 -0
- package/fesm2022/star-ng-ui-listbox.mjs.map +1 -0
- package/fesm2022/star-ng-ui-media.mjs +833 -0
- package/fesm2022/star-ng-ui-media.mjs.map +1 -0
- package/fesm2022/star-ng-ui-menu.mjs +1840 -0
- package/fesm2022/star-ng-ui-menu.mjs.map +1 -0
- package/fesm2022/star-ng-ui-message.mjs +191 -0
- package/fesm2022/star-ng-ui-message.mjs.map +1 -0
- package/fesm2022/star-ng-ui-paginator.mjs +387 -0
- package/fesm2022/star-ng-ui-paginator.mjs.map +1 -0
- package/fesm2022/star-ng-ui-panel.mjs +324 -0
- package/fesm2022/star-ng-ui-panel.mjs.map +1 -0
- package/fesm2022/star-ng-ui-password.mjs +517 -0
- package/fesm2022/star-ng-ui-password.mjs.map +1 -0
- package/fesm2022/star-ng-ui-popover.mjs +241 -0
- package/fesm2022/star-ng-ui-popover.mjs.map +1 -0
- package/fesm2022/star-ng-ui-progress-bar.mjs +183 -0
- package/fesm2022/star-ng-ui-progress-bar.mjs.map +1 -0
- package/fesm2022/star-ng-ui-radio.mjs +411 -0
- package/fesm2022/star-ng-ui-radio.mjs.map +1 -0
- package/fesm2022/star-ng-ui-rating.mjs +211 -0
- package/fesm2022/star-ng-ui-rating.mjs.map +1 -0
- package/fesm2022/star-ng-ui-select-button.mjs +613 -0
- package/fesm2022/star-ng-ui-select-button.mjs.map +1 -0
- package/fesm2022/star-ng-ui-select.mjs +2547 -0
- package/fesm2022/star-ng-ui-select.mjs.map +1 -0
- package/fesm2022/star-ng-ui-skeleton.mjs +160 -0
- package/fesm2022/star-ng-ui-skeleton.mjs.map +1 -0
- package/fesm2022/star-ng-ui-slider.mjs +552 -0
- package/fesm2022/star-ng-ui-slider.mjs.map +1 -0
- package/fesm2022/star-ng-ui-spinner.mjs +148 -0
- package/fesm2022/star-ng-ui-spinner.mjs.map +1 -0
- package/fesm2022/star-ng-ui-stepper.mjs +360 -0
- package/fesm2022/star-ng-ui-stepper.mjs.map +1 -0
- package/fesm2022/star-ng-ui-table.mjs +3531 -0
- package/fesm2022/star-ng-ui-table.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tabs.mjs +464 -0
- package/fesm2022/star-ng-ui-tabs.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tag.mjs +129 -0
- package/fesm2022/star-ng-ui-tag.mjs.map +1 -0
- package/fesm2022/star-ng-ui-theme-switch.mjs +105 -0
- package/fesm2022/star-ng-ui-theme-switch.mjs.map +1 -0
- package/fesm2022/star-ng-ui-theme.mjs +98 -0
- package/fesm2022/star-ng-ui-theme.mjs.map +1 -0
- package/fesm2022/star-ng-ui-toast.mjs +298 -0
- package/fesm2022/star-ng-ui-toast.mjs.map +1 -0
- package/fesm2022/star-ng-ui-toggle-switch.mjs +316 -0
- package/fesm2022/star-ng-ui-toggle-switch.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tooltip.mjs +297 -0
- package/fesm2022/star-ng-ui-tooltip.mjs.map +1 -0
- package/fesm2022/star-ng-ui-transloco.mjs +40 -0
- package/fesm2022/star-ng-ui-transloco.mjs.map +1 -0
- package/fesm2022/star-ng-ui-tree.mjs +1446 -0
- package/fesm2022/star-ng-ui-tree.mjs.map +1 -0
- package/fesm2022/star-ng-ui-utility.mjs +2134 -0
- package/fesm2022/star-ng-ui-utility.mjs.map +1 -0
- package/fesm2022/star-ng-ui.mjs +51 -0
- package/package.json +285 -3
- package/styles/_base.scss +70 -0
- package/styles/_shared.scss +2 -0
- package/styles/_tokens.scss +190 -0
- package/styles/controls/_accordion.scss +75 -0
- package/styles/controls/_autocomplete.scss +44 -0
- package/styles/controls/_avatar.scss +39 -0
- package/styles/controls/_breadcrumb.scss +45 -0
- package/styles/controls/_button.scss +137 -0
- package/styles/controls/_card.scss +38 -0
- package/styles/controls/_chart.scss +214 -0
- package/styles/controls/_chip.scss +51 -0
- package/styles/controls/_choice.scss +153 -0
- package/styles/controls/_data-display.scss +124 -0
- package/styles/controls/_date-picker.scss +300 -0
- package/styles/controls/_dialog.scss +123 -0
- package/styles/controls/_drawer.scss +118 -0
- package/styles/controls/_editor.scss +74 -0
- package/styles/controls/_field.scss +92 -0
- package/styles/controls/_file-upload.scss +136 -0
- package/styles/controls/_input-group.scss +104 -0
- package/styles/controls/_input-mask.scss +46 -0
- package/styles/controls/_input-number.scss +125 -0
- package/styles/controls/_knob.scss +76 -0
- package/styles/controls/_layout.scss +182 -0
- package/styles/controls/_listbox.scss +38 -0
- package/styles/controls/_media.scss +222 -0
- package/styles/controls/_menu.scss +254 -0
- package/styles/controls/_message.scss +48 -0
- package/styles/controls/_org-chart.scss +128 -0
- package/styles/controls/_paginator.scss +59 -0
- package/styles/controls/_panel.scss +83 -0
- package/styles/controls/_popover.scss +40 -0
- package/styles/controls/_progress-bar.scss +74 -0
- package/styles/controls/_select-button.scss +61 -0
- package/styles/controls/_select.scss +216 -0
- package/styles/controls/_skeleton.scss +43 -0
- package/styles/controls/_slider.scss +163 -0
- package/styles/controls/_spinner.scss +34 -0
- package/styles/controls/_stepper.scss +109 -0
- package/styles/controls/_table.scss +523 -0
- package/styles/controls/_tabs.scss +93 -0
- package/styles/controls/_tag.scss +84 -0
- package/styles/controls/_toast.scss +141 -0
- package/styles/controls/_tooltip.scss +14 -0
- package/styles/controls/_tree.scss +113 -0
- package/styles/controls/_utility.scss +654 -0
- package/styles/star-ng.css +5807 -0
- package/styles/star-ng.min.css +1 -0
- package/styles/star-ng.scss +50 -0
- package/theme/star-theme-first-paint.js +1 -0
- package/types/star-ng-ui-accordion.d.ts +82 -0
- package/types/star-ng-ui-autocomplete.d.ts +171 -0
- package/types/star-ng-ui-avatar.d.ts +43 -0
- package/types/star-ng-ui-badge.d.ts +46 -0
- package/types/star-ng-ui-breadcrumb.d.ts +39 -0
- package/types/star-ng-ui-button.d.ts +79 -0
- package/types/star-ng-ui-card.d.ts +29 -0
- package/types/star-ng-ui-chart.d.ts +337 -0
- package/types/star-ng-ui-checkbox.d.ts +92 -0
- package/types/star-ng-ui-core.d.ts +373 -0
- package/types/star-ng-ui-data-display.d.ts +438 -0
- package/types/star-ng-ui-date-picker.d.ts +701 -0
- package/types/star-ng-ui-dialog.d.ts +254 -0
- package/types/star-ng-ui-drawer.d.ts +29 -0
- package/types/star-ng-ui-editor.d.ts +96 -0
- package/types/star-ng-ui-field.d.ts +146 -0
- package/types/star-ng-ui-file-upload.d.ts +192 -0
- package/types/star-ng-ui-i18n-de.d.ts +7 -0
- package/types/star-ng-ui-i18n-es.d.ts +7 -0
- package/types/star-ng-ui-input-group.d.ts +58 -0
- package/types/star-ng-ui-input-mask.d.ts +126 -0
- package/types/star-ng-ui-input-number.d.ts +193 -0
- package/types/star-ng-ui-input-otp.d.ts +86 -0
- package/types/star-ng-ui-input-tags.d.ts +159 -0
- package/types/star-ng-ui-knob.d.ts +121 -0
- package/types/star-ng-ui-layout.d.ts +154 -0
- package/types/star-ng-ui-listbox.d.ts +170 -0
- package/types/star-ng-ui-media.d.ts +161 -0
- package/types/star-ng-ui-menu.d.ts +332 -0
- package/types/star-ng-ui-message.d.ts +52 -0
- package/types/star-ng-ui-paginator.d.ts +85 -0
- package/types/star-ng-ui-panel.d.ts +65 -0
- package/types/star-ng-ui-password.d.ts +129 -0
- package/types/star-ng-ui-popover.d.ts +57 -0
- package/types/star-ng-ui-progress-bar.d.ts +49 -0
- package/types/star-ng-ui-radio.d.ts +116 -0
- package/types/star-ng-ui-rating.d.ts +52 -0
- package/types/star-ng-ui-select-button.d.ts +169 -0
- package/types/star-ng-ui-select.d.ts +563 -0
- package/types/star-ng-ui-skeleton.d.ts +47 -0
- package/types/star-ng-ui-slider.d.ts +145 -0
- package/types/star-ng-ui-spinner.d.ts +29 -0
- package/types/star-ng-ui-stepper.d.ts +89 -0
- package/types/star-ng-ui-table.d.ts +885 -0
- package/types/star-ng-ui-tabs.d.ts +109 -0
- package/types/star-ng-ui-tag.d.ts +35 -0
- package/types/star-ng-ui-theme-switch.d.ts +36 -0
- package/types/star-ng-ui-theme.d.ts +95 -0
- package/types/star-ng-ui-toast.d.ts +84 -0
- package/types/star-ng-ui-toggle-switch.d.ts +81 -0
- package/types/star-ng-ui-tooltip.d.ts +66 -0
- package/types/star-ng-ui-transloco.d.ts +14 -0
- package/types/star-ng-ui-tree.d.ts +343 -0
- package/types/star-ng-ui-utility.d.ts +533 -0
- 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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"}
|