@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-image-viewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-image-viewer.mjs","sources":["../../../projects/components/image-viewer/src/picture-ref.ts","../../../projects/components/image-viewer/src/types.ts","../../../projects/components/image-viewer/src/image-viewer/image-viewer.ts","../../../projects/components/image-viewer/src/image-viewer/image-viewer.html","../../../projects/components/image-viewer/src/image-viewer.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-caption.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-description.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-title.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture.directive.ts","../../../projects/components/image-viewer/ngstarter-ui-components-image-viewer.ts"],"sourcesContent":["import { EventEmitter } from '@angular/core';\n\nexport class PictureRef {\n  readonly closed = new EventEmitter();\n\n  close(): void {\n    this.closed.emit();\n  }\n}\n","import { InjectionToken, TemplateRef } from '@angular/core';\nimport { PictureRef } from './picture-ref';\n\nexport interface PictureOptions {\n  sourceUrl: string;\n  title?: string | undefined;\n  caption?: string | undefined;\n  description?: string | undefined;\n  titleTplRef?: TemplateRef<any> | undefined;\n  captionTplRef?: TemplateRef<any> | undefined;\n  descriptionTplRef?: TemplateRef<any> | undefined;\n}\n\nexport const IMAGE_VIEWER = new InjectionToken('IMAGE_VIEWER');\nexport const IMAGE_VIEWER_PICTURE_REF = new InjectionToken<PictureRef>('IMAGE_VIEWER_PICTURE_REF');\nexport const IMAGE_VIEWER_PICTURE_DATA = new InjectionToken<PictureOptions>('IMAGE_VIEWER_PICTURE_DATA');\n","import { Component, computed, DestroyRef, ElementRef, inject, Renderer2, DOCUMENT } from '@angular/core';\nimport { IMAGE_VIEWER_PICTURE_DATA, IMAGE_VIEWER_PICTURE_REF } from '../types';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { ProgressSpinner } from '@ngstarter-ui/components/spinner';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'ngs-image-viewer',\n  exportAs: 'ngsImageViewer',\n  imports: [\n    Icon,\n    ProgressSpinner,\n    NgTemplateOutlet\n  ],\n  templateUrl: './image-viewer.html',\n  styleUrl: './image-viewer.scss',\n  host: {\n    'class': 'ngs-image-viewer',\n    '[class.loading]': 'loading',\n    '[class.dragging]': '_dragging',\n    '[class.scaled]': 'scale !== 1'\n  }\n})\nexport class ImageViewer {\n  readonly elementRef = inject(ElementRef);\n  private _document = inject(DOCUMENT);\n  private _destroyRef = inject(DestroyRef);\n  private _renderer = inject(Renderer2);\n  private _startClientY = 0;\n  private _startClientX = 0;\n  private _offsetY = 0;\n  private _offsetX = 0;\n  private _tmpOffsetY = 0;\n  private _tmpOffsetX = 0;\n  protected _dragging = false;\n  readonly pictureRef = inject(IMAGE_VIEWER_PICTURE_REF);\n  readonly data = inject(IMAGE_VIEWER_PICTURE_DATA);\n  loading = true;\n  scale = 1;\n  image: HTMLImageElement;\n  alreadyDragged = false;\n  scaleMin = 1;\n  scaleMax = 1;\n  padding = 30;\n\n  scaled = computed<boolean>(() => {\n    return this.scale !== 1;\n  });\n  hasTitle = computed(() => {\n    return !!(this.data.title || this.data.titleTplRef);\n  });\n  hasAside = computed(() => {\n    return !!(this.data.caption || this.data.description || this.data.captionTplRef || this.data.descriptionTplRef);\n  });\n\n  onLoad(event: Event): void {\n    this.loading = false;\n    this.image = (event.target as HTMLImageElement);\n\n    if (this.image.width > this.image.height) {\n      this.scaleMax = this.image.naturalWidth / this.image.width;\n    } else {\n      this.scaleMax = this.image.naturalHeight / this.image.height;\n    }\n\n    const image = this.image;\n    fromEvent(image, 'mousedown')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: MouseEvent | any) => {\n        if (this.scale === this.scaleMin || event.button === 2) {\n          return;\n        }\n\n        this._dragging = true;\n        this._startClientY = event.clientY;\n        this._startClientX = event.clientX;\n      })\n    ;\n    fromEvent(this._document, 'mousemove')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        if (this._dragging) {\n          const scaleFactor = (1 / this.scale);\n          let offsetY = (event.clientY - this._startClientY) * scaleFactor;\n          let offsetX = (event.clientX - this._startClientX) * scaleFactor;\n          this._transform(offsetY, offsetX);\n        }\n      })\n    ;\n    fromEvent(this._document, 'mouseup')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        if (this._dragging) {\n          const element = this.elementRef.nativeElement as HTMLElement;\n          const elementRect = element.getBoundingClientRect();\n          this._renderer.removeClass(element, 'dragging');\n          this._dragging = false;\n          let imageWidth = Math.floor(image.getBoundingClientRect().width);\n          let imageHeight = Math.floor(image.getBoundingClientRect().height);\n          let imageViewportWidth = this.hasAside() ? elementRect.width - 420 : elementRect.width;\n          let imageViewportHeight = elementRect.height;\n\n          if (imageWidth <= imageViewportWidth && imageHeight <= imageViewportHeight) {\n            this._tmpOffsetY = 0;\n            this._tmpOffsetX = 0;\n            this._offsetY = 0;\n            this._offsetX = 0;\n            this._renderer.setStyle(image, 'transform', `translate(0px,0px)`);\n          } else {\n            const imageRect = image.getBoundingClientRect();\n            const widthDiff = imageViewportWidth - imageWidth;\n            const heightDiff = imageViewportHeight - imageHeight;\n            const xPositionDiff = widthDiff / this.scale / 2;\n            const yPositionDiff = heightDiff / this.scale / 2;\n\n            if (imageRect.x > 0 && imageRect.y > 0) {\n              this._tmpOffsetY = yPositionDiff * -1 + this.padding;\n              this._tmpOffsetX = xPositionDiff * -1 + this.padding;\n            } else if (imageRect.x < widthDiff && imageRect.y > 0) {\n              this._tmpOffsetY = yPositionDiff * -1 + this.padding;\n              this._tmpOffsetX = xPositionDiff - this.padding;\n            } else if (imageRect.x < widthDiff && imageRect.y < heightDiff) {\n              this._tmpOffsetY = yPositionDiff - this.padding;\n              this._tmpOffsetX = xPositionDiff - this.padding;\n            } else if (imageRect.x > 0 && imageRect.y < heightDiff) {\n              this._tmpOffsetY = yPositionDiff - this.padding;\n              this._tmpOffsetX = xPositionDiff * -1 + this.padding;\n            }\n\n            if (imageWidth < imageViewportWidth) {\n              this._tmpOffsetX = 0;\n            }\n\n            if (imageHeight < imageViewportHeight) {\n              this._tmpOffsetY = 0;\n            }\n\n            this._offsetY = this._tmpOffsetY;\n            this._offsetX = this._tmpOffsetX;\n            this._renderer.setStyle(\n              image,\n              'transform', `translate(${this._tmpOffsetX}px,${this._tmpOffsetY}px)`\n            );\n          }\n        }\n      })\n    ;\n  }\n\n  onBackdropClick(): void {\n    this.pictureRef.close();\n  }\n\n  onPreventClick(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  toggleZoom(): void {\n    if (this.scale === this.scaleMin) {\n      this.scale = this.scaleMax;\n    } else {\n      this.scale = this.scaleMin;\n      this._renderer.setStyle(this.image, 'transform', `translate(0px,0px)`);\n      this._offsetX = 0;\n      this._offsetY = 0;\n      this._tmpOffsetY = 0;\n      this._tmpOffsetX = 0;\n    }\n\n    const element = this.elementRef.nativeElement as HTMLElement;\n    element.style.setProperty('--ngs-image-viewer-picture-scale', this.scale.toString());\n  }\n\n  protected onDragStart(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.alreadyDragged = true;\n  }\n\n  private _transform(offsetY: number, offsetX: number): void {\n    const image = this.image as HTMLImageElement;\n    const scaleFactor = (1 / this.scale);\n    let translateX = this._offsetX + offsetX;\n    // let offsetStartX = ((image.width / 2) - translateX) / scaleFactor;\n    // let offsetEndX = ((image.width / 2) + translateX) / scaleFactor;\n    let translateY = this._offsetY + offsetY;\n    // let offsetStartY = ((image.height / 2) - translateY) / scaleFactor;\n    // let offsetEndY = ((image.height / 2) + translateY) / scaleFactor;\n\n    // let thumbHalfWidth = 150;\n    //\n    // if (offsetStartX <= thumbHalfWidth && translateX > 0) {\n    //   translateX = (image.width / 2) - (thumbHalfWidth * scaleFactor);\n    // } else if (offsetEndX <= thumbHalfWidth && translateX < 0) {\n    //   translateX = -((image.width / 2) - (thumbHalfWidth * scaleFactor));\n    // }\n    //\n    // if (offsetStartY <= thumbHalfWidth && translateY > 0) {\n    //   translateY = (image.height / 2) - (thumbHalfWidth * scaleFactor);\n    // } else if (offsetEndY <= thumbHalfWidth && translateY < 0) {\n    //   translateY = -((image.height / 2) - (thumbHalfWidth * scaleFactor));\n    // }\n\n    this._tmpOffsetY = translateY;\n    this._tmpOffsetX = translateX;\n    this._renderer.setStyle(\n      image,\n      'transform', `translate(${translateX}px,${translateY}px)`\n    );\n  }\n}\n","<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\" />\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n      } @else {\n        <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <ngs-progress-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\" />\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\" />\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n","import { DestroyRef, Directive, inject, Injector } from '@angular/core';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { PictureRef } from './picture-ref';\nimport { ImageViewer } from './image-viewer/image-viewer';\nimport { IMAGE_VIEWER_PICTURE_DATA, IMAGE_VIEWER_PICTURE_REF, PictureOptions } from './types';\n\n@Directive({\n  selector: '[ngsImageViewer]',\n  exportAs: 'ngsImageViewer',\n  standalone: true,\n  host: {\n    'class': 'ngs-image-viewer',\n  }\n})\nexport class ImageViewerDirective {\n  private _overlay = inject(Overlay);\n  private _injector = inject(Injector);\n  private _destroyRef = inject(DestroyRef);\n\n  get api() {\n    return {\n      open: (options: PictureOptions): PictureRef => this._open(options)\n    }\n  }\n\n  private _open(options: PictureOptions): PictureRef {\n    const pictureRef = new PictureRef();\n    const overlayRef = this._overlay.create({\n      positionStrategy: this._overlay.position().global(),\n      hasBackdrop: true\n    });\n    const injector = Injector.create({\n      providers: [\n        {\n          provide: IMAGE_VIEWER_PICTURE_REF,\n          useValue: pictureRef\n        },\n        {\n          provide: IMAGE_VIEWER_PICTURE_DATA,\n          useValue: options\n        }\n      ],\n      parent: this._injector\n    });\n    const portal = new ComponentPortal(ImageViewer, null, injector);\n    overlayRef.attach(portal);\n    pictureRef.closed.pipe(\n      takeUntilDestroyed(this._destroyRef)\n    ).subscribe(() => {\n      overlayRef.detach();\n    });\n    return pictureRef;\n  }\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsImageViewerPictureCaption]',\n  standalone: true\n})\nexport class ImageViewerPictureCaptionDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsImageViewerPictureDescription]',\n  standalone: true\n})\nexport class ImageViewerPictureDescriptionDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsImageViewerPictureTitle]',\n  standalone: true\n})\nexport class ImageViewerPictureTitleDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { contentChild, Directive, inject, input } from '@angular/core';\nimport { IMAGE_VIEWER } from './types';\nimport { ImageViewerDirective } from './image-viewer.directive';\nimport { ImageViewerPictureCaptionDirective } from './image-viewer-picture-caption.directive';\nimport { ImageViewerPictureDescriptionDirective } from './image-viewer-picture-description.directive';\nimport { ImageViewerPictureTitleDirective } from './image-viewer-picture-title.directive';\n\n@Directive({\n  selector: '[ngsImageViewerPicture]',\n  exportAs: 'ngsImageViewerPicture',\n  standalone: true,\n  providers: [\n    {\n      provide: IMAGE_VIEWER,\n      useExisting: ImageViewerPictureDirective\n    }\n  ],\n  host: {\n    'class': 'ngs-image-viewer-picture',\n    '(click)': 'onClick($event)'\n  }\n})\nexport class ImageViewerPictureDirective {\n  private _imageViewer = inject(ImageViewerDirective);\n  private _titleTplRef = contentChild(ImageViewerPictureTitleDirective);\n  private _captionTplRef = contentChild(ImageViewerPictureCaptionDirective);\n  private _descriptionTplRef = contentChild(ImageViewerPictureDescriptionDirective);\n\n  sourceUrl = input.required<string>();\n  caption = input<string>();\n  title = input<string>();\n  description = input<string>();\n\n  protected onClick(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this._imageViewer.api.open({\n      sourceUrl: this.sourceUrl(),\n      title: this.title(),\n      caption: this.caption(),\n      description: this.description(),\n      titleTplRef: this._titleTplRef()?.templateRef,\n      captionTplRef: this._captionTplRef()?.templateRef,\n      descriptionTplRef: this._descriptionTplRef()?.templateRef\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-image-zoom-viewer.mjs

@@ -0,0 +1,162 @@
+import * as i0 from '@angular/core';
+import { ViewEncapsulation, Component, Directive, inject, ViewContainerRef, DestroyRef, contentChild, ElementRef, viewChild, signal, effect, untracked } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class ImageZoomViewerStyle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageZoomViewerStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ImageZoomViewerStyle, isStandalone: true, selector: "ngs-image-zoom-viewer-style", ngImport: i0, template: '', isInline: true, styles: [".ngs-image-zoom-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}.ngs-image-zoom-cloned{position:absolute;z-index:1001;cursor:zoom-out;pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);will-change:transform}.ngs-image-zoom-backdrop{background:var(--overlay-backdrop-bg);transition:opacity .25s cubic-bezier(.4,0,.2,1);opacity:0}.ngs-image-zoom-backdrop.cdk-overlay-backdrop-showing{opacity:1}.ngs-image-zoom-backdrop.is-closing{opacity:0!important}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageZoomViewerStyle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-image-zoom-viewer-style', template: '', encapsulation: ViewEncapsulation.None, styles: [".ngs-image-zoom-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}.ngs-image-zoom-cloned{position:absolute;z-index:1001;cursor:zoom-out;pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);will-change:transform}.ngs-image-zoom-backdrop{background:var(--overlay-backdrop-bg);transition:opacity .25s cubic-bezier(.4,0,.2,1);opacity:0}.ngs-image-zoom-backdrop.cdk-overlay-backdrop-showing{opacity:1}.ngs-image-zoom-backdrop.is-closing{opacity:0!important}\n"] }]
+        }] });
+
+class ImageZoomViewerImage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageZoomViewerImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ImageZoomViewerImage, isStandalone: true, selector: "[ngsImageZoomViewerImage]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageZoomViewerImage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsImageZoomViewerImage]',
+                }]
+        }] });
+
+class ImageZoomViewer {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    contentImageRef = contentChild.required(ImageZoomViewerImage, { read: (ElementRef) });
+    zoomedTemplate = viewChild.required('zoomedTemplate');
+    isZoomed = signal(false, ...(ngDevMode ? [{ debugName: "isZoomed" }] : /* istanbul ignore next */ []));
+    imageSrc = signal('', ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
+    imageAlt = signal('', ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
+    imageRect = signal(undefined, ...(ngDevMode ? [{ debugName: "imageRect" }] : /* istanbul ignore next */ []));
+    zoomedTransform = signal('translate(0, 0) scale(1)', ...(ngDevMode ? [{ debugName: "zoomedTransform" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    resizeSubscription;
+    constructor() {
+        // Update image source when content changes or initial load
+        effect(() => {
+            const img = this.getImageElement();
+            if (img) {
+                untracked(() => {
+                    this.imageSrc.set(img.src);
+                    this.imageAlt.set(img.alt);
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.closeZoom();
+    }
+    toggleZoom() {
+        if (this.isZoomed()) {
+            this.closeZoom();
+        }
+        else {
+            this.openZoom();
+        }
+    }
+    openZoom() {
+        const img = this.getImageElement();
+        const template = this.zoomedTemplate();
+        this.imageSrc.set(img.src);
+        this.imageAlt.set(img.alt);
+        const rect = img.getBoundingClientRect();
+        this.imageRect.set(rect);
+        this.isZoomed.set(true);
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'ngs-image-zoom-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
+        });
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.closeZoom());
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (event.key === 'Escape') {
+                this.closeZoom();
+            }
+        });
+        const portal = new TemplatePortal(template, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Use requestAnimationFrame to ensure the cloned image is rendered before animating
+        requestAnimationFrame(() => {
+            this.calculateZoom();
+        });
+        this.resizeSubscription = fromEvent(window, 'resize')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.calculateZoom();
+        });
+    }
+    closeZoom() {
+        if (!this.overlayRef) {
+            return;
+        }
+        const backdrop = this.overlayRef.backdropElement;
+        if (backdrop) {
+            backdrop.classList.add('is-closing');
+            backdrop.classList.remove('cdk-overlay-backdrop-showing');
+        }
+        this.zoomedTransform.set('translate(0, 0) scale(1)');
+        // Wait for transition to finish before hiding the overlay and cloned image
+        setTimeout(() => {
+            this.isZoomed.set(false);
+            this.cleanupListeners();
+            if (this.overlayRef) {
+                this.overlayRef.dispose();
+                this.overlayRef = null;
+            }
+        }, 250);
+    }
+    calculateZoom() {
+        const rect = this.imageRect();
+        if (!rect) {
+            return;
+        }
+        const vWidth = window.innerWidth;
+        const vHeight = window.innerHeight;
+        const scaleX = vWidth / rect.width;
+        const scaleY = vHeight / rect.height;
+        const scale = Math.min(scaleX, scaleY) * 0.9; // 90% of viewport
+        const translateX = (vWidth / 2) - (rect.left + rect.width / 2);
+        const translateY = (vHeight / 2) - (rect.top + rect.height / 2);
+        this.zoomedTransform.set(`translate(${translateX}px, ${translateY}px) scale(${scale})`);
+    }
+    getImageElement() {
+        return this.contentImageRef().nativeElement;
+    }
+    cleanupListeners() {
+        if (this.resizeSubscription) {
+            this.resizeSubscription.unsubscribe();
+            this.resizeSubscription = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageZoomViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ImageZoomViewer, isStandalone: true, selector: "ngs-image-zoom-viewer", host: { classAttribute: "ngs-image-zoom-viewer" }, queries: [{ propertyName: "contentImageRef", first: true, predicate: ImageZoomViewerImage, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "zoomedTemplate", first: true, predicate: ["zoomedTemplate"], descendants: true, isSignal: true }], exportAs: ["ngsImageZoomViewer"], ngImport: i0, template: "<ngs-image-zoom-viewer-style/>\n<div class=\"ngs-image-zoom-container\" [class.is-zoomed]=\"isZoomed()\" (click)=\"toggleZoom()\">\n  <ng-content/>\n</div>\n\n<ng-template #zoomedTemplate>\n  <div class=\"ngs-image-zoom-wrapper\" (click)=\"closeZoom()\">\n    <img\n      #zoomedImage\n      class=\"ngs-image-zoom-cloned\"\n      [src]=\"imageSrc()\"\n      [alt]=\"imageAlt()\"\n      [style.transform]=\"zoomedTransform()\"\n      [style.width.px]=\"imageRect()?.width\"\n      [style.height.px]=\"imageRect()?.height\"\n      [style.top.px]=\"imageRect()?.top\"\n      [style.left.px]=\"imageRect()?.left\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;cursor:zoom-in}:host .ngs-image-zoom-container{display:block}:host .ngs-image-zoom-container.is-zoomed{visibility:hidden}\n"], dependencies: [{ kind: "component", type: ImageZoomViewerStyle, selector: "ngs-image-zoom-viewer-style" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageZoomViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-image-zoom-viewer', exportAs: 'ngsImageZoomViewer', imports: [
+                        ImageZoomViewerStyle,
+                    ], host: {
+                        'class': 'ngs-image-zoom-viewer'
+                    }, template: "<ngs-image-zoom-viewer-style/>\n<div class=\"ngs-image-zoom-container\" [class.is-zoomed]=\"isZoomed()\" (click)=\"toggleZoom()\">\n  <ng-content/>\n</div>\n\n<ng-template #zoomedTemplate>\n  <div class=\"ngs-image-zoom-wrapper\" (click)=\"closeZoom()\">\n    <img\n      #zoomedImage\n      class=\"ngs-image-zoom-cloned\"\n      [src]=\"imageSrc()\"\n      [alt]=\"imageAlt()\"\n      [style.transform]=\"zoomedTransform()\"\n      [style.width.px]=\"imageRect()?.width\"\n      [style.height.px]=\"imageRect()?.height\"\n      [style.top.px]=\"imageRect()?.top\"\n      [style.left.px]=\"imageRect()?.left\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;cursor:zoom-in}:host .ngs-image-zoom-container{display:block}:host .ngs-image-zoom-container.is-zoomed{visibility:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentImageRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageZoomViewerImage), { ...{ read: (ElementRef) }, isSignal: true }] }], zoomedTemplate: [{ type: i0.ViewChild, args: ['zoomedTemplate', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImageZoomViewer, ImageZoomViewerImage };
+//# sourceMappingURL=ngstarter-ui-components-image-zoom-viewer.mjs.map

package/fesm2022/ngstarter-ui-components-image-zoom-viewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-image-zoom-viewer.mjs","sources":["../../../projects/components/image-zoom-viewer/src/image-zoom-viewer-style/image-zoom-viewer-style.ts","../../../projects/components/image-zoom-viewer/src/image-zoom-viewer-image.ts","../../../projects/components/image-zoom-viewer/src/image-zoom-viewer/image-zoom-viewer.ts","../../../projects/components/image-zoom-viewer/src/image-zoom-viewer/image-zoom-viewer.html","../../../projects/components/image-zoom-viewer/ngstarter-ui-components-image-zoom-viewer.ts"],"sourcesContent":["import { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ngs-image-zoom-viewer-style',\n  template: '',\n  styleUrl: './image-zoom-viewer-style.scss',\n  encapsulation: ViewEncapsulation.None\n})\nexport class ImageZoomViewerStyle {\n\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngsImageZoomViewerImage]',\n})\nexport class ImageZoomViewerImage {\n}\n","import {\n  Component,\n  contentChild,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  OnDestroy,\n  signal,\n  TemplateRef,\n  untracked,\n  viewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { fromEvent, Subscription } from 'rxjs';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ImageZoomViewerStyle\n} from '../image-zoom-viewer-style/image-zoom-viewer-style';\nimport { ImageZoomViewerImage } from '../image-zoom-viewer-image';\n\n@Component({\n  selector: 'ngs-image-zoom-viewer',\n  exportAs: 'ngsImageZoomViewer',\n  templateUrl: './image-zoom-viewer.html',\n  styleUrl: './image-zoom-viewer.scss',\n  imports: [\n    ImageZoomViewerStyle,\n  ],\n  host: {\n    'class': 'ngs-image-zoom-viewer'\n  }\n})\nexport class ImageZoomViewer implements OnDestroy {\n  private overlay = inject(Overlay);\n  private viewContainerRef = inject(ViewContainerRef);\n  private destroyRef = inject(DestroyRef);\n\n  readonly contentImageRef = contentChild.required(ImageZoomViewerImage, { read: ElementRef<HTMLImageElement> });\n  readonly zoomedTemplate = viewChild.required<TemplateRef<any>>('zoomedTemplate');\n\n  readonly isZoomed = signal(false);\n  readonly imageSrc = signal('');\n  readonly imageAlt = signal('');\n  readonly imageRect = signal<DOMRect | undefined>(undefined);\n  readonly zoomedTransform = signal('translate(0, 0) scale(1)');\n\n  private overlayRef: OverlayRef | null = null;\n  private resizeSubscription?: Subscription;\n\n  constructor() {\n    // Update image source when content changes or initial load\n    effect(() => {\n      const img = this.getImageElement();\n      if (img) {\n        untracked(() => {\n          this.imageSrc.set(img.src);\n          this.imageAlt.set(img.alt);\n        });\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this.closeZoom();\n  }\n\n  toggleZoom() {\n    if (this.isZoomed()) {\n      this.closeZoom();\n    } else {\n      this.openZoom();\n    }\n  }\n\n  openZoom() {\n    const img = this.getImageElement();\n    const template = this.zoomedTemplate();\n    this.imageSrc.set(img.src);\n    this.imageAlt.set(img.alt);\n    const rect = img.getBoundingClientRect();\n    this.imageRect.set(rect);\n    this.isZoomed.set(true);\n\n    this.overlayRef = this.overlay.create({\n      hasBackdrop: true,\n      backdropClass: 'ngs-image-zoom-backdrop',\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()\n    });\n\n    this.overlayRef\n      .backdropClick()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.closeZoom());\n    this.overlayRef\n      .keydownEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (event.key === 'Escape') {\n          this.closeZoom();\n        }\n      });\n\n    const portal = new TemplatePortal(template, this.viewContainerRef);\n    this.overlayRef.attach(portal);\n\n    // Use requestAnimationFrame to ensure the cloned image is rendered before animating\n    requestAnimationFrame(() => {\n      this.calculateZoom();\n    });\n\n    this.resizeSubscription = fromEvent(window, 'resize')\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.calculateZoom();\n      });\n  }\n\n  closeZoom() {\n    if (!this.overlayRef) {\n      return;\n    }\n\n    const backdrop = this.overlayRef.backdropElement;\n    if (backdrop) {\n      backdrop.classList.add('is-closing');\n      backdrop.classList.remove('cdk-overlay-backdrop-showing');\n    }\n\n    this.zoomedTransform.set('translate(0, 0) scale(1)');\n\n    // Wait for transition to finish before hiding the overlay and cloned image\n    setTimeout(() => {\n      this.isZoomed.set(false);\n      this.cleanupListeners();\n      if (this.overlayRef) {\n        this.overlayRef.dispose();\n        this.overlayRef = null;\n      }\n    }, 250);\n  }\n\n  private calculateZoom() {\n    const rect = this.imageRect();\n\n    if (!rect) {\n      return;\n    }\n\n    const vWidth = window.innerWidth;\n    const vHeight = window.innerHeight;\n\n    const scaleX = vWidth / rect.width;\n    const scaleY = vHeight / rect.height;\n    const scale = Math.min(scaleX, scaleY) * 0.9; // 90% of viewport\n\n    const translateX = (vWidth / 2) - (rect.left + rect.width / 2);\n    const translateY = (vHeight / 2) - (rect.top + rect.height / 2);\n\n    this.zoomedTransform.set(`translate(${translateX}px, ${translateY}px) scale(${scale})`);\n  }\n\n  private getImageElement(): HTMLImageElement {\n    return this.contentImageRef().nativeElement;\n  }\n\n  private cleanupListeners() {\n    if (this.resizeSubscription) {\n      this.resizeSubscription.unsubscribe();\n      this.resizeSubscription = undefined;\n    }\n  }\n}\n","<ngs-image-zoom-viewer-style/>\n<div class=\"ngs-image-zoom-container\" [class.is-zoomed]=\"isZoomed()\" (click)=\"toggleZoom()\">\n  <ng-content/>\n</div>\n\n<ng-template #zoomedTemplate>\n  <div class=\"ngs-image-zoom-wrapper\" (click)=\"closeZoom()\">\n    <img\n      #zoomedImage\n      class=\"ngs-image-zoom-cloned\"\n      [src]=\"imageSrc()\"\n      [alt]=\"imageAlt()\"\n      [style.transform]=\"zoomedTransform()\"\n      [style.width.px]=\"imageRect()?.width\"\n      [style.height.px]=\"imageRect()?.height\"\n      [style.top.px]=\"imageRect()?.top\"\n      [style.left.px]=\"imageRect()?.left\"\n    />\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-incidents.mjs

@@ -0,0 +1,257 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, inject, input, booleanAttribute, Directive, computed } from '@angular/core';
+import { Button } from '@ngstarter-ui/components/button';
+import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
+import { Icon } from '@ngstarter-ui/components/icon';
+
+const INCIDENTS = new InjectionToken('INCIDENTS');
+
+class Incidents {
+    isVisible = false;
+    toggleVisibility() {
+        this.isVisible = !this.isVisible;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incidents, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Incidents, isStandalone: true, selector: "ngs-incidents", host: { properties: { "class.is-visible": "isVisible" }, classAttribute: "ngs-incidents" }, providers: [
+            {
+                provide: INCIDENTS,
+                useExisting: Incidents
+            }
+        ], exportAs: ["ngsIncidents"], ngImport: i0, template: "<ng-content select=\"ngs-incidents-bar\" />\n<ng-content select=\"ngs-incidents-list\" />\n", styles: [":host{--ngs-incidents-bar-height: calc(var(--spacing, .25rem) * 24);--ngs-incidents-bar-bg: var(--color-orange-container);--ngs-incidents-bar-padding: 0 calc(var(--spacing, .25rem) * 8);--ngs-incidents-bar-color: var(--color-on-orange-container);--ngs-incidents-bar-box-shadow: none;--ngs-incidents-bar-hover-box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ngs-incidents-list-bg: rgba(0, 0, 0, .32);--ngs-incidents-list-gap: calc(var(--spacing, .25rem) * 5);--ngs-incidents-list-padding: calc(var(--spacing, .25rem) * 7) 0;--ngs-incident-bg: white;--ngs-incident-color: var(--color-neutral-700);--ngs-incident-border-radius: .375rem;--ngs-incident-padding: calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 6);--ngs-incident-gap: calc(var(--spacing, .25rem) * 6);--ngs-incident-border-start: calc(var(--spacing, .25rem) * 1) solid var(--color-neutral-900);--ngs-incident-close-color: var(--color-neutral-500);--ngs-incident-close-hover-color: var(--color-neutral-900);--ngs-incident-title-font-size: .875rem;--ngs-incident-title-font-weight: 500;--ngs-incident-details-font-size: .875rem;--ngs-incident-details-color: var(--color-neutral-500);--ngs-incidents-title-font-size: var(--text-base);--ngs-incidents-title-font-weight: 500;--ngs-incidents-description-font-size: .875rem;--ngs-incidents-description-opacity: 80%;display:contents}:host .list-container{display:none;height:calc(100vh - var(--ngs-layout-top-header-top) + var(--ngs-layout-top-header-height))}:host-context(html.dark){--ngs-incidents-list-bg: rgba(255, 255, 255, .32)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incidents, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incidents', exportAs: 'ngsIncidents', providers: [
+                        {
+                            provide: INCIDENTS,
+                            useExisting: Incidents
+                        }
+                    ], host: {
+                        'class': 'ngs-incidents',
+                        '[class.is-visible]': 'isVisible',
+                    }, template: "<ng-content select=\"ngs-incidents-bar\" />\n<ng-content select=\"ngs-incidents-list\" />\n", styles: [":host{--ngs-incidents-bar-height: calc(var(--spacing, .25rem) * 24);--ngs-incidents-bar-bg: var(--color-orange-container);--ngs-incidents-bar-padding: 0 calc(var(--spacing, .25rem) * 8);--ngs-incidents-bar-color: var(--color-on-orange-container);--ngs-incidents-bar-box-shadow: none;--ngs-incidents-bar-hover-box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ngs-incidents-list-bg: rgba(0, 0, 0, .32);--ngs-incidents-list-gap: calc(var(--spacing, .25rem) * 5);--ngs-incidents-list-padding: calc(var(--spacing, .25rem) * 7) 0;--ngs-incident-bg: white;--ngs-incident-color: var(--color-neutral-700);--ngs-incident-border-radius: .375rem;--ngs-incident-padding: calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 6);--ngs-incident-gap: calc(var(--spacing, .25rem) * 6);--ngs-incident-border-start: calc(var(--spacing, .25rem) * 1) solid var(--color-neutral-900);--ngs-incident-close-color: var(--color-neutral-500);--ngs-incident-close-hover-color: var(--color-neutral-900);--ngs-incident-title-font-size: .875rem;--ngs-incident-title-font-weight: 500;--ngs-incident-details-font-size: .875rem;--ngs-incident-details-color: var(--color-neutral-500);--ngs-incidents-title-font-size: var(--text-base);--ngs-incidents-title-font-weight: 500;--ngs-incidents-description-font-size: .875rem;--ngs-incidents-description-opacity: 80%;display:contents}:host .list-container{display:none;height:calc(100vh - var(--ngs-layout-top-header-top) + var(--ngs-layout-top-header-height))}:host-context(html.dark){--ngs-incidents-list-bg: rgba(255, 255, 255, .32)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentsBar {
+    _parent = inject(INCIDENTS, { optional: true });
+    _handleClick(_event) {
+        this._parent?.toggleVisibility();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsBar, isStandalone: true, selector: "ngs-incidents-bar", host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "ngs-incidents-bar" }, exportAs: ["ngsIncidentsBar"], ngImport: i0, template: "<div class=\"flex flex-col gap-0.5\">\n  <ng-content select=\"ngs-incidents-title\"/>\n  <ng-content select=\"ngs-incidents-description\"/>\n</div>\n<button ngsIconButton class=\"ms-auto toggle-icon\">\n  <ng-content select=\"[ngsIncidentsToggleIcon]\"/>\n</button>\n", styles: [":host{width:100%;height:var(--ngs-incidents-bar-height);background:var(--ngs-incidents-bar-bg);color:var(--ngs-incidents-bar-color);box-shadow:var(--ngs-incidents-bar-box-shadow);align-items:center;justify-content:space-between;flex:none;cursor:pointer;display:flex;grid-gap:25px;-webkit-user-select:none;user-select:none;padding:var(--ngs-incidents-bar-padding)}:host(:hover){box-shadow:var(--ngs-incidents-bar-hover-box-shadow)}:host .container{display:flex;height:100%;grid-area:content;align-items:center}:host .toggle-icon{line-height:0;transition:transform .2s ease}:host-context(.ngs-incidents.is-visible) .toggle-icon{transform:rotate(-180deg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incidents-bar', exportAs: 'ngsIncidentsBar', imports: [
+                        Button
+                    ], host: {
+                        'class': 'ngs-incidents-bar',
+                        '(click)': '_handleClick($event)'
+                    }, template: "<div class=\"flex flex-col gap-0.5\">\n  <ng-content select=\"ngs-incidents-title\"/>\n  <ng-content select=\"ngs-incidents-description\"/>\n</div>\n<button ngsIconButton class=\"ms-auto toggle-icon\">\n  <ng-content select=\"[ngsIncidentsToggleIcon]\"/>\n</button>\n", styles: [":host{width:100%;height:var(--ngs-incidents-bar-height);background:var(--ngs-incidents-bar-bg);color:var(--ngs-incidents-bar-color);box-shadow:var(--ngs-incidents-bar-box-shadow);align-items:center;justify-content:space-between;flex:none;cursor:pointer;display:flex;grid-gap:25px;-webkit-user-select:none;user-select:none;padding:var(--ngs-incidents-bar-padding)}:host(:hover){box-shadow:var(--ngs-incidents-bar-hover-box-shadow)}:host .container{display:flex;height:100%;grid-area:content;align-items:center}:host .toggle-icon{line-height:0;transition:transform .2s ease}:host-context(.ngs-incidents.is-visible) .toggle-icon{transform:rotate(-180deg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentsList {
+    _parent = inject(INCIDENTS, { optional: true });
+    fixed = input(false, { ...(ngDevMode ? { debugName: "fixed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _handleClick(event) {
+        const target = event.target;
+        if (target.closest('.ngs-incident') === null) {
+            this._parent?.toggleVisibility();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: IncidentsList, isStandalone: true, selector: "ngs-incidents-list", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleClick($event)" }, properties: { "class.is-fixed": "fixed()" }, classAttribute: "ngs-incidents-list" }, exportAs: ["ngs-incidents-list"], ngImport: i0, template: "<div class=\"container\">\n  <ng-content select=\"ngs-incident\"/>\n</div>\n", styles: [":host{background:var(--ngs-incidents-list-bg);transition:transform .15s,opacity .15s;display:grid;height:0;opacity:0;grid-gap:25px;grid-template-columns:auto minmax(1px,max-content) auto;grid-template-areas:\". content .\";transform-origin:top;overflow:hidden;transform:scaleY(0)}:host:not(:empty){padding:var(--ngs-incidents-list-padding)}:host .container{display:grid;height:min-content;grid-area:content;grid-row-gap:var(--ngs-incidents-list-gap);grid-auto-flow:row}:host(.is-fixed){position:absolute;z-index:102;left:0;right:0;top:calc(var(--ngs-incidents-bar-height));bottom:0}:host-context(.ngs-incidents.is-visible){height:calc(100% - var(--ngs-incidents-bar-height));transform:scaleY(1);opacity:1;overflow-y:auto}:host-context(.ngs-incidents.is-visible).is-fixed{height:calc(100vh - var(--ngs-incidents-bar-height))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsList, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incidents-list', exportAs: 'ngs-incidents-list', host: {
+                        'class': 'ngs-incidents-list',
+                        '[class.is-fixed]': 'fixed()',
+                        '(click)': '_handleClick($event)'
+                    }, template: "<div class=\"container\">\n  <ng-content select=\"ngs-incident\"/>\n</div>\n", styles: [":host{background:var(--ngs-incidents-list-bg);transition:transform .15s,opacity .15s;display:grid;height:0;opacity:0;grid-gap:25px;grid-template-columns:auto minmax(1px,max-content) auto;grid-template-areas:\". content .\";transform-origin:top;overflow:hidden;transform:scaleY(0)}:host:not(:empty){padding:var(--ngs-incidents-list-padding)}:host .container{display:grid;height:min-content;grid-area:content;grid-row-gap:var(--ngs-incidents-list-gap);grid-auto-flow:row}:host(.is-fixed){position:absolute;z-index:102;left:0;right:0;top:calc(var(--ngs-incidents-bar-height));bottom:0}:host-context(.ngs-incidents.is-visible){height:calc(100% - var(--ngs-incidents-bar-height));transform:scaleY(1);opacity:1;overflow-y:auto}:host-context(.ngs-incidents.is-visible).is-fixed{height:calc(100vh - var(--ngs-incidents-bar-height))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }] } });
+
+const initialState = {
+    incidents: [],
+    title: '',
+    description: '',
+};
+const IncidentsStore = signalStore({ providedIn: 'root' }, withState(initialState), withMethods((store) => ({
+    show(state) {
+        patchState(store, {
+            ...state
+        });
+    },
+    hide() {
+        patchState(store, {
+            incidents: []
+        });
+    }
+})));
+
+let incidentId = 0;
+class Incident {
+    _incidentsStore = inject(IncidentsStore);
+    incidentId = input(`incident-${incidentId++}`, ...(ngDevMode ? [{ debugName: "incidentId" }] : /* istanbul ignore next */ []));
+    close() {
+        this._incidentsStore.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incident, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Incident, isStandalone: true, selector: "ngs-incident,[ngs-incident]", inputs: { incidentId: { classPropertyName: "incidentId", publicName: "incidentId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-incident" }, exportAs: ["ngsIncident"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsIncidentIcon]\"/>\n</div>\n<div class=\"content\">\n  <div class=\"data\">\n    <ng-content select=\"ngs-incident-title\"/>\n    <ng-content select=\"ngs-incident-details\"/>\n  </div>\n  <ng-content select=\"[ngsIncidentButton]\"/>\n</div>\n<button ngsIconButton class=\"close -ms-2\" (click)=\"close()\">\n  <ng-content select=\"[ngsIncidentClose]\"/>\n</button>\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ngs-incident-border-radius);background:var(--ngs-incident-bg);grid-template-areas:\"icon content close\";padding:var(--ngs-incident-padding);gap:var(--ngs-incident-gap);border-inline-start:var(--ngs-incident-border-start);grid-template-columns:[icon] var(--ngs-incident-gap) [content] 1fr [action] var(--ngs-incident-gap);color:var(--ngs-incident-color)}:host .content{grid-area:content;display:grid;gap:var(--ngs-incident-gap);grid-template-areas:\"data button\";grid-template-columns:[data] 1fr [button] var(--ngs-incident-gap)}:host .data{grid-area:data}:host .icon{line-height:0;display:inline-block;max-width:max-content}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incident, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incident,[ngs-incident]', exportAs: 'ngsIncident', imports: [
+                        Button
+                    ], host: {
+                        'class': 'ngs-incident'
+                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsIncidentIcon]\"/>\n</div>\n<div class=\"content\">\n  <div class=\"data\">\n    <ng-content select=\"ngs-incident-title\"/>\n    <ng-content select=\"ngs-incident-details\"/>\n  </div>\n  <ng-content select=\"[ngsIncidentButton]\"/>\n</div>\n<button ngsIconButton class=\"close -ms-2\" (click)=\"close()\">\n  <ng-content select=\"[ngsIncidentClose]\"/>\n</button>\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ngs-incident-border-radius);background:var(--ngs-incident-bg);grid-template-areas:\"icon content close\";padding:var(--ngs-incident-padding);gap:var(--ngs-incident-gap);border-inline-start:var(--ngs-incident-border-start);grid-template-columns:[icon] var(--ngs-incident-gap) [content] 1fr [action] var(--ngs-incident-gap);color:var(--ngs-incident-color)}:host .content{grid-area:content;display:grid;gap:var(--ngs-incident-gap);grid-template-areas:\"data button\";grid-template-columns:[data] 1fr [button] var(--ngs-incident-gap)}:host .data{grid-area:data}:host .icon{line-height:0;display:inline-block;max-width:max-content}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { incidentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "incidentId", required: false }] }] } });
+
+class IncidentTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentTitle, isStandalone: true, selector: "ngs-incident-title", host: { classAttribute: "ngs-incident-title" }, exportAs: ["ngsIncidentTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-title-font-size);font-weight:var(--ngs-incident-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incident-title', exportAs: 'ngsIncidentTitle', host: {
+                        'class': 'ngs-incident-title',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-title-font-size);font-weight:var(--ngs-incident-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentDetails {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentDetails, isStandalone: true, selector: "ngs-incident-details", host: { classAttribute: "ngs-incident-details" }, exportAs: ["ngsIncidentDetails"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-details-font-size);color:var(--ngs-incident-details-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentDetails, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incident-details', exportAs: 'ngsIncidentDetails', host: {
+                        'class': 'ngs-incident-details',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-details-font-size);color:var(--ngs-incident-details-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentButtonDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IncidentButtonDirective, isStandalone: true, selector: "[ngsIncidentButton]", host: { classAttribute: "ngs-incident-button" }, exportAs: ["ngsIncidentButton"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIncidentButton]',
+                    exportAs: 'ngsIncidentButton',
+                    host: {
+                        'class': 'ngs-incident-button',
+                    }
+                }]
+        }] });
+
+class IncidentsTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsTitle, isStandalone: true, selector: "ngs-incidents-title", host: { classAttribute: "ngs-incidents-title" }, exportAs: ["ngsIncidentTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-title-font-size);font-weight:var(--ngs-incidents-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incidents-title', exportAs: 'ngsIncidentTitle', host: {
+                        'class': 'ngs-incidents-title',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-title-font-size);font-weight:var(--ngs-incidents-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentsDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsDescription, isStandalone: true, selector: "ngs-incidents-description", host: { classAttribute: "ngs-incidents-description" }, exportAs: ["ngsIncidentsDescription"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-description-font-size);opacity:var(--ngs-incidents-description-opacity)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsDescription, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incidents-description', exportAs: 'ngsIncidentsDescription', host: {
+                        'class': 'ngs-incidents-description'
+                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-description-font-size);opacity:var(--ngs-incidents-description-opacity)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentsToggleIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsToggleIconDirective, isStandalone: true, selector: "[ngsIncidentsToggleIcon]", host: { classAttribute: "ngs-incidents-toggle-icon" }, exportAs: ["ngsIncidentsToggleIcon"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsToggleIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIncidentsToggleIcon]',
+                    exportAs: 'ngsIncidentsToggleIcon',
+                    host: {
+                        'class': 'ngs-incidents-toggle-icon',
+                    }
+                }]
+        }] });
+
+class IncidentCloseDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IncidentCloseDirective, isStandalone: true, selector: "[ngsIncidentClose]", host: { classAttribute: "ngs-incident-close" }, exportAs: ["ngsIncidentClose"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIncidentClose]',
+                    exportAs: 'ngsIncidentClose',
+                    host: {
+                        'class': 'ngs-incident-close'
+                    }
+                }]
+        }] });
+
+class IncidentsContainer {
+    _incidentsStore = inject(IncidentsStore);
+    hasIncidents = computed(() => {
+        return this._incidentsStore.incidents().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasIncidents" }] : /* istanbul ignore next */ []));
+    title = computed(() => {
+        return this._incidentsStore.title();
+    }, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = computed(() => {
+        return this._incidentsStore.description();
+    }, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    incidents = computed(() => {
+        return this._incidentsStore.incidents();
+    }, ...(ngDevMode ? [{ debugName: "incidents" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: IncidentsContainer, isStandalone: true, selector: "ngs-incidents-container,ngs-incidents-global", host: { properties: { "class.is-active": "hasIncidents()" }, classAttribute: "ngs-incidents-global" }, exportAs: ["ngsIncidentsGlobal"], ngImport: i0, template: "@if (hasIncidents()) {\n  <ngs-incidents>\n    <ngs-incidents-bar>\n      <ngs-incidents-title>{{ title() }}</ngs-incidents-title>\n      @if (description()) {\n        <ngs-incidents-description>{{ description() }}</ngs-incidents-description>\n      }\n      <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsIncidentsToggleIcon/>\n    </ngs-incidents-bar>\n    <ngs-incidents-list fixed>\n      @for (incident of incidents(); track incident) {\n        <ngs-incident>\n          <ngs-icon name=\"fluent:info-24-regular\" ngsIncidentIcon/>\n          <ngs-icon name=\"fluent:dismiss-24-regular\" ngsIncidentClose/>\n          <ngs-incident-title>{{ incident.title }}</ngs-incident-title>\n          @if (incident.details) {\n            <ngs-incident-details>{{ incident.details }}</ngs-incident-details>\n          }\n        </ngs-incident>\n      }\n    </ngs-incidents-list>\n  </ngs-incidents>\n}\n", styles: [":host{display:none;position:relative}:host.is-active{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Incidents, selector: "ngs-incidents", exportAs: ["ngsIncidents"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: IncidentsTitle, selector: "ngs-incidents-title", exportAs: ["ngsIncidentTitle"] }, { kind: "component", type: IncidentDetails, selector: "ngs-incident-details", exportAs: ["ngsIncidentDetails"] }, { kind: "component", type: IncidentsBar, selector: "ngs-incidents-bar", exportAs: ["ngsIncidentsBar"] }, { kind: "component", type: IncidentsDescription, selector: "ngs-incidents-description", exportAs: ["ngsIncidentsDescription"] }, { kind: "directive", type: IncidentsToggleIconDirective, selector: "[ngsIncidentsToggleIcon]", exportAs: ["ngsIncidentsToggleIcon"] }, { kind: "component", type: IncidentTitle, selector: "ngs-incident-title", exportAs: ["ngsIncidentTitle"] }, { kind: "component", type: IncidentsList, selector: "ngs-incidents-list", inputs: ["fixed"], exportAs: ["ngs-incidents-list"] }, { kind: "directive", type: IncidentCloseDirective, selector: "[ngsIncidentClose]", exportAs: ["ngsIncidentClose"] }, { kind: "component", type: Incident, selector: "ngs-incident,[ngs-incident]", inputs: ["incidentId"], exportAs: ["ngsIncident"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-incidents-container,ngs-incidents-global', exportAs: 'ngsIncidentsGlobal', imports: [
+                        Incidents,
+                        Icon,
+                        IncidentsTitle,
+                        IncidentDetails,
+                        IncidentsBar,
+                        IncidentsDescription,
+                        IncidentsToggleIconDirective,
+                        IncidentTitle,
+                        IncidentsList,
+                        IncidentCloseDirective,
+                        Incident
+                    ], host: {
+                        'class': 'ngs-incidents-global',
+                        '[class.is-active]': 'hasIncidents()'
+                    }, template: "@if (hasIncidents()) {\n  <ngs-incidents>\n    <ngs-incidents-bar>\n      <ngs-incidents-title>{{ title() }}</ngs-incidents-title>\n      @if (description()) {\n        <ngs-incidents-description>{{ description() }}</ngs-incidents-description>\n      }\n      <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsIncidentsToggleIcon/>\n    </ngs-incidents-bar>\n    <ngs-incidents-list fixed>\n      @for (incident of incidents(); track incident) {\n        <ngs-incident>\n          <ngs-icon name=\"fluent:info-24-regular\" ngsIncidentIcon/>\n          <ngs-icon name=\"fluent:dismiss-24-regular\" ngsIncidentClose/>\n          <ngs-incident-title>{{ incident.title }}</ngs-incident-title>\n          @if (incident.details) {\n            <ngs-incident-details>{{ incident.details }}</ngs-incident-details>\n          }\n        </ngs-incident>\n      }\n    </ngs-incidents-list>\n  </ngs-incidents>\n}\n", styles: [":host{display:none;position:relative}:host.is-active{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class IncidentIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IncidentIconDirective, isStandalone: true, selector: "[ngsIncidentIcon]", host: { classAttribute: "ngs-incident-icon" }, exportAs: ["ngsIncidentIcon"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsIncidentIcon]',
+                    exportAs: 'ngsIncidentIcon',
+                    host: {
+                        'class': 'ngs-incident-icon'
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Incident, IncidentButtonDirective, IncidentCloseDirective, IncidentDetails, IncidentIconDirective, IncidentTitle, Incidents, IncidentsBar, IncidentsContainer, IncidentsDescription, IncidentsList, IncidentsStore, IncidentsTitle, IncidentsToggleIconDirective };
+//# sourceMappingURL=ngstarter-ui-components-incidents.mjs.map