npm - @lifecorner/angular-ui-kit - Versions diffs - 3.11.4 → 3.12.0 - Mend

@lifecorner/angular-ui-kit 3.11.4 → 3.12.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 (45) hide show

package/fesm2022/lifecorner-angular-ui-kit-confirm-dialog.mjs CHANGED Viewed

@@ -272,6 +272,8 @@ var ConfirmDialogComponent = class ConfirmDialogComponent {
 					"spellcheck",
 					"enterkeyhint",
 					"requiredAriaLabel",
+					"controlId",
+					"announceError",
 					"value"
 				],
 				outputs: [

package/fesm2022/lifecorner-angular-ui-kit-confirm-dialog.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-confirm-dialog.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/confirm-dialog/confirm-dialog.component.ts","../../../../libs/angular-ui-kit/src/lib/confirm-dialog/confirm-dialog.component.html","../../../../libs/angular-ui-kit/src/lib/confirm-dialog/confirm.service.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n output,\n signal,\n computed,\n effect,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_EXCLAMATION_CIRCLE, ICON_EXCLAMATION_TRIANGLE } from '@lifecorner/angular-ui-kit/icons';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { InputComponent } from '@lifecorner/angular-ui-kit/input';\nimport { ModalComponent, ModalPlacement } from '@lifecorner/angular-ui-kit/modal';\n\nexport type ConfirmDialogVariant = 'default' \| 'destructive' \| 'warning';\n\n/** Size of the confirm and cancel buttons (`lg` = 48.5 px, a 44 px target). /\nexport type ConfirmDialogButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface RequireTextConfig {\n prompt: string;\n expected: string;\n}\n\n/\n Confirm dialog component for confirming user actions.\n \n Builds on `<lc-modal>` to provide a standardized confirmation pattern\n * with optional destructive variant and text-matching confirmation.\n \n The dialog is named by its title (`aria-labelledby`); `[slot='preview']`\n * shows what the action affects below the message; `confirmLoading` keeps the\n * dialog open with a busy confirm button while the action runs.\n \n @example\n * ```html\n * <lc-confirm-dialog\n * [open]=\"showConfirm()\"\n * variant=\"destructive\"\n * title=\"Delete project?\"\n * message=\"This cannot be undone.\"\n * (confirmed)=\"onDelete()\"\n * (cancelled)=\"showConfirm.set(false)\"\n * />\n * ```\n /\n@Component({\n selector: 'lc-confirm-dialog',\n standalone: true,\n imports: [FormsModule, IconComponent, ButtonComponent, ModalComponent, InputComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_TRIANGLE, ICON_EXCLAMATION_CIRCLE])],\n templateUrl: './confirm-dialog.component.html',\n styleUrls: ['./confirm-dialog.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ConfirmDialogComponent {\n private static nextId = 0;\n\n /* Whether the dialog is open /\n readonly open = input<boolean>(false);\n\n /* Dialog variant /\n readonly variant = input<ConfirmDialogVariant>('default');\n\n /* Dialog title /\n readonly title = input.required<string>();\n\n /* Dialog message /\n readonly message = input.required<string>();\n\n /* Confirm button label /\n readonly confirmLabel = input<string>('Confirm');\n\n /* Cancel button label /\n readonly cancelLabel = input<string>('Cancel');\n\n /* Icon name (auto-set by variant if not provided) /\n readonly icon = input<string>();\n\n /* Require text match to enable confirm /\n readonly requireText = input<RequireTextConfig>();\n\n /* Accessible name of the close button in the header. /\n readonly closeAriaLabel = input('Close modal');\n\n /\n Shows a spinner on the confirm button and blocks a second confirm while\n * the action runs; the app closes the dialog when it is done.\n * @default false\n /\n readonly confirmLoading = input<boolean>(false);\n\n /\n Size of the confirm and cancel buttons: `md` (3.2) or `lg` (48.5 px, the\n * 44 px touch target), or `sm`.\n * @default 'md'\n /\n readonly buttonSize = input<ConfirmDialogButtonSize>('md');\n\n /\n Where the dialog sits (passed to `lc-modal`): `center` (3.2), `auto` (a\n * bottom sheet below 640 px) or `sheet`.\n * @default 'center'\n /\n readonly placement = input<ModalPlacement>('center');\n\n /* Id of the title, which names the dialog. /\n protected readonly titleId = `lc-confirm-title-${++ConfirmDialogComponent.nextId}`;\n\n /* Emitted when user confirms /\n readonly confirmed = output<void>();\n\n /* Emitted when user cancels /\n readonly cancelled = output<void>();\n\n /* Internal text input value /\n protected inputValue = signal('');\n\n /* Resolved icon name /\n protected resolvedIcon = computed(() => {\n const icon = this.icon();\n if (icon) return icon;\n switch (this.variant()) {\n case 'destructive':\n return 'exclamation-triangle';\n case 'warning':\n return 'exclamation-circle';\n default:\n // Tabler name — 'question-mark-circle' has no alias and rendered a placeholder\n return 'help-circle';\n }\n });\n\n /* Resolved icon color /\n protected iconColor = computed(() => {\n switch (this.variant()) {\n case 'destructive':\n return 'var(--color-error-default)';\n case 'warning':\n return 'var(--color-warning-default)';\n default:\n return 'var(--color-primary-600)';\n }\n });\n\n /* Confirm button variant /\n protected confirmButtonVariant = computed(() => {\n switch (this.variant()) {\n case 'destructive':\n return 'danger';\n case 'warning':\n return 'warning';\n default:\n return 'primary';\n }\n });\n\n /* Whether confirm is allowed (text match check) /\n protected confirmAllowed = computed(() => {\n const req = this.requireText();\n if (!req) return true;\n return this.inputValue() === req.expected;\n });\n\n constructor() {\n // Reset input when dialog opens\n effect(() => {\n if (this.open()) {\n this.inputValue.set('');\n }\n });\n }\n\n /\n Confirm via button click or Enter inside the require-text input.\n * Enter is deliberately NOT handled on the whole dialog: the focus trap\n * lands on the close/cancel buttons first, and Enter there must activate\n * that button, never the (possibly destructive) confirm action.\n /\n protected onConfirm(): void {\n if (!this.confirmAllowed() \|\| this.confirmLoading()) return;\n this.confirmed.emit();\n }\n\n protected onCancel(): void {\n this.cancelled.emit();\n }\n\n protected onModalClose(): void {\n this.cancelled.emit();\n }\n\n protected onInputChange(value: string \| number): void {\n this.inputValue.set(String(value));\n }\n}\n","<lc-modal\n [open]=\"open()\"\n size=\"sm\"\n [placement]=\"placement()\"\n [showCloseButton]=\"true\"\n [closeAriaLabel]=\"closeAriaLabel()\"\n [ariaLabelledBy]=\"titleId\"\n (openChange)=\"$event ? null : onModalClose()\"\n>\n <div slot=\"header\">\n <div class=\"lc-confirm__header\">\n <lc-icon\n [name]=\"resolvedIcon()\"\n size=\"md\"\n [color]=\"iconColor()\"\n [decorative]=\"true\"\n />\n <h2 [id]=\"titleId\">{{ title() }}</h2>\n </div>\n </div>\n\n <div slot=\"body\">\n <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n <div class=\"lc-confirm__preview\">\n <ng-content select=\"[slot='preview']\" />\n </div>\n\n @if (requireText(); as req) {\n <div class=\"lc-confirm__require-text\">\n <!-- lc-input renders the prompt as an associated <label for> -->\n <lc-input\n [label]=\"req.prompt\"\n [placeholder]=\"req.expected\"\n (valueChange)=\"onInputChange($event)\"\n (enterPressed)=\"onConfirm()\"\n />\n </div>\n }\n </div>\n\n <div slot=\"footer\" class=\"lc-confirm__footer\">\n <lc-button\n variant=\"ghost\"\n [size]=\"buttonSize()\"\n (clicked)=\"onCancel()\"\n >\n {{ cancelLabel() }}\n </lc-button>\n <lc-button\n [variant]=\"confirmButtonVariant()\"\n [size]=\"buttonSize()\"\n [disabled]=\"!confirmAllowed()\"\n [loading]=\"confirmLoading()\"\n (clicked)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </lc-button>\n </div>\n</lc-modal>\n","import {\n Injectable,\n ApplicationRef,\n createComponent,\n EnvironmentInjector,\n inject,\n} from '@angular/core';\nimport {\n ConfirmDialogButtonSize,\n ConfirmDialogComponent,\n ConfirmDialogVariant,\n RequireTextConfig,\n} from './confirm-dialog.component';\nimport type { ModalPlacement } from '@lifecorner/angular-ui-kit/modal';\n\nexport interface ConfirmOptions {\n title: string;\n message: string;\n confirmLabel?: string;\n cancelLabel?: string;\n variant?: ConfirmDialogVariant;\n icon?: string;\n requireText?: RequireTextConfig;\n /* Accessible name of the close button (3.3). /\n closeAriaLabel?: string;\n /* Size of both buttons (3.3): `lg` for a 44 px touch target. /\n buttonSize?: ConfirmDialogButtonSize;\n /* `center`, `auto` (a bottom sheet below 640 px) or `sheet` (3.3). /\n placement?: ModalPlacement;\n}\n\n/\n Imperative confirm dialog service.\n \n @example\n * ```ts\n * const ok = await this.confirmService.confirm({\n * title: 'Delete item?',\n * message: 'This cannot be undone.',\n * });\n * if (ok) { ... }\n * ```\n /\n@Injectable({ providedIn: 'root' })\nexport class ConfirmService {\n private readonly appRef = inject(ApplicationRef);\n private readonly injector = inject(EnvironmentInjector);\n\n /\n Show a confirmation dialog and return a promise that resolves\n * to true (confirmed) or false (cancelled).\n /\n confirm(opts: ConfirmOptions): Promise<boolean> {\n return new Promise<boolean>((resolve) => {\n // Create a host element\n const hostEl = document.createElement('div');\n document.body.appendChild(hostEl);\n\n const componentRef = createComponent(ConfirmDialogComponent, {\n hostElement: hostEl,\n environmentInjector: this.injector,\n });\n\n // Set inputs\n componentRef.setInput('open', true);\n componentRef.setInput('title', opts.title);\n componentRef.setInput('message', opts.message);\n if (opts.confirmLabel) componentRef.setInput('confirmLabel', opts.confirmLabel);\n if (opts.cancelLabel) componentRef.setInput('cancelLabel', opts.cancelLabel);\n if (opts.variant) componentRef.setInput('variant', opts.variant);\n if (opts.icon) componentRef.setInput('icon', opts.icon);\n if (opts.requireText) componentRef.setInput('requireText', opts.requireText);\n if (opts.closeAriaLabel) componentRef.setInput('closeAriaLabel', opts.closeAriaLabel);\n if (opts.buttonSize) componentRef.setInput('buttonSize', opts.buttonSize);\n if (opts.placement) componentRef.setInput('placement', opts.placement);\n\n const cleanup = () => {\n this.appRef.detachView(componentRef.hostView);\n componentRef.destroy();\n hostEl.remove();\n };\n\n componentRef.instance.confirmed.subscribe(() => {\n cleanup();\n resolve(true);\n });\n\n componentRef.instance.cancelled.subscribe(() => {\n cleanup();\n resolve(false);\n });\n\n this.appRef.attachView(componentRef.hostView);\n });\n }\n\n /\n Show a destructive confirmation dialog.\n * Shorthand for `confirm({ ...opts, variant: 'destructive' })`.\n /\n destructive(opts: Omit<ConfirmOptions, 'variant'>): Promise<boolean> {\n return this.confirm({ ...opts, variant: 'destructive' });\n }\n\n /\n Show a warning confirmation dialog.\n * Shorthand for `confirm({ ...opts, variant: 'warning' })`.\n */\n warning(opts: Omit<ConfirmOptions, 'variant'>): Promise<boolean> {\n return this.confirm({ ...opts, variant: 'warning' });\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-confirm-dialog.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/confirm-dialog/confirm-dialog.component.ts","../../../../libs/angular-ui-kit/src/lib/confirm-dialog/confirm-dialog.component.html","../../../../libs/angular-ui-kit/src/lib/confirm-dialog/confirm.service.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n output,\n signal,\n computed,\n effect,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_EXCLAMATION_CIRCLE, ICON_EXCLAMATION_TRIANGLE } from '@lifecorner/angular-ui-kit/icons';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { InputComponent } from '@lifecorner/angular-ui-kit/input';\nimport { ModalComponent, ModalPlacement } from '@lifecorner/angular-ui-kit/modal';\n\nexport type ConfirmDialogVariant = 'default' \| 'destructive' \| 'warning';\n\n/** Size of the confirm and cancel buttons (`lg` = 48.5 px, a 44 px target). /\nexport type ConfirmDialogButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface RequireTextConfig {\n prompt: string;\n expected: string;\n}\n\n/\n Confirm dialog component for confirming user actions.\n \n Builds on `<lc-modal>` to provide a standardized confirmation pattern\n * with optional destructive variant and text-matching confirmation.\n \n The dialog is named by its title (`aria-labelledby`); `[slot='preview']`\n * shows what the action affects below the message; `confirmLoading` keeps the\n * dialog open with a busy confirm button while the action runs.\n \n @example\n * ```html\n * <lc-confirm-dialog\n * [open]=\"showConfirm()\"\n * variant=\"destructive\"\n * title=\"Delete project?\"\n * message=\"This cannot be undone.\"\n * (confirmed)=\"onDelete()\"\n * (cancelled)=\"showConfirm.set(false)\"\n * />\n * ```\n /\n@Component({\n selector: 'lc-confirm-dialog',\n standalone: true,\n imports: [FormsModule, IconComponent, ButtonComponent, ModalComponent, InputComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_TRIANGLE, ICON_EXCLAMATION_CIRCLE])],\n templateUrl: './confirm-dialog.component.html',\n styleUrls: ['./confirm-dialog.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ConfirmDialogComponent {\n private static nextId = 0;\n\n /* Whether the dialog is open /\n readonly open = input<boolean>(false);\n\n /* Dialog variant /\n readonly variant = input<ConfirmDialogVariant>('default');\n\n /* Dialog title /\n readonly title = input.required<string>();\n\n /* Dialog message /\n readonly message = input.required<string>();\n\n /* Confirm button label /\n readonly confirmLabel = input<string>('Confirm');\n\n /* Cancel button label /\n readonly cancelLabel = input<string>('Cancel');\n\n /* Icon name (auto-set by variant if not provided) /\n readonly icon = input<string>();\n\n /* Require text match to enable confirm /\n readonly requireText = input<RequireTextConfig>();\n\n /* Accessible name of the close button in the header. /\n readonly closeAriaLabel = input('Close modal');\n\n /\n Shows a spinner on the confirm button and blocks a second confirm while\n * the action runs; the app closes the dialog when it is done.\n * @default false\n /\n readonly confirmLoading = input<boolean>(false);\n\n /\n Size of the confirm and cancel buttons: `md` (3.2) or `lg` (48.5 px, the\n * 44 px touch target), or `sm`.\n * @default 'md'\n /\n readonly buttonSize = input<ConfirmDialogButtonSize>('md');\n\n /\n Where the dialog sits (passed to `lc-modal`): `center` (3.2), `auto` (a\n * bottom sheet below 640 px) or `sheet`.\n * @default 'center'\n /\n readonly placement = input<ModalPlacement>('center');\n\n /* Id of the title, which names the dialog. /\n protected readonly titleId = `lc-confirm-title-${++ConfirmDialogComponent.nextId}`;\n\n /* Emitted when user confirms /\n readonly confirmed = output<void>();\n\n /* Emitted when user cancels /\n readonly cancelled = output<void>();\n\n /* Internal text input value /\n protected inputValue = signal('');\n\n /* Resolved icon name /\n protected resolvedIcon = computed(() => {\n const icon = this.icon();\n if (icon) return icon;\n switch (this.variant()) {\n case 'destructive':\n return 'exclamation-triangle';\n case 'warning':\n return 'exclamation-circle';\n default:\n // Tabler name — 'question-mark-circle' has no alias and rendered a placeholder\n return 'help-circle';\n }\n });\n\n /* Resolved icon color /\n protected iconColor = computed(() => {\n switch (this.variant()) {\n case 'destructive':\n return 'var(--color-error-default)';\n case 'warning':\n return 'var(--color-warning-default)';\n default:\n return 'var(--color-primary-600)';\n }\n });\n\n /* Confirm button variant /\n protected confirmButtonVariant = computed(() => {\n switch (this.variant()) {\n case 'destructive':\n return 'danger';\n case 'warning':\n return 'warning';\n default:\n return 'primary';\n }\n });\n\n /* Whether confirm is allowed (text match check) /\n protected confirmAllowed = computed(() => {\n const req = this.requireText();\n if (!req) return true;\n return this.inputValue() === req.expected;\n });\n\n constructor() {\n // Reset input when dialog opens\n effect(() => {\n if (this.open()) {\n this.inputValue.set('');\n }\n });\n }\n\n /\n Confirm via button click or Enter inside the require-text input.\n * Enter is deliberately NOT handled on the whole dialog: the focus trap\n * lands on the close/cancel buttons first, and Enter there must activate\n * that button, never the (possibly destructive) confirm action.\n /\n protected onConfirm(): void {\n if (!this.confirmAllowed() \|\| this.confirmLoading()) return;\n this.confirmed.emit();\n }\n\n protected onCancel(): void {\n this.cancelled.emit();\n }\n\n protected onModalClose(): void {\n this.cancelled.emit();\n }\n\n protected onInputChange(value: string \| number): void {\n this.inputValue.set(String(value));\n }\n}\n","<lc-modal\n [open]=\"open()\"\n size=\"sm\"\n [placement]=\"placement()\"\n [showCloseButton]=\"true\"\n [closeAriaLabel]=\"closeAriaLabel()\"\n [ariaLabelledBy]=\"titleId\"\n (openChange)=\"$event ? null : onModalClose()\"\n>\n <div slot=\"header\">\n <div class=\"lc-confirm__header\">\n <lc-icon\n [name]=\"resolvedIcon()\"\n size=\"md\"\n [color]=\"iconColor()\"\n [decorative]=\"true\"\n />\n <h2 [id]=\"titleId\">{{ title() }}</h2>\n </div>\n </div>\n\n <div slot=\"body\">\n <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n <div class=\"lc-confirm__preview\">\n <ng-content select=\"[slot='preview']\" />\n </div>\n\n @if (requireText(); as req) {\n <div class=\"lc-confirm__require-text\">\n <!-- lc-input renders the prompt as an associated <label for> -->\n <lc-input\n [label]=\"req.prompt\"\n [placeholder]=\"req.expected\"\n (valueChange)=\"onInputChange($event)\"\n (enterPressed)=\"onConfirm()\"\n />\n </div>\n }\n </div>\n\n <div slot=\"footer\" class=\"lc-confirm__footer\">\n <lc-button\n variant=\"ghost\"\n [size]=\"buttonSize()\"\n (clicked)=\"onCancel()\"\n >\n {{ cancelLabel() }}\n </lc-button>\n <lc-button\n [variant]=\"confirmButtonVariant()\"\n [size]=\"buttonSize()\"\n [disabled]=\"!confirmAllowed()\"\n [loading]=\"confirmLoading()\"\n (clicked)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </lc-button>\n </div>\n</lc-modal>\n","import {\n Injectable,\n ApplicationRef,\n createComponent,\n EnvironmentInjector,\n inject,\n} from '@angular/core';\nimport {\n ConfirmDialogButtonSize,\n ConfirmDialogComponent,\n ConfirmDialogVariant,\n RequireTextConfig,\n} from './confirm-dialog.component';\nimport type { ModalPlacement } from '@lifecorner/angular-ui-kit/modal';\n\nexport interface ConfirmOptions {\n title: string;\n message: string;\n confirmLabel?: string;\n cancelLabel?: string;\n variant?: ConfirmDialogVariant;\n icon?: string;\n requireText?: RequireTextConfig;\n /* Accessible name of the close button (3.3). /\n closeAriaLabel?: string;\n /* Size of both buttons (3.3): `lg` for a 44 px touch target. /\n buttonSize?: ConfirmDialogButtonSize;\n /* `center`, `auto` (a bottom sheet below 640 px) or `sheet` (3.3). /\n placement?: ModalPlacement;\n}\n\n/\n Imperative confirm dialog service.\n \n @example\n * ```ts\n * const ok = await this.confirmService.confirm({\n * title: 'Delete item?',\n * message: 'This cannot be undone.',\n * });\n * if (ok) { ... }\n * ```\n /\n@Injectable({ providedIn: 'root' })\nexport class ConfirmService {\n private readonly appRef = inject(ApplicationRef);\n private readonly injector = inject(EnvironmentInjector);\n\n /\n Show a confirmation dialog and return a promise that resolves\n * to true (confirmed) or false (cancelled).\n /\n confirm(opts: ConfirmOptions): Promise<boolean> {\n return new Promise<boolean>((resolve) => {\n // Create a host element\n const hostEl = document.createElement('div');\n document.body.appendChild(hostEl);\n\n const componentRef = createComponent(ConfirmDialogComponent, {\n hostElement: hostEl,\n environmentInjector: this.injector,\n });\n\n // Set inputs\n componentRef.setInput('open', true);\n componentRef.setInput('title', opts.title);\n componentRef.setInput('message', opts.message);\n if (opts.confirmLabel) componentRef.setInput('confirmLabel', opts.confirmLabel);\n if (opts.cancelLabel) componentRef.setInput('cancelLabel', opts.cancelLabel);\n if (opts.variant) componentRef.setInput('variant', opts.variant);\n if (opts.icon) componentRef.setInput('icon', opts.icon);\n if (opts.requireText) componentRef.setInput('requireText', opts.requireText);\n if (opts.closeAriaLabel) componentRef.setInput('closeAriaLabel', opts.closeAriaLabel);\n if (opts.buttonSize) componentRef.setInput('buttonSize', opts.buttonSize);\n if (opts.placement) componentRef.setInput('placement', opts.placement);\n\n const cleanup = () => {\n this.appRef.detachView(componentRef.hostView);\n componentRef.destroy();\n hostEl.remove();\n };\n\n componentRef.instance.confirmed.subscribe(() => {\n cleanup();\n resolve(true);\n });\n\n componentRef.instance.cancelled.subscribe(() => {\n cleanup();\n resolve(false);\n });\n\n this.appRef.attachView(componentRef.hostView);\n });\n }\n\n /\n Show a destructive confirmation dialog.\n * Shorthand for `confirm({ ...opts, variant: 'destructive' })`.\n /\n destructive(opts: Omit<ConfirmOptions, 'variant'>): Promise<boolean> {\n return this.confirm({ ...opts, variant: 'destructive' });\n }\n\n /\n Show a warning confirmation dialog.\n * Shorthand for `confirm({ ...opts, variant: 'warning' })`.\n */\n warning(opts: Omit<ConfirmOptions, 'variant'>): Promise<boolean> {\n return this.confirm({ ...opts, variant: 'warning' });\n }\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs CHANGED Viewed

