ngx-kit 9.0.1 → 9.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +1 -1
  2. package/drag-resize/README.md +42 -5
  3. package/fesm2022/ngx-kit-drag-resize.mjs +868 -201
  4. package/fesm2022/ngx-kit-drag-resize.mjs.map +1 -1
  5. package/fesm2022/ngx-kit-image-viewer.mjs +2 -23
  6. package/fesm2022/ngx-kit-image-viewer.mjs.map +1 -1
  7. package/fesm2022/ngx-kit-media-control.mjs +2 -2
  8. package/fesm2022/ngx-kit-media-control.mjs.map +1 -1
  9. package/fesm2022/ngx-kit-notify.mjs +2 -2
  10. package/fesm2022/ngx-kit-side-nav.mjs +2 -0
  11. package/fesm2022/ngx-kit-side-nav.mjs.map +1 -1
  12. package/package.json +1 -1
  13. package/types/ngx-kit-drag-resize.d.ts +99 -9
  14. package/types/ngx-kit-image-viewer.d.ts +0 -21
  15. package/types/ngx-kit-side-nav.d.ts +1 -1
package/fesm2022/ngx-kit-image-viewer.mjs CHANGED
@@ -96,27 +96,6 @@ function clamp(value, min, max) {
96
96
  return Math.min(max, Math.max(min, value));
97
97
  }
98
98
 
99
- /**
100
- * ویوئر حرفه‌ایِ تصویر: یه لیست تصویر می‌گیره، اولی رو نشون می‌ده، با
101
- * دکمه‌های چپ/راست (مثل کاروسل) بین‌شون می‌ره، و یه نوار ابزار کاملاً
102
- * قابل‌تنظیم (هر دکمه جدا فعال/غیرفعال می‌شه) داره: زوم این/اوت/ریست،
103
- * چرخش، دانلود، پرینت، تمام‌صفحه.
104
- *
105
- * تعامل‌ها:
106
- * - اسکرول موس روی تصویر = زوم (نسبت به همون نقطه‌ی زیر cursor، نه مرکز)
107
- * - دو انگشتی روی تاچ = پینچ زوم
108
- * - وقتی زوم‌شده، درگ با موس یا تک‌انگشتی = پن
109
- * - کیبورد: ← → برای قبلی/بعدی، +/- برای زوم، Esc برای closed
110
- *
111
- * چون wheel/touchmove باید preventDefault بشن (وگرنه صفحه اسکرول/زوم
112
- * می‌شه) و انگیولار این ایونت‌ها رو به‌صورت پیش‌فرض passive رجیستر می‌کنه
113
- * (که توش preventDefault اثر نداره)، این‌ها با addEventListener دستی و
114
- * {passive:false} وصل می‌شن، نه با بایندینگ تمپلیت.
115
- *
116
- * می‌تونه هم مستقیم توی صفحه جا بگیره، هم توسط مصرف‌کننده داخل
117
- * ngx-kit/dialog (یا هر overlay دیگه) قرار بگیره — خودش به هیچ‌کدوم وابسته
118
- * نیست، فقط با closed خروجی به بیرون خبر می‌ده که «ببندم».
119
- */
120
99
  class NgxImageViewer {
121
100
  images = input.required(/* @ts-ignore */
122
101
  ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
@@ -330,11 +309,11 @@ class NgxImageViewer {
330
309
  : ev.clientY;
331
310
  }
332
311
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
333
- 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 });
312
+ 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}.ngx-iv-toolbar button{inline-size:28px;block-size:28px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
334
313
  }
