snice 4.10.0 → 4.12.0

package/dist/cdn/pdf-viewer/snice-pdf-viewer.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -147,24 +147,6 @@ var SnicePdfViewer = (function (exports, snice) {
       let _zoomInfoEl_decorators;
       let _zoomInfoEl_initializers = [];
       let _zoomInfoEl_extraInitializers = [];
-      let _btnPrev_decorators;
-      let _btnPrev_initializers = [];
-      let _btnPrev_extraInitializers = [];
-      let _btnNext_decorators;
-      let _btnNext_initializers = [];
-      let _btnNext_extraInitializers = [];
-      let _btnZoomOut_decorators;
-      let _btnZoomOut_initializers = [];
-      let _btnZoomOut_extraInitializers = [];
-      let _btnZoomIn_decorators;
-      let _btnZoomIn_initializers = [];
-      let _btnZoomIn_extraInitializers = [];
-      let _btnDownload_decorators;
-      let _btnDownload_initializers = [];
-      let _btnDownload_extraInitializers = [];
-      let _btnPrint_decorators;
-      let _btnPrint_initializers = [];
-      let _btnPrint_extraInitializers = [];
       let _fitSelectEl_decorators;
       let _fitSelectEl_initializers = [];
       let _fitSelectEl_extraInitializers = [];
@@ -175,6 +157,15 @@ var SnicePdfViewer = (function (exports, snice) {
       let _handlePageChange_decorators;
       let _handleZoomChange_decorators;
       let _handleFitChange_decorators;
+      let _handlePrevClick_decorators;
+      let _handleNextClick_decorators;
+      let _handleZoomOutClick_decorators;
+      let _handleZoomInClick_decorators;
+      let _handleDownloadClick_decorators;
+      let _handlePrintClick_decorators;
+      let _handlePageInputChange_decorators;
+      let _handlePageInputKeydown_decorators;
+      let _handleFitSelectChange_decorators;
       let _handleKeydown_decorators;
       let _emitPageChange_decorators;
       let _emitLoaded_decorators;
@@ -198,12 +189,6 @@ var SnicePdfViewer = (function (exports, snice) {
               _pageInputEl_decorators = [snice.query('.pdf-page-input')];
               _pageTotalEl_decorators = [snice.query('.pdf-page-total')];
               _zoomInfoEl_decorators = [snice.query('.pdf-zoom-info')];
-              _btnPrev_decorators = [snice.query('.pdf-btn-prev')];
-              _btnNext_decorators = [snice.query('.pdf-btn-next')];
-              _btnZoomOut_decorators = [snice.query('.pdf-btn-zoom-out')];
-              _btnZoomIn_decorators = [snice.query('.pdf-btn-zoom-in')];
-              _btnDownload_decorators = [snice.query('.pdf-btn-download')];
-              _btnPrint_decorators = [snice.query('.pdf-btn-print')];
               _fitSelectEl_decorators = [snice.query('.pdf-fit-select')];
               _componentStyles_decorators = [snice.styles()];
               _init_decorators = [snice.ready()];
@@ -212,6 +197,15 @@ var SnicePdfViewer = (function (exports, snice) {
               _handlePageChange_decorators = [snice.watch('page')];
               _handleZoomChange_decorators = [snice.watch('zoom')];
               _handleFitChange_decorators = [snice.watch('fit')];
+              _handlePrevClick_decorators = [snice.on('click', '.pdf-btn-prev')];
+              _handleNextClick_decorators = [snice.on('click', '.pdf-btn-next')];
+              _handleZoomOutClick_decorators = [snice.on('click', '.pdf-btn-zoom-out')];
+              _handleZoomInClick_decorators = [snice.on('click', '.pdf-btn-zoom-in')];
+              _handleDownloadClick_decorators = [snice.on('click', '.pdf-btn-download')];
+              _handlePrintClick_decorators = [snice.on('click', '.pdf-btn-print')];
+              _handlePageInputChange_decorators = [snice.on('change', '.pdf-page-input')];
+              _handlePageInputKeydown_decorators = [snice.on('keydown', '.pdf-page-input')];
+              _handleFitSelectChange_decorators = [snice.on('change', '.pdf-fit-select')];
               _handleKeydown_decorators = [snice.on('keydown')];
               _emitPageChange_decorators = [snice.dispatch('page-change', { bubbles: true, composed: true })];
               _emitLoaded_decorators = [snice.dispatch('pdf-loaded', { bubbles: true, composed: true })];
@@ -224,6 +218,15 @@ var SnicePdfViewer = (function (exports, snice) {
               __esDecorate(this, null, _handlePageChange_decorators, { kind: "method", name: "handlePageChange", static: false, private: false, access: { has: obj => "handlePageChange" in obj, get: obj => obj.handlePageChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleZoomChange_decorators, { kind: "method", name: "handleZoomChange", static: false, private: false, access: { has: obj => "handleZoomChange" in obj, get: obj => obj.handleZoomChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleFitChange_decorators, { kind: "method", name: "handleFitChange", static: false, private: false, access: { has: obj => "handleFitChange" in obj, get: obj => obj.handleFitChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handlePrevClick_decorators, { kind: "method", name: "handlePrevClick", static: false, private: false, access: { has: obj => "handlePrevClick" in obj, get: obj => obj.handlePrevClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleNextClick_decorators, { kind: "method", name: "handleNextClick", static: false, private: false, access: { has: obj => "handleNextClick" in obj, get: obj => obj.handleNextClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleZoomOutClick_decorators, { kind: "method", name: "handleZoomOutClick", static: false, private: false, access: { has: obj => "handleZoomOutClick" in obj, get: obj => obj.handleZoomOutClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleZoomInClick_decorators, { kind: "method", name: "handleZoomInClick", static: false, private: false, access: { has: obj => "handleZoomInClick" in obj, get: obj => obj.handleZoomInClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleDownloadClick_decorators, { kind: "method", name: "handleDownloadClick", static: false, private: false, access: { has: obj => "handleDownloadClick" in obj, get: obj => obj.handleDownloadClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handlePrintClick_decorators, { kind: "method", name: "handlePrintClick", static: false, private: false, access: { has: obj => "handlePrintClick" in obj, get: obj => obj.handlePrintClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handlePageInputChange_decorators, { kind: "method", name: "handlePageInputChange", static: false, private: false, access: { has: obj => "handlePageInputChange" in obj, get: obj => obj.handlePageInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handlePageInputKeydown_decorators, { kind: "method", name: "handlePageInputKeydown", static: false, private: false, access: { has: obj => "handlePageInputKeydown" in obj, get: obj => obj.handlePageInputKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleFitSelectChange_decorators, { kind: "method", name: "handleFitSelectChange", static: false, private: false, access: { has: obj => "handleFitSelectChange" in obj, get: obj => obj.handleFitSelectChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _emitPageChange_decorators, { kind: "method", name: "emitPageChange", static: false, private: false, access: { has: obj => "emitPageChange" in obj, get: obj => obj.emitPageChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _emitLoaded_decorators, { kind: "method", name: "emitLoaded", static: false, private: false, access: { has: obj => "emitLoaded" in obj, get: obj => obj.emitLoaded }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -243,12 +246,6 @@ var SnicePdfViewer = (function (exports, snice) {
               __esDecorate(null, null, _pageInputEl_decorators, { kind: "field", name: "pageInputEl", static: false, private: false, access: { has: obj => "pageInputEl" in obj, get: obj => obj.pageInputEl, set: (obj, value) => { obj.pageInputEl = value; } }, metadata: _metadata }, _pageInputEl_initializers, _pageInputEl_extraInitializers);
               __esDecorate(null, null, _pageTotalEl_decorators, { kind: "field", name: "pageTotalEl", static: false, private: false, access: { has: obj => "pageTotalEl" in obj, get: obj => obj.pageTotalEl, set: (obj, value) => { obj.pageTotalEl = value; } }, metadata: _metadata }, _pageTotalEl_initializers, _pageTotalEl_extraInitializers);
               __esDecorate(null, null, _zoomInfoEl_decorators, { kind: "field", name: "zoomInfoEl", static: false, private: false, access: { has: obj => "zoomInfoEl" in obj, get: obj => obj.zoomInfoEl, set: (obj, value) => { obj.zoomInfoEl = value; } }, metadata: _metadata }, _zoomInfoEl_initializers, _zoomInfoEl_extraInitializers);
-              __esDecorate(null, null, _btnPrev_decorators, { kind: "field", name: "btnPrev", static: false, private: false, access: { has: obj => "btnPrev" in obj, get: obj => obj.btnPrev, set: (obj, value) => { obj.btnPrev = value; } }, metadata: _metadata }, _btnPrev_initializers, _btnPrev_extraInitializers);
-              __esDecorate(null, null, _btnNext_decorators, { kind: "field", name: "btnNext", static: false, private: false, access: { has: obj => "btnNext" in obj, get: obj => obj.btnNext, set: (obj, value) => { obj.btnNext = value; } }, metadata: _metadata }, _btnNext_initializers, _btnNext_extraInitializers);
-              __esDecorate(null, null, _btnZoomOut_decorators, { kind: "field", name: "btnZoomOut", static: false, private: false, access: { has: obj => "btnZoomOut" in obj, get: obj => obj.btnZoomOut, set: (obj, value) => { obj.btnZoomOut = value; } }, metadata: _metadata }, _btnZoomOut_initializers, _btnZoomOut_extraInitializers);
-              __esDecorate(null, null, _btnZoomIn_decorators, { kind: "field", name: "btnZoomIn", static: false, private: false, access: { has: obj => "btnZoomIn" in obj, get: obj => obj.btnZoomIn, set: (obj, value) => { obj.btnZoomIn = value; } }, metadata: _metadata }, _btnZoomIn_initializers, _btnZoomIn_extraInitializers);
-              __esDecorate(null, null, _btnDownload_decorators, { kind: "field", name: "btnDownload", static: false, private: false, access: { has: obj => "btnDownload" in obj, get: obj => obj.btnDownload, set: (obj, value) => { obj.btnDownload = value; } }, metadata: _metadata }, _btnDownload_initializers, _btnDownload_extraInitializers);
-              __esDecorate(null, null, _btnPrint_decorators, { kind: "field", name: "btnPrint", static: false, private: false, access: { has: obj => "btnPrint" in obj, get: obj => obj.btnPrint, set: (obj, value) => { obj.btnPrint = value; } }, metadata: _metadata }, _btnPrint_initializers, _btnPrint_extraInitializers);
               __esDecorate(null, null, _fitSelectEl_decorators, { kind: "field", name: "fitSelectEl", static: false, private: false, access: { has: obj => "fitSelectEl" in obj, get: obj => obj.fitSelectEl, set: (obj, value) => { obj.fitSelectEl = value; } }, metadata: _metadata }, _fitSelectEl_initializers, _fitSelectEl_extraInitializers);
               __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
               _classThis = _classDescriptor.value;
@@ -259,7 +256,6 @@ var SnicePdfViewer = (function (exports, snice) {
               return snice.css `${viewerStyles}`;
           }
           init() {
-              this.attachListeners();
               this.updateView();
               if (this.src)
                   this.loadDocument();
@@ -387,6 +383,31 @@ var SnicePdfViewer = (function (exports, snice) {
           }
           zoomIn() { this.zoom = Math.min(5, Math.round((this.zoom + 0.25) * 100) / 100); }
           zoomOut() { this.zoom = Math.max(0.25, Math.round((this.zoom - 0.25) * 100) / 100); }
+          // ── Toolbar Event Delegation ──
+          // Uses @on with CSS selectors for event delegation on the shadow root.
+          // This avoids timing issues with @query + manual addEventListener in @ready,
+          // since the shadow DOM render is deferred to a microtask after @ready runs.
+          handlePrevClick() { this.prevPage(); }
+          handleNextClick() { this.nextPage(); }
+          handleZoomOutClick() { this.zoomOut(); }
+          handleZoomInClick() { this.zoomIn(); }
+          handleDownloadClick() { this.download(); }
+          handlePrintClick() { this.print(); }
+          handlePageInputChange(e) {
+              const val = parseInt(e.target.value, 10);
+              if (!isNaN(val))
+                  this.goToPage(val);
+          }
+          handlePageInputKeydown(e) {
+              if (e.key === 'Enter') {
+                  const val = parseInt(e.target.value, 10);
+                  if (!isNaN(val))
+                      this.goToPage(val);
+              }
+          }
+          handleFitSelectChange(e) {
+              this.fit = e.target.value;
+          }
           handleKeydown(e) {
               switch (e.key) {
                   case 'ArrowRight':
@@ -445,44 +466,24 @@ var SnicePdfViewer = (function (exports, snice) {
                   this.pageTotalEl.textContent = `/ ${this.totalPages || '-'}`;
               if (this.zoomInfoEl)
                   this.zoomInfoEl.textContent = `${Math.round(this.zoom * 100)}%`;
-              if (this.btnPrev)
-                  this.btnPrev.disabled = this.page <= 1;
-              if (this.btnNext)
-                  this.btnNext.disabled = this.page >= this.totalPages;
-              if (this.btnZoomOut)
-                  this.btnZoomOut.disabled = this.zoom <= 0.25;
-              if (this.btnZoomIn)
-                  this.btnZoomIn.disabled = this.zoom >= 5;
-              if (this.btnDownload)
-                  this.btnDownload.disabled = !this.src;
-              if (this.btnPrint)
-                  this.btnPrint.disabled = !this.src;
-          }
-          attachListeners() {
-              if (this.listenersAttached)
-                  return;
-              this.listenersAttached = true;
-              this.btnPrev?.addEventListener('click', () => this.prevPage());
-              this.btnNext?.addEventListener('click', () => this.nextPage());
-              this.btnZoomOut?.addEventListener('click', () => this.zoomOut());
-              this.btnZoomIn?.addEventListener('click', () => this.zoomIn());
-              this.btnDownload?.addEventListener('click', () => this.download());
-              this.btnPrint?.addEventListener('click', () => this.print());
-              this.pageInputEl?.addEventListener('change', (e) => {
-                  const val = parseInt(e.target.value, 10);
-                  if (!isNaN(val))
-                      this.goToPage(val);
-              });
-              this.pageInputEl?.addEventListener('keydown', (e) => {
-                  if (e.key === 'Enter') {
-                      const val = parseInt(e.target.value, 10);
-                      if (!isNaN(val))
-                          this.goToPage(val);
-                  }
-              });
-              this.fitSelectEl?.addEventListener('change', (e) => {
-                  this.fit = e.target.value;
-              });
+              const btnPrev = this.shadowRoot?.querySelector('.pdf-btn-prev');
+              const btnNext = this.shadowRoot?.querySelector('.pdf-btn-next');
+              const btnZoomOut = this.shadowRoot?.querySelector('.pdf-btn-zoom-out');
+              const btnZoomIn = this.shadowRoot?.querySelector('.pdf-btn-zoom-in');
+              const btnDownload = this.shadowRoot?.querySelector('.pdf-btn-download');
+              const btnPrint = this.shadowRoot?.querySelector('.pdf-btn-print');
+              if (btnPrev)
+                  btnPrev.disabled = this.page <= 1;
+              if (btnNext)
+                  btnNext.disabled = this.page >= this.totalPages;
+              if (btnZoomOut)
+                  btnZoomOut.disabled = this.zoom <= 0.25;
+              if (btnZoomIn)
+                  btnZoomIn.disabled = this.zoom >= 5;
+              if (btnDownload)
+                  btnDownload.disabled = !this.src;
+              if (btnPrint)
+                  btnPrint.disabled = !this.src;
           }
           // ── Events ──
           emitPageChange() { return { page: this.page, totalPages: this.totalPages }; }
@@ -562,7 +563,6 @@ var SnicePdfViewer = (function (exports, snice) {
               this.loading = false;
               this.error = '';
               this.rendering = false;
-              this.listenersAttached = false;
               this.viewportEl = __runInitializers(this, _viewportEl_initializers, void 0);
               this.canvas = (__runInitializers(this, _viewportEl_extraInitializers), __runInitializers(this, _canvas_initializers, void 0));
               this.loadingEl = (__runInitializers(this, _canvas_extraInitializers), __runInitializers(this, _loadingEl_initializers, void 0));
@@ -573,13 +573,7 @@ var SnicePdfViewer = (function (exports, snice) {
               this.pageInputEl = (__runInitializers(this, _canvasWrapperEl_extraInitializers), __runInitializers(this, _pageInputEl_initializers, void 0));
               this.pageTotalEl = (__runInitializers(this, _pageInputEl_extraInitializers), __runInitializers(this, _pageTotalEl_initializers, void 0));
               this.zoomInfoEl = (__runInitializers(this, _pageTotalEl_extraInitializers), __runInitializers(this, _zoomInfoEl_initializers, void 0));
-              this.btnPrev = (__runInitializers(this, _zoomInfoEl_extraInitializers), __runInitializers(this, _btnPrev_initializers, void 0));
-              this.btnNext = (__runInitializers(this, _btnPrev_extraInitializers), __runInitializers(this, _btnNext_initializers, void 0));
-              this.btnZoomOut = (__runInitializers(this, _btnNext_extraInitializers), __runInitializers(this, _btnZoomOut_initializers, void 0));
-              this.btnZoomIn = (__runInitializers(this, _btnZoomOut_extraInitializers), __runInitializers(this, _btnZoomIn_initializers, void 0));
-              this.btnDownload = (__runInitializers(this, _btnZoomIn_extraInitializers), __runInitializers(this, _btnDownload_initializers, void 0));
-              this.btnPrint = (__runInitializers(this, _btnDownload_extraInitializers), __runInitializers(this, _btnPrint_initializers, void 0));
-              this.fitSelectEl = (__runInitializers(this, _btnPrint_extraInitializers), __runInitializers(this, _fitSelectEl_initializers, void 0));
+              this.fitSelectEl = (__runInitializers(this, _zoomInfoEl_extraInitializers), __runInitializers(this, _fitSelectEl_initializers, void 0));
               __runInitializers(this, _fitSelectEl_extraInitializers);
           }
       });