@@ -155,6 +155,8 @@ var CopyFieldComponent = class CopyFieldComponent {
 					"spellcheck",
 					"enterkeyhint",
 					"requiredAriaLabel",
+					"controlId",
+					"announceError",
 					"value"
 				],
 				outputs: [

package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-copy-field.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/copy-field/copy-field.component.ts","../../../../libs/angular-ui-kit/src/lib/copy-field/copy-field.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHECK } from '@lifecorner/angular-ui-kit/icons';\nimport { InputComponent } from '@lifecorner/angular-ui-kit/input';\n\n/** `stacked`: the button below the value at full width (phones); `inline`: beside it. /\nexport type CopyFieldLayout = 'stacked' \| 'inline';\n\n/* How long the button says \"Copied\" (ms). /\nconst CONFIRMATION_MS = 2000;\n\n/\n A value to copy — an invitation link, a token, a command: the value\n * read-only and wrapping (never clipped), a 48.5 px copy button, and one\n * polite announcement after copying. If the clipboard refuses, the value is\n * selected so the person can copy it by hand.\n \n @example\n * ```html\n * <lc-copy-field label=\"Einladungslink\" [value]=\"link\" copyLabel=\"Kopieren\"\n * copiedLabel=\"Kopiert\" copiedAnnouncement=\"Link kopiert\" />\n * ```\n /\n@Component({\n selector: 'lc-copy-field',\n imports: [InputComponent, ButtonComponent, IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_CHECK])],\n templateUrl: './copy-field.component.html',\n styleUrl: './copy-field.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CopyFieldComponent {\n /* Label of the value (its accessible name). /\n readonly label = input<string>('');\n\n /* The value to copy. /\n readonly value = input<string>('');\n\n /* Help below the value. /\n readonly helperText = input<string>();\n\n /* `stacked` (default): button below at full width; `inline`: button beside the value. /\n readonly layout = input<CopyFieldLayout>('stacked');\n\n /* Show the clipboard (and, after copying, check) icon in the button. /\n readonly showIcon = input<boolean>(true);\n\n /* Button label. /\n readonly copyLabel = input('Copy');\n\n /* Button label for two seconds after copying. /\n readonly copiedLabel = input('Copied');\n\n /* Spoken once after copying (polite live region). /\n readonly copiedAnnouncement = input('Copied to the clipboard');\n\n /* Emitted with the value after it was copied. /\n readonly copied = output<string>();\n\n /* Emitted when the clipboard refused; the value is then selected for copying by hand. /\n readonly copyFailed = output<void>();\n\n protected readonly isCopied = signal(false);\n\n private readonly field = viewChild(InputComponent);\n private timer: ReturnType<typeof setTimeout> \| undefined;\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n }\n\n /* Copies the value; on refusal selects it instead. */\n async copy(): Promise<void> {\n const value = this.value();\n try {\n const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;\n if (!clipboard) throw new Error('Clipboard API unavailable');\n await clipboard.writeText(value);\n } catch {\n this.copyFailed.emit();\n this.field()?.focus();\n this.field()?.select();\n return;\n }\n this.isCopied.set(true);\n this.copied.emit(value);\n clearTimeout(this.timer);\n this.timer = setTimeout(() => this.isCopied.set(false), CONFIRMATION_MS);\n }\n}\n","<div\n class=\"lc-copy-field\"\n [class.lc-copy-field--stacked]=\"layout() === 'stacked'\"\n [class.lc-copy-field--inline]=\"layout() === 'inline'\"\n>\n <div class=\"lc-copy-field__value\">\n <lc-input\n [label]=\"label()\"\n [value]=\"value()\"\n [helperText]=\"helperText()\"\n size=\"lg\"\n [readonly]=\"true\"\n [readonlyWrap]=\"true\"\n />\n </div>\n\n <div class=\"lc-copy-field__action\">\n <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"layout() === 'stacked'\" (clicked)=\"copy()\">\n @if (showIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"isCopied() ? 'check' : 'clipboard-document'\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ isCopied() ? copiedLabel() : copyLabel() }}\n </lc-button>\n </div>\n\n <span class=\"lc-copy-field__live\" role=\"status\" aria-live=\"polite\">{{ isCopied() ? copiedAnnouncement() : '' }}</span>\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-copy-field.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/copy-field/copy-field.component.ts","../../../../libs/angular-ui-kit/src/lib/copy-field/copy-field.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHECK } from '@lifecorner/angular-ui-kit/icons';\nimport { InputComponent } from '@lifecorner/angular-ui-kit/input';\n\n/** `stacked`: the button below the value at full width (phones); `inline`: beside it. /\nexport type CopyFieldLayout = 'stacked' \| 'inline';\n\n/* How long the button says \"Copied\" (ms). /\nconst CONFIRMATION_MS = 2000;\n\n/\n A value to copy — an invitation link, a token, a command: the value\n * read-only and wrapping (never clipped), a 48.5 px copy button, and one\n * polite announcement after copying. If the clipboard refuses, the value is\n * selected so the person can copy it by hand.\n \n @example\n * ```html\n * <lc-copy-field label=\"Einladungslink\" [value]=\"link\" copyLabel=\"Kopieren\"\n * copiedLabel=\"Kopiert\" copiedAnnouncement=\"Link kopiert\" />\n * ```\n /\n@Component({\n selector: 'lc-copy-field',\n imports: [InputComponent, ButtonComponent, IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_CHECK])],\n templateUrl: './copy-field.component.html',\n styleUrl: './copy-field.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CopyFieldComponent {\n /* Label of the value (its accessible name). /\n readonly label = input<string>('');\n\n /* The value to copy. /\n readonly value = input<string>('');\n\n /* Help below the value. /\n readonly helperText = input<string>();\n\n /* `stacked` (default): button below at full width; `inline`: button beside the value. /\n readonly layout = input<CopyFieldLayout>('stacked');\n\n /* Show the clipboard (and, after copying, check) icon in the button. /\n readonly showIcon = input<boolean>(true);\n\n /* Button label. /\n readonly copyLabel = input('Copy');\n\n /* Button label for two seconds after copying. /\n readonly copiedLabel = input('Copied');\n\n /* Spoken once after copying (polite live region). /\n readonly copiedAnnouncement = input('Copied to the clipboard');\n\n /* Emitted with the value after it was copied. /\n readonly copied = output<string>();\n\n /* Emitted when the clipboard refused; the value is then selected for copying by hand. /\n readonly copyFailed = output<void>();\n\n protected readonly isCopied = signal(false);\n\n private readonly field = viewChild(InputComponent);\n private timer: ReturnType<typeof setTimeout> \| undefined;\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n }\n\n /* Copies the value; on refusal selects it instead. */\n async copy(): Promise<void> {\n const value = this.value();\n try {\n const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;\n if (!clipboard) throw new Error('Clipboard API unavailable');\n await clipboard.writeText(value);\n } catch {\n this.copyFailed.emit();\n this.field()?.focus();\n this.field()?.select();\n return;\n }\n this.isCopied.set(true);\n this.copied.emit(value);\n clearTimeout(this.timer);\n this.timer = setTimeout(() => this.isCopied.set(false), CONFIRMATION_MS);\n }\n}\n","<div\n class=\"lc-copy-field\"\n [class.lc-copy-field--stacked]=\"layout() === 'stacked'\"\n [class.lc-copy-field--inline]=\"layout() === 'inline'\"\n>\n <div class=\"lc-copy-field__value\">\n <lc-input\n [label]=\"label()\"\n [value]=\"value()\"\n [helperText]=\"helperText()\"\n size=\"lg\"\n [readonly]=\"true\"\n [readonlyWrap]=\"true\"\n />\n </div>\n\n <div class=\"lc-copy-field__action\">\n <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"layout() === 'stacked'\" (clicked)=\"copy()\">\n @if (showIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"isCopied() ? 'check' : 'clipboard-document'\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ isCopied() ? copiedLabel() : copyLabel() }}\n </lc-button>\n </div>\n\n <span class=\"lc-copy-field__live\" role=\"status\" aria-live=\"polite\">{{ isCopied() ? copiedAnnouncement() : '' }}</span>\n</div>\n"],"mappings":";;;;;;AAmBA,MAAM,kBAAkB;AAsBxB,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGzB,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGzB,aAAa,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG5B,SAAS,MAAuB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAG1C,WAAW,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,YAAY,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGzB,cAAc,MAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,qBAAqB,MAAM,2BAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrD,SAAS,OAAM;CAGf,aAAa,OAAM;CAET,WAAW,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAE1B,QAAQ,UAAU,gBAAe,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC1C;CAER,cAAA;EACE,OAAO,UAAU,CAAC,CAAC,gBAAgB,aAAa,KAAK,KAAK,CAAC;CAC7D;CAGA,MAAM,OAAI;EACR,MAAM,QAAQ,KAAK,MAAK;EACxB,IAAI;GACF,MAAM,YAAY,OAAO,cAAc,cAAc,SAAY,UAAU;GAC3E,IAAI,CAAC,WAAW,MAAM,IAAI,MAAM,2BAA2B;GAC3D,MAAM,UAAU,UAAU,KAAK;EACjC,QAAQ;GACN,KAAK,WAAW,KAAI;GACpB,KAAK,MAAK,CAAE,EAAE,MAAK;GACnB,KAAK,MAAK,CAAE,EAAE,OAAM;GACpB;EACF;EACA,KAAK,SAAS,IAAI,IAAI;EACtB,KAAK,OAAO,KAAK,KAAK;EACtB,aAAa,KAAK,KAAK;EACvB,KAAK,QAAQ,iBAAiB,KAAK,SAAS,IAAI,KAAK,GAAG,eAAe;CACzE;CAzDW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,QAAA;GAAA,YAAA;EAAA;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAiCM;GAAc,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UC1EnD;EA2BA,QAAA,CAAA,2eAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDQY;IAAc,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,eACzC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKpC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAR9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,SAChB;IAAC;IAAgB;IAAiB;GAAa;GAAC,eAC1C,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;GAAC,iBAG9B,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,2eAAA;EAAA,CAAA;CAmCZ,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,QAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,oBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,QAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,QAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAAA,cAAc,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-email-input.mjs CHANGED Viewed

