@lifecorner/angular-ui-kit 3.27.0 → 3.27.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lifecorner-angular-ui-kit-callout.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-callout.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-chat.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-chat.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-document-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-document-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-gallery.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-gallery.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-rich-text-editor.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-rich-text-editor.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tag-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-tag-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_theme-dark.scss +154 -137
- package/src/styles/_theme-light.scss +158 -138
- package/src/styles/focus-indicators.spec.ts +17 -8
- package/src/styles/theme-contrast.spec.ts +116 -2
- package/src/styles/theme-modes.spec.ts +40 -0
- package/src/styles/touch-targets-contrast.spec.ts +289 -0
|
@@ -347,7 +347,7 @@ var GalleryComponent = class GalleryComponent {
|
|
|
347
347
|
}],
|
|
348
348
|
ngImport: i0,
|
|
349
349
|
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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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",
|
|
350
|
-
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-
|
|
350
|
+
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-link)}.gallery__filter-btn--active{background:var(--color-primary-fill);border-color:var(--color-primary-500);color:var(--color-on-primary)}.gallery__filter-btn--active:hover{background:var(--color-primary-fill-hover);border-color:var(--color-primary-600);color:var(--color-on-primary)}.gallery__filter-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.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}}@media(forced-colors:active){.gallery__filter-btn:focus-visible{outline-color:Highlight}}\n"],
|
|
351
351
|
dependencies: [
|
|
352
352
|
{
|
|
353
353
|
kind: "component",
|
|
@@ -410,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
410
410
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
411
411
|
host: { "[class]": "\"gallery\"" },
|
|
412
412
|
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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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",
|
|
413
|
-
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-
|
|
413
|
+
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-link)}.gallery__filter-btn--active{background:var(--color-primary-fill);border-color:var(--color-primary-500);color:var(--color-on-primary)}.gallery__filter-btn--active:hover{background:var(--color-primary-fill-hover);border-color:var(--color-primary-600);color:var(--color-on-primary)}.gallery__filter-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.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}}@media(forced-colors:active){.gallery__filter-btn:focus-visible{outline-color:Highlight}}\n"]
|
|
414
414
|
}]
|
|
415
415
|
}],
|
|
416
416
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-gallery.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/gallery/gallery.component.ts","../../../../libs/angular-ui-kit/src/lib/gallery/gallery.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n Injector,\n OnDestroy,\n afterNextRender,\n computed,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT, ICON_PLUS, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { NgStyle } from '@angular/common';\nimport { isSafeImageUrl } from '@lifecorner/angular-ui-kit/internal/url';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\n\nexport type GalleryLayout = 'grid' | 'masonry';\nexport type GallerySize = 'sm' | 'md' | 'lg';\n\nexport interface GalleryItem {\n /** Image source URL */\n src: string;\n /** Thumbnail URL (falls back to src if not provided) */\n thumbnail?: string;\n /** Alt text for accessibility */\n alt?: string;\n /** Optional caption displayed below the image */\n caption?: string;\n /** Optional category for filtering */\n category?: string;\n}\n\nconst SIZE_COLUMNS: Record<GallerySize, number> = {\n sm: 4,\n md: 3,\n lg: 2,\n};\n\n/**\n * Gallery component for displaying image collections with lightbox.\n *\n * Features:\n * - Grid and masonry layout modes\n * - Responsive column count via size presets (sm, md, lg thumbnails)\n * - Configurable custom column count\n * - Lightbox overlay with navigation (prev/next)\n * - Keyboard navigation (Arrow keys, Escape); focus is trapped inside the\n * lightbox and returned to the originating thumbnail on close\n * - Optional captions and category filtering\n * - Lazy loading with placeholder shimmer\n * - Zoom control in lightbox\n * - Download button in lightbox\n * - Dark/light theme support\n *\n * @example\n * ```html\n * <lc-gallery\n * [items]=\"images\"\n * layout=\"grid\"\n * size=\"md\"\n * [showCaptions]=\"true\" />\n * ```\n */\n@Component({\n selector: 'lc-gallery',\n standalone: true,\n imports: [IconComponent, NgStyle, CdkTrapFocus],\n viewProviders: [ɵprovideKitIcons([ICON_PLUS, ICON_X_MARK, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT])],\n templateUrl: './gallery.component.html',\n styleUrls: ['./gallery.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': '\"gallery\"',\n },\n})\nexport class GalleryComponent implements OnDestroy {\n /** Array of gallery items to display */\n readonly items = input.required<GalleryItem[]>();\n\n /** Layout mode */\n readonly layout = input<GalleryLayout>('grid');\n\n /** Thumbnail size preset — controls column count (sm=4col, md=3col, lg=2col) */\n readonly size = input<GallerySize>('md');\n\n /** Custom column count (overrides size preset) */\n readonly columns = input<number | null>(null);\n\n /**\n * Whether to show captions below thumbnails. A shown caption is part of the\n * item's accessible name: `alt` (or `imageFallbackLabel` and its number),\n * then the caption (WCAG 2.5.3 Label in Name).\n * @default false\n */\n readonly showCaptions = input(false);\n\n /** Whether clicking a thumbnail opens the lightbox */\n readonly enableLightbox = input(true);\n\n /** Gap between items in pixels */\n readonly gap = input(8);\n\n /** Aspect ratio for grid items (ignored in masonry mode) */\n readonly aspectRatio = input('1 / 1');\n\n /** Label of the \"all\" category filter (shown when the items span more than one category). */\n readonly filterAllLabel = input('All');\n\n /** Accessible name of the lightbox dialog. */\n readonly lightboxAriaLabel = input('Image lightbox');\n\n /** Accessible name of the lightbox zoom-out button. */\n readonly zoomOutAriaLabel = input('Zoom out');\n\n /** Accessible name of the lightbox zoom-in button. */\n readonly zoomInAriaLabel = input('Zoom in');\n\n /** Accessible name of the lightbox reset-zoom button. */\n readonly resetZoomAriaLabel = input('Reset zoom');\n\n /** Accessible name of the lightbox download button. */\n readonly downloadAriaLabel = input('Download');\n\n /** Accessible name of the lightbox close button. */\n readonly closeAriaLabel = input('Close');\n\n /** Accessible name of the previous-image button. */\n readonly previousAriaLabel = input('Previous image');\n\n /** Accessible name of the next-image button. */\n readonly nextAriaLabel = input('Next image');\n\n /**\n * Accessible name of a thumbnail without `alt`, followed by its number. A\n * shown caption follows (`Bild 3, Sonnenuntergang am See`).\n * @default 'Image'\n */\n readonly imageFallbackLabel = input('Image');\n\n /** Emitted when lightbox opens with item index */\n readonly lightboxOpen = output<number>();\n\n /** Emitted when lightbox closes */\n readonly lightboxClose = output<void>();\n\n // ── Internal state ───────────────────────────────────────────────────\n\n private readonly injector = inject(Injector);\n private readonly closeBtn = viewChild<ElementRef<HTMLButtonElement>>('closeBtn');\n /** Element that opened the lightbox — focus returns there on close. */\n private triggerElement: HTMLElement | null = null;\n\n protected lightboxIndex = signal<number | null>(null);\n protected lightboxZoom = signal(100);\n protected loadedImages = signal<Set<number>>(new Set());\n protected activeFilter = signal<string | null>(null);\n\n // ── Computed ─────────────────────────────────────────────────────────\n\n protected gridColumns = computed(() => {\n return this.columns() ?? SIZE_COLUMNS[this.size()];\n });\n\n protected gridStyle = computed(() => {\n const cols = this.gridColumns();\n const g = this.gap();\n if (this.layout() === 'masonry') {\n return {\n 'column-count': `${cols}`,\n 'column-gap': `${g}px`,\n };\n }\n return {\n 'display': 'grid',\n 'grid-template-columns': `repeat(${cols}, 1fr)`,\n 'gap': `${g}px`,\n };\n });\n\n protected itemStyle = computed(() => {\n if (this.layout() === 'masonry') return {};\n return { 'aspect-ratio': this.aspectRatio() };\n });\n\n protected categories = computed<string[]>(() => {\n const cats = new Set<string>();\n for (const item of this.items()) {\n if (item.category) cats.add(item.category);\n }\n return Array.from(cats).sort();\n });\n\n protected filteredItems = computed(() => {\n const filter = this.activeFilter();\n if (!filter) return this.items();\n return this.items().filter(item => item.category === filter);\n });\n\n protected showFilters = computed(() => this.categories().length > 1);\n\n protected lightboxItem = computed<GalleryItem | null>(() => {\n const idx = this.lightboxIndex();\n if (idx === null) return null;\n const items = this.filteredItems();\n return items[idx] ?? null;\n });\n\n protected lightboxCounter = computed(() => {\n const idx = this.lightboxIndex();\n if (idx === null) return '';\n return `${idx + 1} / ${this.filteredItems().length}`;\n });\n\n protected lightboxTransform = computed(() => {\n const z = this.lightboxZoom() / 100;\n return `scale(${z})`;\n });\n\n protected canGoPrev = computed(() => {\n const idx = this.lightboxIndex();\n return idx !== null && idx > 0;\n });\n\n protected canGoNext = computed(() => {\n const idx = this.lightboxIndex();\n return idx !== null && idx < this.filteredItems().length - 1;\n });\n\n // ── Lifecycle ────────────────────────────────────────────────────────\n\n ngOnDestroy(): void {\n // No focus restore here: the injector is going away with the view.\n this.closeLightbox(false);\n }\n\n // ── Actions ──────────────────────────────────────────────────────────\n\n /**\n * Opens the lightbox for `index`. Like a native button, Space activates on\n * *keyup* (keydown only prevents the page scroll): activating on keydown\n * would move focus to the Close button before the key is released, and the\n * Space keyup would then immediately click Close.\n */\n protected openLightbox(index: number, event?: Event): void {\n if (!this.enableLightbox()) return;\n if (event instanceof KeyboardEvent) event.preventDefault();\n this.triggerElement =\n (event?.currentTarget as HTMLElement | null) ??\n (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n this.lightboxIndex.set(index);\n this.lightboxZoom.set(100);\n this.lightboxOpen.emit(index);\n document.body.style.overflow = 'hidden';\n // The dialog is `@if`-rendered — move focus in once it exists.\n afterNextRender(() => this.closeBtn()?.nativeElement.focus(), { injector: this.injector });\n }\n\n protected closeLightbox(restoreFocus = true): void {\n if (this.lightboxIndex() === null) return;\n this.lightboxIndex.set(null);\n this.lightboxZoom.set(100);\n this.lightboxClose.emit();\n document.body.style.overflow = '';\n const trigger = this.triggerElement;\n this.triggerElement = null;\n if (restoreFocus && trigger?.isConnected) {\n afterNextRender(() => trigger.focus(), { injector: this.injector });\n }\n }\n\n protected goToPrev(): void {\n const idx = this.lightboxIndex();\n if (idx !== null && idx > 0) {\n this.lightboxIndex.set(idx - 1);\n this.lightboxZoom.set(100);\n }\n }\n\n protected goToNext(): void {\n const idx = this.lightboxIndex();\n if (idx !== null && idx < this.filteredItems().length - 1) {\n this.lightboxIndex.set(idx + 1);\n this.lightboxZoom.set(100);\n }\n }\n\n protected zoomIn(): void {\n this.lightboxZoom.update(z => Math.min(z + 25, 500));\n }\n\n protected zoomOut(): void {\n this.lightboxZoom.update(z => Math.max(z - 25, 25));\n }\n\n protected resetZoom(): void {\n this.lightboxZoom.set(100);\n }\n\n protected downloadCurrent(): void {\n const item = this.lightboxItem();\n // A programmatic click on a caller-supplied URL: only image-safe schemes.\n if (!item || !isSafeImageUrl(item.src)) return;\n const a = document.createElement('a');\n a.href = item.src;\n a.download = item.alt || 'image';\n a.target = '_blank';\n a.rel = 'noopener noreferrer';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n protected setFilter(category: string | null): void {\n this.activeFilter.set(category);\n }\n\n protected onImageLoad(index: number): void {\n this.loadedImages.update(set => {\n const next = new Set(set);\n next.add(index);\n return next;\n });\n }\n\n protected isLoaded(index: number): boolean {\n return this.loadedImages().has(index);\n }\n\n protected getThumbnail(item: GalleryItem): string {\n return item.thumbnail || item.src;\n }\n\n /**\n * Name of a thumbnail (AS-33, WCAG 2.5.3 Label in Name): `alt` (or\n * `imageFallbackLabel` and its number), then the shown caption unless one\n * contains the other.\n */\n protected itemAriaLabel(item: GalleryItem, index: number): string {\n const label = item.alt || `${this.imageFallbackLabel()} ${index + 1}`;\n return nameWithText(label, this.showCaptions() ? (item.caption ?? '') : '');\n }\n\n protected trackByIndex(index: number): number {\n return index;\n }\n\n /**\n * Keyboard handling while the lightbox is open. Bound on the lightbox itself\n * (focus is trapped inside it) and, as a fallback, on `document`. A handled\n * Escape stops propagating so an enclosing modal/drawer doesn't close too.\n */\n @HostListener('document:keydown', ['$event'])\n protected onKeydown(event: KeyboardEvent): void {\n if (this.lightboxIndex() === null) return;\n switch (event.key) {\n case 'Escape':\n event.stopPropagation();\n this.closeLightbox();\n break;\n case 'ArrowLeft':\n event.stopPropagation();\n this.goToPrev();\n break;\n case 'ArrowRight':\n event.stopPropagation();\n this.goToNext();\n break;\n }\n }\n}\n","<!-- 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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-gallery.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/gallery/gallery.component.ts","../../../../libs/angular-ui-kit/src/lib/gallery/gallery.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n Injector,\n OnDestroy,\n afterNextRender,\n computed,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT, ICON_PLUS, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { NgStyle } from '@angular/common';\nimport { isSafeImageUrl } from '@lifecorner/angular-ui-kit/internal/url';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\n\nexport type GalleryLayout = 'grid' | 'masonry';\nexport type GallerySize = 'sm' | 'md' | 'lg';\n\nexport interface GalleryItem {\n /** Image source URL */\n src: string;\n /** Thumbnail URL (falls back to src if not provided) */\n thumbnail?: string;\n /** Alt text for accessibility */\n alt?: string;\n /** Optional caption displayed below the image */\n caption?: string;\n /** Optional category for filtering */\n category?: string;\n}\n\nconst SIZE_COLUMNS: Record<GallerySize, number> = {\n sm: 4,\n md: 3,\n lg: 2,\n};\n\n/**\n * Gallery component for displaying image collections with lightbox.\n *\n * Features:\n * - Grid and masonry layout modes\n * - Responsive column count via size presets (sm, md, lg thumbnails)\n * - Configurable custom column count\n * - Lightbox overlay with navigation (prev/next)\n * - Keyboard navigation (Arrow keys, Escape); focus is trapped inside the\n * lightbox and returned to the originating thumbnail on close\n * - Optional captions and category filtering\n * - Lazy loading with placeholder shimmer\n * - Zoom control in lightbox\n * - Download button in lightbox\n * - Dark/light theme support\n *\n * @example\n * ```html\n * <lc-gallery\n * [items]=\"images\"\n * layout=\"grid\"\n * size=\"md\"\n * [showCaptions]=\"true\" />\n * ```\n */\n@Component({\n selector: 'lc-gallery',\n standalone: true,\n imports: [IconComponent, NgStyle, CdkTrapFocus],\n viewProviders: [ɵprovideKitIcons([ICON_PLUS, ICON_X_MARK, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT])],\n templateUrl: './gallery.component.html',\n styleUrls: ['./gallery.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': '\"gallery\"',\n },\n})\nexport class GalleryComponent implements OnDestroy {\n /** Array of gallery items to display */\n readonly items = input.required<GalleryItem[]>();\n\n /** Layout mode */\n readonly layout = input<GalleryLayout>('grid');\n\n /** Thumbnail size preset — controls column count (sm=4col, md=3col, lg=2col) */\n readonly size = input<GallerySize>('md');\n\n /** Custom column count (overrides size preset) */\n readonly columns = input<number | null>(null);\n\n /**\n * Whether to show captions below thumbnails. A shown caption is part of the\n * item's accessible name: `alt` (or `imageFallbackLabel` and its number),\n * then the caption (WCAG 2.5.3 Label in Name).\n * @default false\n */\n readonly showCaptions = input(false);\n\n /** Whether clicking a thumbnail opens the lightbox */\n readonly enableLightbox = input(true);\n\n /** Gap between items in pixels */\n readonly gap = input(8);\n\n /** Aspect ratio for grid items (ignored in masonry mode) */\n readonly aspectRatio = input('1 / 1');\n\n /** Label of the \"all\" category filter (shown when the items span more than one category). */\n readonly filterAllLabel = input('All');\n\n /** Accessible name of the lightbox dialog. */\n readonly lightboxAriaLabel = input('Image lightbox');\n\n /** Accessible name of the lightbox zoom-out button. */\n readonly zoomOutAriaLabel = input('Zoom out');\n\n /** Accessible name of the lightbox zoom-in button. */\n readonly zoomInAriaLabel = input('Zoom in');\n\n /** Accessible name of the lightbox reset-zoom button. */\n readonly resetZoomAriaLabel = input('Reset zoom');\n\n /** Accessible name of the lightbox download button. */\n readonly downloadAriaLabel = input('Download');\n\n /** Accessible name of the lightbox close button. */\n readonly closeAriaLabel = input('Close');\n\n /** Accessible name of the previous-image button. */\n readonly previousAriaLabel = input('Previous image');\n\n /** Accessible name of the next-image button. */\n readonly nextAriaLabel = input('Next image');\n\n /**\n * Accessible name of a thumbnail without `alt`, followed by its number. A\n * shown caption follows (`Bild 3, Sonnenuntergang am See`).\n * @default 'Image'\n */\n readonly imageFallbackLabel = input('Image');\n\n /** Emitted when lightbox opens with item index */\n readonly lightboxOpen = output<number>();\n\n /** Emitted when lightbox closes */\n readonly lightboxClose = output<void>();\n\n // ── Internal state ───────────────────────────────────────────────────\n\n private readonly injector = inject(Injector);\n private readonly closeBtn = viewChild<ElementRef<HTMLButtonElement>>('closeBtn');\n /** Element that opened the lightbox — focus returns there on close. */\n private triggerElement: HTMLElement | null = null;\n\n protected lightboxIndex = signal<number | null>(null);\n protected lightboxZoom = signal(100);\n protected loadedImages = signal<Set<number>>(new Set());\n protected activeFilter = signal<string | null>(null);\n\n // ── Computed ─────────────────────────────────────────────────────────\n\n protected gridColumns = computed(() => {\n return this.columns() ?? SIZE_COLUMNS[this.size()];\n });\n\n protected gridStyle = computed(() => {\n const cols = this.gridColumns();\n const g = this.gap();\n if (this.layout() === 'masonry') {\n return {\n 'column-count': `${cols}`,\n 'column-gap': `${g}px`,\n };\n }\n return {\n 'display': 'grid',\n 'grid-template-columns': `repeat(${cols}, 1fr)`,\n 'gap': `${g}px`,\n };\n });\n\n protected itemStyle = computed(() => {\n if (this.layout() === 'masonry') return {};\n return { 'aspect-ratio': this.aspectRatio() };\n });\n\n protected categories = computed<string[]>(() => {\n const cats = new Set<string>();\n for (const item of this.items()) {\n if (item.category) cats.add(item.category);\n }\n return Array.from(cats).sort();\n });\n\n protected filteredItems = computed(() => {\n const filter = this.activeFilter();\n if (!filter) return this.items();\n return this.items().filter(item => item.category === filter);\n });\n\n protected showFilters = computed(() => this.categories().length > 1);\n\n protected lightboxItem = computed<GalleryItem | null>(() => {\n const idx = this.lightboxIndex();\n if (idx === null) return null;\n const items = this.filteredItems();\n return items[idx] ?? null;\n });\n\n protected lightboxCounter = computed(() => {\n const idx = this.lightboxIndex();\n if (idx === null) return '';\n return `${idx + 1} / ${this.filteredItems().length}`;\n });\n\n protected lightboxTransform = computed(() => {\n const z = this.lightboxZoom() / 100;\n return `scale(${z})`;\n });\n\n protected canGoPrev = computed(() => {\n const idx = this.lightboxIndex();\n return idx !== null && idx > 0;\n });\n\n protected canGoNext = computed(() => {\n const idx = this.lightboxIndex();\n return idx !== null && idx < this.filteredItems().length - 1;\n });\n\n // ── Lifecycle ────────────────────────────────────────────────────────\n\n ngOnDestroy(): void {\n // No focus restore here: the injector is going away with the view.\n this.closeLightbox(false);\n }\n\n // ── Actions ──────────────────────────────────────────────────────────\n\n /**\n * Opens the lightbox for `index`. Like a native button, Space activates on\n * *keyup* (keydown only prevents the page scroll): activating on keydown\n * would move focus to the Close button before the key is released, and the\n * Space keyup would then immediately click Close.\n */\n protected openLightbox(index: number, event?: Event): void {\n if (!this.enableLightbox()) return;\n if (event instanceof KeyboardEvent) event.preventDefault();\n this.triggerElement =\n (event?.currentTarget as HTMLElement | null) ??\n (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n this.lightboxIndex.set(index);\n this.lightboxZoom.set(100);\n this.lightboxOpen.emit(index);\n document.body.style.overflow = 'hidden';\n // The dialog is `@if`-rendered — move focus in once it exists.\n afterNextRender(() => this.closeBtn()?.nativeElement.focus(), { injector: this.injector });\n }\n\n protected closeLightbox(restoreFocus = true): void {\n if (this.lightboxIndex() === null) return;\n this.lightboxIndex.set(null);\n this.lightboxZoom.set(100);\n this.lightboxClose.emit();\n document.body.style.overflow = '';\n const trigger = this.triggerElement;\n this.triggerElement = null;\n if (restoreFocus && trigger?.isConnected) {\n afterNextRender(() => trigger.focus(), { injector: this.injector });\n }\n }\n\n protected goToPrev(): void {\n const idx = this.lightboxIndex();\n if (idx !== null && idx > 0) {\n this.lightboxIndex.set(idx - 1);\n this.lightboxZoom.set(100);\n }\n }\n\n protected goToNext(): void {\n const idx = this.lightboxIndex();\n if (idx !== null && idx < this.filteredItems().length - 1) {\n this.lightboxIndex.set(idx + 1);\n this.lightboxZoom.set(100);\n }\n }\n\n protected zoomIn(): void {\n this.lightboxZoom.update(z => Math.min(z + 25, 500));\n }\n\n protected zoomOut(): void {\n this.lightboxZoom.update(z => Math.max(z - 25, 25));\n }\n\n protected resetZoom(): void {\n this.lightboxZoom.set(100);\n }\n\n protected downloadCurrent(): void {\n const item = this.lightboxItem();\n // A programmatic click on a caller-supplied URL: only image-safe schemes.\n if (!item || !isSafeImageUrl(item.src)) return;\n const a = document.createElement('a');\n a.href = item.src;\n a.download = item.alt || 'image';\n a.target = '_blank';\n a.rel = 'noopener noreferrer';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n protected setFilter(category: string | null): void {\n this.activeFilter.set(category);\n }\n\n protected onImageLoad(index: number): void {\n this.loadedImages.update(set => {\n const next = new Set(set);\n next.add(index);\n return next;\n });\n }\n\n protected isLoaded(index: number): boolean {\n return this.loadedImages().has(index);\n }\n\n protected getThumbnail(item: GalleryItem): string {\n return item.thumbnail || item.src;\n }\n\n /**\n * Name of a thumbnail (AS-33, WCAG 2.5.3 Label in Name): `alt` (or\n * `imageFallbackLabel` and its number), then the shown caption unless one\n * contains the other.\n */\n protected itemAriaLabel(item: GalleryItem, index: number): string {\n const label = item.alt || `${this.imageFallbackLabel()} ${index + 1}`;\n return nameWithText(label, this.showCaptions() ? (item.caption ?? '') : '');\n }\n\n protected trackByIndex(index: number): number {\n return index;\n }\n\n /**\n * Keyboard handling while the lightbox is open. Bound on the lightbox itself\n * (focus is trapped inside it) and, as a fallback, on `document`. A handled\n * Escape stops propagating so an enclosing modal/drawer doesn't close too.\n */\n @HostListener('document:keydown', ['$event'])\n protected onKeydown(event: KeyboardEvent): void {\n if (this.lightboxIndex() === null) return;\n switch (event.key) {\n case 'Escape':\n event.stopPropagation();\n this.closeLightbox();\n break;\n case 'ArrowLeft':\n event.stopPropagation();\n this.goToPrev();\n break;\n case 'ArrowRight':\n event.stopPropagation();\n this.goToNext();\n break;\n }\n }\n}\n","<!-- 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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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\" [decorative]=\"true\" />\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"],"mappings":"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"}
|
|
@@ -347,7 +347,7 @@ var InputComponent = class InputComponent {
|
|
|
347
347
|
}],
|
|
348
348
|
ngImport: i0,
|
|
349
349
|
template: "<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <!-- No whitespace before the *: the gap is its margin, and it never wraps onto a line alone -->\n <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n {{ label() }}@if (required() && requiredIndicator()) {<span class=\"required-indicator\" aria-hidden=\"true\">*</span>}\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-invalid]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n @if (wrapsReadonlyValue()) {\n <div\n #readonlyValueRef\n class=\"input-field input-readonly-value\"\n role=\"textbox\"\n aria-readonly=\"true\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >{{ value() }}</div>\n }\n\n <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [hidden]=\"wrapsReadonlyValue()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize() ?? null\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"describedBy()\"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" [attr.role]=\"announceError() ? 'alert' : null\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n\n @if (showCharCount() && maxLength()) {\n <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n }\n</div>\n",
|
|
350
|
-
styles: [".input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-inline-start:var(--spacing-1)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:hover:not(.input-disabled):not(.input-readonly):not(:focus-within){border-color:var(--color-text-secondary)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-invalid{border-color:var(--color-error-600)}.input-container.input-invalid:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-surface-muted)}.input-container.input-readonly-wrap{height:auto;min-height:var(--lc-input-height);align-items:stretch}.input-readonly-value{display:flex;align-items:center;min-width:0;white-space:normal;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.input-char-count-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{--lc-input-height: var(--size-interactive-xs-height);height:var(--lc-input-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{--lc-input-height: var(--size-interactive-sm-height);height:var(--lc-input-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{--lc-input-height: var(--size-interactive-md-height);height:var(--lc-input-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{--lc-input-height: var(--size-interactive-lg-height);height:var(--lc-input-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"],
|
|
350
|
+
styles: [".input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-inline-start:var(--spacing-1)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:hover:not(.input-disabled):not(.input-readonly):not(.input-invalid):not(:focus-within){border-color:var(--color-text-secondary)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-invalid{border-color:var(--color-error-600)}.input-container.input-invalid:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-surface-muted)}.input-container.input-readonly-wrap{height:auto;min-height:var(--lc-input-height);align-items:stretch}.input-readonly-value{display:flex;align-items:center;min-width:0;white-space:normal;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.input-char-count-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{--lc-input-height: var(--size-interactive-xs-height);height:var(--lc-input-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{--lc-input-height: var(--size-interactive-sm-height);height:var(--lc-input-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{--lc-input-height: var(--size-interactive-md-height);height:var(--lc-input-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{--lc-input-height: var(--size-interactive-lg-height);height:var(--lc-input-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"],
|
|
351
351
|
dependencies: [{
|
|
352
352
|
kind: "component",
|
|
353
353
|
type: IconComponent,
|
|
@@ -382,7 +382,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
382
382
|
multi: true
|
|
383
383
|
}],
|
|
384
384
|
template: "<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <!-- No whitespace before the *: the gap is its margin, and it never wraps onto a line alone -->\n <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n {{ label() }}@if (required() && requiredIndicator()) {<span class=\"required-indicator\" aria-hidden=\"true\">*</span>}\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-invalid]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n @if (wrapsReadonlyValue()) {\n <div\n #readonlyValueRef\n class=\"input-field input-readonly-value\"\n role=\"textbox\"\n aria-readonly=\"true\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >{{ value() }}</div>\n }\n\n <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [hidden]=\"wrapsReadonlyValue()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize() ?? null\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"describedBy()\"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" [attr.role]=\"announceError() ? 'alert' : null\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n\n @if (showCharCount() && maxLength()) {\n <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n }\n</div>\n",
|
|
385
|
-
styles: [".input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-inline-start:var(--spacing-1)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:hover:not(.input-disabled):not(.input-readonly):not(:focus-within){border-color:var(--color-text-secondary)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-invalid{border-color:var(--color-error-600)}.input-container.input-invalid:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-surface-muted)}.input-container.input-readonly-wrap{height:auto;min-height:var(--lc-input-height);align-items:stretch}.input-readonly-value{display:flex;align-items:center;min-width:0;white-space:normal;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.input-char-count-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{--lc-input-height: var(--size-interactive-xs-height);height:var(--lc-input-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{--lc-input-height: var(--size-interactive-sm-height);height:var(--lc-input-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{--lc-input-height: var(--size-interactive-md-height);height:var(--lc-input-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{--lc-input-height: var(--size-interactive-lg-height);height:var(--lc-input-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"]
|
|
385
|
+
styles: [".input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-inline-start:var(--spacing-1)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:hover:not(.input-disabled):not(.input-readonly):not(.input-invalid):not(:focus-within){border-color:var(--color-text-secondary)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-invalid{border-color:var(--color-error-600)}.input-container.input-invalid:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-surface-muted)}.input-container.input-readonly-wrap{height:auto;min-height:var(--lc-input-height);align-items:stretch}.input-readonly-value{display:flex;align-items:center;min-width:0;white-space:normal;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.input-char-count-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{--lc-input-height: var(--size-interactive-xs-height);height:var(--lc-input-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{--lc-input-height: var(--size-interactive-sm-height);height:var(--lc-input-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{--lc-input-height: var(--size-interactive-md-height);height:var(--lc-input-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{--lc-input-height: var(--size-interactive-lg-height);height:var(--lc-input-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"]
|
|
386
386
|
}]
|
|
387
387
|
}],
|
|
388
388
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/input/input.component.ts","../../../../libs/angular-ui-kit/src/lib/input/input.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering */\nimport {\n Component,\n computed,\n input,\n model,\n output,\n signal,\n viewChild,\n ElementRef,\n ChangeDetectionStrategy,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/** Values of the native `autocapitalize` attribute. */\nexport type InputAutocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n/** Values of the native `enterkeyhint` attribute (label of the on-screen keyboard's Enter key). */\nexport type InputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n/** Counter for generated ids: they follow creation order, so prerendered HTML is the same in every build. */\nlet nextUniqueId = 0;\n\n/**\n * Input component for single-line text form data entry.\n *\n * Features:\n * - Type variants (text, email, password, number, tel, url)\n * - Size presets (xs, sm, md, lg)\n * - Leading and trailing icon support\n * - Character count display with maxLength (announced only near the limit)\n * - Validation error message display\n * - Helper text support\n * - Disabled and readonly states (read-only values can wrap: `readonlyWrap`)\n * - Input purpose and keyboard hints: `autocomplete`, `name`, `autocapitalize`,\n * `spellcheck`, `enterkeyhint`\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-input label=\"Name\" autocomplete=\"name\" autocapitalize=\"words\" [spellcheck]=\"false\" [(ngModel)]=\"name\" />\n * ```\n */\n@Component({\n selector: 'lc-input',\n imports: [IconComponent],\n templateUrl: './input.component.html',\n styleUrl: './input.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => InputComponent),\n multi: true,\n },\n ],\n})\nexport class InputComponent implements ControlValueAccessor {\n // Input Properties\n /**\n * Input label (displayed above input)\n */\n readonly label = input<string>();\n\n /**\n * Placeholder text\n * @default ''\n */\n readonly placeholder = input<string>('');\n\n /**\n * Input type\n * @default 'text'\n */\n readonly type = input<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>('text');\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 * Read-only values wrap onto more lines instead of being clipped (WCAG 1.4.10):\n * the value is shown as text (a read-only textbox named by the label), and a\n * hidden native input keeps the value, `name` and `autocomplete` for forms and\n * password managers. Only applies while `readonly` is set.\n * @default false\n */\n readonly readonlyWrap = input<boolean>(false);\n\n /**\n * Whether the input is required\n * @default false\n */\n readonly required = input<boolean>(false);\n\n /**\n * Show the `*` after the label of a `required` field. `false` keeps the\n * required semantics (`required`, `aria-required`) without the asterisk —\n * for forms where every field is required.\n * @default true\n */\n readonly requiredIndicator = input<boolean>(true);\n\n /**\n * Error message to display (if validation fails). While it is set, the field\n * container carries the class `input-invalid` and the message renders as\n * `<p class=\"input-error\">`. Before 3.13 the container also carried\n * `input-error` (G-WL3).\n * @default undefined\n */\n readonly error = input<string>();\n\n /**\n * Helper text to display below input\n */\n readonly helperText = input<string>();\n\n /**\n * Icon to display before input text (Tabler icon name)\n * @example 'envelope'\n */\n readonly iconBefore = input<string>();\n\n /**\n * Icon to display after input text (Tabler icon name)\n * @example 'eye'\n */\n readonly iconAfter = input<string>();\n\n /**\n * Maximum number of characters\n */\n readonly maxLength = input<number>();\n\n /**\n * Whether to show character count\n * @default false\n */\n readonly showCharCount = input<boolean>(false);\n\n /**\n * Screen-reader announcement of the character count near the limit;\n * `{remaining}` is replaced.\n * @default 'Characters remaining: {remaining}'\n */\n readonly charCountRemainingLabel = input('Characters remaining: {remaining}');\n\n /**\n * Remaining characters from which the count is announced (the visible count\n * is always shown). Unset = the last 10 % of `maxLength` (at least 1).\n */\n readonly charCountAnnounceThreshold = input<number>();\n\n /**\n * ARIA label for accessibility\n */\n readonly ariaLabel = input<string>();\n\n /**\n * Native `autocomplete` — the input purpose (WCAG 1.3.5), so browsers and\n * password managers fill the field: `name`, `email`, `username`,\n * `username webauthn` (offers passkeys in the field), `current-password`,\n * `new-password`, `one-time-code`, `tel`, `off` … Unset = no attribute.\n */\n readonly autocomplete = input<string>();\n\n /** Native `name` of the inner `<input>` (form posts, password managers). Unset = no attribute. */\n readonly name = input<string>();\n\n /**\n * Native `autocapitalize` for on-screen keyboards: `off` for addresses,\n * user names and codes, `words` for names. Unset = no attribute.\n */\n readonly autocapitalize = input<InputAutocapitalize>();\n\n /** Native `spellcheck`: `false` for names, addresses and codes. 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 * Deprecated, no effect since 3.12. The `*` is decorative and hidden from\n * assistive technology, because the native `required` state is announced\n * already, in the screen reader's language; a name on the `*` made the field\n * say \"required\" twice. Kept so existing bindings compile.\n * @deprecated No effect since 3.12: the native `required` state is announced instead.\n * @default 'required'\n */\n readonly requiredAriaLabel = input('required');\n\n /**\n * Id of the native `<input>`. The label's `for`, the error (`<id>-error`),\n * the helper text (`<id>-helper`), the label id (`<id>-label`) and\n * `aria-describedby` derive from it, so an error summary can link to the\n * field (`<a href=\"#contact-email\">`) and prerendered HTML is the same in\n * every build. Unique in the document, no spaces. Unset (or empty) = a\n * generated `lc-input-<n>`, which follows creation order (on the server it\n * keeps counting across prerendered routes): set it on prerendered pages.\n * @default generated (lc-input-<n>)\n */\n readonly controlId = input<string | undefined>(undefined);\n\n /**\n * Announce the error message the moment it appears (`role=\"alert\"` on the\n * message). Set `false` when an `lc-alert` error summary above the form\n * already announces the errors (a page re-rendered after a failed submit,\n * e.g. 422), so they aren't read twice. The message stays visible, stays\n * linked through `aria-describedby` (read with the field), and the control\n * keeps `aria-invalid`.\n * @default true\n */\n readonly announceError = input<boolean>(true);\n\n /**\n * Current value (two-way bindable: `[value]` / `[(value)]`). Emits\n * `valueChange` whenever it changes — once per user keystroke, on `clear()`\n * and when a bound form control writes a value.\n */\n readonly value = model<string>('');\n\n // Output Events\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 /** Generated id, taken once per instance (also with `controlId`), so later ids don't shift. */\n private readonly generatedId = `lc-input-${nextUniqueId++}`;\n\n private readonly resolvedId = computed(() => this.controlId() || this.generatedId);\n\n /**\n * Resolved id of the native control: `controlId`, or the generated\n * `lc-input-<n>`. Read-only, same meaning as before 3.12.\n */\n get inputId(): string {\n return this.resolvedId();\n }\n\n // ViewChild reference\n private readonly inputElement = viewChild<ElementRef<HTMLInputElement>>('inputRef');\n private readonly readonlyValueElement = viewChild<ElementRef<HTMLElement>>('readonlyValueRef');\n\n // Internal disabled state (for ControlValueAccessor)\n private readonly _formDisabled = signal<boolean>(false);\n\n // ControlValueAccessor callbacks\n private onChange: (value: string) => void = () => { /* set by registerOnChange */ };\n private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n /** The read-only value is shown as wrapping text (SI-10). */\n protected readonly wrapsReadonlyValue = computed(() => this.readonly() && this.readonlyWrap());\n\n /** `aria-describedby`: only the texts that are rendered (the error replaces the helper text). */\n protected readonly describedBy = computed(() => {\n if (this.error()) return `${this.inputId}-error`;\n if (this.helperText()) return `${this.inputId}-helper`;\n return null;\n });\n\n /** Screen-reader text of the character count: empty until the limit is near. */\n protected readonly charCountAnnouncement = computed(() => {\n const max = this.maxLength();\n if (!this.showCharCount() || !max) return '';\n const remaining = Math.max(0, max - this.value().length);\n const threshold = this.charCountAnnounceThreshold() ?? Math.max(1, Math.ceil(max * 0.1));\n if (remaining > threshold) return '';\n return this.charCountRemainingLabel().replace('{remaining}', String(remaining));\n });\n\n /**\n * Computed disabled state from both input and form control\n */\n protected get isDisabled(): boolean {\n return this.disabled() || this._formDisabled();\n }\n\n /**\n * Gets current character count\n */\n protected get charCount(): number {\n return this.value().length;\n }\n\n /**\n * Determines if error state should be shown\n */\n protected get hasError(): boolean {\n return !!this.error();\n }\n\n /**\n * Programmatically focus the input (the visible value while `readonlyWrap` applies)\n */\n public focus(): void {\n if (this.wrapsReadonlyValue()) {\n this.readonlyValueElement()?.nativeElement.focus();\n return;\n }\n this.inputElement()?.nativeElement.focus();\n }\n\n /**\n * Programmatically select input text\n */\n public select(): void {\n const shown = this.wrapsReadonlyValue() ? this.readonlyValueElement()?.nativeElement : undefined;\n if (shown) {\n const selection = shown.ownerDocument.getSelection();\n const range = shown.ownerDocument.createRange();\n range.selectNodeContents(shown);\n selection?.removeAllRanges();\n selection?.addRange(range);\n return;\n }\n this.inputElement()?.nativeElement.select();\n }\n\n /**\n * Clear the input value\n */\n public clear(): void {\n this.value.set('');\n this.onChange('');\n }\n\n // ControlValueAccessor implementation\n writeValue(value: string | null): 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 /**\n * Handles input value changes\n */\n protected onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n // model.set() emits `valueChange` exactly once per actual change\n this.value.set(newValue);\n this.onChange(newValue);\n }\n\n /**\n * Handles input focus\n */\n protected onFocus(): void {\n this.focused.emit();\n }\n\n /**\n * Handles input blur\n */\n protected onBlur(): void {\n this.onTouched();\n this.blurred.emit();\n }\n\n /**\n * Handles keydown events\n */\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.enterPressed.emit();\n }\n }\n}\n","<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <!-- No whitespace before the *: the gap is its margin, and it never wraps onto a line alone -->\n <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n {{ label() }}@if (required() && requiredIndicator()) {<span class=\"required-indicator\" aria-hidden=\"true\">*</span>}\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-invalid]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n @if (wrapsReadonlyValue()) {\n <div\n #readonlyValueRef\n class=\"input-field input-readonly-value\"\n role=\"textbox\"\n aria-readonly=\"true\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >{{ value() }}</div>\n }\n\n <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [hidden]=\"wrapsReadonlyValue()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize() ?? null\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"describedBy()\"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" [attr.role]=\"announceError() ? 'alert' : null\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n\n @if (showCharCount() && maxLength()) {\n <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/input/input.component.ts","../../../../libs/angular-ui-kit/src/lib/input/input.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering */\nimport {\n Component,\n computed,\n input,\n model,\n output,\n signal,\n viewChild,\n ElementRef,\n ChangeDetectionStrategy,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/** Values of the native `autocapitalize` attribute. */\nexport type InputAutocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n/** Values of the native `enterkeyhint` attribute (label of the on-screen keyboard's Enter key). */\nexport type InputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n/** Counter for generated ids: they follow creation order, so prerendered HTML is the same in every build. */\nlet nextUniqueId = 0;\n\n/**\n * Input component for single-line text form data entry.\n *\n * Features:\n * - Type variants (text, email, password, number, tel, url)\n * - Size presets (xs, sm, md, lg)\n * - Leading and trailing icon support\n * - Character count display with maxLength (announced only near the limit)\n * - Validation error message display\n * - Helper text support\n * - Disabled and readonly states (read-only values can wrap: `readonlyWrap`)\n * - Input purpose and keyboard hints: `autocomplete`, `name`, `autocapitalize`,\n * `spellcheck`, `enterkeyhint`\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-input label=\"Name\" autocomplete=\"name\" autocapitalize=\"words\" [spellcheck]=\"false\" [(ngModel)]=\"name\" />\n * ```\n */\n@Component({\n selector: 'lc-input',\n imports: [IconComponent],\n templateUrl: './input.component.html',\n styleUrl: './input.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => InputComponent),\n multi: true,\n },\n ],\n})\nexport class InputComponent implements ControlValueAccessor {\n // Input Properties\n /**\n * Input label (displayed above input)\n */\n readonly label = input<string>();\n\n /**\n * Placeholder text\n * @default ''\n */\n readonly placeholder = input<string>('');\n\n /**\n * Input type\n * @default 'text'\n */\n readonly type = input<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>('text');\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 * Read-only values wrap onto more lines instead of being clipped (WCAG 1.4.10):\n * the value is shown as text (a read-only textbox named by the label), and a\n * hidden native input keeps the value, `name` and `autocomplete` for forms and\n * password managers. Only applies while `readonly` is set.\n * @default false\n */\n readonly readonlyWrap = input<boolean>(false);\n\n /**\n * Whether the input is required\n * @default false\n */\n readonly required = input<boolean>(false);\n\n /**\n * Show the `*` after the label of a `required` field. `false` keeps the\n * required semantics (`required`, `aria-required`) without the asterisk —\n * for forms where every field is required.\n * @default true\n */\n readonly requiredIndicator = input<boolean>(true);\n\n /**\n * Error message to display (if validation fails). While it is set, the field\n * container carries the class `input-invalid` and the message renders as\n * `<p class=\"input-error\">`. Before 3.13 the container also carried\n * `input-error` (G-WL3).\n * @default undefined\n */\n readonly error = input<string>();\n\n /**\n * Helper text to display below input\n */\n readonly helperText = input<string>();\n\n /**\n * Icon to display before input text (Tabler icon name)\n * @example 'envelope'\n */\n readonly iconBefore = input<string>();\n\n /**\n * Icon to display after input text (Tabler icon name)\n * @example 'eye'\n */\n readonly iconAfter = input<string>();\n\n /**\n * Maximum number of characters\n */\n readonly maxLength = input<number>();\n\n /**\n * Whether to show character count\n * @default false\n */\n readonly showCharCount = input<boolean>(false);\n\n /**\n * Screen-reader announcement of the character count near the limit;\n * `{remaining}` is replaced.\n * @default 'Characters remaining: {remaining}'\n */\n readonly charCountRemainingLabel = input('Characters remaining: {remaining}');\n\n /**\n * Remaining characters from which the count is announced (the visible count\n * is always shown). Unset = the last 10 % of `maxLength` (at least 1).\n */\n readonly charCountAnnounceThreshold = input<number>();\n\n /**\n * ARIA label for accessibility\n */\n readonly ariaLabel = input<string>();\n\n /**\n * Native `autocomplete` — the input purpose (WCAG 1.3.5), so browsers and\n * password managers fill the field: `name`, `email`, `username`,\n * `username webauthn` (offers passkeys in the field), `current-password`,\n * `new-password`, `one-time-code`, `tel`, `off` … Unset = no attribute.\n */\n readonly autocomplete = input<string>();\n\n /** Native `name` of the inner `<input>` (form posts, password managers). Unset = no attribute. */\n readonly name = input<string>();\n\n /**\n * Native `autocapitalize` for on-screen keyboards: `off` for addresses,\n * user names and codes, `words` for names. Unset = no attribute.\n */\n readonly autocapitalize = input<InputAutocapitalize>();\n\n /** Native `spellcheck`: `false` for names, addresses and codes. 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 * Deprecated, no effect since 3.12. The `*` is decorative and hidden from\n * assistive technology, because the native `required` state is announced\n * already, in the screen reader's language; a name on the `*` made the field\n * say \"required\" twice. Kept so existing bindings compile.\n * @deprecated No effect since 3.12: the native `required` state is announced instead.\n * @default 'required'\n */\n readonly requiredAriaLabel = input('required');\n\n /**\n * Id of the native `<input>`. The label's `for`, the error (`<id>-error`),\n * the helper text (`<id>-helper`), the label id (`<id>-label`) and\n * `aria-describedby` derive from it, so an error summary can link to the\n * field (`<a href=\"#contact-email\">`) and prerendered HTML is the same in\n * every build. Unique in the document, no spaces. Unset (or empty) = a\n * generated `lc-input-<n>`, which follows creation order (on the server it\n * keeps counting across prerendered routes): set it on prerendered pages.\n * @default generated (lc-input-<n>)\n */\n readonly controlId = input<string | undefined>(undefined);\n\n /**\n * Announce the error message the moment it appears (`role=\"alert\"` on the\n * message). Set `false` when an `lc-alert` error summary above the form\n * already announces the errors (a page re-rendered after a failed submit,\n * e.g. 422), so they aren't read twice. The message stays visible, stays\n * linked through `aria-describedby` (read with the field), and the control\n * keeps `aria-invalid`.\n * @default true\n */\n readonly announceError = input<boolean>(true);\n\n /**\n * Current value (two-way bindable: `[value]` / `[(value)]`). Emits\n * `valueChange` whenever it changes — once per user keystroke, on `clear()`\n * and when a bound form control writes a value.\n */\n readonly value = model<string>('');\n\n // Output Events\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 /** Generated id, taken once per instance (also with `controlId`), so later ids don't shift. */\n private readonly generatedId = `lc-input-${nextUniqueId++}`;\n\n private readonly resolvedId = computed(() => this.controlId() || this.generatedId);\n\n /**\n * Resolved id of the native control: `controlId`, or the generated\n * `lc-input-<n>`. Read-only, same meaning as before 3.12.\n */\n get inputId(): string {\n return this.resolvedId();\n }\n\n // ViewChild reference\n private readonly inputElement = viewChild<ElementRef<HTMLInputElement>>('inputRef');\n private readonly readonlyValueElement = viewChild<ElementRef<HTMLElement>>('readonlyValueRef');\n\n // Internal disabled state (for ControlValueAccessor)\n private readonly _formDisabled = signal<boolean>(false);\n\n // ControlValueAccessor callbacks\n private onChange: (value: string) => void = () => { /* set by registerOnChange */ };\n private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n /** The read-only value is shown as wrapping text (SI-10). */\n protected readonly wrapsReadonlyValue = computed(() => this.readonly() && this.readonlyWrap());\n\n /** `aria-describedby`: only the texts that are rendered (the error replaces the helper text). */\n protected readonly describedBy = computed(() => {\n if (this.error()) return `${this.inputId}-error`;\n if (this.helperText()) return `${this.inputId}-helper`;\n return null;\n });\n\n /** Screen-reader text of the character count: empty until the limit is near. */\n protected readonly charCountAnnouncement = computed(() => {\n const max = this.maxLength();\n if (!this.showCharCount() || !max) return '';\n const remaining = Math.max(0, max - this.value().length);\n const threshold = this.charCountAnnounceThreshold() ?? Math.max(1, Math.ceil(max * 0.1));\n if (remaining > threshold) return '';\n return this.charCountRemainingLabel().replace('{remaining}', String(remaining));\n });\n\n /**\n * Computed disabled state from both input and form control\n */\n protected get isDisabled(): boolean {\n return this.disabled() || this._formDisabled();\n }\n\n /**\n * Gets current character count\n */\n protected get charCount(): number {\n return this.value().length;\n }\n\n /**\n * Determines if error state should be shown\n */\n protected get hasError(): boolean {\n return !!this.error();\n }\n\n /**\n * Programmatically focus the input (the visible value while `readonlyWrap` applies)\n */\n public focus(): void {\n if (this.wrapsReadonlyValue()) {\n this.readonlyValueElement()?.nativeElement.focus();\n return;\n }\n this.inputElement()?.nativeElement.focus();\n }\n\n /**\n * Programmatically select input text\n */\n public select(): void {\n const shown = this.wrapsReadonlyValue() ? this.readonlyValueElement()?.nativeElement : undefined;\n if (shown) {\n const selection = shown.ownerDocument.getSelection();\n const range = shown.ownerDocument.createRange();\n range.selectNodeContents(shown);\n selection?.removeAllRanges();\n selection?.addRange(range);\n return;\n }\n this.inputElement()?.nativeElement.select();\n }\n\n /**\n * Clear the input value\n */\n public clear(): void {\n this.value.set('');\n this.onChange('');\n }\n\n // ControlValueAccessor implementation\n writeValue(value: string | null): 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 /**\n * Handles input value changes\n */\n protected onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n // model.set() emits `valueChange` exactly once per actual change\n this.value.set(newValue);\n this.onChange(newValue);\n }\n\n /**\n * Handles input focus\n */\n protected onFocus(): void {\n this.focused.emit();\n }\n\n /**\n * Handles input blur\n */\n protected onBlur(): void {\n this.onTouched();\n this.blurred.emit();\n }\n\n /**\n * Handles keydown events\n */\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.enterPressed.emit();\n }\n }\n}\n","<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <!-- No whitespace before the *: the gap is its margin, and it never wraps onto a line alone -->\n <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n {{ label() }}@if (required() && requiredIndicator()) {<span class=\"required-indicator\" aria-hidden=\"true\">*</span>}\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-invalid]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n @if (wrapsReadonlyValue()) {\n <div\n #readonlyValueRef\n class=\"input-field input-readonly-value\"\n role=\"textbox\"\n aria-readonly=\"true\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n >{{ value() }}</div>\n }\n\n <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [hidden]=\"wrapsReadonlyValue()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize() ?? null\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"describedBy()\"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" [attr.role]=\"announceError() ? 'alert' : null\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n\n @if (showCharCount() && maxLength()) {\n <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n }\n</div>\n"],"mappings":"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"}
|
|
@@ -222,7 +222,7 @@ var KanbanBoardComponent = class KanbanBoardComponent {
|
|
|
222
222
|
},
|
|
223
223
|
ngImport: i0,
|
|
224
224
|
template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n",
|
|
225
|
-
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-
|
|
225
|
+
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-subtle)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}@media(forced-colors:active){.lc-kanban__card:focus-visible{outline-color:Highlight}}\n"],
|
|
226
226
|
dependencies: [{
|
|
227
227
|
kind: "component",
|
|
228
228
|
type: IconComponent,
|
|
@@ -255,7 +255,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
255
255
|
viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE, ICON_ARROW_DOWN])],
|
|
256
256
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
257
257
|
template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n",
|
|
258
|
-
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-
|
|
258
|
+
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-subtle)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}@media(forced-colors:active){.lc-kanban__card:focus-visible{outline-color:Highlight}}\n"]
|
|
259
259
|
}]
|
|
260
260
|
}],
|
|
261
261
|
propDecorators: {
|