ngx-kit 7.4.0 → 8.0.1

package/fesm2022/ngx-kit-image-viewer.mjs

@@ -0,0 +1,348 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, viewChild, inject, ElementRef, DestroyRef, effect, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { startDragSession } from 'ngx-kit/core';
+
+const NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR = {
+    prevNext: true,
+    counter: true,
+    zoomIn: true,
+    zoomOut: true,
+    resetZoom: true,
+    rotateLeft: true,
+    rotateRight: true,
+    download: true,
+    print: true,
+    fullscreen: true,
+    close: false,
+};
+
+/** دانلود تصویر با fetch→blob (نام‌گذاریِ درست فایل رو تضمین می‌کنه)؛ اگه CORS اجازه نداد، در تب جدید باز می‌شه */
+async function downloadImage(src, filename) {
+    try {
+        const response = await fetch(src, { mode: 'cors' });
+        if (!response.ok)
+            throw new Error('fetch failed');
+        const blob = await response.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename || guessFileName(src);
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+    }
+    catch {
+        window.open(src, '_blank', 'noopener,noreferrer');
+    }
+}
+function guessFileName(src) {
+    try {
+        const url = new URL(src, typeof window !== 'undefined' ? window.location.href : undefined);
+        const last = url.pathname.split('/').pop();
+        return last || 'image';
+    }
+    catch {
+        return 'image';
+    }
+}
+/** یه پنجره‌ی جدید فقط با همون تصویر باز می‌کنه و بعد از لود، print می‌زنه؛ با DOM API (نه innerHTML) پس در برابر src مخرب امنه */
+function printImage(src) {
+    const win = window.open('', '_blank', 'noopener,noreferrer,width=800,height=600');
+    if (!win)
+        return;
+    win.document.title = 'Print';
+    const style = win.document.createElement('style');
+    style.textContent =
+        'body{margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fff;}img{max-width:100%;max-height:100vh;}';
+    win.document.head.appendChild(style);
+    const img = win.document.createElement('img');
+    img.onload = () => {
+        win.focus();
+        win.print();
+    };
+    img.src = src;
+    win.document.body.appendChild(img);
+}
+
+/**
+ * با تغییر zoom، pan رو طوری تنظیم می‌کنه که نقطه‌ی زیر cursor/انگشت‌ها
+ * (نسبت به مرکز کانتینر) سرجاش بمونه — یعنی zoom-to-cursor به‌جای
+ * zoom-to-center (که تجربه‌ی خیلی بهتری داره، دقیقاً مثل هر ویوئر حرفه‌ای).
+ *
+ * ریاضیِ پشتش: با transform="translate(panX,panY) scale(zoom)"، موقعیتِ
+ * صفحه‌ایِ یه نقطه‌ی محلیِ p (نسبت به مرکز) برابره با
+ * center + pan + p*zoom. اول p رو از روی وضعیت فعلی حساب می‌کنیم، بعد pan
+ * جدید رو طوری می‌سازیم که با zoom تازه، همون p به همون مختصات صفحه برسه.
+ */
+function zoomAroundPoint(current, newZoom, cursorX, cursorY, containerWidth, containerHeight) {
+    const centerX = containerWidth / 2;
+    const centerY = containerHeight / 2;
+    const localX = (cursorX - centerX - current.panX) / current.zoom;
+    const localY = (cursorY - centerY - current.panY) / current.zoom;
+    return {
+        zoom: newZoom,
+        panX: cursorX - centerX - localX * newZoom,
+        panY: cursorY - centerY - localY * newZoom,
+    };
+}
+function distanceBetweenTouches(a, b) {
+    return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+}
+function midpointOfTouches(a, b) {
+    return { x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 };
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+
+/**
+ * ویوئر حرفه‌ایِ تصویر: یه لیست تصویر می‌گیره، اولی رو نشون می‌ده، با
+ * دکمه‌های چپ/راست (مثل کاروسل) بین‌شون می‌ره، و یه نوار ابزار کاملاً
+ * قابل‌تنظیم (هر دکمه جدا فعال/غیرفعال می‌شه) داره: زوم این/اوت/ریست،
+ * چرخش، دانلود، پرینت، تمام‌صفحه.
+ *
+ * تعامل‌ها:
+ *  - اسکرول موس روی تصویر = زوم (نسبت به همون نقطه‌ی زیر cursor، نه مرکز)
+ *  - دو انگشتی روی تاچ = پینچ زوم
+ *  - وقتی زوم‌شده، درگ با موس یا تک‌انگشتی = پن
+ *  - کیبورد: ← → برای قبلی/بعدی، +/- برای زوم، Esc برای closed
+ *
+ * چون wheel/touchmove باید preventDefault بشن (وگرنه صفحه اسکرول/زوم
+ * می‌شه) و انگیولار این ایونت‌ها رو به‌صورت پیش‌فرض passive رجیستر می‌کنه
+ * (که توش preventDefault اثر نداره)، این‌ها با addEventListener دستی و
+ * {passive:false} وصل می‌شن، نه با بایندینگ تمپلیت.
+ *
+ * می‌تونه هم مستقیم توی صفحه جا بگیره، هم توسط مصرف‌کننده داخل
+ * ngx-kit/dialog (یا هر overlay دیگه) قرار بگیره — خودش به هیچ‌کدوم وابسته
+ * نیست، فقط با closed خروجی به بیرون خبر می‌ده که «ببندم».
+ */
+class NgxImageViewer {
+    images = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+    startIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startIndex" }] : /* istanbul ignore next */ []));
+    toolbar = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    minZoom = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minZoom" }] : /* istanbul ignore next */ []));
+    maxZoom = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+    zoomStep = input(0.4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomStep" }] : /* istanbul ignore next */ []));
+    indexChange = output();
+    closed = output();
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    zoom = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    panX = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
+    panY = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
+    rotation = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
+    activeImage = computed(() => this.images()[this.activeIndex()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeImage" }] : /* istanbul ignore next */ []));
+    toolbarConfig = computed(() => ({
+        ...NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR,
+        ...this.toolbar(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarConfig" }] : /* istanbul ignore next */ []));
+    isZoomed = computed(() => this.zoom() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isZoomed" }] : /* istanbul ignore next */ []));
+    stageTransform = computed(() => `translate(${this.panX()}px, ${this.panY()}px) scale(${this.zoom()}) rotate(${this.rotation()}deg)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stageTransform" }] : /* istanbul ignore next */ []));
+    stageEl = viewChild('stage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stageEl" }] : /* istanbul ignore next */ []));
+    hostElRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    pinchStartDistance = 0;
+    pinchStartZoom = 1;
+    stopPanDrag;
+    constructor() {
+        this.activeIndex.set(this.startIndex());
+        effect((onCleanup) => {
+            const stage = this.stageEl()?.nativeElement;
+            if (!stage)
+                return;
+            const onWheel = (ev) => {
+                ev.preventDefault();
+                const rect = stage.getBoundingClientRect();
+                this.applyZoomAt(this.zoom() + (ev.deltaY < 0 ? 1 : -1) * this.zoomStep(), ev.clientX - rect.left, ev.clientY - rect.top, rect.width, rect.height);
+            };
+            const onTouchStart = (ev) => {
+                if (ev.touches.length === 2) {
+                    this.stopPanDrag?.();
+                    this.pinchStartDistance = distanceBetweenTouches(ev.touches[0], ev.touches[1]);
+                    this.pinchStartZoom = this.zoom();
+                }
+                else if (ev.touches.length === 1 && this.isZoomed()) {
+                    this.beginPanDrag(ev);
+                }
+            };
+            const onTouchMove = (ev) => {
+                if (ev.touches.length === 2 && this.pinchStartDistance > 0) {
+                    ev.preventDefault();
+                    const dist = distanceBetweenTouches(ev.touches[0], ev.touches[1]);
+                    const newZoom = (dist / this.pinchStartDistance) * this.pinchStartZoom;
+                    const rect = stage.getBoundingClientRect();
+                    const mid = midpointOfTouches(ev.touches[0], ev.touches[1]);
+                    this.applyZoomAt(newZoom, mid.x - rect.left, mid.y - rect.top, rect.width, rect.height);
+                }
+            };
+            const onTouchEnd = () => {
+                this.pinchStartDistance = 0;
+            };
+            stage.addEventListener('wheel', onWheel, { passive: false });
+            stage.addEventListener('touchstart', onTouchStart, { passive: false });
+            stage.addEventListener('touchmove', onTouchMove, { passive: false });
+            stage.addEventListener('touchend', onTouchEnd);
+            stage.addEventListener('touchcancel', onTouchEnd);
+            onCleanup(() => {
+                stage.removeEventListener('wheel', onWheel);
+                stage.removeEventListener('touchstart', onTouchStart);
+                stage.removeEventListener('touchmove', onTouchMove);
+                stage.removeEventListener('touchend', onTouchEnd);
+                stage.removeEventListener('touchcancel', onTouchEnd);
+            });
+        });
+        this.destroyRef.onDestroy(() => this.stopPanDrag?.());
+    }
+    onKeydown(ev) {
+        if (ev.key === 'ArrowLeft')
+            this.prev();
+        else if (ev.key === 'ArrowRight')
+            this.next();
+        else if (ev.key === '+' || ev.key === '=')
+            this.zoomIn();
+        else if (ev.key === '-')
+            this.zoomOut();
+        else if (ev.key === 'Escape')
+            this.closed.emit();
+        else
+            return;
+        ev.preventDefault();
+    }
+    next() {
+        const len = this.images().length;
+        if (len)
+            this.goTo((this.activeIndex() + 1) % len);
+    }
+    prev() {
+        const len = this.images().length;
+        if (len)
+            this.goTo((this.activeIndex() - 1 + len) % len);
+    }
+    goTo(index) {
+        this.activeIndex.set(index);
+        this.resetView();
+        this.indexChange.emit(index);
+    }
+    zoomIn() {
+        this.setZoomAtCenter(this.zoom() + this.zoomStep());
+    }
+    zoomOut() {
+        this.setZoomAtCenter(this.zoom() - this.zoomStep());
+    }
+    resetView() {
+        this.zoom.set(1);
+        this.panX.set(0);
+        this.panY.set(0);
+        this.rotation.set(0);
+    }
+    rotateLeft() {
+        this.rotation.update((r) => r - 90);
+    }
+    rotateRight() {
+        this.rotation.update((r) => r + 90);
+    }
+    async download() {
+        const img = this.activeImage();
+        if (img)
+            await downloadImage(img.src, img.downloadFileName);
+    }
+    print() {
+        const img = this.activeImage();
+        if (img)
+            printImage(img.src);
+    }
+    toggleFullscreen() {
+        const el = this.hostElRef.nativeElement;
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            el.requestFullscreen?.();
+        }
+    }
+    close() {
+        this.closed.emit();
+    }
+    onPanPointerDown(ev) {
+        if (!this.isZoomed())
+            return;
+        this.beginPanDrag(ev);
+    }
+    beginPanDrag(ev) {
+        ev.preventDefault();
+        const startPanX = this.panX();
+        const startPanY = this.panY();
+        const startX = this.clientXOf(ev);
+        const startY = this.clientYOf(ev);
+        this.stopPanDrag?.();
+        this.stopPanDrag = startDragSession({
+            onMove: (moveEv) => {
+                this.panX.set(startPanX + (this.clientXOf(moveEv) - startX));
+                this.panY.set(startPanY + (this.clientYOf(moveEv) - startY));
+            },
+            onEnd: () => {
+                this.stopPanDrag = undefined;
+            },
+        });
+    }
+    setZoomAtCenter(newZoom) {
+        const stage = this.stageEl()?.nativeElement;
+        if (!stage) {
+            this.zoom.set(clamp(newZoom, this.minZoom(), this.maxZoom()));
+            return;
+        }
+        const rect = stage.getBoundingClientRect();
+        this.applyZoomAt(newZoom, rect.width / 2, rect.height / 2, rect.width, rect.height);
+    }
+    applyZoomAt(rawZoom, x, y, containerWidth, containerHeight) {
+        const newZoom = clamp(rawZoom, this.minZoom(), this.maxZoom());
+        if (newZoom === this.zoom())
+            return;
+        const result = zoomAroundPoint({ zoom: this.zoom(), panX: this.panX(), panY: this.panY() }, newZoom, x, y, containerWidth, containerHeight);
+        this.zoom.set(result.zoom);
+        this.panX.set(result.panX);
+        this.panY.set(result.panY);
+    }
+    clientXOf(ev) {
+        return 'touches' in ev
+            ? (ev.touches[0]?.clientX ?? ev.changedTouches[0]?.clientX ?? 0)
+            : ev.clientX;
+    }
+    clientYOf(ev) {
+        return 'touches' in ev
+            ? (ev.touches[0]?.clientY ?? ev.changedTouches[0]?.clientY ?? 0)
+            : ev.clientY;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxImageViewer, isStandalone: true, selector: "ngx-image-viewer", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)" }, classAttribute: "ngx-image-viewer-host" }, viewQueries: [{ propertyName: "stageEl", first: true, predicate: ["stage"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarConfig().close) {\n  <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"Close\">\u2715</button>\n}\n<div #stage class=\"ngx-iv-stage\" [class.zoomed]=\"isZoomed()\">\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n</div>\n@if (toolbarConfig().prevNext && images().length > 1) {\n  <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"Previous\">\n    \u2039\n  </button>\n  <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"Next\">\n    \u203A\n  </button>\n}\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n<div class=\"ngx-iv-toolbar\">\n  <div class=\"ngx-iv-toolbar--inner\">\n    @if (toolbarConfig().counter && images().length > 1) {\n      <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n    }\n    @if (toolbarConfig().zoomOut) {\n      <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18.5016 18.5L21 21M20 14.5C20 11.4624 17.5376 9 14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20C17.5376 20 20 17.5376 20 14.5Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16.5 14.5H12.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M10 3H14M3 10V14M6.5 21C4.567 21 3 19.433 3 17.5M17.5 3C19.433 3 21 4.567 21 6.5M3 6.5C3 4.567 4.567 3 6.5 3\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().zoomIn) {\n      <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18.5016 19.1217L21 21.6217M20 15.1217C20 12.0842 17.5376 9.62173 14.5 9.62173C11.4624 9.62173 9 12.0842 9 15.1217C9 18.1593 11.4624 20.6217 14.5 20.6217C17.5376 20.6217 20 18.1593 20 15.1217Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.5 13.1217V17.1217M16.5 15.1217H12.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M10 3.62173H14M3 10.6217V14.6217M6.5 21.6217C4.567 21.6217 3 20.0547 3 18.1217M17.5 3.62173C19.433 3.62173 21 5.18873 21 7.12173M3 7.12173C3 5.18873 4.567 3.62173 6.5 3.62173\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().resetZoom) {\n      <button type=\"button\" (click)=\"resetView()\" title=\"Reset zoom\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M17 17L21 21\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.4924 7.5C8.77591 7.54342 8.31993 7.66286 7.99139 7.99139C7.66286 8.31993 7.54342 8.77591 7.5 9.4924M12.5076 7.5C13.2241 7.54342 13.6801 7.66286 14.0086 7.99139C14.3371 8.31993 14.4566 8.77591 14.5 9.4924M14.4923 12.6214C14.4431 13.273 14.3194 13.6978 14.0086 14.0086C13.6801 14.3371 13.2241 14.4566 12.5076 14.5M9.4924 14.5C8.7759 14.4566 8.31993 14.3371 7.99139 14.0086C7.6806 13.6978 7.55693 13.273 7.50772 12.6214\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().rotateLeft) {\n      <button type=\"button\" (click)=\"rotateLeft()\" title=\"Rotate left\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3 15C3 18.2998 3 19.9497 4.02513 20.9749C5.05025 22 6.70017 22 10 22C13.2998 22 14.9497 22 15.9749 20.9749C17 19.9497 17 18.2998 17 15C17 11.7002 17 10.0503 15.9749 9.02513C14.9497 8 13.2998 8 10 8C6.70017 8 5.05025 8 4.02513 9.02513C3 10.0503 3 11.7002 3 15Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.4201 2L13.0744 3.11013C12.3581 3.70104 12 3.99649 12 4.36364L13 4.36364C16.7712 4.36364 18.6569 4.36364 19.8284 5.53521C21 6.70678 21 8.59241 21 12.3636V13\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().rotateRight) {\n      <button type=\"button\" (click)=\"rotateRight()\" title=\"Rotate right\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M7 15C7 18.2998 7 19.9497 8.02513 20.9749C9.05025 22 10.7002 22 14 22C17.2998 22 18.9497 22 19.9749 20.9749C21 19.9497 21 18.2998 21 15C21 11.7002 21 10.0503 19.9749 9.02513C18.9497 8 17.2998 8 14 8C10.7002 8 9.05025 8 8.02513 9.02513C7 10.0503 7 11.7002 7 15Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.57987 2L10.9256 3.11013C11.6419 3.70104 12 3.99649 12 4.36364L11 4.36364C7.22876 4.36364 5.34315 4.36364 4.17157 5.53521C3 6.70678 3 8.5924 3 12.3636V13\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().download) {\n      <button type=\"button\" (click)=\"download()\" title=\"Download\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().print) {\n      <button type=\"button\" (click)=\"print()\" title=\"Print\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M7.35396 18C5.23084 18 4.16928 18 3.41349 17.5468C2.91953 17.2506 2.52158 16.8271 2.26475 16.3242C1.87179 15.5547 1.97742 14.5373 2.18868 12.5025C2.36503 10.8039 2.45321 9.95455 2.88684 9.33081C3.17153 8.92129 3.55659 8.58564 4.00797 8.35353C4.69548 8 5.58164 8 7.35396 8H16.646C18.4184 8 19.3045 8 19.992 8.35353C20.4434 8.58564 20.8285 8.92129 21.1132 9.33081C21.5468 9.95455 21.635 10.8039 21.8113 12.5025C22.0226 14.5373 22.1282 15.5547 21.7352 16.3242C21.4784 16.8271 21.0805 17.2506 20.5865 17.5468C19.8307 18 18.7692 18 16.646 18\"\n            stroke-width=\"1.5\" />\n          <path\n            d=\"M17 8V6C17 4.11438 17 3.17157 16.4142 2.58579C15.8284 2 14.8856 2 13 2H11C9.11438 2 8.17157 2 7.58579 2.58579C7 3.17157 7 4.11438 7 6V8\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M13.9887 16L10.0113 16C9.32602 16 8.98337 16 8.69183 16.1089C8.30311 16.254 7.97026 16.536 7.7462 16.9099C7.57815 17.1904 7.49505 17.5511 7.32884 18.2724C7.06913 19.3995 6.93928 19.963 7.02759 20.4149C7.14535 21.0174 7.51237 21.5274 8.02252 21.7974C8.40513 22 8.94052 22 10.0113 22L13.9887 22C15.0595 22 15.5949 22 15.9775 21.7974C16.4876 21.5274 16.8547 21.0174 16.9724 20.4149C17.0607 19.963 16.9309 19.3995 16.6712 18.2724C16.505 17.5511 16.4218 17.1904 16.2538 16.9099C16.0297 16.536 15.6969 16.254 15.3082 16.1089C15.0166 16 14.674 16 13.9887 16Z\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M18 12H18.009\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().fullscreen) {\n      <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"Fullscreen\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 3.09779C8.00001 3.09779 4.03375 2.74194 3.38784 3.38785C2.74192 4.03375 3.09784 8 3.09784 8\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M8.00001 20.9022C8.00001 20.9022 4.03375 21.2581 3.38784 20.6122C2.74192 19.9662 3.09784 16 3.09784 16\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16 3.09779C16 3.09779 19.9663 2.74194 20.6122 3.38785C21.2581 4.03375 20.9022 8 20.9022 8\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16 20.9022C16 20.9022 19.9663 21.2581 20.6122 20.6122C21.2581 19.9662 20.9022 16 20.9022 16\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.0108 9.99847L20.0625 3.94678\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.99696 14.0024L3.63966 20.3807\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.99733 10.0024L3.84571 3.85889\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M13.9795 14.0024L20.5279 20.4983\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{outline:none;height:100%;display:block;width:100%;position:relative}.ngx-iv-stage{position:relative;block-size:100%;min-block-size:420px;background:light-dark(#f3f4f6,#0b0b0d);border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-iv-image{position:absolute;inset:0;margin:auto;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;cursor:default;transition:transform 60ms linear}.ngx-iv-image.grab{cursor:grab}.ngx-iv-image.grab:active{cursor:grabbing}.ngx-iv-nav{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:40px;block-size:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ngx-iv-nav:hover{background:#000000a6}.ngx-iv-nav--prev{inset-inline-start:.6rem}.ngx-iv-nav--next{inset-inline-end:.6rem}.ngx-iv-close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;inline-size:32px;block-size:32px;border-radius:50%;border:none;background:#00000073;color:#fff;cursor:pointer;z-index:2}.ngx-iv-toolbar{position:absolute;bottom:10px;width:100%;display:flex;align-items:center;justify-content:center}.ngx-iv-toolbar--inner{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem;padding:5px 20px;background:#32323267;border-radius:9999px;box-shadow:0 4px 30px #000a;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(50,50,50,.3)}.ngx-iv-toolbar button{appearance:none;border:none;background:none;color:#f2f2f2;border-radius:8px;inline-size:36px;block-size:36px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s;margin:0}.ngx-iv-toolbar button:hover{transform:scale(1.2)}.ngx-iv-toolbar button svg{stroke:currentColor}.ngx-iv-caption{background-color:#0000002f;position:absolute;top:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.ngx-iv-counter{padding:.2rem .7rem;border-radius:999px;background:#00000040;color:#fff;font-size:.75rem;pointer-events:none}@media(max-width:500px){.ngx-iv-counter{position:absolute;transform:translateY(-160%)}.ngx-iv-toolbar--inner{gap:.3rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-image-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ngx-image-viewer-host', tabindex: '0' }, template: "@if (toolbarConfig().close) {\n  <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"Close\">\u2715</button>\n}\n<div #stage class=\"ngx-iv-stage\" [class.zoomed]=\"isZoomed()\">\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n</div>\n@if (toolbarConfig().prevNext && images().length > 1) {\n  <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"Previous\">\n    \u2039\n  </button>\n  <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"Next\">\n    \u203A\n  </button>\n}\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n<div class=\"ngx-iv-toolbar\">\n  <div class=\"ngx-iv-toolbar--inner\">\n    @if (toolbarConfig().counter && images().length > 1) {\n      <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n    }\n    @if (toolbarConfig().zoomOut) {\n      <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18.5016 18.5L21 21M20 14.5C20 11.4624 17.5376 9 14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20C17.5376 20 20 17.5376 20 14.5Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16.5 14.5H12.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M10 3H14M3 10V14M6.5 21C4.567 21 3 19.433 3 17.5M17.5 3C19.433 3 21 4.567 21 6.5M3 6.5C3 4.567 4.567 3 6.5 3\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().zoomIn) {\n      <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18.5016 19.1217L21 21.6217M20 15.1217C20 12.0842 17.5376 9.62173 14.5 9.62173C11.4624 9.62173 9 12.0842 9 15.1217C9 18.1593 11.4624 20.6217 14.5 20.6217C17.5376 20.6217 20 18.1593 20 15.1217Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.5 13.1217V17.1217M16.5 15.1217H12.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M10 3.62173H14M3 10.6217V14.6217M6.5 21.6217C4.567 21.6217 3 20.0547 3 18.1217M17.5 3.62173C19.433 3.62173 21 5.18873 21 7.12173M3 7.12173C3 5.18873 4.567 3.62173 6.5 3.62173\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().resetZoom) {\n      <button type=\"button\" (click)=\"resetView()\" title=\"Reset zoom\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M17 17L21 21\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.4924 7.5C8.77591 7.54342 8.31993 7.66286 7.99139 7.99139C7.66286 8.31993 7.54342 8.77591 7.5 9.4924M12.5076 7.5C13.2241 7.54342 13.6801 7.66286 14.0086 7.99139C14.3371 8.31993 14.4566 8.77591 14.5 9.4924M14.4923 12.6214C14.4431 13.273 14.3194 13.6978 14.0086 14.0086C13.6801 14.3371 13.2241 14.4566 12.5076 14.5M9.4924 14.5C8.7759 14.4566 8.31993 14.3371 7.99139 14.0086C7.6806 13.6978 7.55693 13.273 7.50772 12.6214\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().rotateLeft) {\n      <button type=\"button\" (click)=\"rotateLeft()\" title=\"Rotate left\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3 15C3 18.2998 3 19.9497 4.02513 20.9749C5.05025 22 6.70017 22 10 22C13.2998 22 14.9497 22 15.9749 20.9749C17 19.9497 17 18.2998 17 15C17 11.7002 17 10.0503 15.9749 9.02513C14.9497 8 13.2998 8 10 8C6.70017 8 5.05025 8 4.02513 9.02513C3 10.0503 3 11.7002 3 15Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.4201 2L13.0744 3.11013C12.3581 3.70104 12 3.99649 12 4.36364L13 4.36364C16.7712 4.36364 18.6569 4.36364 19.8284 5.53521C21 6.70678 21 8.59241 21 12.3636V13\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().rotateRight) {\n      <button type=\"button\" (click)=\"rotateRight()\" title=\"Rotate right\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M7 15C7 18.2998 7 19.9497 8.02513 20.9749C9.05025 22 10.7002 22 14 22C17.2998 22 18.9497 22 19.9749 20.9749C21 19.9497 21 18.2998 21 15C21 11.7002 21 10.0503 19.9749 9.02513C18.9497 8 17.2998 8 14 8C10.7002 8 9.05025 8 8.02513 9.02513C7 10.0503 7 11.7002 7 15Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.57987 2L10.9256 3.11013C11.6419 3.70104 12 3.99649 12 4.36364L11 4.36364C7.22876 4.36364 5.34315 4.36364 4.17157 5.53521C3 6.70678 3 8.5924 3 12.3636V13\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().download) {\n      <button type=\"button\" (click)=\"download()\" title=\"Download\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().print) {\n      <button type=\"button\" (click)=\"print()\" title=\"Print\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M7.35396 18C5.23084 18 4.16928 18 3.41349 17.5468C2.91953 17.2506 2.52158 16.8271 2.26475 16.3242C1.87179 15.5547 1.97742 14.5373 2.18868 12.5025C2.36503 10.8039 2.45321 9.95455 2.88684 9.33081C3.17153 8.92129 3.55659 8.58564 4.00797 8.35353C4.69548 8 5.58164 8 7.35396 8H16.646C18.4184 8 19.3045 8 19.992 8.35353C20.4434 8.58564 20.8285 8.92129 21.1132 9.33081C21.5468 9.95455 21.635 10.8039 21.8113 12.5025C22.0226 14.5373 22.1282 15.5547 21.7352 16.3242C21.4784 16.8271 21.0805 17.2506 20.5865 17.5468C19.8307 18 18.7692 18 16.646 18\"\n            stroke-width=\"1.5\" />\n          <path\n            d=\"M17 8V6C17 4.11438 17 3.17157 16.4142 2.58579C15.8284 2 14.8856 2 13 2H11C9.11438 2 8.17157 2 7.58579 2.58579C7 3.17157 7 4.11438 7 6V8\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M13.9887 16L10.0113 16C9.32602 16 8.98337 16 8.69183 16.1089C8.30311 16.254 7.97026 16.536 7.7462 16.9099C7.57815 17.1904 7.49505 17.5511 7.32884 18.2724C7.06913 19.3995 6.93928 19.963 7.02759 20.4149C7.14535 21.0174 7.51237 21.5274 8.02252 21.7974C8.40513 22 8.94052 22 10.0113 22L13.9887 22C15.0595 22 15.5949 22 15.9775 21.7974C16.4876 21.5274 16.8547 21.0174 16.9724 20.4149C17.0607 19.963 16.9309 19.3995 16.6712 18.2724C16.505 17.5511 16.4218 17.1904 16.2538 16.9099C16.0297 16.536 15.6969 16.254 15.3082 16.1089C15.0166 16 14.674 16 13.9887 16Z\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M18 12H18.009\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().fullscreen) {\n      <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"Fullscreen\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 3.09779C8.00001 3.09779 4.03375 2.74194 3.38784 3.38785C2.74192 4.03375 3.09784 8 3.09784 8\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M8.00001 20.9022C8.00001 20.9022 4.03375 21.2581 3.38784 20.6122C2.74192 19.9662 3.09784 16 3.09784 16\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16 3.09779C16 3.09779 19.9663 2.74194 20.6122 3.38785C21.2581 4.03375 20.9022 8 20.9022 8\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16 20.9022C16 20.9022 19.9663 21.2581 20.6122 20.6122C21.2581 19.9662 20.9022 16 20.9022 16\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.0108 9.99847L20.0625 3.94678\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.99696 14.0024L3.63966 20.3807\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.99733 10.0024L3.84571 3.85889\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M13.9795 14.0024L20.5279 20.4983\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{outline:none;height:100%;display:block;width:100%;position:relative}.ngx-iv-stage{position:relative;block-size:100%;min-block-size:420px;background:light-dark(#f3f4f6,#0b0b0d);border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-iv-image{position:absolute;inset:0;margin:auto;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;cursor:default;transition:transform 60ms linear}.ngx-iv-image.grab{cursor:grab}.ngx-iv-image.grab:active{cursor:grabbing}.ngx-iv-nav{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:40px;block-size:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ngx-iv-nav:hover{background:#000000a6}.ngx-iv-nav--prev{inset-inline-start:.6rem}.ngx-iv-nav--next{inset-inline-end:.6rem}.ngx-iv-close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;inline-size:32px;block-size:32px;border-radius:50%;border:none;background:#00000073;color:#fff;cursor:pointer;z-index:2}.ngx-iv-toolbar{position:absolute;bottom:10px;width:100%;display:flex;align-items:center;justify-content:center}.ngx-iv-toolbar--inner{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem;padding:5px 20px;background:#32323267;border-radius:9999px;box-shadow:0 4px 30px #000a;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(50,50,50,.3)}.ngx-iv-toolbar button{appearance:none;border:none;background:none;color:#f2f2f2;border-radius:8px;inline-size:36px;block-size:36px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s;margin:0}.ngx-iv-toolbar button:hover{transform:scale(1.2)}.ngx-iv-toolbar button svg{stroke:currentColor}.ngx-iv-caption{background-color:#0000002f;position:absolute;top:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.ngx-iv-counter{padding:.2rem .7rem;border-radius:999px;background:#00000040;color:#fff;font-size:.75rem;pointer-events:none}@media(max-width:500px){.ngx-iv-counter{position:absolute;transform:translateY(-160%)}.ngx-iv-toolbar--inner{gap:.3rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: true }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomStep", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], stageEl: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR, NgxImageViewer, clamp, distanceBetweenTouches, downloadImage, midpointOfTouches, printImage, zoomAroundPoint };
+//# sourceMappingURL=ngx-kit-image-viewer.mjs.map

package/fesm2022/ngx-kit-image-viewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-kit-image-viewer.mjs","sources":["../../../projects/libs/image-viewer/contracts/image-viewer-types.ts","../../../projects/libs/image-viewer/utils/download-print.ts","../../../projects/libs/image-viewer/utils/zoom-math.ts","../../../projects/libs/image-viewer/components/image-viewer.component.ts","../../../projects/libs/image-viewer/components/image-viewer.component.html","../../../projects/libs/image-viewer/ngx-kit-image-viewer.ts"],"sourcesContent":["export interface NgxImageViewerItem {\n  src: string;\n  alt?: string;\n  caption?: string;\n  downloadFileName?: string;\n}\n\n\nexport interface NgxImageViewerToolbarConfig {\n  prevNext?: boolean;\n  counter?: boolean;\n  zoomIn?: boolean;\n  zoomOut?: boolean;\n  resetZoom?: boolean;\n  rotateLeft?: boolean;\n  rotateRight?: boolean;\n  download?: boolean;\n  print?: boolean;\n  fullscreen?: boolean;\n  close?: boolean;\n}\n\nexport const NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR: Required<NgxImageViewerToolbarConfig> = {\n  prevNext: true,\n  counter: true,\n  zoomIn: true,\n  zoomOut: true,\n  resetZoom: true,\n  rotateLeft: true,\n  rotateRight: true,\n  download: true,\n  print: true,\n  fullscreen: true,\n  close: false,\n};\n","/** دانلود تصویر با fetch→blob (نام‌گذاریِ درست فایل رو تضمین می‌کنه)؛ اگه CORS اجازه نداد، در تب جدید باز می‌شه */\nexport async function downloadImage(src: string, filename?: string): Promise<void> {\n  try {\n    const response = await fetch(src, { mode: 'cors' });\n    if (!response.ok) throw new Error('fetch failed');\n    const blob = await response.blob();\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = filename || guessFileName(src);\n    document.body.appendChild(a);\n    a.click();\n    a.remove();\n    URL.revokeObjectURL(url);\n  } catch {\n    window.open(src, '_blank', 'noopener,noreferrer');\n  }\n}\n\nfunction guessFileName(src: string): string {\n  try {\n    const url = new URL(src, typeof window !== 'undefined' ? window.location.href : undefined);\n    const last = url.pathname.split('/').pop();\n    return last || 'image';\n  } catch {\n    return 'image';\n  }\n}\n\n/** یه پنجره‌ی جدید فقط با همون تصویر باز می‌کنه و بعد از لود، print می‌زنه؛ با DOM API (نه innerHTML) پس در برابر src مخرب امنه */\nexport function printImage(src: string): void {\n  const win = window.open('', '_blank', 'noopener,noreferrer,width=800,height=600');\n  if (!win) return;\n\n  win.document.title = 'Print';\n  const style = win.document.createElement('style');\n  style.textContent =\n    'body{margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fff;}img{max-width:100%;max-height:100vh;}';\n  win.document.head.appendChild(style);\n\n  const img = win.document.createElement('img');\n  img.onload = () => {\n    win.focus();\n    win.print();\n  };\n  img.src = src;\n  win.document.body.appendChild(img);\n}\n","export interface PanZoomState {\n  zoom: number;\n  panX: number;\n  panY: number;\n}\n\n/**\n * با تغییر zoom، pan رو طوری تنظیم می‌کنه که نقطه‌ی زیر cursor/انگشت‌ها\n * (نسبت به مرکز کانتینر) سرجاش بمونه — یعنی zoom-to-cursor به‌جای\n * zoom-to-center (که تجربه‌ی خیلی بهتری داره، دقیقاً مثل هر ویوئر حرفه‌ای).\n *\n * ریاضیِ پشتش: با transform=\"translate(panX,panY) scale(zoom)\"، موقعیتِ\n * صفحه‌ایِ یه نقطه‌ی محلیِ p (نسبت به مرکز) برابره با\n * center + pan + p*zoom. اول p رو از روی وضعیت فعلی حساب می‌کنیم، بعد pan\n * جدید رو طوری می‌سازیم که با zoom تازه، همون p به همون مختصات صفحه برسه.\n */\nexport function zoomAroundPoint(\n  current: PanZoomState,\n  newZoom: number,\n  cursorX: number,\n  cursorY: number,\n  containerWidth: number,\n  containerHeight: number,\n): PanZoomState {\n  const centerX = containerWidth / 2;\n  const centerY = containerHeight / 2;\n  const localX = (cursorX - centerX - current.panX) / current.zoom;\n  const localY = (cursorY - centerY - current.panY) / current.zoom;\n  return {\n    zoom: newZoom,\n    panX: cursorX - centerX - localX * newZoom,\n    panY: cursorY - centerY - localY * newZoom,\n  };\n}\n\nexport function distanceBetweenTouches(a: Touch, b: Touch): number {\n  return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);\n}\n\nexport function midpointOfTouches(a: Touch, b: Touch): { x: number; y: number } {\n  return { x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 };\n}\n\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  HostListener,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { startDragSession } from 'ngx-kit/core';\nimport {\n  NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR,\n  NgxImageViewerItem,\n  NgxImageViewerToolbarConfig,\n} from '../contracts/image-viewer-types';\nimport { downloadImage, printImage } from '../utils/download-print';\nimport {\n  clamp,\n  distanceBetweenTouches,\n  midpointOfTouches,\n  zoomAroundPoint,\n} from '../utils/zoom-math';\n\n/**\n * ویوئر حرفه‌ایِ تصویر: یه لیست تصویر می‌گیره، اولی رو نشون می‌ده، با\n * دکمه‌های چپ/راست (مثل کاروسل) بین‌شون می‌ره، و یه نوار ابزار کاملاً\n * قابل‌تنظیم (هر دکمه جدا فعال/غیرفعال می‌شه) داره: زوم این/اوت/ریست،\n * چرخش، دانلود، پرینت، تمام‌صفحه.\n *\n * تعامل‌ها:\n *  - اسکرول موس روی تصویر = زوم (نسبت به همون نقطه‌ی زیر cursor، نه مرکز)\n *  - دو انگشتی روی تاچ = پینچ زوم\n *  - وقتی زوم‌شده، درگ با موس یا تک‌انگشتی = پن\n *  - کیبورد: ← → برای قبلی/بعدی، +/- برای زوم، Esc برای closed\n *\n * چون wheel/touchmove باید preventDefault بشن (وگرنه صفحه اسکرول/زوم\n * می‌شه) و انگیولار این ایونت‌ها رو به‌صورت پیش‌فرض passive رجیستر می‌کنه\n * (که توش preventDefault اثر نداره)، این‌ها با addEventListener دستی و\n * {passive:false} وصل می‌شن، نه با بایندینگ تمپلیت.\n *\n * می‌تونه هم مستقیم توی صفحه جا بگیره، هم توسط مصرف‌کننده داخل\n * ngx-kit/dialog (یا هر overlay دیگه) قرار بگیره — خودش به هیچ‌کدوم وابسته\n * نیست، فقط با closed خروجی به بیرون خبر می‌ده که «ببندم».\n */\n@Component({\n  selector: 'ngx-image-viewer',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './image-viewer.component.html',\n  styleUrl: './image-viewer.component.scss',\n  host: { class: 'ngx-image-viewer-host', tabindex: '0' },\n})\nexport class NgxImageViewer {\n  images = input.required<NgxImageViewerItem[]>();\n  startIndex = input<number>(0);\n  toolbar = input<NgxImageViewerToolbarConfig>({});\n  minZoom = input<number>(1);\n  maxZoom = input<number>(6);\n  zoomStep = input<number>(0.4);\n\n  indexChange = output<number>();\n  closed = output<void>();\n\n  protected readonly activeIndex = signal(0);\n  protected readonly zoom = signal(1);\n  protected readonly panX = signal(0);\n  protected readonly panY = signal(0);\n  protected readonly rotation = signal(0);\n\n  protected readonly activeImage = computed<NgxImageViewerItem | undefined>(\n    () => this.images()[this.activeIndex()],\n  );\n\n  protected readonly toolbarConfig = computed(() => ({\n    ...NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR,\n    ...this.toolbar(),\n  }));\n\n  protected readonly isZoomed = computed(() => this.zoom() > 1);\n\n  protected readonly stageTransform = computed(\n    () =>\n      `translate(${this.panX()}px, ${this.panY()}px) scale(${this.zoom()}) rotate(${this.rotation()}deg)`,\n  );\n\n  private readonly stageEl = viewChild<ElementRef<HTMLElement>>('stage');\n  private readonly hostElRef = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private pinchStartDistance = 0;\n  private pinchStartZoom = 1;\n  private stopPanDrag?: () => void;\n\n  constructor() {\n    this.activeIndex.set(this.startIndex());\n\n    effect((onCleanup) => {\n      const stage = this.stageEl()?.nativeElement;\n      if (!stage) return;\n\n      const onWheel = (ev: WheelEvent) => {\n        ev.preventDefault();\n        const rect = stage.getBoundingClientRect();\n        this.applyZoomAt(\n          this.zoom() + (ev.deltaY < 0 ? 1 : -1) * this.zoomStep(),\n          ev.clientX - rect.left,\n          ev.clientY - rect.top,\n          rect.width,\n          rect.height,\n        );\n      };\n\n      const onTouchStart = (ev: TouchEvent) => {\n        if (ev.touches.length === 2) {\n          this.stopPanDrag?.();\n          this.pinchStartDistance = distanceBetweenTouches(ev.touches[0], ev.touches[1]);\n          this.pinchStartZoom = this.zoom();\n        } else if (ev.touches.length === 1 && this.isZoomed()) {\n          this.beginPanDrag(ev);\n        }\n      };\n\n      const onTouchMove = (ev: TouchEvent) => {\n        if (ev.touches.length === 2 && this.pinchStartDistance > 0) {\n          ev.preventDefault();\n          const dist = distanceBetweenTouches(ev.touches[0], ev.touches[1]);\n          const newZoom = (dist / this.pinchStartDistance) * this.pinchStartZoom;\n          const rect = stage.getBoundingClientRect();\n          const mid = midpointOfTouches(ev.touches[0], ev.touches[1]);\n          this.applyZoomAt(newZoom, mid.x - rect.left, mid.y - rect.top, rect.width, rect.height);\n        }\n      };\n\n      const onTouchEnd = () => {\n        this.pinchStartDistance = 0;\n      };\n\n      stage.addEventListener('wheel', onWheel, { passive: false });\n      stage.addEventListener('touchstart', onTouchStart, { passive: false });\n      stage.addEventListener('touchmove', onTouchMove, { passive: false });\n      stage.addEventListener('touchend', onTouchEnd);\n      stage.addEventListener('touchcancel', onTouchEnd);\n\n      onCleanup(() => {\n        stage.removeEventListener('wheel', onWheel);\n        stage.removeEventListener('touchstart', onTouchStart);\n        stage.removeEventListener('touchmove', onTouchMove);\n        stage.removeEventListener('touchend', onTouchEnd);\n        stage.removeEventListener('touchcancel', onTouchEnd);\n      });\n    });\n\n    this.destroyRef.onDestroy(() => this.stopPanDrag?.());\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected onKeydown(ev: KeyboardEvent): void {\n    if (ev.key === 'ArrowLeft') this.prev();\n    else if (ev.key === 'ArrowRight') this.next();\n    else if (ev.key === '+' || ev.key === '=') this.zoomIn();\n    else if (ev.key === '-') this.zoomOut();\n    else if (ev.key === 'Escape') this.closed.emit();\n    else return;\n    ev.preventDefault();\n  }\n\n  protected next(): void {\n    const len = this.images().length;\n    if (len) this.goTo((this.activeIndex() + 1) % len);\n  }\n\n  protected prev(): void {\n    const len = this.images().length;\n    if (len) this.goTo((this.activeIndex() - 1 + len) % len);\n  }\n\n  protected goTo(index: number): void {\n    this.activeIndex.set(index);\n    this.resetView();\n    this.indexChange.emit(index);\n  }\n\n  protected zoomIn(): void {\n    this.setZoomAtCenter(this.zoom() + this.zoomStep());\n  }\n\n  protected zoomOut(): void {\n    this.setZoomAtCenter(this.zoom() - this.zoomStep());\n  }\n\n  protected resetView(): void {\n    this.zoom.set(1);\n    this.panX.set(0);\n    this.panY.set(0);\n    this.rotation.set(0);\n  }\n\n  protected rotateLeft(): void {\n    this.rotation.update((r) => r - 90);\n  }\n\n  protected rotateRight(): void {\n    this.rotation.update((r) => r + 90);\n  }\n\n  protected async download(): Promise<void> {\n    const img = this.activeImage();\n    if (img) await downloadImage(img.src, img.downloadFileName);\n  }\n\n  protected print(): void {\n    const img = this.activeImage();\n    if (img) printImage(img.src);\n  }\n\n  protected toggleFullscreen(): void {\n    const el = this.hostElRef.nativeElement;\n    if (document.fullscreenElement) {\n      document.exitFullscreen();\n    } else {\n      el.requestFullscreen?.();\n    }\n  }\n\n  protected close(): void {\n    this.closed.emit();\n  }\n\n  protected onPanPointerDown(ev: MouseEvent): void {\n    if (!this.isZoomed()) return;\n    this.beginPanDrag(ev);\n  }\n\n  private beginPanDrag(ev: MouseEvent | TouchEvent): void {\n    ev.preventDefault();\n    const startPanX = this.panX();\n    const startPanY = this.panY();\n    const startX = this.clientXOf(ev);\n    const startY = this.clientYOf(ev);\n    this.stopPanDrag?.();\n    this.stopPanDrag = startDragSession({\n      onMove: (moveEv) => {\n        this.panX.set(startPanX + (this.clientXOf(moveEv) - startX));\n        this.panY.set(startPanY + (this.clientYOf(moveEv) - startY));\n      },\n      onEnd: () => {\n        this.stopPanDrag = undefined;\n      },\n    });\n  }\n\n  private setZoomAtCenter(newZoom: number): void {\n    const stage = this.stageEl()?.nativeElement;\n    if (!stage) {\n      this.zoom.set(clamp(newZoom, this.minZoom(), this.maxZoom()));\n      return;\n    }\n    const rect = stage.getBoundingClientRect();\n    this.applyZoomAt(newZoom, rect.width / 2, rect.height / 2, rect.width, rect.height);\n  }\n\n  private applyZoomAt(\n    rawZoom: number,\n    x: number,\n    y: number,\n    containerWidth: number,\n    containerHeight: number,\n  ): void {\n    const newZoom = clamp(rawZoom, this.minZoom(), this.maxZoom());\n    if (newZoom === this.zoom()) return;\n    const result = zoomAroundPoint(\n      { zoom: this.zoom(), panX: this.panX(), panY: this.panY() },\n      newZoom,\n      x,\n      y,\n      containerWidth,\n      containerHeight,\n    );\n    this.zoom.set(result.zoom);\n    this.panX.set(result.panX);\n    this.panY.set(result.panY);\n  }\n\n  private clientXOf(ev: MouseEvent | TouchEvent): number {\n    return 'touches' in ev\n      ? (ev.touches[0]?.clientX ?? ev.changedTouches[0]?.clientX ?? 0)\n      : ev.clientX;\n  }\n\n  private clientYOf(ev: MouseEvent | TouchEvent): number {\n    return 'touches' in ev\n      ? (ev.touches[0]?.clientY ?? ev.changedTouches[0]?.clientY ?? 0)\n      : ev.clientY;\n  }\n}\n","@if (toolbarConfig().close) {\n  <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"Close\">✕</button>\n}\n<div #stage class=\"ngx-iv-stage\" [class.zoomed]=\"isZoomed()\">\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n</div>\n@if (toolbarConfig().prevNext && images().length > 1) {\n  <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"Previous\">\n    ‹\n  </button>\n  <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"Next\">\n    ›\n  </button>\n}\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n<div class=\"ngx-iv-toolbar\">\n  <div class=\"ngx-iv-toolbar--inner\">\n    @if (toolbarConfig().counter && images().length > 1) {\n      <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n    }\n    @if (toolbarConfig().zoomOut) {\n      <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18.5016 18.5L21 21M20 14.5C20 11.4624 17.5376 9 14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20C17.5376 20 20 17.5376 20 14.5Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16.5 14.5H12.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M10 3H14M3 10V14M6.5 21C4.567 21 3 19.433 3 17.5M17.5 3C19.433 3 21 4.567 21 6.5M3 6.5C3 4.567 4.567 3 6.5 3\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().zoomIn) {\n      <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18.5016 19.1217L21 21.6217M20 15.1217C20 12.0842 17.5376 9.62173 14.5 9.62173C11.4624 9.62173 9 12.0842 9 15.1217C9 18.1593 11.4624 20.6217 14.5 20.6217C17.5376 20.6217 20 18.1593 20 15.1217Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.5 13.1217V17.1217M16.5 15.1217H12.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M10 3.62173H14M3 10.6217V14.6217M6.5 21.6217C4.567 21.6217 3 20.0547 3 18.1217M17.5 3.62173C19.433 3.62173 21 5.18873 21 7.12173M3 7.12173C3 5.18873 4.567 3.62173 6.5 3.62173\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().resetZoom) {\n      <button type=\"button\" (click)=\"resetView()\" title=\"Reset zoom\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M17 17L21 21\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.4924 7.5C8.77591 7.54342 8.31993 7.66286 7.99139 7.99139C7.66286 8.31993 7.54342 8.77591 7.5 9.4924M12.5076 7.5C13.2241 7.54342 13.6801 7.66286 14.0086 7.99139C14.3371 8.31993 14.4566 8.77591 14.5 9.4924M14.4923 12.6214C14.4431 13.273 14.3194 13.6978 14.0086 14.0086C13.6801 14.3371 13.2241 14.4566 12.5076 14.5M9.4924 14.5C8.7759 14.4566 8.31993 14.3371 7.99139 14.0086C7.6806 13.6978 7.55693 13.273 7.50772 12.6214\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().rotateLeft) {\n      <button type=\"button\" (click)=\"rotateLeft()\" title=\"Rotate left\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3 15C3 18.2998 3 19.9497 4.02513 20.9749C5.05025 22 6.70017 22 10 22C13.2998 22 14.9497 22 15.9749 20.9749C17 19.9497 17 18.2998 17 15C17 11.7002 17 10.0503 15.9749 9.02513C14.9497 8 13.2998 8 10 8C6.70017 8 5.05025 8 4.02513 9.02513C3 10.0503 3 11.7002 3 15Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.4201 2L13.0744 3.11013C12.3581 3.70104 12 3.99649 12 4.36364L13 4.36364C16.7712 4.36364 18.6569 4.36364 19.8284 5.53521C21 6.70678 21 8.59241 21 12.3636V13\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().rotateRight) {\n      <button type=\"button\" (click)=\"rotateRight()\" title=\"Rotate right\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M7 15C7 18.2998 7 19.9497 8.02513 20.9749C9.05025 22 10.7002 22 14 22C17.2998 22 18.9497 22 19.9749 20.9749C21 19.9497 21 18.2998 21 15C21 11.7002 21 10.0503 19.9749 9.02513C18.9497 8 17.2998 8 14 8C10.7002 8 9.05025 8 8.02513 9.02513C7 10.0503 7 11.7002 7 15Z\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.57987 2L10.9256 3.11013C11.6419 3.70104 12 3.99649 12 4.36364L11 4.36364C7.22876 4.36364 5.34315 4.36364 4.17157 5.53521C3 6.70678 3 8.5924 3 12.3636V13\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().download) {\n      <button type=\"button\" (click)=\"download()\" title=\"Download\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().print) {\n      <button type=\"button\" (click)=\"print()\" title=\"Print\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M7.35396 18C5.23084 18 4.16928 18 3.41349 17.5468C2.91953 17.2506 2.52158 16.8271 2.26475 16.3242C1.87179 15.5547 1.97742 14.5373 2.18868 12.5025C2.36503 10.8039 2.45321 9.95455 2.88684 9.33081C3.17153 8.92129 3.55659 8.58564 4.00797 8.35353C4.69548 8 5.58164 8 7.35396 8H16.646C18.4184 8 19.3045 8 19.992 8.35353C20.4434 8.58564 20.8285 8.92129 21.1132 9.33081C21.5468 9.95455 21.635 10.8039 21.8113 12.5025C22.0226 14.5373 22.1282 15.5547 21.7352 16.3242C21.4784 16.8271 21.0805 17.2506 20.5865 17.5468C19.8307 18 18.7692 18 16.646 18\"\n            stroke-width=\"1.5\" />\n          <path\n            d=\"M17 8V6C17 4.11438 17 3.17157 16.4142 2.58579C15.8284 2 14.8856 2 13 2H11C9.11438 2 8.17157 2 7.58579 2.58579C7 3.17157 7 4.11438 7 6V8\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M13.9887 16L10.0113 16C9.32602 16 8.98337 16 8.69183 16.1089C8.30311 16.254 7.97026 16.536 7.7462 16.9099C7.57815 17.1904 7.49505 17.5511 7.32884 18.2724C7.06913 19.3995 6.93928 19.963 7.02759 20.4149C7.14535 21.0174 7.51237 21.5274 8.02252 21.7974C8.40513 22 8.94052 22 10.0113 22L13.9887 22C15.0595 22 15.5949 22 15.9775 21.7974C16.4876 21.5274 16.8547 21.0174 16.9724 20.4149C17.0607 19.963 16.9309 19.3995 16.6712 18.2724C16.505 17.5511 16.4218 17.1904 16.2538 16.9099C16.0297 16.536 15.6969 16.254 15.3082 16.1089C15.0166 16 14.674 16 13.9887 16Z\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M18 12H18.009\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n    @if (toolbarConfig().fullscreen) {\n      <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"Fullscreen\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 3.09779C8.00001 3.09779 4.03375 2.74194 3.38784 3.38785C2.74192 4.03375 3.09784 8 3.09784 8\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M8.00001 20.9022C8.00001 20.9022 4.03375 21.2581 3.38784 20.6122C2.74192 19.9662 3.09784 16 3.09784 16\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16 3.09779C16 3.09779 19.9663 2.74194 20.6122 3.38785C21.2581 4.03375 20.9022 8 20.9022 8\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M16 20.9022C16 20.9022 19.9663 21.2581 20.6122 20.6122C21.2581 19.9662 20.9022 16 20.9022 16\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M14.0108 9.99847L20.0625 3.94678\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.99696 14.0024L3.63966 20.3807\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.99733 10.0024L3.84571 3.85889\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M13.9795 14.0024L20.5279 20.4983\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-kit-notify.mjs

@@ -167,11 +167,11 @@ class NgxNotificationComponent {
         return div.textContent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxNotificationComponent, isStandalone: true, selector: "ngx-notification", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onFinish: "onFinish" }, viewQueries: [{ propertyName: "bar", first: true, predicate: ["bar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;width:500px;max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}::ng-deep html[dir=rtl] .ngx-notify-content,::ng-deep body[dir=ltr] .ngx-notify-content{border-radius:0 0 15px}::ng-deep html[dir=rtl] .ngx-notify-progress,::ng-deep body[dir=ltr] .ngx-notify-progress{left:0;right:60px}::ng-deep html[dir=rtl] .ngx-notify-progress .progress-bar,::ng-deep body[dir=ltr] .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxNotificationComponent, isStandalone: true, selector: "ngx-notification", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onFinish: "onFinish" }, viewQueries: [{ propertyName: "bar", first: true, predicate: ["bar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;width:500px;max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}:host-context([dir=rtl]) .ngx-notify-content{border-radius:0 0 15px}:host-context([dir=rtl]) .ngx-notify-progress{left:0;right:60px}:host-context([dir=rtl]) .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-notification', imports: [CommonModule], template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;width:500px;max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}::ng-deep html[dir=rtl] .ngx-notify-content,::ng-deep body[dir=ltr] .ngx-notify-content{border-radius:0 0 15px}::ng-deep html[dir=rtl] .ngx-notify-progress,::ng-deep body[dir=ltr] .ngx-notify-progress{left:0;right:60px}::ng-deep html[dir=rtl] .ngx-notify-progress .progress-bar,::ng-deep body[dir=ltr] .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"] }]
+            args: [{ selector: 'ngx-notification', imports: [CommonModule], template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;width:500px;max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}:host-context([dir=rtl]) .ngx-notify-content{border-radius:0 0 15px}:host-context([dir=rtl]) .ngx-notify-progress{left:0;right:60px}:host-context([dir=rtl]) .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: true }] }], containerClass: [{
                 type: Input
             }], bar: [{ type: i0.ViewChild, args: ['bar', { isSignal: true }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onFinish: [{ type: i0.Output, args: ["onFinish"] }] } });