@@ -300,6 +300,8 @@ var EmailInputComponent = class EmailInputComponent {
 				"spellcheck",
 				"enterkeyhint",
 				"requiredAriaLabel",
+				"controlId",
+				"announceError",
 				"value"
 			],
 			outputs: [

package/fesm2022/lifecorner-angular-ui-kit-email-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-email-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/email-input/email-input.component.ts","../../../../libs/angular-ui-kit/src/lib/email-input/email-input.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering /\n/ ControlValueAccessor implementation requires specific method placement /\n\nimport {\n Component,\n input,\n output,\n signal,\n computed,\n ChangeDetectionStrategy,\n forwardRef,\n effect,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { InputAutocapitalize, InputComponent, InputEnterKeyHint } from '@lifecorner/angular-ui-kit/input';\nimport { ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_MAIL } from '@lifecorner/angular-ui-kit/icons';\n\n/\n Email input component with built-in RFC 5322 validation.\n \n Features:\n * - RFC 5322 regex email format validation\n * - Real-time validation feedback on input\n * - Valid/invalid visual indicators\n * - Size presets (xs, sm, md, lg)\n * - Helper text and error message display\n * - Disabled and readonly states (read-only addresses can wrap: `readonlyWrap`)\n * - Optional leading mail icon (`showIcon`)\n * - Autofill and keyboard hints: `autocomplete`, `name`, `autocapitalize`, `spellcheck`, `enterkeyhint`\n * - ControlValueAccessor integration for reactive forms\n \n @example\n * ```html\n * <lc-email-input label=\"Email\" placeholder=\"you@example.com\" [(ngModel)]=\"email\" />\n * ```\n /\n@Component({\n selector: 'lc-email-input',\n imports: [CommonModule, InputComponent],\n // The `envelope` icon it hands to lc-input (an alias of the Tabler `mail`).\n viewProviders: [ɵprovideKitIcons([ICON_MAIL])],\n templateUrl: './email-input.component.html',\n styleUrl: './email-input.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EmailInputComponent),\n multi: true,\n },\n ],\n})\nexport class EmailInputComponent implements ControlValueAccessor {\n // Input Properties\n /\n Input label (displayed above input)\n * @default 'Email'\n /\n readonly label = input<string>('Email');\n\n /\n Placeholder text\n * @default 'you@example.com'\n /\n readonly placeholder = input<string>('you@example.com');\n\n /\n Size of the input\n * @default 'md'\n /\n readonly size = input<'xs' \| 'sm' \| 'md' \| 'lg'>('md');\n\n /\n Whether the input is disabled\n * @default false\n /\n readonly disabled = input<boolean>(false);\n\n /\n Whether the input is read-only\n * @default false\n /\n readonly readonly = input<boolean>(false);\n\n /\n Whether the input is required\n * @default false\n /\n readonly required = input<boolean>(false);\n\n /\n Custom error message (overrides validation error)\n /\n readonly error = input<string>();\n\n /\n Helper text to display below input\n /\n readonly helperText = input<string>();\n\n /\n Whether to show validation feedback immediately\n * @default false (validates on blur)\n /\n readonly validateOnInput = input<boolean>(false);\n\n /\n ARIA label for accessibility\n /\n readonly ariaLabel = input<string>();\n\n /\n Native `autocomplete` (input purpose, WCAG 1.3.5): `email` (registration),\n * `username` (the address as the sign-in name), `username webauthn` (sign-in:\n * the browser offers passkeys in this field). Unset = no attribute.\n /\n readonly autocomplete = input<string>();\n\n /* Native `name` of the inner input. Unset = no attribute. /\n readonly name = input<string>();\n\n /* Native `autocapitalize` (`off` keeps keyboards from capitalising the address). Unset = no attribute. /\n readonly autocapitalize = input<InputAutocapitalize>();\n\n /* Native `spellcheck`. Unset = no attribute. /\n readonly spellcheck = input<boolean>();\n\n /* Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. /\n readonly enterkeyhint = input<InputEnterKeyHint>();\n\n /\n Show the leading mail icon. `false` gives the address the icon's width\n * (about 36 px) — long addresses fit on a phone.\n * @default true\n /\n readonly showIcon = input<boolean>(true);\n\n /\n While `readonly`: the address wraps onto more lines instead of being\n * clipped. A hidden native input keeps value, `name` and `autocomplete`\n * (e.g. `username` for password managers on a password page).\n * @default false\n /\n readonly readonlyWrap = input<boolean>(false);\n\n /\n Show the `` of a `required` field; `false` keeps the required semantics without it.\n @default true\n /\n readonly requiredIndicator = input<boolean>(true);\n\n /* Error shown for an empty `required` field. /\n readonly requiredMessage = input('Email address is required');\n\n /* Error shown for a malformed address. /\n readonly invalidMessage = input('Please enter a valid email address');\n\n // Output Events\n /\n Emitted when email value changes\n /\n readonly valueChange = output<string>();\n\n /\n Emitted when validation state changes\n /\n readonly validationChange = output<{ valid: boolean; error?: string }>();\n\n /\n Emitted when input receives focus\n /\n readonly focused = output<void>();\n\n /\n Emitted when input loses focus\n /\n readonly blurred = output<void>();\n\n /\n Emitted when Enter key is pressed\n /\n readonly enterPressed = output<void>();\n\n // Internal state\n readonly value = signal<string>('');\n private readonly touched = signal<boolean>(false);\n private readonly _formDisabled = signal<boolean>(false);\n\n /\n RFC 5322 compliant email regex (simplified but robust)\n * Validates: local-part@domain\n * - Local part: alphanumeric, dots, hyphens, underscores, plus signs\n * - Domain: alphanumeric, dots, hyphens with valid TLD\n /\n private readonly EMAIL_REGEX =\n /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/;\n\n // ControlValueAccessor callbacks\n private onChange: (value: string) => void = () => { / set by registerOnChange / };\n private onTouched: () => void = () => { / set by registerOnTouched / };\n\n /\n Computed validation state\n /\n protected readonly isValid = computed(() => {\n const val = this.value();\n if (!val) return this.required() ? false : true;\n return this.EMAIL_REGEX.test(val);\n });\n\n /\n Computed error message\n /\n protected readonly validationError = computed(() => {\n // Custom error takes precedence\n if (this.error()) return this.error();\n\n // Show validation errors only after touched or validateOnInput\n if (!this.touched() && !this.validateOnInput()) return undefined;\n\n const val = this.value();\n if (this.required() && !val) {\n return this.requiredMessage();\n }\n if (val && !this.isValid()) {\n return this.invalidMessage();\n }\n return undefined;\n });\n\n /\n Computed disabled state\n /\n protected get isDisabled(): boolean {\n return this.disabled() \|\| this._formDisabled();\n }\n\n constructor() {\n // Emit validation state changes\n effect(() => {\n const valid = this.isValid();\n const error = this.validationError();\n this.validationChange.emit({ valid, error });\n });\n }\n\n // ===== ControlValueAccessor implementation =====\n\n writeValue(value: string): void {\n this.value.set(value \|\| '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this._formDisabled.set(isDisabled);\n }\n\n // ===== Public API methods =====\n\n /\n Public method to trigger validation\n /\n public validate(): boolean {\n this.touched.set(true);\n return this.isValid();\n }\n\n /\n Public method to reset validation state\n /\n public resetValidation(): void {\n this.touched.set(false);\n }\n\n // ===== Event handlers (protected) =====\n\n /\n Handles value changes from base input\n /\n protected onValueChange(newValue: string): void {\n this.value.set(newValue);\n this.onChange(newValue);\n this.valueChange.emit(newValue);\n }\n\n /\n Handles focus events\n /\n protected onFocus(): void {\n this.focused.emit();\n }\n\n /\n Handles blur events\n /\n protected onBlur(): void {\n this.touched.set(true);\n this.onTouched();\n this.blurred.emit();\n }\n\n /\n Handles Enter key press\n */\n protected onEnterPressed(): void {\n this.enterPressed.emit();\n }\n}\n","<lc-input\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n type=\"email\"\n [size]=\"size()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [readonlyWrap]=\"readonlyWrap()\"\n [required]=\"required()\"\n [requiredIndicator]=\"requiredIndicator()\"\n [error]=\"validationError()\"\n [helperText]=\"helperText()\"\n [iconBefore]=\"showIcon() ? 'envelope' : undefined\"\n [ariaLabel]=\"ariaLabel() \|\| label()\"\n [autocomplete]=\"autocomplete()\"\n [name]=\"name()\"\n [autocapitalize]=\"autocapitalize()\"\n [spellcheck]=\"spellcheck()\"\n [enterkeyhint]=\"enterkeyhint()\"\n (valueChange)=\"onValueChange($event)\"\n (focused)=\"onFocus()\"\n (blurred)=\"onBlur()\"\n (enterPressed)=\"onEnterPressed()\"\n/>\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-email-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/email-input/email-input.component.ts","../../../../libs/angular-ui-kit/src/lib/email-input/email-input.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering /\n/ ControlValueAccessor implementation requires specific method placement /\n\nimport {\n Component,\n input,\n output,\n signal,\n computed,\n ChangeDetectionStrategy,\n forwardRef,\n effect,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { InputAutocapitalize, InputComponent, InputEnterKeyHint } from '@lifecorner/angular-ui-kit/input';\nimport { ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_MAIL } from '@lifecorner/angular-ui-kit/icons';\n\n/\n Email input component with built-in RFC 5322 validation.\n \n Features:\n * - RFC 5322 regex email format validation\n * - Real-time validation feedback on input\n * - Valid/invalid visual indicators\n * - Size presets (xs, sm, md, lg)\n * - Helper text and error message display\n * - Disabled and readonly states (read-only addresses can wrap: `readonlyWrap`)\n * - Optional leading mail icon (`showIcon`)\n * - Autofill and keyboard hints: `autocomplete`, `name`, `autocapitalize`, `spellcheck`, `enterkeyhint`\n * - ControlValueAccessor integration for reactive forms\n \n @example\n * ```html\n * <lc-email-input label=\"Email\" placeholder=\"you@example.com\" [(ngModel)]=\"email\" />\n * ```\n /\n@Component({\n selector: 'lc-email-input',\n imports: [CommonModule, InputComponent],\n // The `envelope` icon it hands to lc-input (an alias of the Tabler `mail`).\n viewProviders: [ɵprovideKitIcons([ICON_MAIL])],\n templateUrl: './email-input.component.html',\n styleUrl: './email-input.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EmailInputComponent),\n multi: true,\n },\n ],\n})\nexport class EmailInputComponent implements ControlValueAccessor {\n // Input Properties\n /\n Input label (displayed above input)\n * @default 'Email'\n /\n readonly label = input<string>('Email');\n\n /\n Placeholder text\n * @default 'you@example.com'\n /\n readonly placeholder = input<string>('you@example.com');\n\n /\n Size of the input\n * @default 'md'\n /\n readonly size = input<'xs' \| 'sm' \| 'md' \| 'lg'>('md');\n\n /\n Whether the input is disabled\n * @default false\n /\n readonly disabled = input<boolean>(false);\n\n /\n Whether the input is read-only\n * @default false\n /\n readonly readonly = input<boolean>(false);\n\n /\n Whether the input is required\n * @default false\n /\n readonly required = input<boolean>(false);\n\n /\n Custom error message (overrides validation error)\n /\n readonly error = input<string>();\n\n /\n Helper text to display below input\n /\n readonly helperText = input<string>();\n\n /\n Whether to show validation feedback immediately\n * @default false (validates on blur)\n /\n readonly validateOnInput = input<boolean>(false);\n\n /\n ARIA label for accessibility\n /\n readonly ariaLabel = input<string>();\n\n /\n Native `autocomplete` (input purpose, WCAG 1.3.5): `email` (registration),\n * `username` (the address as the sign-in name), `username webauthn` (sign-in:\n * the browser offers passkeys in this field). Unset = no attribute.\n /\n readonly autocomplete = input<string>();\n\n /* Native `name` of the inner input. Unset = no attribute. /\n readonly name = input<string>();\n\n /* Native `autocapitalize` (`off` keeps keyboards from capitalising the address). Unset = no attribute. /\n readonly autocapitalize = input<InputAutocapitalize>();\n\n /* Native `spellcheck`. Unset = no attribute. /\n readonly spellcheck = input<boolean>();\n\n /* Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. /\n readonly enterkeyhint = input<InputEnterKeyHint>();\n\n /\n Show the leading mail icon. `false` gives the address the icon's width\n * (about 36 px) — long addresses fit on a phone.\n * @default true\n /\n readonly showIcon = input<boolean>(true);\n\n /\n While `readonly`: the address wraps onto more lines instead of being\n * clipped. A hidden native input keeps value, `name` and `autocomplete`\n * (e.g. `username` for password managers on a password page).\n * @default false\n /\n readonly readonlyWrap = input<boolean>(false);\n\n /\n Show the `` of a `required` field; `false` keeps the required semantics without it.\n @default true\n /\n readonly requiredIndicator = input<boolean>(true);\n\n /* Error shown for an empty `required` field. /\n readonly requiredMessage = input('Email address is required');\n\n /* Error shown for a malformed address. /\n readonly invalidMessage = input('Please enter a valid email address');\n\n // Output Events\n /\n Emitted when email value changes\n /\n readonly valueChange = output<string>();\n\n /\n Emitted when validation state changes\n /\n readonly validationChange = output<{ valid: boolean; error?: string }>();\n\n /\n Emitted when input receives focus\n /\n readonly focused = output<void>();\n\n /\n Emitted when input loses focus\n /\n readonly blurred = output<void>();\n\n /\n Emitted when Enter key is pressed\n /\n readonly enterPressed = output<void>();\n\n // Internal state\n readonly value = signal<string>('');\n private readonly touched = signal<boolean>(false);\n private readonly _formDisabled = signal<boolean>(false);\n\n /\n RFC 5322 compliant email regex (simplified but robust)\n * Validates: local-part@domain\n * - Local part: alphanumeric, dots, hyphens, underscores, plus signs\n * - Domain: alphanumeric, dots, hyphens with valid TLD\n /\n private readonly EMAIL_REGEX =\n /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/;\n\n // ControlValueAccessor callbacks\n private onChange: (value: string) => void = () => { / set by registerOnChange / };\n private onTouched: () => void = () => { / set by registerOnTouched / };\n\n /\n Computed validation state\n /\n protected readonly isValid = computed(() => {\n const val = this.value();\n if (!val) return this.required() ? false : true;\n return this.EMAIL_REGEX.test(val);\n });\n\n /\n Computed error message\n /\n protected readonly validationError = computed(() => {\n // Custom error takes precedence\n if (this.error()) return this.error();\n\n // Show validation errors only after touched or validateOnInput\n if (!this.touched() && !this.validateOnInput()) return undefined;\n\n const val = this.value();\n if (this.required() && !val) {\n return this.requiredMessage();\n }\n if (val && !this.isValid()) {\n return this.invalidMessage();\n }\n return undefined;\n });\n\n /\n Computed disabled state\n /\n protected get isDisabled(): boolean {\n return this.disabled() \|\| this._formDisabled();\n }\n\n constructor() {\n // Emit validation state changes\n effect(() => {\n const valid = this.isValid();\n const error = this.validationError();\n this.validationChange.emit({ valid, error });\n });\n }\n\n // ===== ControlValueAccessor implementation =====\n\n writeValue(value: string): void {\n this.value.set(value \|\| '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this._formDisabled.set(isDisabled);\n }\n\n // ===== Public API methods =====\n\n /\n Public method to trigger validation\n /\n public validate(): boolean {\n this.touched.set(true);\n return this.isValid();\n }\n\n /\n Public method to reset validation state\n /\n public resetValidation(): void {\n this.touched.set(false);\n }\n\n // ===== Event handlers (protected) =====\n\n /\n Handles value changes from base input\n /\n protected onValueChange(newValue: string): void {\n this.value.set(newValue);\n this.onChange(newValue);\n this.valueChange.emit(newValue);\n }\n\n /\n Handles focus events\n /\n protected onFocus(): void {\n this.focused.emit();\n }\n\n /\n Handles blur events\n /\n protected onBlur(): void {\n this.touched.set(true);\n this.onTouched();\n this.blurred.emit();\n }\n\n /\n Handles Enter key press\n */\n protected onEnterPressed(): void {\n this.enterPressed.emit();\n }\n}\n","<lc-input\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n type=\"email\"\n [size]=\"size()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [readonlyWrap]=\"readonlyWrap()\"\n [required]=\"required()\"\n [requiredIndicator]=\"requiredIndicator()\"\n [error]=\"validationError()\"\n [helperText]=\"helperText()\"\n [iconBefore]=\"showIcon() ? 'envelope' : undefined\"\n [ariaLabel]=\"ariaLabel() \|\| label()\"\n [autocomplete]=\"autocomplete()\"\n [name]=\"name()\"\n [autocapitalize]=\"autocapitalize()\"\n [spellcheck]=\"spellcheck()\"\n [enterkeyhint]=\"enterkeyhint()\"\n (valueChange)=\"onValueChange($event)\"\n (focused)=\"onFocus()\"\n (blurred)=\"onBlur()\"\n (enterPressed)=\"onEnterPressed()\"\n/>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs CHANGED Viewed

@@ -23,6 +23,11 @@ var FileUploadComponent = class FileUploadComponent {
 			this.disabled() ? "file-upload--disabled" : ""
 		].filter(Boolean).join(" ");
 	}, ...ngDevMode ? [{ debugName: "dropzoneClasses" }] : /* istanbul ignore next */ []);
+	dropzoneAriaLabel = computed(() => [
+		this.hint(),
+		this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : "",
+		this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : ""
+	].filter(Boolean).join(", "), ...ngDevMode ? [{ debugName: "dropzoneAriaLabel" }] : /* istanbul ignore next */ []);
 	onDragOver(event) {
 		event.preventDefault();
 		event.stopPropagation();
@@ -163,7 +168,7 @@ var FileUploadComponent = class FileUploadComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"hint()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      <p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      <p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
+		template: "<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"dropzoneAriaLabel()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <!-- Real spaces between the lines, so the visible text reads as words\n         that the drop zone's name contains (WCAG 2.5.3). -->\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
 		styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-error)}\n"],
 		dependencies: [{
 			kind: "component",
@@ -196,7 +201,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [IconComponent],
 			viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"hint()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      <p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      <p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
+			template: "<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"dropzoneAriaLabel()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <!-- Real spaces between the lines, so the visible text reads as words\n         that the drop zone's name contains (WCAG 2.5.3). -->\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
 			styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-error)}\n"]
 		}]
 	}],