335
314
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageViewer, decorators: [{
336
315
  type: Component,
337
- 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"] }]
316
+ 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}.ngx-iv-toolbar button{inline-size:28px;block-size:28px}}\n"] }]
338
317
  }], 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: [{
339
318
  type: HostListener,
340
319
  args: ['keydown', ['$event']]
package/fesm2022/ngx-kit-image-viewer.mjs.map CHANGED
@@ -1 +1 @@
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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"}
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@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-media-control.mjs CHANGED
@@ -1566,11 +1566,11 @@ class NgxMediaControl {
1566
1566
  }
1567
1567
  }
1568
1568
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
1569
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxMediaControl, isStandalone: true, selector: "ngx-media-control", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, showSpeed: { classPropertyName: "showSpeed", publicName: "showSpeed", isSignal: true, isRequired: false, transformFunction: null }, showVolume: { classPropertyName: "showVolume", publicName: "showVolume", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, fetchHeaders: { classPropertyName: "fetchHeaders", publicName: "fetchHeaders", isSignal: true, isRequired: false, transformFunction: null }, fileList: { classPropertyName: "fileList", publicName: "fileList", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trackChange: "trackChange", error: "error" }, providers: [NgxMediaFacade], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "videoHostRef", first: true, predicate: ["videoHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"media-player\" [class.linear]=\"linear()\" [class.video-mode]=\"effectiveKind() === 'video'\" #container>\n @if (showFileName()) {\n <span class=\"file-info\">{{ fileName() }}</span>\n }\n\n @if (effectiveKind() === 'video') {\n <div class=\"video-host\" #videoHost></div>\n }\n\n <div class=\"controls\">\n <div class=\"time-seeker\">\n <span>{{ currentTimeDisplay() }}</span>\n <input\n class=\"seek-slider\"\n type=\"range\"\n min=\"0\"\n [max]=\"state().duration || 0\"\n [value]=\"displaySeekTime()\"\n step=\".1\"\n (input)=\"onSeekInput($event)\"\n (change)=\"onSeekCommit($event)\" />\n <span>{{ totalTimeDisplay() }}</span>\n @if (isBuffering()) {\n <div class=\"simp-buffer\"></div>\n }\n </div>\n <div class=\"buttons\">\n <button title=\"skip track -10\" (click)=\"skipTrack(-10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M7 9l-3 -3l3 -3\"></path>\n <path d=\"M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11\"></path>\n </svg>\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"previous()\" title=\"previous\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 5v14l-12 -7z\" />\n <path d=\"M4 5l0 14\" />\n </svg>\n </button>\n }\n\n <button\n (click)=\"playPause()\"\n [title]=\"hasLoadError() ? 'Error on load media source' : isPlaying() ? 'pause' : 'play'\"\n [disabled]=\"hasLoadError()\">\n @if (!isPlaying()) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z\" />\n <path\n d=\"M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z\" />\n </svg>\n }\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"next()\" title=\"next\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M4 5v14l12 -7z\" />\n <path d=\"M20 5l0 14\" />\n </svg>\n </button>\n }\n <button title=\"skip track +10\" (click)=\"skipTrack(10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M17 9l3 -3l-3 -3\" />\n <path d=\"M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11\" />\n </svg>\n </button>\n\n @if (showVolume()) {\n <div class=\"volume-control\">\n <button (click)=\"muteUnmute()\" title=\"mute volume\">\n @if (state().muted) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M18 10L22 14M18 14L22 10\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15\" />\n <path d=\"M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17\" />\n </svg>\n }\n </button>\n <input\n class=\"volume-slider\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n [value]=\"state().volume\"\n (input)=\"changeVolume($event)\" />\n </div>\n }\n @if (showSpeed()) {\n <div class=\"speed-control\">\n <button (click)=\"decreaseSpeed()\" title=\"decrease speed\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 12L4 12\" /></svg>\n </button>\n <span class=\"speed-display\">{{ speedDisplay() }}</span>\n <button (click)=\"increaseSpeed()\" title=\"increase speed\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 4V20\" />\n <path d=\"M4 12H20\" />\n </svg>\n </button>\n </div>\n }\n\n @if (canFullscreen()) {\n <button (click)=\"toggleFullscreen()\" title=\"fullscreen\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" /></svg>\n </button>\n }\n @if (canPip()) {\n <button (click)=\"togglePictureInPicture()\" title=\"picture in picture\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"1\"></rect><rect x=\"12\" y=\"11\" width=\"7\" height=\"5\" rx=\"1\"></rect></svg>\n </button>\n }\n\n <div class=\"spacer\"></div>\n @if (showList()) {\n <button (click)=\"togglePlaylistPanel()\" title=\"Play list\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M2 3L20 3\" />\n <path d=\"M2 10L15 10\" />\n <path d=\"M2 17L9 17\" />\n </svg>\n </button>\n }\n @if (download()) {\n <button (click)=\"downloadCurrentFile()\" title=\"download\" [disabled]=\"downloading()\">\n <svg viewBox=\"0 0 24 24\">\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 <path d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\" />\n </svg>\n </button>\n }\n </div>\n </div>\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n <button (click)=\"retryCurrent()\" title=\"retry\">retry</button>\n </div>\n }\n</div>\n\n@if (togglePlayList()) {\n <div class=\"play-list\" [class.linear]=\"linear()\">\n @if (playlist().length === 0) {\n <div class=\"list-item disabled\">No any record</div>\n }\n @for (item of playlist(); track $index; let i = $index) {\n <div class=\"list-item\" [class.active]=\"i === currentIndex()\" (click)=\"onClickPlayList(i)\">\n {{ item.title }}\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-block;width:500px;--ngx-audio-control-bg: light-dark(#fff, #222);--ngx-audio-control-text: light-dark(#000, #f4f5f7);--ngx-audio-control-icon: light-dark(#183153, #009688);--ngx-audio-control-border: light-dark(#e5e5e5, #474747);--ngx-audio-control-disable: light-dark(#e5e5e5, #4f4e4e);--ngx-audio-control-slider: light-dark(#ddd, #00968842);--ngx-audio-control-primary: light-dark(#007bff, #009688);--ngx-audio-control-primary-fg: light-dark(#f8f8f8, #f8f8f8);--ngx-audio-control-shadow: light-dark(#0000006e, #0000006e);--ngx-audio-control-error: light-dark(#e40505, #ff0000d3)}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.media-player,.play-list{background-color:var(--ngx-audio-control-bg);border-radius:10px;padding:10px;box-shadow:0 0 6px 0 var(--ngx-audio-control-shadow);position:relative;overflow:hidden;direction:ltr;max-width:100%}.media-player.linear .controls,.play-list.linear .controls{display:flex;flex-wrap:wrap;flex-direction:row-reverse}.controls .time-seeker{display:flex;align-items:center;flex:1 0 0;min-width:200px}.controls .buttons{display:flex;align-items:center;flex-wrap:wrap}.error-message{color:var(--ngx-audio-control-error)}button{background-color:transparent;border:none;font-size:18px;padding:5px;width:32px;height:32px;border:1px solid var(--ngx-audio-control-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 2px;color:var(--ngx-audio-control-icon)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;background-color:var(--ngx-audio-control-disable)}button:focus{outline:none}.seek-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;background-color:var(--ngx-audio-control-slider);outline:none;border-radius:5px;cursor:pointer}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.seek-slider::-moz-range-thumb{width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.speed-control{display:flex;justify-content:space-between;align-items:center}.speed-display{width:30px;text-align:center;overflow:hidden;font-size:12px;font-family:sans-serif;font-weight:100}.volume-control{display:flex;align-items:center;flex:auto;min-width:100px;max-width:200px}.spacer{flex:auto}.volume-slider{margin-left:10px;width:10px;flex:auto}.play-list{margin:3px 0}.play-list .list-item{border-bottom:1px var(--ngx-audio-control-border) solid;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-list .list-item:hover:not(.disabled){cursor:pointer;background-color:#7a7a7a2f;color:var(--ngx-audio-control-text)}.play-list .list-item.active{background-color:var(--ngx-audio-control-primary);color:var(--ngx-audio-control-primary-fg)}.simp-buffer{animation:audio-progress 1s linear infinite;background-image:linear-gradient(-45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;width:100%;height:4px;position:absolute;bottom:0;left:0;right:0}@keyframes audio-progress{to{background-position:25px 0}}.file-info{overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.media-player.video-mode .video-host{position:relative;width:100%;background:#000;aspect-ratio:16/9}.media-player.video-mode .video-host ::ng-deep .ngx-media-video-element{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1569
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxMediaControl, isStandalone: true, selector: "ngx-media-control", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, showSpeed: { classPropertyName: "showSpeed", publicName: "showSpeed", isSignal: true, isRequired: false, transformFunction: null }, showVolume: { classPropertyName: "showVolume", publicName: "showVolume", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, fetchHeaders: { classPropertyName: "fetchHeaders", publicName: "fetchHeaders", isSignal: true, isRequired: false, transformFunction: null }, fileList: { classPropertyName: "fileList", publicName: "fileList", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trackChange: "trackChange", error: "error" }, providers: [NgxMediaFacade], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "videoHostRef", first: true, predicate: ["videoHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"media-player\" [class.linear]=\"linear()\" [class.video-mode]=\"effectiveKind() === 'video'\" #container>\n @if (showFileName()) {\n <span class=\"file-info\">{{ fileName() }}</span>\n }\n\n @if (effectiveKind() === 'video') {\n <div class=\"video-host\" #videoHost></div>\n }\n\n <div class=\"controls\">\n <div class=\"time-seeker\">\n <span>{{ currentTimeDisplay() }}</span>\n <input\n class=\"seek-slider\"\n type=\"range\"\n min=\"0\"\n [max]=\"state().duration || 0\"\n [value]=\"displaySeekTime()\"\n step=\".1\"\n (input)=\"onSeekInput($event)\"\n (change)=\"onSeekCommit($event)\" />\n <span>{{ totalTimeDisplay() }}</span>\n @if (isBuffering()) {\n <div class=\"simp-buffer\"></div>\n }\n </div>\n <div class=\"buttons\">\n <button title=\"skip track -10\" (click)=\"skipTrack(-10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M7 9l-3 -3l3 -3\"></path>\n <path d=\"M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11\"></path>\n </svg>\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"previous()\" title=\"previous\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 5v14l-12 -7z\" />\n <path d=\"M4 5l0 14\" />\n </svg>\n </button>\n }\n\n <button\n (click)=\"playPause()\"\n [title]=\"hasLoadError() ? 'Error on load media source' : isPlaying() ? 'pause' : 'play'\"\n [disabled]=\"hasLoadError()\">\n @if (!isPlaying()) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z\" />\n <path\n d=\"M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z\" />\n </svg>\n }\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"next()\" title=\"next\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M4 5v14l12 -7z\" />\n <path d=\"M20 5l0 14\" />\n </svg>\n </button>\n }\n <button title=\"skip track +10\" (click)=\"skipTrack(10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M17 9l3 -3l-3 -3\" />\n <path d=\"M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11\" />\n </svg>\n </button>\n\n @if (showVolume()) {\n <div class=\"volume-control\">\n <button (click)=\"muteUnmute()\" title=\"mute volume\">\n @if (state().muted) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M18 10L22 14M18 14L22 10\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15\" />\n <path d=\"M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17\" />\n </svg>\n }\n </button>\n <input\n class=\"volume-slider\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n [value]=\"state().volume\"\n (input)=\"changeVolume($event)\" />\n </div>\n }\n @if (showSpeed()) {\n <div class=\"speed-control\">\n <button (click)=\"decreaseSpeed()\" title=\"decrease speed\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 12L4 12\" /></svg>\n </button>\n <span class=\"speed-display\">{{ speedDisplay() }}</span>\n <button (click)=\"increaseSpeed()\" title=\"increase speed\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 4V20\" />\n <path d=\"M4 12H20\" />\n </svg>\n </button>\n </div>\n }\n\n @if (canFullscreen()) {\n <button (click)=\"toggleFullscreen()\" title=\"fullscreen\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" /></svg>\n </button>\n }\n @if (canPip()) {\n <button (click)=\"togglePictureInPicture()\" title=\"picture in picture\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"1\"></rect><rect x=\"12\" y=\"11\" width=\"7\" height=\"5\" rx=\"1\"></rect></svg>\n </button>\n }\n\n <div class=\"spacer\"></div>\n @if (showList()) {\n <button (click)=\"togglePlaylistPanel()\" title=\"Play list\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M2 3L20 3\" />\n <path d=\"M2 10L15 10\" />\n <path d=\"M2 17L9 17\" />\n </svg>\n </button>\n }\n @if (download()) {\n <button (click)=\"downloadCurrentFile()\" title=\"download\" [disabled]=\"downloading()\">\n <svg viewBox=\"0 0 24 24\">\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 <path d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\" />\n </svg>\n </button>\n }\n </div>\n </div>\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n <button (click)=\"retryCurrent()\" title=\"retry\">retry</button>\n </div>\n }\n</div>\n\n@if (togglePlayList()) {\n <div class=\"play-list\" [class.linear]=\"linear()\">\n @if (playlist().length === 0) {\n <div class=\"list-item disabled\">No any record</div>\n }\n @for (item of playlist(); track $index; let i = $index) {\n <div class=\"list-item\" [class.active]=\"i === currentIndex()\" (click)=\"onClickPlayList(i)\">\n {{ item.title }}\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-block;width:500px;max-width:100%;--ngx-audio-control-bg: light-dark(#fff, #222);--ngx-audio-control-text: light-dark(#000, #f4f5f7);--ngx-audio-control-icon: light-dark(#183153, #009688);--ngx-audio-control-border: light-dark(#e5e5e5, #474747);--ngx-audio-control-disable: light-dark(#e5e5e5, #4f4e4e);--ngx-audio-control-slider: light-dark(#ddd, #00968842);--ngx-audio-control-primary: light-dark(#007bff, #009688);--ngx-audio-control-primary-fg: light-dark(#f8f8f8, #f8f8f8);--ngx-audio-control-shadow: light-dark(#0000006e, #0000006e);--ngx-audio-control-error: light-dark(#e40505, #ff0000d3)}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.media-player,.play-list{background-color:var(--ngx-audio-control-bg);border-radius:10px;padding:10px;box-shadow:0 0 6px 0 var(--ngx-audio-control-shadow);position:relative;overflow:hidden;direction:ltr;max-width:100%}.media-player.linear .controls,.play-list.linear .controls{display:flex;flex-wrap:wrap;flex-direction:row-reverse}.controls .time-seeker{display:flex;align-items:center;flex:1 0 0;min-width:200px}.controls .buttons{display:flex;align-items:center;flex-wrap:wrap}.error-message{color:var(--ngx-audio-control-error)}button{background-color:transparent;border:none;font-size:18px;padding:5px;width:32px;height:32px;border:1px solid var(--ngx-audio-control-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 2px;color:var(--ngx-audio-control-icon)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;background-color:var(--ngx-audio-control-disable)}button:focus{outline:none}.seek-slider,.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;background-color:var(--ngx-audio-control-slider);outline:none;border-radius:5px;cursor:pointer}.seek-slider::-webkit-slider-thumb,.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background-color:var(--ngx-audio-control-slider);border-radius:50%;cursor:pointer}.seek-slider::-moz-range-thumb,.volume-slider::-moz-range-thumb{width:15px;height:15px;background-color:var(--ngx-audio-control-slider);border-radius:50%;cursor:pointer}.speed-control{display:flex;justify-content:space-between;align-items:center}.speed-display{width:30px;text-align:center;overflow:hidden;font-size:12px;font-family:sans-serif;font-weight:100}.volume-control{display:flex;align-items:center;flex:auto;min-width:100px;max-width:200px}.spacer{flex:auto}.volume-slider{margin-left:10px;width:10px;flex:auto}.play-list{margin:3px 0}.play-list .list-item{border-bottom:1px var(--ngx-audio-control-border) solid;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-list .list-item:hover:not(.disabled){cursor:pointer;background-color:#7a7a7a2f;color:var(--ngx-audio-control-text)}.play-list .list-item.active{background-color:var(--ngx-audio-control-primary);color:var(--ngx-audio-control-primary-fg)}.simp-buffer{animation:audio-progress 1s linear infinite;background-image:linear-gradient(-45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;width:100%;height:4px;position:absolute;bottom:0;left:0;right:0}@keyframes audio-progress{to{background-position:25px 0}}.file-info{overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.media-player.video-mode .video-host{position:relative;width:100%;background:#000;aspect-ratio:16/9}.media-player.video-mode .video-host ::ng-deep .ngx-media-video-element{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1570
1570
  }
1571
1571
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaControl, decorators: [{
1572
1572
  type: Component,
1573
- args: [{ standalone: true, selector: 'ngx-media-control', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgxMediaFacade], template: "<div class=\"media-player\" [class.linear]=\"linear()\" [class.video-mode]=\"effectiveKind() === 'video'\" #container>\n @if (showFileName()) {\n <span class=\"file-info\">{{ fileName() }}</span>\n }\n\n @if (effectiveKind() === 'video') {\n <div class=\"video-host\" #videoHost></div>\n }\n\n <div class=\"controls\">\n <div class=\"time-seeker\">\n <span>{{ currentTimeDisplay() }}</span>\n <input\n class=\"seek-slider\"\n type=\"range\"\n min=\"0\"\n [max]=\"state().duration || 0\"\n [value]=\"displaySeekTime()\"\n step=\".1\"\n (input)=\"onSeekInput($event)\"\n (change)=\"onSeekCommit($event)\" />\n <span>{{ totalTimeDisplay() }}</span>\n @if (isBuffering()) {\n <div class=\"simp-buffer\"></div>\n }\n </div>\n <div class=\"buttons\">\n <button title=\"skip track -10\" (click)=\"skipTrack(-10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M7 9l-3 -3l3 -3\"></path>\n <path d=\"M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11\"></path>\n </svg>\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"previous()\" title=\"previous\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 5v14l-12 -7z\" />\n <path d=\"M4 5l0 14\" />\n </svg>\n </button>\n }\n\n <button\n (click)=\"playPause()\"\n [title]=\"hasLoadError() ? 'Error on load media source' : isPlaying() ? 'pause' : 'play'\"\n [disabled]=\"hasLoadError()\">\n @if (!isPlaying()) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z\" />\n <path\n d=\"M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z\" />\n </svg>\n }\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"next()\" title=\"next\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M4 5v14l12 -7z\" />\n <path d=\"M20 5l0 14\" />\n </svg>\n </button>\n }\n <button title=\"skip track +10\" (click)=\"skipTrack(10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M17 9l3 -3l-3 -3\" />\n <path d=\"M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11\" />\n </svg>\n </button>\n\n @if (showVolume()) {\n <div class=\"volume-control\">\n <button (click)=\"muteUnmute()\" title=\"mute volume\">\n @if (state().muted) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M18 10L22 14M18 14L22 10\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15\" />\n <path d=\"M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17\" />\n </svg>\n }\n </button>\n <input\n class=\"volume-slider\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n [value]=\"state().volume\"\n (input)=\"changeVolume($event)\" />\n </div>\n }\n @if (showSpeed()) {\n <div class=\"speed-control\">\n <button (click)=\"decreaseSpeed()\" title=\"decrease speed\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 12L4 12\" /></svg>\n </button>\n <span class=\"speed-display\">{{ speedDisplay() }}</span>\n <button (click)=\"increaseSpeed()\" title=\"increase speed\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 4V20\" />\n <path d=\"M4 12H20\" />\n </svg>\n </button>\n </div>\n }\n\n @if (canFullscreen()) {\n <button (click)=\"toggleFullscreen()\" title=\"fullscreen\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" /></svg>\n </button>\n }\n @if (canPip()) {\n <button (click)=\"togglePictureInPicture()\" title=\"picture in picture\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"1\"></rect><rect x=\"12\" y=\"11\" width=\"7\" height=\"5\" rx=\"1\"></rect></svg>\n </button>\n }\n\n <div class=\"spacer\"></div>\n @if (showList()) {\n <button (click)=\"togglePlaylistPanel()\" title=\"Play list\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M2 3L20 3\" />\n <path d=\"M2 10L15 10\" />\n <path d=\"M2 17L9 17\" />\n </svg>\n </button>\n }\n @if (download()) {\n <button (click)=\"downloadCurrentFile()\" title=\"download\" [disabled]=\"downloading()\">\n <svg viewBox=\"0 0 24 24\">\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 <path d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\" />\n </svg>\n </button>\n }\n </div>\n </div>\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n <button (click)=\"retryCurrent()\" title=\"retry\">retry</button>\n </div>\n }\n</div>\n\n@if (togglePlayList()) {\n <div class=\"play-list\" [class.linear]=\"linear()\">\n @if (playlist().length === 0) {\n <div class=\"list-item disabled\">No any record</div>\n }\n @for (item of playlist(); track $index; let i = $index) {\n <div class=\"list-item\" [class.active]=\"i === currentIndex()\" (click)=\"onClickPlayList(i)\">\n {{ item.title }}\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-block;width:500px;--ngx-audio-control-bg: light-dark(#fff, #222);--ngx-audio-control-text: light-dark(#000, #f4f5f7);--ngx-audio-control-icon: light-dark(#183153, #009688);--ngx-audio-control-border: light-dark(#e5e5e5, #474747);--ngx-audio-control-disable: light-dark(#e5e5e5, #4f4e4e);--ngx-audio-control-slider: light-dark(#ddd, #00968842);--ngx-audio-control-primary: light-dark(#007bff, #009688);--ngx-audio-control-primary-fg: light-dark(#f8f8f8, #f8f8f8);--ngx-audio-control-shadow: light-dark(#0000006e, #0000006e);--ngx-audio-control-error: light-dark(#e40505, #ff0000d3)}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.media-player,.play-list{background-color:var(--ngx-audio-control-bg);border-radius:10px;padding:10px;box-shadow:0 0 6px 0 var(--ngx-audio-control-shadow);position:relative;overflow:hidden;direction:ltr;max-width:100%}.media-player.linear .controls,.play-list.linear .controls{display:flex;flex-wrap:wrap;flex-direction:row-reverse}.controls .time-seeker{display:flex;align-items:center;flex:1 0 0;min-width:200px}.controls .buttons{display:flex;align-items:center;flex-wrap:wrap}.error-message{color:var(--ngx-audio-control-error)}button{background-color:transparent;border:none;font-size:18px;padding:5px;width:32px;height:32px;border:1px solid var(--ngx-audio-control-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 2px;color:var(--ngx-audio-control-icon)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;background-color:var(--ngx-audio-control-disable)}button:focus{outline:none}.seek-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;background-color:var(--ngx-audio-control-slider);outline:none;border-radius:5px;cursor:pointer}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.seek-slider::-moz-range-thumb{width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.speed-control{display:flex;justify-content:space-between;align-items:center}.speed-display{width:30px;text-align:center;overflow:hidden;font-size:12px;font-family:sans-serif;font-weight:100}.volume-control{display:flex;align-items:center;flex:auto;min-width:100px;max-width:200px}.spacer{flex:auto}.volume-slider{margin-left:10px;width:10px;flex:auto}.play-list{margin:3px 0}.play-list .list-item{border-bottom:1px var(--ngx-audio-control-border) solid;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-list .list-item:hover:not(.disabled){cursor:pointer;background-color:#7a7a7a2f;color:var(--ngx-audio-control-text)}.play-list .list-item.active{background-color:var(--ngx-audio-control-primary);color:var(--ngx-audio-control-primary-fg)}.simp-buffer{animation:audio-progress 1s linear infinite;background-image:linear-gradient(-45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;width:100%;height:4px;position:absolute;bottom:0;left:0;right:0}@keyframes audio-progress{to{background-position:25px 0}}.file-info{overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.media-player.video-mode .video-host{position:relative;width:100%;background:#000;aspect-ratio:16/9}.media-player.video-mode .video-host ::ng-deep .ngx-media-video-element{width:100%;height:100%;display:block}\n"] }]
1573
+ args: [{ standalone: true, selector: 'ngx-media-control', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgxMediaFacade], template: "<div class=\"media-player\" [class.linear]=\"linear()\" [class.video-mode]=\"effectiveKind() === 'video'\" #container>\n @if (showFileName()) {\n <span class=\"file-info\">{{ fileName() }}</span>\n }\n\n @if (effectiveKind() === 'video') {\n <div class=\"video-host\" #videoHost></div>\n }\n\n <div class=\"controls\">\n <div class=\"time-seeker\">\n <span>{{ currentTimeDisplay() }}</span>\n <input\n class=\"seek-slider\"\n type=\"range\"\n min=\"0\"\n [max]=\"state().duration || 0\"\n [value]=\"displaySeekTime()\"\n step=\".1\"\n (input)=\"onSeekInput($event)\"\n (change)=\"onSeekCommit($event)\" />\n <span>{{ totalTimeDisplay() }}</span>\n @if (isBuffering()) {\n <div class=\"simp-buffer\"></div>\n }\n </div>\n <div class=\"buttons\">\n <button title=\"skip track -10\" (click)=\"skipTrack(-10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M7 9l-3 -3l3 -3\"></path>\n <path d=\"M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11\"></path>\n </svg>\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"previous()\" title=\"previous\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 5v14l-12 -7z\" />\n <path d=\"M4 5l0 14\" />\n </svg>\n </button>\n }\n\n <button\n (click)=\"playPause()\"\n [title]=\"hasLoadError() ? 'Error on load media source' : isPlaying() ? 'pause' : 'play'\"\n [disabled]=\"hasLoadError()\">\n @if (!isPlaying()) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z\" />\n <path\n d=\"M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z\" />\n </svg>\n }\n </button>\n\n @if (playlist().length > 1) {\n <button (click)=\"next()\" title=\"next\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M4 5v14l12 -7z\" />\n <path d=\"M20 5l0 14\" />\n </svg>\n </button>\n }\n <button title=\"skip track +10\" (click)=\"skipTrack(10)\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M17 9l3 -3l-3 -3\" />\n <path d=\"M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11\" />\n </svg>\n </button>\n\n @if (showVolume()) {\n <div class=\"volume-control\">\n <button (click)=\"muteUnmute()\" title=\"mute volume\">\n @if (state().muted) {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M18 10L22 14M18 14L22 10\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n <path d=\"M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15\" />\n <path d=\"M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17\" />\n </svg>\n }\n </button>\n <input\n class=\"volume-slider\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n [value]=\"state().volume\"\n (input)=\"changeVolume($event)\" />\n </div>\n }\n @if (showSpeed()) {\n <div class=\"speed-control\">\n <button (click)=\"decreaseSpeed()\" title=\"decrease speed\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 12L4 12\" /></svg>\n </button>\n <span class=\"speed-display\">{{ speedDisplay() }}</span>\n <button (click)=\"increaseSpeed()\" title=\"increase speed\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 4V20\" />\n <path d=\"M4 12H20\" />\n </svg>\n </button>\n </div>\n }\n\n @if (canFullscreen()) {\n <button (click)=\"toggleFullscreen()\" title=\"fullscreen\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" /></svg>\n </button>\n }\n @if (canPip()) {\n <button (click)=\"togglePictureInPicture()\" title=\"picture in picture\">\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"1\"></rect><rect x=\"12\" y=\"11\" width=\"7\" height=\"5\" rx=\"1\"></rect></svg>\n </button>\n }\n\n <div class=\"spacer\"></div>\n @if (showList()) {\n <button (click)=\"togglePlaylistPanel()\" title=\"Play list\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M2 3L20 3\" />\n <path d=\"M2 10L15 10\" />\n <path d=\"M2 17L9 17\" />\n </svg>\n </button>\n }\n @if (download()) {\n <button (click)=\"downloadCurrentFile()\" title=\"download\" [disabled]=\"downloading()\">\n <svg viewBox=\"0 0 24 24\">\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 <path d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\" />\n </svg>\n </button>\n }\n </div>\n </div>\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n <button (click)=\"retryCurrent()\" title=\"retry\">retry</button>\n </div>\n }\n</div>\n\n@if (togglePlayList()) {\n <div class=\"play-list\" [class.linear]=\"linear()\">\n @if (playlist().length === 0) {\n <div class=\"list-item disabled\">No any record</div>\n }\n @for (item of playlist(); track $index; let i = $index) {\n <div class=\"list-item\" [class.active]=\"i === currentIndex()\" (click)=\"onClickPlayList(i)\">\n {{ item.title }}\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-block;width:500px;max-width:100%;--ngx-audio-control-bg: light-dark(#fff, #222);--ngx-audio-control-text: light-dark(#000, #f4f5f7);--ngx-audio-control-icon: light-dark(#183153, #009688);--ngx-audio-control-border: light-dark(#e5e5e5, #474747);--ngx-audio-control-disable: light-dark(#e5e5e5, #4f4e4e);--ngx-audio-control-slider: light-dark(#ddd, #00968842);--ngx-audio-control-primary: light-dark(#007bff, #009688);--ngx-audio-control-primary-fg: light-dark(#f8f8f8, #f8f8f8);--ngx-audio-control-shadow: light-dark(#0000006e, #0000006e);--ngx-audio-control-error: light-dark(#e40505, #ff0000d3)}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.media-player,.play-list{background-color:var(--ngx-audio-control-bg);border-radius:10px;padding:10px;box-shadow:0 0 6px 0 var(--ngx-audio-control-shadow);position:relative;overflow:hidden;direction:ltr;max-width:100%}.media-player.linear .controls,.play-list.linear .controls{display:flex;flex-wrap:wrap;flex-direction:row-reverse}.controls .time-seeker{display:flex;align-items:center;flex:1 0 0;min-width:200px}.controls .buttons{display:flex;align-items:center;flex-wrap:wrap}.error-message{color:var(--ngx-audio-control-error)}button{background-color:transparent;border:none;font-size:18px;padding:5px;width:32px;height:32px;border:1px solid var(--ngx-audio-control-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 2px;color:var(--ngx-audio-control-icon)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;background-color:var(--ngx-audio-control-disable)}button:focus{outline:none}.seek-slider,.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;background-color:var(--ngx-audio-control-slider);outline:none;border-radius:5px;cursor:pointer}.seek-slider::-webkit-slider-thumb,.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background-color:var(--ngx-audio-control-slider);border-radius:50%;cursor:pointer}.seek-slider::-moz-range-thumb,.volume-slider::-moz-range-thumb{width:15px;height:15px;background-color:var(--ngx-audio-control-slider);border-radius:50%;cursor:pointer}.speed-control{display:flex;justify-content:space-between;align-items:center}.speed-display{width:30px;text-align:center;overflow:hidden;font-size:12px;font-family:sans-serif;font-weight:100}.volume-control{display:flex;align-items:center;flex:auto;min-width:100px;max-width:200px}.spacer{flex:auto}.volume-slider{margin-left:10px;width:10px;flex:auto}.play-list{margin:3px 0}.play-list .list-item{border-bottom:1px var(--ngx-audio-control-border) solid;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-list .list-item:hover:not(.disabled){cursor:pointer;background-color:#7a7a7a2f;color:var(--ngx-audio-control-text)}.play-list .list-item.active{background-color:var(--ngx-audio-control-primary);color:var(--ngx-audio-control-primary-fg)}.simp-buffer{animation:audio-progress 1s linear infinite;background-image:linear-gradient(-45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;width:100%;height:4px;position:absolute;bottom:0;left:0;right:0}@keyframes audio-progress{to{background-position:25px 0}}.file-info{overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.media-player.video-mode .video-host{position:relative;width:100%;background:#000;aspect-ratio:16/9}.media-player.video-mode .video-host ::ng-deep .ngx-media-video-element{width:100%;height:100%;display:block}\n"] }]
1574
1574
  }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], showList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showList", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], showFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileName", required: false }] }], showSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpeed", required: false }] }], showVolume: [{ type: i0.Input, args: [{ isSignal: true, alias: "showVolume", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], fetchHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchHeaders", required: false }] }], fileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileList", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], trackChange: [{ type: i0.Output, args: ["trackChange"] }], error: [{ type: i0.Output, args: ["error"] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], videoHostRef: [{ type: i0.ViewChild, args: ['videoHost', { isSignal: true }] }] } });
1575
1575
 
1576
1576
  /**