package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n signal,\n computed,\n ElementRef,\n viewChild,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_FILE, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface FileUploadFile {\n file: File;\n name: string;\n size: number;\n type: string;\n}\n\n/*\n File upload / dropzone component with drag & drop support.\n \n @example\n * ```html\n * <lc-file-upload\n * accept=\".pdf,.png,.jpg\"\n * [multiple]=\"true\"\n * [maxSizeBytes]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n /\n@Component({\n selector: 'lc-file-upload',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/\n File upload component with drag-and-drop support.\n \n Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation\n * - Multi-file upload support\n * - File list display with removal\n * - Disabled state support\n \n @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n /\nexport class FileUploadComponent {\n /\n Accepted file types (e.g. \".pdf,.jpg,image/\").\n /\n accept = input<string>('');\n\n /*\n Allow multiple files.\n * @default false\n /\n multiple = input<boolean>(false);\n\n /\n Maximum file size in bytes. 0 for unlimited.\n * @default 0\n /\n maxSizeBytes = input<number>(0);\n\n /\n Whether the dropzone is disabled.\n * @default false\n /\n disabled = input<boolean>(false);\n\n /\n Hint text shown in the dropzone.\n * @default 'Drag & drop files here, or click to browse'\n /\n hint = input<string>('Drag & drop files here, or click to browse');\n\n /* Prefix of the accepted file types line (`accept`). /\n acceptedLabel = input('Accepted:');\n\n /* Prefix of the maximum file size line (`maxSizeBytes`). /\n maxSizeLabel = input('Max:');\n\n /* Accessible name of a selected file's remove button. /\n removeFileAriaLabel = input('Remove file');\n\n /\n Emitted with selected files after validation.\n /\n readonly filesSelected = output<FileUploadFile[]>();\n\n /\n Emitted when a file is rejected (too large or wrong type).\n /\n readonly fileRejected = output<{ file: File; reason: string }>();\n\n protected isDragOver = signal(false);\n protected selectedFiles = signal<FileUploadFile[]>([]);\n protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n protected dropzoneClasses = computed(() => {\n return [\n 'file-upload',\n this.isDragOver() ? 'file-upload--drag-over' : '',\n this.disabled() ? 'file-upload--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n protected onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this.isDragOver.set(true);\n }\n }\n\n protected onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n }\n\n protected onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n if (this.disabled() \|\| !event.dataTransfer?.files.length) return;\n this.processFiles(event.dataTransfer.files);\n }\n\n protected onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files?.length) {\n this.processFiles(input.files);\n }\n // Reset so the same file can be re-selected\n input.value = '';\n }\n\n protected openFilePicker(): void {\n if (!this.disabled()) {\n this.fileInputRef()?.nativeElement.click();\n }\n }\n\n protected removeFile(index: number): void {\n this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n this.filesSelected.emit(this.selectedFiles());\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n private processFiles(fileList: FileList): void {\n const files = Array.from(fileList);\n const accepted: FileUploadFile[] = [];\n\n for (const file of files) {\n if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n this.fileRejected.emit({ file, reason: 'File too large' });\n continue;\n }\n accepted.push({\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n });\n }\n\n if (this.multiple()) {\n this.selectedFiles.update((prev) => [...prev, ...accepted]);\n } else {\n this.selectedFiles.set(accepted.slice(0, 1));\n }\n\n this.filesSelected.emit(this.selectedFiles());\n }\n}\n","<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"hint()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n <p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n <p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n signal,\n computed,\n ElementRef,\n viewChild,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_FILE, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface FileUploadFile {\n file: File;\n name: string;\n size: number;\n type: string;\n}\n\n/*\n File upload / dropzone component with drag & drop support.\n \n @example\n * ```html\n * <lc-file-upload\n * accept=\".pdf,.png,.jpg\"\n * [multiple]=\"true\"\n * [maxSizeBytes]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n /\n@Component({\n selector: 'lc-file-upload',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/\n File upload component with drag-and-drop support.\n \n Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation\n * - Multi-file upload support\n * - File list display with removal\n * - Disabled state support\n \n @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n /\nexport class FileUploadComponent {\n /\n Accepted file types (e.g. \".pdf,.jpg,image/\").\n /\n accept = input<string>('');\n\n /*\n Allow multiple files.\n * @default false\n /\n multiple = input<boolean>(false);\n\n /\n Maximum file size in bytes. 0 for unlimited.\n * @default 0\n /\n maxSizeBytes = input<number>(0);\n\n /\n Whether the dropzone is disabled.\n * @default false\n /\n disabled = input<boolean>(false);\n\n /\n Hint text shown in the dropzone. The drop zone's accessible name is\n * `hint`, then the shown accepted and max lines, comma-separated (WCAG 2.5.3\n * Label in Name).\n * @default 'Drag & drop files here, or click to browse'\n /\n hint = input<string>('Drag & drop files here, or click to browse');\n\n /\n Prefix of the accepted file types line (`accept`). The shown line is part\n * of the drop zone's accessible name, after `hint`.\n * @default 'Accepted:'\n /\n acceptedLabel = input('Accepted:');\n\n /\n Prefix of the maximum file size line (`maxSizeBytes`). The shown line is\n * part of the drop zone's accessible name, after `hint`.\n * @default 'Max:'\n /\n maxSizeLabel = input('Max:');\n\n /* Accessible name of a selected file's remove button. /\n removeFileAriaLabel = input('Remove file');\n\n /\n Emitted with selected files after validation.\n /\n readonly filesSelected = output<FileUploadFile[]>();\n\n /\n Emitted when a file is rejected (too large or wrong type).\n /\n readonly fileRejected = output<{ file: File; reason: string }>();\n\n protected isDragOver = signal(false);\n protected selectedFiles = signal<FileUploadFile[]>([]);\n protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n protected dropzoneClasses = computed(() => {\n return [\n 'file-upload',\n this.isDragOver() ? 'file-upload--drag-over' : '',\n this.disabled() ? 'file-upload--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n /\n Name of the drop zone (AS-33, WCAG 2.5.3 Label in Name): `hint`, then the\n * accepted and max lines it shows, comma-separated.\n /\n protected readonly dropzoneAriaLabel = computed(() =>\n [\n this.hint(),\n this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : '',\n this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : '',\n ]\n .filter(Boolean)\n .join(', '),\n );\n\n protected onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this.isDragOver.set(true);\n }\n }\n\n protected onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n }\n\n protected onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n if (this.disabled() \|\| !event.dataTransfer?.files.length) return;\n this.processFiles(event.dataTransfer.files);\n }\n\n protected onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files?.length) {\n this.processFiles(input.files);\n }\n // Reset so the same file can be re-selected\n input.value = '';\n }\n\n protected openFilePicker(): void {\n if (!this.disabled()) {\n this.fileInputRef()?.nativeElement.click();\n }\n }\n\n protected removeFile(index: number): void {\n this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n this.filesSelected.emit(this.selectedFiles());\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n private processFiles(fileList: FileList): void {\n const files = Array.from(fileList);\n const accepted: FileUploadFile[] = [];\n\n for (const file of files) {\n if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n this.fileRejected.emit({ file, reason: 'File too large' });\n continue;\n }\n accepted.push({\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n });\n }\n\n if (this.multiple()) {\n this.selectedFiles.update((prev) => [...prev, ...accepted]);\n } else {\n this.selectedFiles.set(accepted.slice(0, 1));\n }\n\n this.filesSelected.emit(this.selectedFiles());\n }\n}\n","<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-gallery.mjs CHANGED Viewed

@@ -5,6 +5,7 @@ import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/ico
 import { ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT, ICON_PLUS, ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
 import { NgStyle } from "@angular/common";
 import { isSafeImageUrl } from "@lifecorner/angular-ui-kit/internal/url";
+import { nameWithText } from "@lifecorner/angular-ui-kit/internal/a11y";
 const SIZE_COLUMNS = {
 	sm: 4,
 	md: 3,
@@ -164,6 +165,10 @@ var GalleryComponent = class GalleryComponent {
 	getThumbnail(item) {
 		return item.thumbnail || item.src;
 	}
+	itemAriaLabel(item, index) {
+		const label = item.alt || `${this.imageFallbackLabel()} ${index + 1}`;
+		return nameWithText(label, this.showCaptions() ? item.caption ?? "" : "");
+	}
 	trackByIndex(index) {
 		return index;
 	}
@@ -341,7 +346,7 @@ var GalleryComponent = class GalleryComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!-- Filters -->\n@if (showFilters()) {\n  <div class=\"gallery__filters\">\n    <button\n      type=\"button\"\n      class=\"gallery__filter-btn\"\n      [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n      (click)=\"setFilter(null)\"\n    >\n      {{ filterAllLabel() }}\n    </button>\n    @for (cat of categories(); track cat) {\n      <button\n        type=\"button\"\n        class=\"gallery__filter-btn\"\n        [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n        (click)=\"setFilter(cat)\"\n      >\n        {{ cat }}\n      </button>\n    }\n  </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n  @for (item of filteredItems(); track item.src; let i = $index) {\n    <div\n      class=\"gallery__item\"\n      [class.gallery__item--loaded]=\"isLoaded(i)\"\n      [class.gallery__item--clickable]=\"enableLightbox()\"\n      [ngStyle]=\"itemStyle()\"\n      (click)=\"openLightbox(i, $event)\"\n      (keydown.enter)=\"openLightbox(i, $event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"openLightbox(i, $event)\"\n      [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n      [attr.role]=\"enableLightbox() ? 'button' : null\"\n      [attr.aria-label]=\"item.alt || imageFallbackLabel() + ' ' + (i + 1)\"\n    >\n      @if (!isLoaded(i)) {\n        <div class=\"gallery__placeholder\"></div>\n      }\n      <img\n        class=\"gallery__thumb\"\n        [src]=\"getThumbnail(item)\"\n        [alt]=\"item.alt || ''\"\n        loading=\"lazy\"\n        (load)=\"onImageLoad(i)\"\n      />\n      @if (showCaptions() && item.caption) {\n        <div class=\"gallery__caption\">{{ item.caption }}</div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n  <div\n    class=\"gallery__lightbox\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"lightboxAriaLabel()\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Backdrop -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the lightbox -->\n    <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n    <!-- Toolbar -->\n    <div class=\"gallery__lightbox-toolbar\">\n      <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n      <div class=\"gallery__lightbox-actions\">\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomOutAriaLabel()\" (click)=\"zoomOut()\">\n          <lc-icon name=\"minus\" size=\"sm\" />\n        </button>\n        <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomInAriaLabel()\" (click)=\"zoomIn()\">\n          <lc-icon name=\"plus\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"resetZoomAriaLabel()\" (click)=\"resetZoom()\">\n          <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"downloadCurrent()\">\n          <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n        </button>\n        <button #closeBtn type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"closeAriaLabel()\" (click)=\"closeLightbox()\">\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Navigation -->\n    @if (canGoPrev()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPrev()\"\n      >\n        <lc-icon name=\"chevron-left\" size=\"lg\" />\n      </button>\n    }\n    @if (canGoNext()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNext()\"\n      >\n        <lc-icon name=\"chevron-right\" size=\"lg\" />\n      </button>\n    }\n\n    <!-- Image -->\n    <div class=\"gallery__lightbox-content\">\n      <img\n        class=\"gallery__lightbox-image\"\n        [src]=\"item.src\"\n        [alt]=\"item.alt || ''\"\n        [style.transform]=\"lightboxTransform()\"\n      />\n    </div>\n\n    <!-- Caption -->\n    @if (item.caption) {\n      <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n    }\n  </div>\n}\n",
+		template: "<!-- Filters -->\n@if (showFilters()) {\n  <div class=\"gallery__filters\">\n    <button\n      type=\"button\"\n      class=\"gallery__filter-btn\"\n      [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n      (click)=\"setFilter(null)\"\n    >\n      {{ filterAllLabel() }}\n    </button>\n    @for (cat of categories(); track cat) {\n      <button\n        type=\"button\"\n        class=\"gallery__filter-btn\"\n        [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n        (click)=\"setFilter(cat)\"\n      >\n        {{ cat }}\n      </button>\n    }\n  </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n  @for (item of filteredItems(); track item.src; let i = $index) {\n    <div\n      class=\"gallery__item\"\n      [class.gallery__item--loaded]=\"isLoaded(i)\"\n      [class.gallery__item--clickable]=\"enableLightbox()\"\n      [ngStyle]=\"itemStyle()\"\n      (click)=\"openLightbox(i, $event)\"\n      (keydown.enter)=\"openLightbox(i, $event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"openLightbox(i, $event)\"\n      [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n      [attr.role]=\"enableLightbox() ? 'button' : null\"\n      [attr.aria-label]=\"itemAriaLabel(item, i)\"\n    >\n      @if (!isLoaded(i)) {\n        <div class=\"gallery__placeholder\"></div>\n      }\n      <img\n        class=\"gallery__thumb\"\n        [src]=\"getThumbnail(item)\"\n        [alt]=\"item.alt || ''\"\n        loading=\"lazy\"\n        (load)=\"onImageLoad(i)\"\n      />\n      @if (showCaptions() && item.caption) {\n        <div class=\"gallery__caption\">{{ item.caption }}</div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n  <div\n    class=\"gallery__lightbox\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"lightboxAriaLabel()\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Backdrop -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the lightbox -->\n    <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n    <!-- Toolbar -->\n    <div class=\"gallery__lightbox-toolbar\">\n      <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n      <div class=\"gallery__lightbox-actions\">\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomOutAriaLabel()\" (click)=\"zoomOut()\">\n          <lc-icon name=\"minus\" size=\"sm\" />\n        </button>\n        <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomInAriaLabel()\" (click)=\"zoomIn()\">\n          <lc-icon name=\"plus\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"resetZoomAriaLabel()\" (click)=\"resetZoom()\">\n          <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"downloadCurrent()\">\n          <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n        </button>\n        <button #closeBtn type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"closeAriaLabel()\" (click)=\"closeLightbox()\">\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Navigation -->\n    @if (canGoPrev()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPrev()\"\n      >\n        <lc-icon name=\"chevron-left\" size=\"lg\" />\n      </button>\n    }\n    @if (canGoNext()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNext()\"\n      >\n        <lc-icon name=\"chevron-right\" size=\"lg\" />\n      </button>\n    }\n\n    <!-- Image -->\n    <div class=\"gallery__lightbox-content\">\n      <img\n        class=\"gallery__lightbox-image\"\n        [src]=\"item.src\"\n        [alt]=\"item.alt || ''\"\n        [style.transform]=\"lightboxTransform()\"\n      />\n    </div>\n\n    <!-- Caption -->\n    @if (item.caption) {\n      <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n    }\n  </div>\n}\n",
 		styles: [".gallery{width:100%}.gallery__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.gallery__filter-btn{padding:.375rem .75rem;border:1px solid var(--color-neutral-200);border-radius:999px;background:transparent;color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);cursor:pointer;transition:all .15s ease}.gallery__filter-btn:hover{border-color:var(--color-primary-300);color:var(--color-primary-500)}.gallery__filter-btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.gallery__filter-btn--active:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.gallery__grid{width:100%}.gallery__grid--masonry{display:block!important}.gallery__item{position:relative;overflow:hidden;border-radius:.5rem;background:var(--color-neutral-100)}.gallery__item--clickable{cursor:pointer}.gallery__item--clickable:hover .gallery__thumb{transform:scale(1.05)}.gallery__item--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.gallery__grid--masonry .gallery__item{margin-bottom:8px;break-inside:avoid}.gallery__placeholder{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:gallery-shimmer 1.5s ease-in-out infinite}.gallery__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;opacity:0}.gallery__item--loaded .gallery__thumb{opacity:1}.gallery__caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.gallery__lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.gallery__lightbox:focus{outline:none}.gallery__lightbox-backdrop{position:absolute;inset:0;background:#000000e6}.gallery__lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;z-index:2}.gallery__lightbox-counter{color:#ffffffb3;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);-webkit-user-select:none;user-select:none}.gallery__lightbox-actions{display:flex;align-items:center;gap:.25rem}.gallery__lightbox-zoom{min-width:3rem;text-align:center;color:#ffffffb3;font-size:var(--typography-font-size-xs, .75rem);-webkit-user-select:none;user-select:none}.gallery__lightbox-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:transparent;color:#ffffffb3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gallery__lightbox-btn:hover{background:#ffffff26;color:#fff}.gallery__lightbox-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;color:#fff}.gallery__lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:50%;background:#00000080;color:#fff;cursor:pointer;transition:background-color .15s ease}.gallery__lightbox-nav:hover{background:#000c}.gallery__lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}.gallery__lightbox-nav--prev{left:1rem}.gallery__lightbox-nav--next{right:1rem}.gallery__lightbox-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:80vh;overflow:auto}.gallery__lightbox-image{max-width:90vw;max-height:80vh;object-fit:contain;transition:transform .2s ease;transform-origin:center center;-webkit-user-select:none;user-select:none}.gallery__lightbox-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1rem;color:#ffffffe6;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);z-index:2}@keyframes gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"],
 		dependencies: [
 			{
@@ -404,7 +409,7 @@ i0.ɵɵngDeclareClassMetadata({
 			])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[class]": "\"gallery\"" },
-			template: "<!-- Filters -->\n@if (showFilters()) {\n  <div class=\"gallery__filters\">\n    <button\n      type=\"button\"\n      class=\"gallery__filter-btn\"\n      [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n      (click)=\"setFilter(null)\"\n    >\n      {{ filterAllLabel() }}\n    </button>\n    @for (cat of categories(); track cat) {\n      <button\n        type=\"button\"\n        class=\"gallery__filter-btn\"\n        [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n        (click)=\"setFilter(cat)\"\n      >\n        {{ cat }}\n      </button>\n    }\n  </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n  @for (item of filteredItems(); track item.src; let i = $index) {\n    <div\n      class=\"gallery__item\"\n      [class.gallery__item--loaded]=\"isLoaded(i)\"\n      [class.gallery__item--clickable]=\"enableLightbox()\"\n      [ngStyle]=\"itemStyle()\"\n      (click)=\"openLightbox(i, $event)\"\n      (keydown.enter)=\"openLightbox(i, $event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"openLightbox(i, $event)\"\n      [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n      [attr.role]=\"enableLightbox() ? 'button' : null\"\n      [attr.aria-label]=\"item.alt || imageFallbackLabel() + ' ' + (i + 1)\"\n    >\n      @if (!isLoaded(i)) {\n        <div class=\"gallery__placeholder\"></div>\n      }\n      <img\n        class=\"gallery__thumb\"\n        [src]=\"getThumbnail(item)\"\n        [alt]=\"item.alt || ''\"\n        loading=\"lazy\"\n        (load)=\"onImageLoad(i)\"\n      />\n      @if (showCaptions() && item.caption) {\n        <div class=\"gallery__caption\">{{ item.caption }}</div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n  <div\n    class=\"gallery__lightbox\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"lightboxAriaLabel()\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Backdrop -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the lightbox -->\n    <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n    <!-- Toolbar -->\n    <div class=\"gallery__lightbox-toolbar\">\n      <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n      <div class=\"gallery__lightbox-actions\">\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomOutAriaLabel()\" (click)=\"zoomOut()\">\n          <lc-icon name=\"minus\" size=\"sm\" />\n        </button>\n        <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomInAriaLabel()\" (click)=\"zoomIn()\">\n          <lc-icon name=\"plus\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"resetZoomAriaLabel()\" (click)=\"resetZoom()\">\n          <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"downloadCurrent()\">\n          <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n        </button>\n        <button #closeBtn type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"closeAriaLabel()\" (click)=\"closeLightbox()\">\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Navigation -->\n    @if (canGoPrev()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPrev()\"\n      >\n        <lc-icon name=\"chevron-left\" size=\"lg\" />\n      </button>\n    }\n    @if (canGoNext()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNext()\"\n      >\n        <lc-icon name=\"chevron-right\" size=\"lg\" />\n      </button>\n    }\n\n    <!-- Image -->\n    <div class=\"gallery__lightbox-content\">\n      <img\n        class=\"gallery__lightbox-image\"\n        [src]=\"item.src\"\n        [alt]=\"item.alt || ''\"\n        [style.transform]=\"lightboxTransform()\"\n      />\n    </div>\n\n    <!-- Caption -->\n    @if (item.caption) {\n      <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n    }\n  </div>\n}\n",
+			template: "<!-- Filters -->\n@if (showFilters()) {\n  <div class=\"gallery__filters\">\n    <button\n      type=\"button\"\n      class=\"gallery__filter-btn\"\n      [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n      (click)=\"setFilter(null)\"\n    >\n      {{ filterAllLabel() }}\n    </button>\n    @for (cat of categories(); track cat) {\n      <button\n        type=\"button\"\n        class=\"gallery__filter-btn\"\n        [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n        (click)=\"setFilter(cat)\"\n      >\n        {{ cat }}\n      </button>\n    }\n  </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n  @for (item of filteredItems(); track item.src; let i = $index) {\n    <div\n      class=\"gallery__item\"\n      [class.gallery__item--loaded]=\"isLoaded(i)\"\n      [class.gallery__item--clickable]=\"enableLightbox()\"\n      [ngStyle]=\"itemStyle()\"\n      (click)=\"openLightbox(i, $event)\"\n      (keydown.enter)=\"openLightbox(i, $event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"openLightbox(i, $event)\"\n      [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n      [attr.role]=\"enableLightbox() ? 'button' : null\"\n      [attr.aria-label]=\"itemAriaLabel(item, i)\"\n    >\n      @if (!isLoaded(i)) {\n        <div class=\"gallery__placeholder\"></div>\n      }\n      <img\n        class=\"gallery__thumb\"\n        [src]=\"getThumbnail(item)\"\n        [alt]=\"item.alt || ''\"\n        loading=\"lazy\"\n        (load)=\"onImageLoad(i)\"\n      />\n      @if (showCaptions() && item.caption) {\n        <div class=\"gallery__caption\">{{ item.caption }}</div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n  <div\n    class=\"gallery__lightbox\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"lightboxAriaLabel()\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Backdrop -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the lightbox -->\n    <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n    <!-- Toolbar -->\n    <div class=\"gallery__lightbox-toolbar\">\n      <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n      <div class=\"gallery__lightbox-actions\">\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomOutAriaLabel()\" (click)=\"zoomOut()\">\n          <lc-icon name=\"minus\" size=\"sm\" />\n        </button>\n        <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"zoomInAriaLabel()\" (click)=\"zoomIn()\">\n          <lc-icon name=\"plus\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"resetZoomAriaLabel()\" (click)=\"resetZoom()\">\n          <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"downloadCurrent()\">\n          <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n        </button>\n        <button #closeBtn type=\"button\" class=\"gallery__lightbox-btn\" [attr.aria-label]=\"closeAriaLabel()\" (click)=\"closeLightbox()\">\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Navigation -->\n    @if (canGoPrev()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPrev()\"\n      >\n        <lc-icon name=\"chevron-left\" size=\"lg\" />\n      </button>\n    }\n    @if (canGoNext()) {\n      <button\n        type=\"button\"\n        class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNext()\"\n      >\n        <lc-icon name=\"chevron-right\" size=\"lg\" />\n      </button>\n    }\n\n    <!-- Image -->\n    <div class=\"gallery__lightbox-content\">\n      <img\n        class=\"gallery__lightbox-image\"\n        [src]=\"item.src\"\n        [alt]=\"item.alt || ''\"\n        [style.transform]=\"lightboxTransform()\"\n      />\n    </div>\n\n    <!-- Caption -->\n    @if (item.caption) {\n      <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n    }\n  </div>\n}\n",
 			styles: [".gallery{width:100%}.gallery__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.gallery__filter-btn{padding:.375rem .75rem;border:1px solid var(--color-neutral-200);border-radius:999px;background:transparent;color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);cursor:pointer;transition:all .15s ease}.gallery__filter-btn:hover{border-color:var(--color-primary-300);color:var(--color-primary-500)}.gallery__filter-btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.gallery__filter-btn--active:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.gallery__grid{width:100%}.gallery__grid--masonry{display:block!important}.gallery__item{position:relative;overflow:hidden;border-radius:.5rem;background:var(--color-neutral-100)}.gallery__item--clickable{cursor:pointer}.gallery__item--clickable:hover .gallery__thumb{transform:scale(1.05)}.gallery__item--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.gallery__grid--masonry .gallery__item{margin-bottom:8px;break-inside:avoid}.gallery__placeholder{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:gallery-shimmer 1.5s ease-in-out infinite}.gallery__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;opacity:0}.gallery__item--loaded .gallery__thumb{opacity:1}.gallery__caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.gallery__lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.gallery__lightbox:focus{outline:none}.gallery__lightbox-backdrop{position:absolute;inset:0;background:#000000e6}.gallery__lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;z-index:2}.gallery__lightbox-counter{color:#ffffffb3;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);-webkit-user-select:none;user-select:none}.gallery__lightbox-actions{display:flex;align-items:center;gap:.25rem}.gallery__lightbox-zoom{min-width:3rem;text-align:center;color:#ffffffb3;font-size:var(--typography-font-size-xs, .75rem);-webkit-user-select:none;user-select:none}.gallery__lightbox-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:transparent;color:#ffffffb3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gallery__lightbox-btn:hover{background:#ffffff26;color:#fff}.gallery__lightbox-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;color:#fff}.gallery__lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:50%;background:#00000080;color:#fff;cursor:pointer;transition:background-color .15s ease}.gallery__lightbox-nav:hover{background:#000c}.gallery__lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}.gallery__lightbox-nav--prev{left:1rem}.gallery__lightbox-nav--next{right:1rem}.gallery__lightbox-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:80vh;overflow:auto}.gallery__lightbox-image{max-width:90vw;max-height:80vh;object-fit:contain;transition:transform .2s ease;transform-origin:center center;-webkit-user-select:none;user-select:none}.gallery__lightbox-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1rem;color:#ffffffe6;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);z-index:2}@keyframes gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"]
 		}]
 	}],