@pecb-ui/components 1.1.15 → 1.1.16

package/fesm2022/pecb-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, output, HostBinding, Component, ChangeDetectionStrategy, model, computed, signal, HostListener, ContentChild, effect, forwardRef, ViewChild, ViewContainerRef, viewChild, ViewEncapsulation, Directive, PLATFORM_ID, DestroyRef, ElementRef, booleanAttribute, numberAttribute, linkedSignal, untracked, ApplicationRef, EnvironmentInjector, createComponent, contentChildren, NgZone, afterNextRender, Injector, Inject, ViewChildren, Renderer2 } from '@angular/core';
+import { Injectable, inject, input, output, HostBinding, Component, ChangeDetectionStrategy, model, computed, signal, HostListener, ContentChild, effect, forwardRef, ViewChild, ViewContainerRef, viewChild, ViewEncapsulation, Directive, PLATFORM_ID, DestroyRef, ElementRef, booleanAttribute, numberAttribute, linkedSignal, untracked, ApplicationRef, EnvironmentInjector, createComponent, contentChildren, NgZone, afterNextRender, Injector, TemplateRef, contentChild, Inject, ViewChildren, Renderer2 } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i1$2 from '@angular/platform-browser';
@@ -15006,6 +15006,1146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'pecb-course-player', standalone: true, imports: [VideoPlayerComponent, CourseContentPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'pecb-course-player-host' }, template: "<div [class]=\"hostClasses()\">\n  <!-- \u2500\u2500 Video stage \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-course-player__stage\">\n    <pecb-video-player\n      class=\"pecb-course-player__video\"\n      [src]=\"videoSrc()\"\n      [poster]=\"videoPoster()\"\n      [tracks]=\"videoTracks()\"\n      [title]=\"videoTitle()\"\n      [label]=\"videoStageLabel()\"\n      [watermark]=\"watermark()\"\n      [aspectRatio]=\"aspectRatio()\"\n      [preload]=\"preload()\"\n      [crossOrigin]=\"crossOrigin()\"\n      [seekStep]=\"seekStep()\"\n      [startTime]=\"startTime()\"\n      [labels]=\"videoLabels()\"\n      [(playing)]=\"playing\"\n      [(currentTime)]=\"currentTime\"\n      (timeUpdate)=\"timeUpdate.emit($event)\"\n      (playbackEnded)=\"onPlaybackEnded()\"\n      (playerError)=\"playerError.emit($event)\"\n    ></pecb-video-player>\n\n    @if (showLessonTitle() && lessonTitle()) {\n      <h2 class=\"pecb-course-player__title\">{{ lessonTitle() }}</h2>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Content sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-course-player__panel\">\n    <div class=\"pecb-course-player__panel-inner\">\n      <pecb-course-content-panel\n        [modules]=\"modules()\"\n        [transcript]=\"transcript()\"\n        [(activeLessonId)]=\"activeLessonId\"\n        [(tab)]=\"panelTab\"\n        [playing]=\"playing()\"\n        [currentTime]=\"currentTime()\"\n        [layout]=\"layout()\"\n        [density]=\"density()\"\n        [accent]=\"accent()\"\n        [showTabs]=\"showTabs()\"\n        [showSearch]=\"showSearch()\"\n        [showProgress]=\"showProgress()\"\n        [soloSingleLessonModules]=\"soloSingleLessonModules()\"\n        [labels]=\"panelLabels()\"\n        (lessonSelect)=\"onLessonSelect($event)\"\n        (transcriptSeek)=\"onTranscriptSeek($event)\"\n        (certificateClick)=\"certificateClick.emit()\"\n      ></pecb-course-content-panel>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;container-type:inline-size;container-name:pecb-course-player}.pecb-course-player{display:grid;grid-template-columns:minmax(0,1fr) var(--pecb-course-player-panel-width, 408px);gap:var(--pecb-course-player-gap, 20px);align-items:stretch;height:100%;min-height:0}.pecb-course-player--panel-start{grid-template-columns:var(--pecb-course-player-panel-width, 408px) minmax(0,1fr)}.pecb-course-player--panel-start .pecb-course-player__stage{order:2}.pecb-course-player--panel-start .pecb-course-player__panel{order:1}.pecb-course-player__stage{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}.pecb-course-player__video{flex:0 0 auto}.pecb-course-player__title{flex:0 0 auto;margin:0;padding:0 2px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:700;line-height:1.35;color:#212427;text-wrap:pretty}.pecb-course-player__panel{position:relative;min-width:0;min-height:240px}.pecb-course-player__panel-inner{position:absolute;inset:0;display:flex;overflow:hidden;border:1px solid #ececec;border-radius:var(--pecb-course-player-radius, 12px);background:#fff}.pecb-course-player pecb-course-content-panel{flex:1 1 auto;min-width:0}@container pecb-course-player (max-width: 900px){.pecb-course-player,.pecb-course-player--panel-start{grid-template-columns:minmax(0,1fr);height:auto}.pecb-course-player__stage,.pecb-course-player--panel-start .pecb-course-player__stage{order:1}.pecb-course-player__panel,.pecb-course-player--panel-start .pecb-course-player__panel{order:2;position:static;min-height:0;height:var(--pecb-course-player-panel-stacked-height, 460px)}.pecb-course-player__panel-inner{position:static;height:100%}}@container pecb-course-player (max-width: 560px){.pecb-course-player{gap:16px}.pecb-course-player__panel{height:var(--pecb-course-player-panel-stacked-height, 400px)}.pecb-course-player__title{font-size:14px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }], transcript: [{ type: i0.Input, args: [{ isSignal: true, alias: "transcript", required: false }] }], activeLessonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeLessonId", required: false }] }, { type: i0.Output, args: ["activeLessonIdChange"] }], playing: [{ type: i0.Input, args: [{ isSignal: true, alias: "playing", required: false }] }, { type: i0.Output, args: ["playingChange"] }], currentTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTime", required: false }] }, { type: i0.Output, args: ["currentTimeChange"] }], panelTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTab", required: false }] }, { type: i0.Output, args: ["panelTabChange"] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], tracks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracks", required: false }] }], stageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stageLabel", required: false }] }], watermark: [{ type: i0.Input, args: [{ isSignal: true, alias: "watermark", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], seekStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "seekStep", required: false }] }], videoLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoLabels", required: false }] }], autoPlayOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayOnSelect", required: false }] }], showLessonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLessonTitle", required: false }] }], panelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelPosition", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], showTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTabs", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], soloSingleLessonModules: [{ type: i0.Input, args: [{ isSignal: true, alias: "soloSingleLessonModules", required: false }] }], panelLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabels", required: false }] }], lessonSelect: [{ type: i0.Output, args: ["lessonSelect"] }], lessonEnded: [{ type: i0.Output, args: ["lessonEnded"] }], timeUpdate: [{ type: i0.Output, args: ["timeUpdate"] }], certificateClick: [{ type: i0.Output, args: ["certificateClick"] }], playerError: [{ type: i0.Output, args: ["playerError"] }] } });
 
+const DEFAULT_SLIDE_VIEWER_KEY_MAP = {
+    next: ['ArrowRight', 'PageDown'],
+    previous: ['ArrowLeft', 'PageUp'],
+    first: ['Home'],
+    last: ['End'],
+    fullscreen: ['f', 'F'],
+    search: ['/'],
+    zoomIn: ['+', '='],
+    zoomOut: ['-', '_'],
+    zoomReset: ['0'],
+};
+const DEFAULT_SLIDE_VIEWER_LABELS = {
+    viewer: 'Slide viewer',
+    slide: 'Slide {n}',
+    of: '/',
+    slideNumber: 'Slide number',
+    first: 'First slide',
+    previous: 'Previous slide',
+    next: 'Next slide',
+    last: 'Last slide',
+    enterFullscreen: 'Full screen',
+    exitFullscreen: 'Exit full screen',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    zoomReset: 'Reset zoom',
+    note: 'Note',
+    days: 'Days',
+    thumbnails: 'Slides',
+    searchPlaceholder: 'Search slides using any keyword',
+    searchResults: '{n} of {total} slides',
+    noResults: 'No slides match your search.',
+    loading: 'Loading slides…',
+    selectSlide: 'Select slide {n}',
+    dragHint: 'Drag to reorder',
+    hidden: 'Hidden',
+    emptyTitle: 'No slides yet',
+    emptyHint: 'There is nothing to show for this day.',
+    errorTitle: 'The slides could not be loaded',
+    errorHint: 'Check the file and try again.',
+    retry: 'Try again',
+    slideAnnouncement: 'Slide {n} of {total}',
+    loadingProgress: 'Downloading slides… {percent}%',
+    notes: 'My Notes',
+    feedback: 'Feedback',
+    courseFiles: 'Download Course Files',
+    downloadSlides: 'Download Slides',
+    downloadUnavailable: 'Slides are not available for download yet.',
+};
+/** Default set and order of the top-bar tools. */
+const DEFAULT_SLIDE_VIEWER_TOOLS = [
+    'notes',
+    'feedback',
+    'courseFiles',
+    'downloadSlides',
+];
+/** Zoom steps offered by the stage (1 = fit). */
+const DEFAULT_SLIDE_VIEWER_ZOOM_STEPS = [1, 1.5, 2, 3];
+/** Clamp a 1-based page into `[1, total]` (`1` when there are no slides). */
+function clampSlidePage(page, total) {
+    if (!Number.isFinite(page) || total <= 0)
+        return 1;
+    return Math.min(total, Math.max(1, Math.round(page)));
+}
+// ─── Template directives ──────────────────────────────────────────────────────
+/**
+ * Custom content rendered over each sidebar tile (badges, checkmarks, a drag handle…).
+ * ```html
+ * <ng-template pecbSlideViewerThumbnail let-slide let-n="index">
+ *   @if (slide.meta?.hasNotes) { <span class="badge">Notes</span> }
+ * </ng-template>
+ * ```
+ */
+class SlideViewerThumbnailDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideViewerThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: SlideViewerThumbnailDirective, isStandalone: true, selector: "ng-template[pecbSlideViewerThumbnail]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideViewerThumbnailDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[pecbSlideViewerThumbnail]', standalone: true }]
+        }] });
+/**
+ * Custom content of each day pill (status dot, counter…). The pill itself stays.
+ * ```html
+ * <ng-template pecbSlideViewerDay let-day let-active="active">{{ day.label }} · {{ day.meta?.count }}</ng-template>
+ * ```
+ */
+class SlideViewerDayDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideViewerDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: SlideViewerDayDirective, isStandalone: true, selector: "ng-template[pecbSlideViewerDay]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideViewerDayDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[pecbSlideViewerDay]', standalone: true }]
+        }] });
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * PECB course slide viewer.
+ *
+ * Reproduces the "Open course" slide view of the PECB Profile redesign: a top
+ * bar with day pills and tool buttons, a 16:10 stage, a navigation bar
+ * (first / previous / next / last, slide-number input, projected version
+ * select, zoom, fullscreen), a collapsible per-slide note and a sticky sidebar
+ * with keyword search and thumbnails.
+ *
+ * The element is purely presentational: it receives days, slide images and a
+ * note, keeps the current page / search / zoom / fullscreen / selection state
+ * and emits every intent (`dayChange`, `slideChange`, `tool`, `slideMove`, …)
+ * so the host app owns data, dialogs and persistence. No PDF library is
+ * involved — feed it images; leave `image` out and answer `fullImageRequest`
+ * to render large images lazily.
+ *
+ * Empty / broken decks: with no slides and nothing loading the stage shows `emptyTitle`
+ * / `emptyHint`; with `error` set it shows `errorTitle` / `errorHint` and a retry button
+ * (`retry` output). Both messages can be replaced through the `pecbSlideViewerEmpty` slot.
+ *
+ * Slots: `pecbSlideViewerToolsStart` / `pecbSlideViewerTools` (tool bar),
+ * `pecbSlideViewerVersion` (navigation bar, right), `pecbSlideViewerStage`
+ * (overlay on the stage), `pecbSlideViewerNote` (inside the note panel),
+ * `pecbSlideViewerBelow` (under the stage column), `pecbSlideViewerSidebarHeader`
+ * / `pecbSlideViewerSidebarFooter` (sidebar). Templates: `pecbSlideViewerThumbnail`,
+ * `pecbSlideViewerDay`.
+ *
+ * @example
+ * ```html
+ * <pecb-slide-viewer
+ *   [days]="days" [(activeDayId)]="dayId" (dayChange)="loadDay($event)"
+ *   [slides]="slides" [(page)]="page" [note]="noteHtml"
+ *   (fullImageRequest)="renderFull($event)"
+ *   (tool)="onTool($event)" (slideChange)="track($event)">
+ *   <pecb-dropdown pecbSlideViewerVersion [options]="versions" [(ngModel)]="version" />
+ * </pecb-slide-viewer>
+ * ```
+ *
+ * Theming — override the CSS custom properties on the host:
+ * ```css
+ * pecb-slide-viewer { --pecb-slide-sidebar-width: 300px; --pecb-slide-active: #a11e29; }
+ * ```
+ */
+class SlideViewerComponent {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        /** Unique id used to wire ARIA relationships inside the template. */
+        this.uid = generateUniqueId('pecb-slides');
+        // ── Element refs / templates ────────────────────────────────────────────────
+        this.rootRef = viewChild('root', ...(ngDevMode ? [{ debugName: "rootRef" }] : []));
+        this.stageRef = viewChild('stage', ...(ngDevMode ? [{ debugName: "stageRef" }] : []));
+        this.thumbsRef = viewChild('thumbs', ...(ngDevMode ? [{ debugName: "thumbsRef" }] : []));
+        this.searchRef = viewChild('search', ...(ngDevMode ? [{ debugName: "searchRef" }] : []));
+        this.thumbnailTemplate = contentChild(SlideViewerThumbnailDirective, ...(ngDevMode ? [{ debugName: "thumbnailTemplate" }] : []));
+        this.dayTemplate = contentChild(SlideViewerDayDirective, ...(ngDevMode ? [{ debugName: "dayTemplate" }] : []));
+        // ── Data inputs ─────────────────────────────────────────────────────────────
+        /** Day pills. The switcher is hidden when empty. */
+        this.days = input([], ...(ngDevMode ? [{ debugName: "days" }] : []));
+        /** Slides of the active day, in order. */
+        this.slides = input([], ...(ngDevMode ? [{ debugName: "slides" }] : []));
+        /**
+         * Note for the current slide — an HTML string (sanitized by Angular) or a `SafeHtml`
+         * the host already trusts. The panel is hidden when empty unless `showNote` is set
+         * (e.g. when the note body is projected through `pecbSlideViewerNote`).
+         */
+        this.note = input(null, ...(ngDevMode ? [{ debugName: "note" }] : []));
+        /** Force the note panel on/off; `undefined` shows it whenever `note` has content. */
+        this.showNote = input(undefined, ...(ngDevMode ? [{ debugName: "showNote" }] : []));
+        /** Slides are being prepared: the stage shows a veil and the list its skeletons. */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Download / preparation progress, 0–100, shown on the stage while loading. `null` hides it. */
+        this.loadingProgress = input(null, ...(ngDevMode ? [{ debugName: "loadingProgress" }] : []));
+        /**
+         * The slides could not be produced (missing / broken file): the stage shows the error
+         * message and a retry button (`retry` output) instead of the slides.
+         */
+        this.error = input(false, ...(ngDevMode ? [{ debugName: "error", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        // ── Appearance / behaviour inputs ───────────────────────────────────────────
+        /** Which built-in tool buttons render, in this order. */
+        this.tools = input(DEFAULT_SLIDE_VIEWER_TOOLS, ...(ngDevMode ? [{ debugName: "tools" }] : []));
+        /** Enables the "Download Slides" tool. When false it renders disabled with a tooltip. @default true */
+        this.canDownloadSlides = input(true, ...(ngDevMode ? [{ debugName: "canDownloadSlides", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** CSS `aspect-ratio` of the stage. @default '16 / 10' */
+        this.stageAspectRatio = input('16 / 10', ...(ngDevMode ? [{ debugName: "stageAspectRatio" }] : []));
+        /** Where the thumbnail sidebar sits. @default 'end' */
+        this.sidebarPosition = input('end', ...(ngDevMode ? [{ debugName: "sidebarPosition" }] : []));
+        /** Show the thumbnail sidebar (shorthand for `sidebarPosition="none"`). @default true */
+        this.showThumbnails = input(true, ...(ngDevMode ? [{ debugName: "showThumbnails", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the keyword search above the thumbnails. @default true */
+        this.showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the slide-number input. @default true */
+        this.showSlideInput = input(true, ...(ngDevMode ? [{ debugName: "showSlideInput", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the fullscreen button. @default true */
+        this.showFullscreen = input(true, ...(ngDevMode ? [{ debugName: "showFullscreen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the zoom buttons and allow zooming the stage. @default false */
+        this.zoomable = input(false, ...(ngDevMode ? [{ debugName: "zoomable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Zoom levels cycled by the zoom buttons / keys (1 = fit). */
+        this.zoomSteps = input(DEFAULT_SLIDE_VIEWER_ZOOM_STEPS, ...(ngDevMode ? [{ debugName: "zoomSteps" }] : []));
+        /** Navigation skips slides flagged `hidden`. @default false */
+        this.skipHidden = input(false, ...(ngDevMode ? [{ debugName: "skipHidden", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Tiles get a checkbox and `selectedIds` tracks the selection. @default false */
+        this.selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Tiles can be dragged to a new position; the host receives `slideMove`. @default false */
+        this.reorderable = input(false, ...(ngDevMode ? [{ debugName: "reorderable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Above this many slides the sidebar is virtualised: only the tiles in view (plus
+         * `overscan` on each side) exist in the DOM, a spacer keeps the scroll height. Built
+         * for decks of several hundred slides. @default 40
+         */
+        this.virtualizeAbove = input(40, ...(ngDevMode ? [{ debugName: "virtualizeAbove", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** Tiles rendered beyond the visible window on each side. @default 6 */
+        this.overscan = input(6, ...(ngDevMode ? [{ debugName: "overscan", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * How many neighbours on each side of the current slide are requested
+         * (`fullImageRequest`) and decoded ahead so arrows feel instant. @default 1
+         */
+        this.prefetch = input(1, ...(ngDevMode ? [{ debugName: "prefetch", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** Horizontal swipe on the stage moves slides (touch / pen). @default true */
+        this.swipe = input(true, ...(ngDevMode ? [{ debugName: "swipe", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Handle keyboard shortcuts on the region. @default true */
+        this.keyboard = input(true, ...(ngDevMode ? [{ debugName: "keyboard", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Partial override of the keyboard shortcuts (see `DEFAULT_SLIDE_VIEWER_KEY_MAP`). */
+        this.keyMap = input({}, ...(ngDevMode ? [{ debugName: "keyMap" }] : []));
+        /** Milliseconds the keyword search waits after typing. @default 250 */
+        this.searchDebounce = input(250, ...(ngDevMode ? [{ debugName: "searchDebounce", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** Partial override of the user-visible strings (i18n). */
+        this.labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        // ── Two-way state (models) ──────────────────────────────────────────────────
+        /** Selected day. `null` selects nothing. */
+        this.activeDayId = model(null, ...(ngDevMode ? [{ debugName: "activeDayId" }] : []));
+        /** Current slide, 1-based. Clamped to the slide count. */
+        this.page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        /** Keyword filtering the thumbnails. */
+        this.searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+        /** Whether the note panel is expanded. */
+        this.noteOpen = model(true, ...(ngDevMode ? [{ debugName: "noteOpen" }] : []));
+        /** Stage zoom factor (1 = fit). Only applied while `zoomable`. */
+        this.zoom = model(1, ...(ngDevMode ? [{ debugName: "zoom" }] : []));
+        /** Ids of the selected slides (selection mode). */
+        this.selectedIds = model([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+        // ── Outputs ─────────────────────────────────────────────────────────────────
+        /** A day pill was chosen. */
+        this.dayChange = output();
+        /** The current slide changed (any source), with the slide and what moved it. */
+        this.slideChange = output();
+        /** A tool button was pressed. */
+        this.tool = output();
+        /** The stage entered / left fullscreen. */
+        this.fullscreenChange = output();
+        /** The keyword or its matches changed. */
+        this.searchChange = output();
+        /** The stage needs the full image of a page that only has a thumbnail (1-based). Emitted once per page. */
+        this.fullImageRequest = output();
+        /** A tile was dropped at a new position (reorder mode). The host reorders `slides`. */
+        this.slideMove = output();
+        /** "Try again" pressed in the error state. */
+        this.retry = output();
+        // ── Internal state ──────────────────────────────────────────────────────────
+        this.isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
+        /** Stage image for the current page has finished loading. */
+        this.stageImageLoaded = signal(false, ...(ngDevMode ? [{ debugName: "stageImageLoaded" }] : []));
+        /**
+         * Source currently painted on the stage. It lags behind `stageSrc` while the next
+         * image is decoded off screen, so a page change or a thumbnail→full-image upgrade
+         * never blanks the stage (no blink, no spinner over a picture that is already there).
+         */
+        this.displayedSrc = signal(null, ...(ngDevMode ? [{ debugName: "displayedSrc" }] : []));
+        /** A newer image than the displayed one is being decoded. */
+        this.stageBusy = signal(false, ...(ngDevMode ? [{ debugName: "stageBusy" }] : []));
+        /** Text in the number input while the user edits it (null = mirror `page`). */
+        this.pageDraft = signal(null, ...(ngDevMode ? [{ debugName: "pageDraft" }] : []));
+        /** Virtualised sidebar: index range (into `matches`) of the tiles in the DOM. */
+        this.windowRange = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "windowRange" }] : []));
+        /** Measured height of one tile incl. its gap, in px (a sensible guess until measured). */
+        this.tileStride = signal(212, ...(ngDevMode ? [{ debugName: "tileStride" }] : []));
+        /** Announced to assistive tech on slide change. */
+        this.announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
+        /** Tile currently dragged (1-based) and the drop target it hovers. */
+        this.dragFrom = signal(null, ...(ngDevMode ? [{ debugName: "dragFrom" }] : []));
+        this.dragOver = signal(null, ...(ngDevMode ? [{ debugName: "dragOver" }] : []));
+        this.searchTimer = null;
+        this.lastEmittedPage = 0;
+        this.lastStageSrc = undefined;
+        this.stageLoadToken = 0;
+        this.requestedFullImages = new Set();
+        this.lastSlidesRef = null;
+        this.pendingSource = 'api';
+        /** Decoded neighbour images kept warm (bounded so 700-slide decks don't pile up). */
+        this.decodeCache = new Map();
+        this.scrollListener = null;
+        this.resizeObserver = null;
+        this.scrollRaf = null;
+        this.swipeStart = null;
+        // ── Computed ────────────────────────────────────────────────────────────────
+        this.text = computed(() => ({
+            ...DEFAULT_SLIDE_VIEWER_LABELS,
+            ...this.labels(),
+        }), ...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.keys = computed(() => ({
+            ...DEFAULT_SLIDE_VIEWER_KEY_MAP,
+            ...this.keyMap(),
+        }), ...(ngDevMode ? [{ debugName: "keys" }] : []));
+        this.total = computed(() => this.slides().length, ...(ngDevMode ? [{ debugName: "total" }] : []));
+        /** `page` clamped into the current slide range. */
+        this.currentPage = computed(() => clampSlidePage(this.page(), this.total()), ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+        this.currentSlide = computed(() => this.slides()[this.currentPage() - 1] ?? null, ...(ngDevMode ? [{ debugName: "currentSlide" }] : []));
+        /** Stage image: full image, else the thumbnail while the full one is being produced. */
+        this.stageSrc = computed(() => {
+            const s = this.currentSlide();
+            return s?.image ?? s?.thumbnail ?? null;
+        }, ...(ngDevMode ? [{ debugName: "stageSrc" }] : []));
+        /** The stage is showing a thumbnail in place of a missing full image. */
+        this.stageIsFallback = computed(() => {
+            const s = this.currentSlide();
+            return !!s && !s.image && !!s.thumbnail;
+        }, ...(ngDevMode ? [{ debugName: "stageIsFallback" }] : []));
+        this.progressText = computed(() => {
+            const p = this.loadingProgress();
+            if (p == null || !Number.isFinite(p))
+                return '';
+            return this.format(this.text().loadingProgress, { percent: Math.max(0, Math.min(100, Math.round(p))) });
+        }, ...(ngDevMode ? [{ debugName: "progressText" }] : []));
+        /** Spinner veil: only while nothing is painted yet (first image) or the deck loads. */
+        this.stageVeil = computed(() => !this.error() &&
+            (this.loading() || (!!this.stageSrc() && !this.displayedSrc() && !this.stageImageLoaded())), ...(ngDevMode ? [{ debugName: "stageVeil" }] : []));
+        /** Skeleton shimmer on the stage: something is coming and nothing is painted yet. */
+        this.stageSkeleton = computed(() => this.stageVeil() && !this.displayedSrc(), ...(ngDevMode ? [{ debugName: "stageSkeleton" }] : []));
+        /** Nothing to show and nothing on the way: the stage explains it. */
+        this.isEmpty = computed(() => !this.error() && !this.loading() && this.total() === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+        this.isFirst = computed(() => this.currentPage() <= 1, ...(ngDevMode ? [{ debugName: "isFirst" }] : []));
+        this.isLast = computed(() => this.currentPage() >= this.total(), ...(ngDevMode ? [{ debugName: "isLast" }] : []));
+        this.navDisabled = computed(() => this.loading() || this.error() || this.total() === 0, ...(ngDevMode ? [{ debugName: "navDisabled" }] : []));
+        this.pageInputValue = computed(() => this.pageDraft() ?? String(this.currentPage()), ...(ngDevMode ? [{ debugName: "pageInputValue" }] : []));
+        /** The word before the number input ("Slide"), derived from the `slide` label. */
+        this.slideWord = computed(() => this.text().slide.replace('{n}', '').trim(), ...(ngDevMode ? [{ debugName: "slideWord" }] : []));
+        this.hasNote = computed(() => {
+            const forced = this.showNote();
+            if (forced !== undefined)
+                return forced;
+            const n = this.note();
+            if (n == null)
+                return false;
+            return typeof n === 'string' ? n.trim().length > 0 : true;
+        }, ...(ngDevMode ? [{ debugName: "hasNote" }] : []));
+        this.showDays = computed(() => this.days().length > 0, ...(ngDevMode ? [{ debugName: "showDays" }] : []));
+        this.sidebar = computed(() => this.showThumbnails() ? this.sidebarPosition() : 'none', ...(ngDevMode ? [{ debugName: "sidebar" }] : []));
+        this.showDownloadTool = computed(() => this.tools().includes('downloadSlides'), ...(ngDevMode ? [{ debugName: "showDownloadTool" }] : []));
+        this.zoomLevel = computed(() => (this.zoomable() ? Math.max(1, this.zoom()) : 1), ...(ngDevMode ? [{ debugName: "zoomLevel" }] : []));
+        this.isZoomed = computed(() => this.zoomLevel() > 1.001, ...(ngDevMode ? [{ debugName: "isZoomed" }] : []));
+        this.zoomPercent = computed(() => Math.round(this.zoomLevel() * 100), ...(ngDevMode ? [{ debugName: "zoomPercent" }] : []));
+        /** Virtualisation only kicks in for long decks. */
+        this.windowed = computed(() => this.total() > this.virtualizeAbove(), ...(ngDevMode ? [{ debugName: "windowed" }] : []));
+        /** Tiles to render: everything, or the current window of `matches` when virtualised. */
+        this.visibleTiles = computed(() => {
+            const all = this.matches();
+            if (!this.windowed())
+                return all;
+            const { start, end } = this.windowRange();
+            return all.slice(start, end);
+        }, ...(ngDevMode ? [{ debugName: "visibleTiles" }] : []));
+        /** Spacer heights (px) above / below the rendered window. */
+        this.spacerTop = computed(() => this.windowed() ? this.windowRange().start * this.tileStride() : 0, ...(ngDevMode ? [{ debugName: "spacerTop" }] : []));
+        this.spacerBottom = computed(() => this.windowed() ? Math.max(0, this.matches().length - this.windowRange().end) * this.tileStride() : 0, ...(ngDevMode ? [{ debugName: "spacerBottom" }] : []));
+        this.selectedSet = computed(() => new Set(this.selectedIds()), ...(ngDevMode ? [{ debugName: "selectedSet" }] : []));
+        /** 1-based numbers of the slides matching the keyword (all when empty). */
+        this.matches = computed(() => {
+            const term = this.searchTerm().trim().toLowerCase();
+            const slides = this.slides();
+            const out = [];
+            for (let i = 0; i < slides.length; i++) {
+                if (!term || this.slideMatches(slides[i], i + 1, term))
+                    out.push(i + 1);
+            }
+            return out;
+        }, ...(ngDevMode ? [{ debugName: "matches" }] : []));
+        this.matchSet = computed(() => new Set(this.matches()), ...(ngDevMode ? [{ debugName: "matchSet" }] : []));
+        this.isSearching = computed(() => this.searchTerm().trim().length > 0, ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+        this.searchSummary = computed(() => this.format(this.text().searchResults, {
+            n: this.matches().length,
+            total: this.total(),
+        }), ...(ngDevMode ? [{ debugName: "searchSummary" }] : []));
+        /** Skeleton rows drawn in the sidebar while loading. */
+        this.skeletonRows = [0, 1, 2, 3];
+        this.hostClasses = computed(() => [
+            'pecb-slide-viewer',
+            this.loading() ? 'pecb-slide-viewer--loading' : '',
+            this.error() ? 'pecb-slide-viewer--error' : '',
+            this.isEmpty() ? 'pecb-slide-viewer--empty' : '',
+            this.isFullscreen() ? 'pecb-slide-viewer--fullscreen' : '',
+            this.sidebar() === 'none' ? 'pecb-slide-viewer--no-sidebar' : '',
+            this.sidebar() === 'start' ? 'pecb-slide-viewer--sidebar-start' : '',
+            this.isSearching() ? 'pecb-slide-viewer--searching' : '',
+            this.isZoomed() ? 'pecb-slide-viewer--zoomed' : '',
+            this.selectable() ? 'pecb-slide-viewer--selectable' : '',
+            this.reorderable() ? 'pecb-slide-viewer--reorderable' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+        // Keep `page` inside the range whenever slides change (a shorter day, a reload).
+        effect(() => {
+            const clamped = this.currentPage();
+            untracked(() => {
+                if (this.page() !== clamped)
+                    this.page.set(clamped);
+            });
+        });
+        // Double-buffered stage: decode the next source off screen, then swap. The flag is
+        // reset per source, not per page/slides update (a deck that fills in progressively
+        // replaces `slides` on every page).
+        effect(() => {
+            const src = this.stageSrc();
+            untracked(() => {
+                if (src === this.lastStageSrc)
+                    return;
+                this.lastStageSrc = src;
+                this.showStageSource(src);
+            });
+        });
+        // Lazy full images: ask the host once per page for the current slide and its
+        // neighbours (`prefetch`), current first. Decoded neighbours are kept warm.
+        effect(() => {
+            const page = this.currentPage();
+            const slides = this.slides();
+            const reach = Math.max(0, this.prefetch());
+            untracked(() => {
+                if (this.lastSlidesRef !== slides) {
+                    // A new array: keep only pages that still lack an image, so a later day can
+                    // ask again for the same numbers.
+                    this.lastSlidesRef = slides;
+                    this.requestedFullImages = new Set([...this.requestedFullImages].filter((p) => slides[p - 1] && !slides[p - 1].image));
+                }
+                if (slides.length === 0)
+                    return;
+                const order = [page];
+                for (let d = 1; d <= reach; d++) {
+                    if (page + d <= slides.length)
+                        order.push(page + d);
+                    if (page - d >= 1)
+                        order.push(page - d);
+                }
+                for (const n of order) {
+                    const slide = slides[n - 1];
+                    if (!slide)
+                        continue;
+                    if (!slide.image) {
+                        if (!this.requestedFullImages.has(n)) {
+                            this.requestedFullImages.add(n);
+                            this.fullImageRequest.emit(n);
+                        }
+                    }
+                    else if (n !== page) {
+                        this.warmDecode(slide.image);
+                    }
+                }
+            });
+        });
+        // Announce the slide for assistive tech.
+        effect(() => {
+            const page = this.currentPage();
+            const total = this.total();
+            untracked(() => {
+                this.announcement.set(total > 0 ? this.format(this.text().slideAnnouncement, { n: page, total }) : '');
+            });
+        });
+        // Announce page changes once, whatever moved the page (models included).
+        effect(() => {
+            const page = this.currentPage();
+            const total = this.total();
+            untracked(() => {
+                this.pageDraft.set(null);
+                if (total > 0 && page !== this.lastEmittedPage) {
+                    this.lastEmittedPage = page;
+                    this.slideChange.emit({ page, total, slide: this.currentSlide(), source: this.pendingSource });
+                    this.pendingSource = 'api';
+                }
+                this.scrollActiveThumbnailIntoView();
+            });
+        });
+        // Report search matches.
+        effect(() => {
+            const term = this.searchTerm();
+            const matches = this.matches();
+            untracked(() => this.searchChange.emit({ term, matches }));
+        });
+        // Zoom is only meaningful while zoomable.
+        effect(() => {
+            if (!this.zoomable())
+                untracked(() => this.zoom.set(1));
+        });
+        // Recompute the rendered window whenever the list, the mode or the sidebar changes.
+        effect(() => {
+            this.matches();
+            this.windowed();
+            this.sidebar();
+            this.tileStride();
+            untracked(() => this.scheduleWindowUpdate());
+        });
+        if (this.isBrowser) {
+            afterNextRender(() => {
+                this.attachSidebarListeners();
+                this.scheduleWindowUpdate();
+                this.scrollActiveThumbnailIntoView(false);
+            });
+            this.destroyRef.onDestroy(() => {
+                this.clearSearchTimer();
+                this.detachSidebarListeners();
+                this.decodeCache.clear();
+            });
+        }
+    }
+    // ── Public API ──────────────────────────────────────────────────────────────
+    /** Go to a 1-based slide (clamped). Hidden slides are stepped over while `skipHidden`. */
+    goTo(page, source = 'api') {
+        if (this.navDisabled())
+            return;
+        let target = clampSlidePage(page, this.total());
+        if (this.skipHidden() && this.isHidden(target)) {
+            const forward = target >= this.currentPage();
+            const resolved = forward
+                ? (this.nextVisible(target) ?? this.previousVisible(target))
+                : (this.previousVisible(target) ?? this.nextVisible(target));
+            if (resolved === null)
+                return;
+            target = resolved;
+        }
+        if (target === this.currentPage()) {
+            this.pageDraft.set(null);
+            return;
+        }
+        this.pendingSource = source;
+        this.page.set(target);
+    }
+    first(source = 'nav') {
+        this.goTo(1, source);
+    }
+    previous(source = 'nav') {
+        const target = this.skipHidden() ? this.previousVisible(this.currentPage()) : this.currentPage() - 1;
+        if (target !== null)
+            this.goTo(target, source);
+    }
+    next(source = 'nav') {
+        const target = this.skipHidden() ? this.nextVisible(this.currentPage()) : this.currentPage() + 1;
+        if (target !== null)
+            this.goTo(target, source);
+    }
+    last(source = 'nav') {
+        this.goTo(this.total(), source);
+    }
+    /** Select a day: emits `dayChange`, resets the page and clears the search. */
+    selectDay(day) {
+        if (day.id === this.activeDayId())
+            return;
+        this.activeDayId.set(day.id);
+        this.clearSearch();
+        this.pendingSource = 'day';
+        this.page.set(1);
+        this.dayChange.emit(day);
+    }
+    /** Press a built-in tool. The disabled download tool is ignored. */
+    pressTool(tool) {
+        if (tool === 'downloadSlides' && !this.canDownloadSlides())
+            return;
+        this.tool.emit({ tool, page: this.currentPage() });
+    }
+    toggleNote() {
+        this.noteOpen.update((open) => !open);
+    }
+    /** "Try again" in the error state. */
+    requestRetry() {
+        this.retry.emit();
+    }
+    /** Enter / exit fullscreen on the stage. */
+    async toggleFullscreen() {
+        if (!this.isBrowser)
+            return;
+        const stage = this.stageRef()?.nativeElement;
+        if (!stage)
+            return;
+        try {
+            if (document.fullscreenElement) {
+                await document.exitFullscreen();
+            }
+            else if (stage.requestFullscreen) {
+                await stage.requestFullscreen();
+            }
+        }
+        catch {
+            // Fullscreen can be denied (iframe sandbox, user-gesture rules) — ignore.
+        }
+    }
+    /** Next zoom step (wraps back to fit after the last one). */
+    zoomIn() {
+        if (!this.zoomable())
+            return;
+        const steps = this.zoomSteps();
+        const current = this.zoomLevel();
+        const next = steps.find((s) => s > current + 0.001);
+        this.zoom.set(next ?? steps[0] ?? 1);
+    }
+    zoomOut() {
+        if (!this.zoomable())
+            return;
+        const steps = [...this.zoomSteps()].reverse();
+        const current = this.zoomLevel();
+        const prev = steps.find((s) => s < current - 0.001);
+        this.zoom.set(prev ?? 1);
+    }
+    zoomReset() {
+        this.zoom.set(1);
+    }
+    /** Clear the keyword filter. */
+    clearSearch() {
+        this.clearSearchTimer();
+        if (this.searchTerm() !== '')
+            this.searchTerm.set('');
+        const input = this.searchRef()?.nativeElement;
+        if (input)
+            input.value = '';
+    }
+    /** Move keyboard focus to the search field. */
+    focusSearch() {
+        this.searchRef()?.nativeElement.focus();
+    }
+    /** Toggle a slide in the selection (selection mode). */
+    toggleSelected(slide, n) {
+        const id = this.slideId(slide, n);
+        this.selectedIds.update((ids) => (ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id]));
+    }
+    /** Select every (matching) slide, or clear the selection. */
+    selectAll(selected = true) {
+        if (!selected) {
+            this.selectedIds.set([]);
+            return;
+        }
+        const slides = this.slides();
+        this.selectedIds.set(this.matches().map((n) => this.slideId(slides[n - 1], n)));
+    }
+    // ── Template handlers ───────────────────────────────────────────────────────
+    onStageImageLoad() {
+        this.stageImageLoaded.set(true);
+    }
+    onStageImageError() {
+        // Treat a broken image like a loaded one so the veil doesn't stay forever.
+        this.stageImageLoaded.set(true);
+    }
+    onPageInput(event) {
+        this.pageDraft.set(event.target.value);
+    }
+    onPageCommit(event) {
+        const input = event.target;
+        const value = Number(input.value);
+        if (Number.isFinite(value) && value > 0) {
+            this.goTo(value, 'input');
+        }
+        this.resetPageInput(input);
+    }
+    onPageInputKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.onPageCommit(event);
+            event.target.blur();
+        }
+        else if (event.key === 'Escape') {
+            this.resetPageInput(event.target);
+            event.target.blur();
+        }
+    }
+    onSearchInput(event) {
+        const value = event.target.value;
+        this.clearSearchTimer();
+        const delay = this.searchDebounce();
+        if (delay <= 0) {
+            this.searchTerm.set(value);
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            this.searchTimer = setTimeout(() => {
+                this.searchTimer = null;
+                this.zone.run(() => this.searchTerm.set(value));
+            }, delay);
+        });
+    }
+    onSearchKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.clearSearch();
+        }
+    }
+    onThumbnailClick(page) {
+        this.goTo(page, 'thumbnail');
+    }
+    onTileCheckbox(event, slide, n) {
+        event.stopPropagation();
+        this.toggleSelected(slide, n);
+    }
+    /** Touch / pen swipe on the stage (not while zoomed: then the finger pans). */
+    onStagePointerDown(event) {
+        if (!this.swipe() || this.isZoomed() || event.pointerType === 'mouse') {
+            this.swipeStart = null;
+            return;
+        }
+        this.swipeStart = { x: event.clientX, y: event.clientY, id: event.pointerId };
+    }
+    onStagePointerUp(event) {
+        const start = this.swipeStart;
+        this.swipeStart = null;
+        if (!start || start.id !== event.pointerId)
+            return;
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        // Mostly horizontal and long enough to be deliberate.
+        if (Math.abs(dx) < 48 || Math.abs(dx) < Math.abs(dy) * 1.5)
+            return;
+        if (dx < 0)
+            this.next('wheel');
+        else
+            this.previous('wheel');
+    }
+    onStagePointerCancel() {
+        this.swipeStart = null;
+    }
+    /** Mouse wheel over the stage: zooms with Ctrl/⌘ while zoomable, navigates in fullscreen. */
+    onStageWheel(event) {
+        if ((event.ctrlKey || event.metaKey) && this.zoomable()) {
+            event.preventDefault();
+            if (event.deltaY < 0)
+                this.zoomIn();
+            else
+                this.zoomOut();
+            return;
+        }
+        if (!this.isFullscreen() || this.isZoomed())
+            return;
+        if (Math.abs(event.deltaY) < 4)
+            return;
+        event.preventDefault();
+        if (event.deltaY > 0)
+            this.next('wheel');
+        else
+            this.previous('wheel');
+    }
+    /** Keyboard shortcuts on the viewer region (see `keyMap`). */
+    onRootKeydown(event) {
+        if (!this.keyboard())
+            return;
+        const target = event.target;
+        const root = this.rootRef()?.nativeElement;
+        // Let inputs, selects and the projected controls handle their own keys.
+        if (target &&
+            target !== root &&
+            target.matches('input, select, textarea, [contenteditable="true"]')) {
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const action = this.actionForKey(event.key);
+        if (!action)
+            return;
+        switch (action) {
+            case 'next':
+                this.next('keyboard');
+                break;
+            case 'previous':
+                this.previous('keyboard');
+                break;
+            case 'first':
+                this.first('keyboard');
+                break;
+            case 'last':
+                this.last('keyboard');
+                break;
+            case 'fullscreen':
+                if (!this.showFullscreen())
+                    return;
+                void this.toggleFullscreen();
+                break;
+            case 'search':
+                if (this.sidebar() === 'none' || !this.showSearch())
+                    return;
+                this.focusSearch();
+                break;
+            case 'zoomIn':
+                if (!this.zoomable())
+                    return;
+                this.zoomIn();
+                break;
+            case 'zoomOut':
+                if (!this.zoomable())
+                    return;
+                this.zoomOut();
+                break;
+            case 'zoomReset':
+                if (!this.zoomable())
+                    return;
+                this.zoomReset();
+                break;
+        }
+        event.preventDefault();
+    }
+    onDocumentFullscreenChange() {
+        if (!this.isBrowser)
+            return;
+        const stage = this.stageRef()?.nativeElement;
+        const active = !!stage && document.fullscreenElement === stage;
+        if (active !== this.isFullscreen()) {
+            this.isFullscreen.set(active);
+            this.fullscreenChange.emit(active);
+        }
+    }
+    // ── Drag & drop reorder ─────────────────────────────────────────────────────
+    onTileDragStart(event, n) {
+        if (!this.reorderable())
+            return;
+        this.dragFrom.set(n);
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', String(n));
+        }
+    }
+    onTileDragOver(event, n) {
+        if (!this.reorderable() || this.dragFrom() === null)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        if (this.dragOver() !== n)
+            this.dragOver.set(n);
+    }
+    onTileDrop(event, n) {
+        if (!this.reorderable())
+            return;
+        event.preventDefault();
+        const from = this.dragFrom();
+        this.dragFrom.set(null);
+        this.dragOver.set(null);
+        if (from === null || from === n)
+            return;
+        const slide = this.slides()[from - 1];
+        if (slide)
+            this.slideMove.emit({ from, to: n, slide });
+    }
+    onTileDragEnd() {
+        this.dragFrom.set(null);
+        this.dragOver.set(null);
+    }
+    // ── Helpers ─────────────────────────────────────────────────────────────────
+    /** Accessible title of a slide (`title`, else `{slide} {n}`). */
+    slideTitle(slide, n) {
+        return slide?.title?.trim() || this.format(this.text().slide, { n });
+    }
+    slideId(slide, n) {
+        return slide.id ?? n;
+    }
+    thumbnailSrc(slide) {
+        return slide.thumbnail ?? slide.image ?? null;
+    }
+    /** A tile whose thumbnail is still being produced (big decks publish pages first). */
+    tilePending(slide) {
+        return !slide.thumbnail && !slide.image;
+    }
+    isSelected(slide, n) {
+        return this.selectedSet().has(this.slideId(slide, n));
+    }
+    selectLabel(n) {
+        return this.format(this.text().selectSlide, { n });
+    }
+    thumbnailContext(slide, n) {
+        return {
+            $implicit: slide,
+            index: n,
+            active: n === this.currentPage(),
+            selected: this.isSelected(slide, n),
+        };
+    }
+    dayContext(day) {
+        return { $implicit: day, active: day.id === this.activeDayId() };
+    }
+    isHidden(n) {
+        return !!this.slides()[n - 1]?.hidden;
+    }
+    nextVisible(from) {
+        for (let p = from + 1; p <= this.total(); p++) {
+            if (!this.isHidden(p))
+                return p;
+        }
+        return null;
+    }
+    previousVisible(from) {
+        for (let p = from - 1; p >= 1; p--) {
+            if (!this.isHidden(p))
+                return p;
+        }
+        return null;
+    }
+    actionForKey(key) {
+        const map = this.keys();
+        for (const action of Object.keys(map)) {
+            if (map[action]?.includes(key))
+                return action;
+        }
+        return null;
+    }
+    slideMatches(slide, n, term) {
+        const haystack = [
+            slide.title ?? '',
+            slide.text ?? '',
+            this.format(this.text().slide, { n }),
+            String(n),
+        ]
+            .join(' ')
+            .toLowerCase();
+        return haystack.includes(term);
+    }
+    format(template, values) {
+        return template.replace(/\{(\w+)\}/g, (_, key) => key in values ? String(values[key]) : `{${key}}`);
+    }
+    /**
+     * Show the current page in the number field again. Written to the DOM directly:
+     * a number input sanitises junk to `''`, and the `[value]` binding would not
+     * re-apply an unchanged `'20'` on top of it.
+     */
+    resetPageInput(input) {
+        this.pageDraft.set(null);
+        if (input)
+            input.value = String(this.currentPage());
+    }
+    scrollActiveThumbnailIntoView(smooth = true) {
+        if (!this.isBrowser)
+            return;
+        const list = this.thumbsRef()?.nativeElement;
+        if (!list)
+            return;
+        const reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const behavior = smooth && !reduce ? 'smooth' : 'auto';
+        if (this.windowed()) {
+            // The active tile may not be in the DOM: position from its index. The window is
+            // moved first so the spacers are right when the scroll lands (no anchoring jump).
+            const index = this.matches().indexOf(this.currentPage());
+            if (index < 0)
+                return;
+            this.measureTile(list);
+            const stride = this.tileStride();
+            const top = index * stride;
+            const bottom = top + stride;
+            let target = null;
+            if (top < list.scrollTop)
+                target = top;
+            else if (bottom > list.scrollTop + list.clientHeight)
+                target = bottom - list.clientHeight;
+            if (target === null)
+                return;
+            // Smooth only for short hops; a jump across hundreds of tiles snaps.
+            const far = Math.abs(target - list.scrollTop) > 3 * Math.max(list.clientHeight, stride);
+            const over = Math.max(0, this.overscan());
+            const visible = Math.ceil((list.clientHeight || 600) / stride) + 1;
+            const first = Math.floor(target / stride);
+            this.windowRange.set({
+                start: Math.max(0, first - over),
+                end: Math.min(this.matches().length, first + visible + over),
+            });
+            const goal = target;
+            requestAnimationFrame(() => {
+                // 'instant' beats the list's CSS `scroll-behavior: smooth` for long jumps.
+                list.scrollTo({ top: goal, behavior: far ? 'instant' : behavior });
+                this.scheduleWindowUpdate();
+            });
+            return;
+        }
+        // The active class lands on the next render.
+        requestAnimationFrame(() => {
+            const active = list.querySelector('.pecb-slide-viewer__thumb--active');
+            active?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior });
+        });
+    }
+    // ── Virtualised sidebar ─────────────────────────────────────────────────────
+    attachSidebarListeners() {
+        const list = this.thumbsRef()?.nativeElement;
+        if (!list || this.scrollListener)
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.scrollListener = () => this.scheduleWindowUpdate();
+            list.addEventListener('scroll', this.scrollListener, { passive: true });
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver(() => this.scheduleWindowUpdate());
+                this.resizeObserver.observe(list);
+            }
+        });
+    }
+    detachSidebarListeners() {
+        const list = this.thumbsRef()?.nativeElement;
+        if (list && this.scrollListener)
+            list.removeEventListener('scroll', this.scrollListener);
+        this.scrollListener = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.scrollRaf !== null)
+            cancelAnimationFrame(this.scrollRaf);
+        this.scrollRaf = null;
+    }
+    /** Coalesce scroll / resize / data changes into one window computation per frame. */
+    scheduleWindowUpdate() {
+        if (!this.isBrowser)
+            return;
+        if (this.scrollRaf !== null)
+            return;
+        this.scrollRaf = requestAnimationFrame(() => {
+            this.scrollRaf = null;
+            this.updateWindow();
+        });
+    }
+    updateWindow() {
+        const list = this.thumbsRef()?.nativeElement;
+        if (!list)
+            return;
+        if (!this.scrollListener)
+            this.attachSidebarListeners();
+        if (!this.windowed()) {
+            this.measureTile(list);
+            return;
+        }
+        this.measureTile(list);
+        const stride = this.tileStride();
+        const count = this.matches().length;
+        const viewport = list.clientHeight || 600;
+        const first = Math.floor(list.scrollTop / stride);
+        const visible = Math.ceil(viewport / stride) + 1;
+        const over = Math.max(0, this.overscan());
+        const start = Math.max(0, first - over);
+        const end = Math.min(count, first + visible + over);
+        const current = this.windowRange();
+        if (current.start !== start || current.end !== end) {
+            this.zone.run(() => this.windowRange.set({ start, end }));
+        }
+    }
+    /** Tile height incl. the list gap, measured from the first rendered tile. */
+    measureTile(list) {
+        const tile = list.querySelector('.pecb-slide-viewer__thumb:not(.pecb-slide-viewer__thumb--skeleton)');
+        if (!tile)
+            return;
+        const gap = parseFloat(getComputedStyle(list).rowGap || '0') || 0;
+        const stride = Math.round(tile.getBoundingClientRect().height + gap);
+        const previous = this.tileStride();
+        if (stride > 0 && Math.abs(stride - previous) > 1) {
+            // Keep the same tile at the top when the estimate is corrected.
+            const index = list.scrollTop / previous;
+            this.zone.run(() => this.tileStride.set(stride));
+            if (index > 0)
+                list.scrollTo({ top: index * stride, behavior: 'instant' });
+        }
+    }
+    // ── Neighbour decode cache ──────────────────────────────────────────────────
+    /** Decode an image off screen so a later swap paints instantly. Bounded to 8 entries. */
+    warmDecode(src) {
+        if (!this.isBrowser || typeof Image === 'undefined' || this.decodeCache.has(src))
+            return;
+        const img = new Image();
+        img.decoding = 'async';
+        img.src = src;
+        this.decodeCache.set(src, img);
+        if (typeof img.decode === 'function')
+            img.decode().catch(() => undefined);
+        while (this.decodeCache.size > 8) {
+            const oldest = this.decodeCache.keys().next().value;
+            if (oldest === undefined)
+                break;
+            this.decodeCache.delete(oldest);
+        }
+    }
+    /**
+     * Paint `src` on the stage once it is decoded. While decoding, the previous image
+     * stays on screen (`stageBusy` marks the transition); the first image, with nothing
+     * to keep, shows the veil instead.
+     */
+    showStageSource(src) {
+        const token = ++this.stageLoadToken;
+        if (!src) {
+            this.displayedSrc.set(null);
+            this.stageImageLoaded.set(false);
+            this.stageBusy.set(false);
+            return;
+        }
+        if (!this.isBrowser || typeof Image === 'undefined') {
+            this.displayedSrc.set(src);
+            this.stageImageLoaded.set(true);
+            return;
+        }
+        if (this.displayedSrc()) {
+            this.stageBusy.set(true);
+        }
+        else {
+            this.stageImageLoaded.set(false);
+        }
+        // A neighbour decoded ahead paints straight away.
+        const probe = this.decodeCache.get(src) ?? new Image();
+        probe.decoding = 'async';
+        const commit = () => {
+            if (token !== this.stageLoadToken)
+                return; // superseded by a newer source
+            this.zone.run(() => {
+                this.displayedSrc.set(src);
+                this.stageImageLoaded.set(true);
+                this.stageBusy.set(false);
+            });
+        };
+        const ready = () => {
+            // decode() paints without a flash of unpainted image; fall back if unsupported.
+            const decoded = typeof probe.decode === 'function' ? probe.decode() : Promise.resolve();
+            decoded.then(commit, commit);
+        };
+        if (probe.complete && probe.naturalWidth > 0) {
+            ready();
+            return;
+        }
+        probe.onload = ready;
+        probe.onerror = commit; // a broken image still replaces the stage (alt text shows)
+        if (!probe.src)
+            probe.src = src;
+    }
+    clearSearchTimer() {
+        if (this.searchTimer !== null) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SlideViewerComponent, isStandalone: true, selector: "pecb-slide-viewer", inputs: { days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null }, slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, showNote: { classPropertyName: "showNote", publicName: "showNote", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: false, transformFunction: null }, canDownloadSlides: { classPropertyName: "canDownloadSlides", publicName: "canDownloadSlides", isSignal: true, isRequired: false, transformFunction: null }, stageAspectRatio: { classPropertyName: "stageAspectRatio", publicName: "stageAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showSlideInput: { classPropertyName: "showSlideInput", publicName: "showSlideInput", isSignal: true, isRequired: false, transformFunction: null }, showFullscreen: { classPropertyName: "showFullscreen", publicName: "showFullscreen", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, zoomSteps: { classPropertyName: "zoomSteps", publicName: "zoomSteps", isSignal: true, isRequired: false, transformFunction: null }, skipHidden: { classPropertyName: "skipHidden", publicName: "skipHidden", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, virtualizeAbove: { classPropertyName: "virtualizeAbove", publicName: "virtualizeAbove", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, prefetch: { classPropertyName: "prefetch", publicName: "prefetch", isSignal: true, isRequired: false, transformFunction: null }, swipe: { classPropertyName: "swipe", publicName: "swipe", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, keyMap: { classPropertyName: "keyMap", publicName: "keyMap", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, activeDayId: { classPropertyName: "activeDayId", publicName: "activeDayId", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, noteOpen: { classPropertyName: "noteOpen", publicName: "noteOpen", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeDayId: "activeDayIdChange", page: "pageChange", searchTerm: "searchTermChange", noteOpen: "noteOpenChange", zoom: "zoomChange", selectedIds: "selectedIdsChange", dayChange: "dayChange", slideChange: "slideChange", tool: "tool", fullscreenChange: "fullscreenChange", searchChange: "searchChange", fullImageRequest: "fullImageRequest", slideMove: "slideMove", retry: "retry" }, host: { listeners: { "document:fullscreenchange": "onDocumentFullscreenChange()" }, properties: { "style.--pecb-slide-aspect-ratio": "stageAspectRatio()" }, classAttribute: "pecb-slide-viewer-host" }, queries: [{ propertyName: "thumbnailTemplate", first: true, predicate: SlideViewerThumbnailDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: SlideViewerDayDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "thumbsRef", first: true, predicate: ["thumbs"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #root\n  [class]=\"hostClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"text().viewer\"\n  aria-roledescription=\"slide viewer\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  <!-- \u2500\u2500 Top bar: day pills + tools (mock `.sl-top`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (showDays() || tools().length > 0) {\n    <div class=\"pecb-slide-viewer__top\">\n      @if (showDays()) {\n        <div class=\"pecb-slide-viewer__days\" role=\"tablist\" [attr.aria-label]=\"text().days\">\n          @for (day of days(); track day.id) {\n            <button\n              type=\"button\"\n              class=\"pecb-slide-viewer__day\"\n              role=\"tab\"\n              [class.pecb-slide-viewer__day--active]=\"day.id === activeDayId()\"\n              [attr.aria-selected]=\"day.id === activeDayId()\"\n              [attr.tabindex]=\"day.id === activeDayId() ? 0 : -1\"\n              (click)=\"selectDay(day)\"\n            >\n              @if (dayTemplate(); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: dayContext(day)\" />\n              } @else {\n                {{ day.label }}\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"pecb-slide-viewer__tools\" role=\"toolbar\">\n        <!-- Product-specific tools placed before the built-in ones (e.g. a notes menu) -->\n        <ng-content select=\"[pecbSlideViewerToolsStart]\"></ng-content>\n        @for (t of tools(); track t) {\n          @switch (t) {\n            @case ('notes') {\n              <button type=\"button\" class=\"pecb-slide-viewer__tool\" (click)=\"pressTool('notes')\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M15 6 10.5 1.5h-6A1.5 1.5 0 0 0 3 3v12a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 15 15V6ZM10.5 1.5V6H15M12 9.75H6M12 12.75H6M7.5 6.75H6\" />\n                </svg>\n                <span>{{ text().notes }}</span>\n              </button>\n            }\n            @case ('feedback') {\n              <button type=\"button\" class=\"pecb-slide-viewer__tool\" (click)=\"pressTool('feedback')\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M15.75 8.625a6.6 6.6 0 0 1-.675 2.85 6.4 6.4 0 0 1-5.7 3.525 6.6 6.6 0 0 1-2.85-.675L2.25 15.75l1.425-4.275A6.6 6.6 0 0 1 3 8.625a6.4 6.4 0 0 1 3.525-5.7 6.6 6.6 0 0 1 2.85-.675h.375a6.4 6.4 0 0 1 6 6v.375Z\" />\n                </svg>\n                <span>{{ text().feedback }}</span>\n              </button>\n            }\n            @case ('courseFiles') {\n              <button type=\"button\" class=\"pecb-slide-viewer__tool\" (click)=\"pressTool('courseFiles')\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M15 9.375V5.1c0-1.26 0-1.89-.245-2.371a2.25 2.25 0 0 0-.984-.984C13.29 1.5 12.66 1.5 11.4 1.5H6.6c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C3 3.21 3 3.84 3 5.1v7.8c0 1.26 0 1.89.245 2.371a2.25 2.25 0 0 0 .984.984c.481.245 1.111.245 2.371.245h2.775M10.5 8.25H6M7.5 11.25H6M12 5.25H6M15.75 14.25 13.5 16.5l-2.25-2.25M13.5 16.5V12\" />\n                </svg>\n                <span>{{ text().courseFiles }}</span>\n              </button>\n            }\n            @case ('downloadSlides') {\n              <button\n                type=\"button\"\n                class=\"pecb-slide-viewer__tool\"\n                [disabled]=\"!canDownloadSlides()\"\n                [attr.title]=\"canDownloadSlides() ? null : text().downloadUnavailable\"\n                [attr.aria-disabled]=\"canDownloadSlides() ? null : 'true'\"\n                (click)=\"pressTool('downloadSlides')\"\n              >\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"m7.2 12.15-1.35 3.6M12.446 15.7l-1.591-3.5M7.2 7.7l1.76 1.75 1.84-1.832M8.96 9.45v-4.5M3.6 12.15a1.8 1.8 0 0 1-1.8-1.8v-6.3a1.8 1.8 0 0 1 1.8-1.8h10.8a1.8 1.8 0 0 1 1.8 1.8v6.3a1.8 1.8 0 0 1-1.8 1.8H3.6Z\" />\n                </svg>\n                <span>{{ text().downloadSlides }}</span>\n              </button>\n            }\n          }\n        }\n        <!-- Product-specific tools (e.g. an LTI \"Finish\" button) -->\n        <ng-content select=\"[pecbSlideViewerTools]\"></ng-content>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Main: stage column + sidebar (mock `.sl-main`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-slide-viewer__main\">\n    <div class=\"pecb-slide-viewer__stagecol\">\n      <!-- Stage -->\n      <div\n        #stage\n        class=\"pecb-slide-viewer__stage\"\n        [class.pecb-slide-viewer__stage--fallback]=\"stageIsFallback()\"\n        [class.pecb-slide-viewer__stage--skeleton]=\"stageSkeleton()\"\n        [attr.aria-busy]=\"stageVeil() ? 'true' : null\"\n        (wheel)=\"onStageWheel($event)\"\n        (pointerdown)=\"onStagePointerDown($event)\"\n        (pointerup)=\"onStagePointerUp($event)\"\n        (pointercancel)=\"onStagePointerCancel()\"\n      >\n        <div class=\"pecb-slide-viewer__viewport\">\n          @if (error() || isEmpty()) {\n            <!-- Nothing to show: explain why (host can replace the message through the slot). -->\n            <div class=\"pecb-slide-viewer__message\" [class.pecb-slide-viewer__message--error]=\"error()\" role=\"status\">\n              <ng-content select=\"[pecbSlideViewerEmpty]\"></ng-content>\n              <div class=\"pecb-slide-viewer__message-default\">\n                @if (error()) {\n                  <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" /><path d=\"M14 2v6h6\" /><path d=\"m9.5 12.5 5 5M14.5 12.5l-5 5\" />\n                  </svg>\n                  <strong>{{ text().errorTitle }}</strong>\n                  <span>{{ text().errorHint }}</span>\n                  <button type=\"button\" class=\"pecb-slide-viewer__retry\" (click)=\"requestRetry()\">{{ text().retry }}</button>\n                } @else {\n                  <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 12l3-3 2 2 3-3 2 2\" />\n                  </svg>\n                  <strong>{{ text().emptyTitle }}</strong>\n                  <span>{{ text().emptyHint }}</span>\n                }\n              </div>\n            </div>\n          } @else if (displayedSrc(); as src) {\n            <img\n              class=\"pecb-slide-viewer__image\"\n              [src]=\"src\"\n              [alt]=\"slideTitle(currentSlide(), currentPage())\"\n              [style.width.%]=\"zoomPercent()\"\n              [style.height.%]=\"zoomPercent()\"\n              decoding=\"sync\"\n              draggable=\"false\"\n              (load)=\"onStageImageLoad()\"\n              (error)=\"onStageImageError()\"\n            />\n          }\n        </div>\n\n        @if (stageBusy()) {\n          <!-- Next image decoding: a thin activity line, the current slide stays put. -->\n          <div class=\"pecb-slide-viewer__progress\" aria-hidden=\"true\"></div>\n        }\n\n        <!-- Host overlay: annotations, laser pointer, badges\u2026 -->\n        <div class=\"pecb-slide-viewer__overlay\">\n          <ng-content select=\"[pecbSlideViewerStage]\"></ng-content>\n        </div>\n\n        @if (total() > 0) {\n          <span class=\"pecb-slide-viewer__stage-n\" aria-hidden=\"true\">{{ currentPage() }}</span>\n        }\n        <span class=\"pecb-slide-viewer__sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</span>\n\n        @if (stageVeil()) {\n          <!-- No spinner: the shimmering stage is the loading state; the percentage, when known, sits on it. -->\n          <div class=\"pecb-slide-viewer__veil\" role=\"status\">\n            @if (loading() && progressText()) {\n              <span class=\"pecb-slide-viewer__veil-text\">{{ progressText() }}</span>\n            } @else {\n              <span class=\"pecb-slide-viewer__sr-only\">{{ text().loading }}</span>\n            }\n          </div>\n        }\n\n        @if (isFullscreen() && showFullscreen()) {\n          <button\n            type=\"button\"\n            class=\"pecb-slide-viewer__fs-exit\"\n            [attr.aria-label]=\"text().exitFullscreen\"\n            (click)=\"toggleFullscreen()\"\n          >\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m13-5h-3a2 2 0 0 0-2 2v3\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <!-- Navigation bar (mock `.sl-bar`) -->\n      <div class=\"pecb-slide-viewer__bar\">\n        <div class=\"pecb-slide-viewer__nav\">\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().first\" [disabled]=\"navDisabled() || isFirst()\" (click)=\"first()\">\n            <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M5.96.835.836 5.96l5.125 5.125M11.502.835 6.377 5.96l5.125 5.125\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().previous\" [disabled]=\"navDisabled() || isFirst()\" (click)=\"previous()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M12.502 6.669H.835M6.669.835.835 6.669l5.834 5.833\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().next\" [disabled]=\"navDisabled() || isLast()\" (click)=\"next()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M.836 6.668h11.667M6.669 12.502l5.834-5.834L6.669.835\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().last\" [disabled]=\"navDisabled() || isLast()\" (click)=\"last()\">\n            <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"m6.377 11.085 5.125-5.125L6.377.835M.836 11.085 5.961 5.96.836.835\" />\n            </svg>\n          </button>\n        </div>\n\n        @if (showSlideInput()) {\n          <div class=\"pecb-slide-viewer__count\">\n            <label [attr.for]=\"uid + '-page'\">{{ slideWord() }}</label>\n            <input\n              class=\"pecb-slide-viewer__page-input\"\n              type=\"number\"\n              inputmode=\"numeric\"\n              [id]=\"uid + '-page'\"\n              min=\"1\"\n              [attr.max]=\"total() || 1\"\n              [value]=\"pageInputValue()\"\n              [disabled]=\"navDisabled()\"\n              [attr.aria-label]=\"text().slideNumber\"\n              (input)=\"onPageInput($event)\"\n              (change)=\"onPageCommit($event)\"\n              (keydown)=\"onPageInputKeydown($event)\"\n            />\n            <span aria-hidden=\"true\">{{ text().of }}{{ total() }}</span>\n          </div>\n        }\n\n        @if (zoomable()) {\n          <div class=\"pecb-slide-viewer__zoom\" role=\"group\">\n            <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().zoomOut\" [disabled]=\"navDisabled() || !isZoomed()\" (click)=\"zoomOut()\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\" /></svg>\n            </button>\n            <button type=\"button\" class=\"pecb-slide-viewer__zoom-value\" [attr.aria-label]=\"text().zoomReset\" [disabled]=\"navDisabled() || !isZoomed()\" (click)=\"zoomReset()\">\n              {{ zoomPercent() }}%\n            </button>\n            <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().zoomIn\" [disabled]=\"navDisabled()\" (click)=\"zoomIn()\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\" /></svg>\n            </button>\n          </div>\n        }\n\n        <div class=\"pecb-slide-viewer__right\">\n          <!-- Version select or any other control the product wants here -->\n          <ng-content select=\"[pecbSlideViewerVersion]\"></ng-content>\n\n          @if (showFullscreen()) {\n            <button\n              type=\"button\"\n              class=\"pecb-slide-viewer__nb\"\n              [attr.aria-label]=\"isFullscreen() ? text().exitFullscreen : text().enterFullscreen\"\n              [attr.aria-pressed]=\"isFullscreen()\"\n              [disabled]=\"navDisabled()\"\n              (click)=\"toggleFullscreen()\"\n            >\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m13-5v3a2 2 0 0 1-2 2h-3\" />\n              </svg>\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Note (mock `.sl-note`) -->\n      @if (hasNote()) {\n        <div class=\"pecb-slide-viewer__note\" [class.pecb-slide-viewer__note--open]=\"noteOpen()\">\n          <button\n            type=\"button\"\n            class=\"pecb-slide-viewer__note-h\"\n            [attr.aria-expanded]=\"noteOpen()\"\n            [attr.aria-controls]=\"uid + '-note'\"\n            (click)=\"toggleNote()\"\n          >\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M14 11H8M10 15H8M16 7H8M20 6.8v10.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h6.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C20 4.28 20 5.12 20 6.8Z\" />\n            </svg>\n            <span>{{ text().note }}</span>\n            <i class=\"pecb-slide-viewer__chev\" aria-hidden=\"true\">\n              <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"m6 9 6 6 6-6\" />\n              </svg>\n            </i>\n          </button>\n          <div class=\"pecb-slide-viewer__note-b\" [id]=\"uid + '-note'\" [attr.hidden]=\"noteOpen() ? null : ''\">\n            @if (note(); as n) {\n              <div [innerHTML]=\"n\"></div>\n            }\n            <!-- Host-rendered note body (an editor, actions\u2026) -->\n            <ng-content select=\"[pecbSlideViewerNote]\"></ng-content>\n          </div>\n        </div>\n      }\n\n      <!-- Anything the product wants under the stage column (e.g. an LTI table) -->\n      <ng-content select=\"[pecbSlideViewerBelow]\"></ng-content>\n    </div>\n\n    <!-- \u2500\u2500 Sidebar: search + thumbnails (mock `.sl-side`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (sidebar() !== 'none') {\n      <aside class=\"pecb-slide-viewer__side\" [attr.aria-label]=\"text().thumbnails\">\n        <!-- Host header: a title, \"Add slide\"\u2026 -->\n        <ng-content select=\"[pecbSlideViewerSidebarHeader]\"></ng-content>\n\n        @if (showSearch()) {\n          <div class=\"pecb-slide-viewer__search\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\" />\n              <path d=\"m21 21-4.3-4.3\" />\n            </svg>\n            <input\n              #search\n              type=\"search\"\n              [attr.placeholder]=\"text().searchPlaceholder\"\n              [attr.aria-label]=\"text().searchPlaceholder\"\n              [attr.aria-controls]=\"uid + '-thumbs'\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"onSearchKeydown($event)\"\n            />\n          </div>\n          @if (isSearching()) {\n            <p class=\"pecb-slide-viewer__results\" aria-live=\"polite\">{{ searchSummary() }}</p>\n          }\n        }\n\n        <div #thumbs class=\"pecb-slide-viewer__thumbs\" [id]=\"uid + '-thumbs'\">\n          @if (error() || isEmpty()) {\n            <p class=\"pecb-slide-viewer__empty\">{{ error() ? text().errorTitle : text().emptyTitle }}</p>\n          } @else if (loading() && total() === 0) {\n            @for (row of skeletonRows; track row) {\n              <div class=\"pecb-slide-viewer__thumb pecb-slide-viewer__thumb--skeleton\" aria-hidden=\"true\">\n                <div class=\"pecb-slide-viewer__thumb-img\"></div>\n                <div class=\"pecb-slide-viewer__thumb-n\"></div>\n              </div>\n            }\n          } @else {\n            <!-- Spacers are always present: removing one mid-render would let the browser clamp the scroll position. -->\n            <div class=\"pecb-slide-viewer__spacer\" [style.height.px]=\"spacerTop()\" aria-hidden=\"true\"></div>\n            @for (n of visibleTiles(); track n) {\n              @let slide = slides()[n - 1];\n              @if (slide) {\n                <div\n                  class=\"pecb-slide-viewer__thumb\"\n                  [class.pecb-slide-viewer__thumb--pending]=\"tilePending(slide)\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  [attr.data-n]=\"n\"\n                  [class.pecb-slide-viewer__thumb--active]=\"n === currentPage()\"\n                  [class.pecb-slide-viewer__thumb--hidden]=\"slide.hidden\"\n                  [class.pecb-slide-viewer__thumb--selected]=\"selectable() && isSelected(slide, n)\"\n                  [class.pecb-slide-viewer__thumb--dragging]=\"dragFrom() === n\"\n                  [class.pecb-slide-viewer__thumb--drop-target]=\"dragOver() === n && dragFrom() !== n\"\n                  [attr.aria-current]=\"n === currentPage() ? 'true' : null\"\n                  [attr.aria-label]=\"slideTitle(slide, n)\"\n                  [attr.aria-description]=\"reorderable() ? text().dragHint : null\"\n                  [attr.draggable]=\"reorderable() ? 'true' : null\"\n                  (click)=\"onThumbnailClick(n)\"\n                  (keydown.enter)=\"onThumbnailClick(n)\"\n                  (keydown.space)=\"onThumbnailClick(n); $event.preventDefault()\"\n                  (dragstart)=\"onTileDragStart($event, n)\"\n                  (dragover)=\"onTileDragOver($event, n)\"\n                  (drop)=\"onTileDrop($event, n)\"\n                  (dragend)=\"onTileDragEnd()\"\n                >\n                  <div class=\"pecb-slide-viewer__thumb-img\">\n                    @if (thumbnailSrc(slide); as src) {\n                      <img [src]=\"src\" alt=\"\" loading=\"lazy\" decoding=\"async\" draggable=\"false\" />\n                    } @else if (slide.title) {\n                      <span>{{ slide.title }}</span>\n                    }\n\n                    @if (selectable()) {\n                      <label class=\"pecb-slide-viewer__check\" (click)=\"$event.stopPropagation()\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isSelected(slide, n)\"\n                          [attr.aria-label]=\"selectLabel(n)\"\n                          (change)=\"onTileCheckbox($event, slide, n)\"\n                        />\n                        <span class=\"pecb-slide-viewer__check-box\" aria-hidden=\"true\">\n                          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\" /></svg>\n                        </span>\n                      </label>\n                    }\n\n                    @if (slide.hidden) {\n                      <span class=\"pecb-slide-viewer__hidden-badge\">{{ text().hidden }}</span>\n                    }\n\n                    @if (reorderable()) {\n                      <span class=\"pecb-slide-viewer__grip\" aria-hidden=\"true\">\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"9\" cy=\"6\" r=\"1.6\" /><circle cx=\"15\" cy=\"6\" r=\"1.6\" /><circle cx=\"9\" cy=\"12\" r=\"1.6\" /><circle cx=\"15\" cy=\"12\" r=\"1.6\" /><circle cx=\"9\" cy=\"18\" r=\"1.6\" /><circle cx=\"15\" cy=\"18\" r=\"1.6\" /></svg>\n                      </span>\n                    }\n\n                    @if (thumbnailTemplate(); as tpl) {\n                      <div class=\"pecb-slide-viewer__thumb-extra\">\n                        <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: thumbnailContext(slide, n)\" />\n                      </div>\n                    }\n                  </div>\n                  <div class=\"pecb-slide-viewer__thumb-n\">{{ n }}</div>\n                </div>\n              }\n            }\n            <div class=\"pecb-slide-viewer__spacer\" [style.height.px]=\"spacerBottom()\" aria-hidden=\"true\"></div>\n            @if (isSearching() && matches().length === 0) {\n              <p class=\"pecb-slide-viewer__empty\">{{ text().noResults }}</p>\n            }\n          }\n        </div>\n\n        <!-- Host footer: comments, bulk actions\u2026 -->\n        <ng-content select=\"[pecbSlideViewerSidebarFooter]\"></ng-content>\n      </aside>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;container-type:inline-size;container-name:pecb-slide-viewer;--pecb-slide-radius: 12px;--pecb-slide-gap: 20px;--pecb-slide-sidebar-width: 340px;--pecb-slide-sidebar-top: 86px;--pecb-slide-thumbs-max-height: 620px;--pecb-slide-note-max-height: 210px;--pecb-slide-active: #212427;--pecb-slide-border: #ececec;--pecb-slide-stage-bg: #f4f4f4;--pecb-slide-fullscreen-bg: #0b0b0d;--pecb-slide-thumb-radius: 8px;--pecb-slide-number-bg: var(--pecb-slide-active);--pecb-slide-font: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif}.pecb-slide-viewer{display:flex;flex-direction:column;gap:16px;font-family:var(--pecb-slide-font);color:#212427;outline:none}.pecb-slide-viewer:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #212427;border-radius:var(--pecb-slide-radius)}.pecb-slide-viewer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--pecb-slide-border);border-radius:var(--pecb-slide-radius);padding:12px 14px}.pecb-slide-viewer__days{display:flex;gap:8px;flex-wrap:wrap}.pecb-slide-viewer__day{border:none;background:none;color:inherit;height:38px;padding:0 18px;border:1px solid var(--pecb-slide-border);background:#fff;border-radius:8px;font:inherit;font-size:14px;font-weight:600;color:#616161;cursor:pointer;transition:background .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-slide-viewer__day:focus{outline:none}.pecb-slide-viewer__day:hover{background:#f4f4f4}.pecb-slide-viewer__day:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__day--active{background:var(--pecb-slide-active);border-color:var(--pecb-slide-active);color:#fff}.pecb-slide-viewer__day--active:hover{background:var(--pecb-slide-active)}.pecb-slide-viewer__tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.pecb-slide-viewer__tool{border:none;background:none;color:inherit;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;color:#212427;cursor:pointer;white-space:nowrap;transition:background .15s ease-in-out}.pecb-slide-viewer__tool:focus{outline:none}.pecb-slide-viewer__tool svg{flex:none;color:#616161}.pecb-slide-viewer__tool:hover:not(:disabled){background:#f4f4f4}.pecb-slide-viewer__tool:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__tool:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-slide-viewer__tool:disabled svg{color:#c2c2c2}.pecb-slide-viewer__main{display:grid;grid-template-columns:minmax(0,1fr) var(--pecb-slide-sidebar-width);gap:var(--pecb-slide-gap);align-items:start}.pecb-slide-viewer--no-sidebar .pecb-slide-viewer__main{grid-template-columns:minmax(0,1fr)}.pecb-slide-viewer--sidebar-start .pecb-slide-viewer__main{grid-template-columns:var(--pecb-slide-sidebar-width) minmax(0,1fr)}.pecb-slide-viewer--sidebar-start .pecb-slide-viewer__stagecol{order:2}.pecb-slide-viewer--sidebar-start .pecb-slide-viewer__side{order:1}.pecb-slide-viewer__stagecol{min-width:0;display:flex;flex-direction:column;gap:14px}.pecb-slide-viewer__stage{position:relative;width:100%;aspect-ratio:var(--pecb-slide-aspect-ratio, 16/10);background:var(--pecb-slide-stage-bg);border-radius:var(--pecb-slide-radius);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y pinch-zoom}.pecb-slide-viewer__stage:fullscreen{border-radius:0;background:var(--pecb-slide-fullscreen-bg);aspect-ratio:auto;width:100vw;height:100vh}.pecb-slide-viewer__stage--skeleton{background:#ececec}.pecb-slide-viewer__stage--skeleton:before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 45%,rgba(255,255,255,.7) 55%,transparent);animation:pecb-slide-shimmer 1.6s ease-in-out infinite}.pecb-slide-viewer__viewport{position:absolute;inset:0;overflow:hidden}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport{overflow:auto;cursor:grab}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar{width:8px;height:8px}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar-track{background:transparent}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-slide-viewer__image{display:block;width:100%;height:100%;object-fit:contain;background:var(--pecb-slide-stage-bg)}.pecb-slide-viewer__stage:fullscreen .pecb-slide-viewer__image{background:var(--pecb-slide-fullscreen-bg)}.pecb-slide-viewer__stage--fallback .pecb-slide-viewer__image{image-rendering:auto;filter:saturate(.98)}.pecb-slide-viewer__overlay{position:absolute;inset:0;pointer-events:none}.pecb-slide-viewer__overlay>*{pointer-events:auto}.pecb-slide-viewer__overlay:empty{display:none}.pecb-slide-viewer__message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:#616161}.pecb-slide-viewer__message:has(>:not(.pecb-slide-viewer__message-default)) .pecb-slide-viewer__message-default{display:none}.pecb-slide-viewer__message--error{color:#313131}.pecb-slide-viewer__message--error svg{color:#a11e29}.pecb-slide-viewer__message-default{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:360px}.pecb-slide-viewer__message-default svg{color:#919191;margin-bottom:6px}.pecb-slide-viewer__message-default strong{font-size:16px;font-weight:600;color:#212427}.pecb-slide-viewer__message-default span{font-size:14px;line-height:1.5}.pecb-slide-viewer__retry{border:none;background:none;color:inherit;margin-top:10px;height:38px;padding:0 18px;border:1px solid #c2c2c2;border-radius:8px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:#212427;cursor:pointer;transition:background .15s ease-in-out}.pecb-slide-viewer__retry:focus{outline:none}.pecb-slide-viewer__retry:hover{background:#f4f4f4}.pecb-slide-viewer__retry:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__stage-n{position:absolute;left:16px;bottom:16px;font-size:13px;font-weight:600;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}.pecb-slide-viewer__progress{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;pointer-events:none}.pecb-slide-viewer__progress:after{content:\"\";position:absolute;inset:0;width:40%;background:var(--pecb-slide-active);opacity:.7;border-radius:999px;animation:pecb-slide-progress 1s ease-in-out infinite}.pecb-slide-viewer__veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.pecb-slide-viewer__veil-text{padding:6px 12px;border-radius:999px;background:#ffffffd9;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#616161}.pecb-slide-viewer__fs-exit{padding:0;border:none;background:none;font:inherit;color:inherit;position:absolute;top:16px;right:16px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#1414168c;color:#fff;cursor:pointer}.pecb-slide-viewer__fs-exit:focus{outline:none}.pecb-slide-viewer__fs-exit:hover{background:#141416bf}.pecb-slide-viewer__fs-exit:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.pecb-slide-viewer__bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.pecb-slide-viewer__nav{display:flex;gap:8px}.pecb-slide-viewer__nb{padding:0;border:none;background:none;font:inherit;color:inherit;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c2c2c2;background:#fff;border-radius:8px;color:#212427;cursor:pointer;transition:transform .1s,background .12s}.pecb-slide-viewer__nb:focus{outline:none}.pecb-slide-viewer__nb svg{display:block}.pecb-slide-viewer__nb:hover:not(:disabled){background:#f4f4f4}.pecb-slide-viewer__nb:active:not(:disabled){transform:scale(.92);background:#ececec}.pecb-slide-viewer__nb:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__nb:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-slide-viewer__count{display:flex;align-items:center;gap:10px;font-size:14px;color:#616161}.pecb-slide-viewer__count label{cursor:default}.pecb-slide-viewer__page-input{width:70px;height:44px;border:1px solid var(--pecb-slide-border);border-radius:8px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;text-align:center;color:#212427;background:#fff;-moz-appearance:textfield;appearance:textfield}.pecb-slide-viewer__page-input::-webkit-outer-spin-button,.pecb-slide-viewer__page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pecb-slide-viewer__page-input:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:1px}.pecb-slide-viewer__page-input:disabled{color:#c2c2c2;background:#fafafa}.pecb-slide-viewer__zoom{display:flex;align-items:center;gap:6px}.pecb-slide-viewer__zoom-value{border:none;background:none;color:inherit;min-width:56px;height:44px;padding:0 8px;border:1px solid var(--pecb-slide-border);border-radius:8px;background:#fff;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:#616161;cursor:pointer}.pecb-slide-viewer__zoom-value:focus{outline:none}.pecb-slide-viewer__zoom-value:disabled{cursor:default;color:#919191}.pecb-slide-viewer__zoom-value:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__right{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}.pecb-slide-viewer__right>:not(.pecb-slide-viewer__nb){min-width:220px}.pecb-slide-viewer__note{background:#fff;border:1px solid var(--pecb-slide-border);border-radius:var(--pecb-slide-radius);overflow:hidden}.pecb-slide-viewer__note-h{border:none;background:none;color:inherit;width:100%;display:flex;align-items:center;gap:10px;padding:18px 20px;font:inherit;font-size:15px;font-weight:600;color:#212427;cursor:pointer;text-align:left}.pecb-slide-viewer__note-h:focus{outline:none}.pecb-slide-viewer__note-h svg{flex:none;color:#616161}.pecb-slide-viewer__note-h:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:-2px;border-radius:var(--pecb-slide-radius)}.pecb-slide-viewer__chev{margin-left:auto;display:inline-flex;transition:transform .18s}.pecb-slide-viewer__note--open .pecb-slide-viewer__chev{transform:rotate(180deg)}.pecb-slide-viewer__note-b{padding:0 20px 20px;font-size:13.5px;line-height:1.6;color:#616161;max-height:var(--pecb-slide-note-max-height);overflow-y:auto}.pecb-slide-viewer__note-b::-webkit-scrollbar{width:8px;height:8px}.pecb-slide-viewer__note-b::-webkit-scrollbar-track{background:#f4f4f4}.pecb-slide-viewer__note-b::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-slide-viewer__note-b::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-slide-viewer__note-b[hidden]{display:none}.pecb-slide-viewer__note-b ::ng-deep p{margin:0 0 12px}.pecb-slide-viewer__note-b ::ng-deep p:last-child{margin:0}.pecb-slide-viewer__note-b ::ng-deep ul,.pecb-slide-viewer__note-b ::ng-deep ol{padding-left:20px;margin:0 0 12px}.pecb-slide-viewer__note-b>[pecbSlideViewerNote]{display:block}.pecb-slide-viewer__side{position:sticky;top:var(--pecb-slide-sidebar-top);min-width:0;background:#fff;border:1px solid var(--pecb-slide-border);border-radius:var(--pecb-slide-radius);padding:14px;display:flex;flex-direction:column;gap:14px}.pecb-slide-viewer__search{display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--pecb-slide-border);border-radius:8px;padding:0 12px;background:#fff}.pecb-slide-viewer__search svg{flex:none;color:#c2c2c2}.pecb-slide-viewer__search input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:#212427}.pecb-slide-viewer__search input::placeholder{color:#919191}.pecb-slide-viewer__search input::-webkit-search-cancel-button{-webkit-appearance:none}.pecb-slide-viewer__search:focus-within{border-color:#c2c2c2;box-shadow:0 0 0 3px #21242714}.pecb-slide-viewer__results{margin:-6px 0 0;font-size:12px;font-weight:600;color:#919191}.pecb-slide-viewer__thumbs{display:flex;flex-direction:column;gap:12px;max-height:var(--pecb-slide-thumbs-max-height);overflow-y:auto;overflow-anchor:none;padding-right:6px;scroll-behavior:smooth}.pecb-slide-viewer__thumbs::-webkit-scrollbar{width:8px;height:8px}.pecb-slide-viewer__thumbs::-webkit-scrollbar-track{background:#f4f4f4}.pecb-slide-viewer__thumbs::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-slide-viewer__thumbs::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-slide-viewer__thumb{display:block;width:100%;flex:none;border-radius:var(--pecb-slide-thumb-radius);overflow:hidden;border:2px solid transparent;background:#fff;cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:border-color .15s ease-in-out,opacity .15s ease-in-out}.pecb-slide-viewer__thumb:hover{border-color:#c2c2c2}.pecb-slide-viewer__thumb:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__thumb--active{border-color:var(--pecb-slide-active)}.pecb-slide-viewer__thumb--active .pecb-slide-viewer__thumb-n{background:var(--pecb-slide-number-bg);color:#fff}.pecb-slide-viewer__thumb--selected{border-color:var(--pecb-slide-active)}.pecb-slide-viewer__thumb--hidden{opacity:.55}.pecb-slide-viewer__thumb--dragging{opacity:.4}.pecb-slide-viewer__thumb--drop-target{border-color:var(--pecb-slide-active);border-style:dashed}.pecb-slide-viewer--reorderable .pecb-slide-viewer__thumb{cursor:grab}.pecb-slide-viewer__thumb-img{position:relative;aspect-ratio:16/9;display:flex;align-items:center;background:var(--pecb-slide-stage-bg);overflow:hidden}.pecb-slide-viewer__thumb-img img{display:block;width:100%;height:100%;object-fit:cover}.pecb-slide-viewer__thumb-img span{padding:0 14px;font-size:14px;font-weight:600;color:#616161}.pecb-slide-viewer__thumb-n{text-align:center;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:#616161;padding:6px 0}.pecb-slide-viewer__check{position:absolute;top:8px;left:8px;margin:0;cursor:pointer}.pecb-slide-viewer__check input{position:absolute;opacity:0;width:1px;height:1px}.pecb-slide-viewer__check input:focus-visible+.pecb-slide-viewer__check-box{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__check input:checked+.pecb-slide-viewer__check-box{background:var(--pecb-slide-active);border-color:var(--pecb-slide-active);color:#fff}.pecb-slide-viewer__check-box{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;border:1.5px solid #c2c2c2;background:#ffffffeb;color:transparent;transition:background .15s ease-in-out,border-color .15s ease-in-out}.pecb-slide-viewer__hidden-badge{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:999px;background:#212427bf;color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}.pecb-slide-viewer__grip{position:absolute;right:6px;bottom:6px;display:inline-flex;padding:3px;border-radius:4px;background:#ffffffd9;color:#616161}.pecb-slide-viewer__thumb-extra{position:absolute;inset:0;pointer-events:none}.pecb-slide-viewer__thumb-extra>*{pointer-events:auto}.pecb-slide-viewer__spacer{flex:none;width:100%}.pecb-slide-viewer__spacer[style*=\"height: 0px\"]{display:none}.pecb-slide-viewer__thumb--pending .pecb-slide-viewer__thumb-img{background:#ececec}.pecb-slide-viewer__thumb--pending .pecb-slide-viewer__thumb-img:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 50%,transparent);animation:pecb-slide-shimmer 1.6s ease-in-out infinite}.pecb-slide-viewer__thumb--skeleton{pointer-events:none}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-img,.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n{position:relative;overflow:hidden;background:#ececec}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n{height:28px;margin-top:4px;border-radius:6px}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-img:after,.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 50%,transparent);animation:pecb-slide-shimmer 1.6s ease-in-out infinite}.pecb-slide-viewer__empty{margin:0;padding:12px;font-size:13.5px;color:#919191}.pecb-slide-viewer__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@container pecb-slide-viewer (max-width: 1080px){.pecb-slide-viewer__main{grid-template-columns:minmax(0,1fr)}.pecb-slide-viewer__side{position:static}}@container pecb-slide-viewer (max-width: 640px){.pecb-slide-viewer__top{padding:10px 12px}.pecb-slide-viewer__tool span{display:none}.pecb-slide-viewer__tool{padding:0 10px}.pecb-slide-viewer__nb{width:40px;height:40px}.pecb-slide-viewer__page-input{height:40px;width:60px}.pecb-slide-viewer__right{margin-left:0;flex:1 1 100%}.pecb-slide-viewer__thumbs{max-height:360px}}@keyframes pecb-slide-progress{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes pecb-slide-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.pecb-slide-viewer__day,.pecb-slide-viewer__tool,.pecb-slide-viewer__nb,.pecb-slide-viewer__chev,.pecb-slide-viewer__thumb{transition:none}.pecb-slide-viewer__thumbs{scroll-behavior:auto}.pecb-slide-viewer__progress:after{animation:none;width:100%}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-img:after,.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n:after,.pecb-slide-viewer__thumb--pending .pecb-slide-viewer__thumb-img:after,.pecb-slide-viewer__stage--skeleton:before{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pecb-slide-viewer', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'pecb-slide-viewer-host',
+                        '[style.--pecb-slide-aspect-ratio]': 'stageAspectRatio()',
+                        '(document:fullscreenchange)': 'onDocumentFullscreenChange()',
+                    }, template: "<div\n  #root\n  [class]=\"hostClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"text().viewer\"\n  aria-roledescription=\"slide viewer\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  <!-- \u2500\u2500 Top bar: day pills + tools (mock `.sl-top`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (showDays() || tools().length > 0) {\n    <div class=\"pecb-slide-viewer__top\">\n      @if (showDays()) {\n        <div class=\"pecb-slide-viewer__days\" role=\"tablist\" [attr.aria-label]=\"text().days\">\n          @for (day of days(); track day.id) {\n            <button\n              type=\"button\"\n              class=\"pecb-slide-viewer__day\"\n              role=\"tab\"\n              [class.pecb-slide-viewer__day--active]=\"day.id === activeDayId()\"\n              [attr.aria-selected]=\"day.id === activeDayId()\"\n              [attr.tabindex]=\"day.id === activeDayId() ? 0 : -1\"\n              (click)=\"selectDay(day)\"\n            >\n              @if (dayTemplate(); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: dayContext(day)\" />\n              } @else {\n                {{ day.label }}\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"pecb-slide-viewer__tools\" role=\"toolbar\">\n        <!-- Product-specific tools placed before the built-in ones (e.g. a notes menu) -->\n        <ng-content select=\"[pecbSlideViewerToolsStart]\"></ng-content>\n        @for (t of tools(); track t) {\n          @switch (t) {\n            @case ('notes') {\n              <button type=\"button\" class=\"pecb-slide-viewer__tool\" (click)=\"pressTool('notes')\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M15 6 10.5 1.5h-6A1.5 1.5 0 0 0 3 3v12a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 15 15V6ZM10.5 1.5V6H15M12 9.75H6M12 12.75H6M7.5 6.75H6\" />\n                </svg>\n                <span>{{ text().notes }}</span>\n              </button>\n            }\n            @case ('feedback') {\n              <button type=\"button\" class=\"pecb-slide-viewer__tool\" (click)=\"pressTool('feedback')\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M15.75 8.625a6.6 6.6 0 0 1-.675 2.85 6.4 6.4 0 0 1-5.7 3.525 6.6 6.6 0 0 1-2.85-.675L2.25 15.75l1.425-4.275A6.6 6.6 0 0 1 3 8.625a6.4 6.4 0 0 1 3.525-5.7 6.6 6.6 0 0 1 2.85-.675h.375a6.4 6.4 0 0 1 6 6v.375Z\" />\n                </svg>\n                <span>{{ text().feedback }}</span>\n              </button>\n            }\n            @case ('courseFiles') {\n              <button type=\"button\" class=\"pecb-slide-viewer__tool\" (click)=\"pressTool('courseFiles')\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M15 9.375V5.1c0-1.26 0-1.89-.245-2.371a2.25 2.25 0 0 0-.984-.984C13.29 1.5 12.66 1.5 11.4 1.5H6.6c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C3 3.21 3 3.84 3 5.1v7.8c0 1.26 0 1.89.245 2.371a2.25 2.25 0 0 0 .984.984c.481.245 1.111.245 2.371.245h2.775M10.5 8.25H6M7.5 11.25H6M12 5.25H6M15.75 14.25 13.5 16.5l-2.25-2.25M13.5 16.5V12\" />\n                </svg>\n                <span>{{ text().courseFiles }}</span>\n              </button>\n            }\n            @case ('downloadSlides') {\n              <button\n                type=\"button\"\n                class=\"pecb-slide-viewer__tool\"\n                [disabled]=\"!canDownloadSlides()\"\n                [attr.title]=\"canDownloadSlides() ? null : text().downloadUnavailable\"\n                [attr.aria-disabled]=\"canDownloadSlides() ? null : 'true'\"\n                (click)=\"pressTool('downloadSlides')\"\n              >\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"m7.2 12.15-1.35 3.6M12.446 15.7l-1.591-3.5M7.2 7.7l1.76 1.75 1.84-1.832M8.96 9.45v-4.5M3.6 12.15a1.8 1.8 0 0 1-1.8-1.8v-6.3a1.8 1.8 0 0 1 1.8-1.8h10.8a1.8 1.8 0 0 1 1.8 1.8v6.3a1.8 1.8 0 0 1-1.8 1.8H3.6Z\" />\n                </svg>\n                <span>{{ text().downloadSlides }}</span>\n              </button>\n            }\n          }\n        }\n        <!-- Product-specific tools (e.g. an LTI \"Finish\" button) -->\n        <ng-content select=\"[pecbSlideViewerTools]\"></ng-content>\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Main: stage column + sidebar (mock `.sl-main`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-slide-viewer__main\">\n    <div class=\"pecb-slide-viewer__stagecol\">\n      <!-- Stage -->\n      <div\n        #stage\n        class=\"pecb-slide-viewer__stage\"\n        [class.pecb-slide-viewer__stage--fallback]=\"stageIsFallback()\"\n        [class.pecb-slide-viewer__stage--skeleton]=\"stageSkeleton()\"\n        [attr.aria-busy]=\"stageVeil() ? 'true' : null\"\n        (wheel)=\"onStageWheel($event)\"\n        (pointerdown)=\"onStagePointerDown($event)\"\n        (pointerup)=\"onStagePointerUp($event)\"\n        (pointercancel)=\"onStagePointerCancel()\"\n      >\n        <div class=\"pecb-slide-viewer__viewport\">\n          @if (error() || isEmpty()) {\n            <!-- Nothing to show: explain why (host can replace the message through the slot). -->\n            <div class=\"pecb-slide-viewer__message\" [class.pecb-slide-viewer__message--error]=\"error()\" role=\"status\">\n              <ng-content select=\"[pecbSlideViewerEmpty]\"></ng-content>\n              <div class=\"pecb-slide-viewer__message-default\">\n                @if (error()) {\n                  <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" /><path d=\"M14 2v6h6\" /><path d=\"m9.5 12.5 5 5M14.5 12.5l-5 5\" />\n                  </svg>\n                  <strong>{{ text().errorTitle }}</strong>\n                  <span>{{ text().errorHint }}</span>\n                  <button type=\"button\" class=\"pecb-slide-viewer__retry\" (click)=\"requestRetry()\">{{ text().retry }}</button>\n                } @else {\n                  <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M12 16v4M8 20h8M7 12l3-3 2 2 3-3 2 2\" />\n                  </svg>\n                  <strong>{{ text().emptyTitle }}</strong>\n                  <span>{{ text().emptyHint }}</span>\n                }\n              </div>\n            </div>\n          } @else if (displayedSrc(); as src) {\n            <img\n              class=\"pecb-slide-viewer__image\"\n              [src]=\"src\"\n              [alt]=\"slideTitle(currentSlide(), currentPage())\"\n              [style.width.%]=\"zoomPercent()\"\n              [style.height.%]=\"zoomPercent()\"\n              decoding=\"sync\"\n              draggable=\"false\"\n              (load)=\"onStageImageLoad()\"\n              (error)=\"onStageImageError()\"\n            />\n          }\n        </div>\n\n        @if (stageBusy()) {\n          <!-- Next image decoding: a thin activity line, the current slide stays put. -->\n          <div class=\"pecb-slide-viewer__progress\" aria-hidden=\"true\"></div>\n        }\n\n        <!-- Host overlay: annotations, laser pointer, badges\u2026 -->\n        <div class=\"pecb-slide-viewer__overlay\">\n          <ng-content select=\"[pecbSlideViewerStage]\"></ng-content>\n        </div>\n\n        @if (total() > 0) {\n          <span class=\"pecb-slide-viewer__stage-n\" aria-hidden=\"true\">{{ currentPage() }}</span>\n        }\n        <span class=\"pecb-slide-viewer__sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</span>\n\n        @if (stageVeil()) {\n          <!-- No spinner: the shimmering stage is the loading state; the percentage, when known, sits on it. -->\n          <div class=\"pecb-slide-viewer__veil\" role=\"status\">\n            @if (loading() && progressText()) {\n              <span class=\"pecb-slide-viewer__veil-text\">{{ progressText() }}</span>\n            } @else {\n              <span class=\"pecb-slide-viewer__sr-only\">{{ text().loading }}</span>\n            }\n          </div>\n        }\n\n        @if (isFullscreen() && showFullscreen()) {\n          <button\n            type=\"button\"\n            class=\"pecb-slide-viewer__fs-exit\"\n            [attr.aria-label]=\"text().exitFullscreen\"\n            (click)=\"toggleFullscreen()\"\n          >\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m13-5h-3a2 2 0 0 0-2 2v3\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <!-- Navigation bar (mock `.sl-bar`) -->\n      <div class=\"pecb-slide-viewer__bar\">\n        <div class=\"pecb-slide-viewer__nav\">\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().first\" [disabled]=\"navDisabled() || isFirst()\" (click)=\"first()\">\n            <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M5.96.835.836 5.96l5.125 5.125M11.502.835 6.377 5.96l5.125 5.125\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().previous\" [disabled]=\"navDisabled() || isFirst()\" (click)=\"previous()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M12.502 6.669H.835M6.669.835.835 6.669l5.834 5.833\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().next\" [disabled]=\"navDisabled() || isLast()\" (click)=\"next()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M.836 6.668h11.667M6.669 12.502l5.834-5.834L6.669.835\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().last\" [disabled]=\"navDisabled() || isLast()\" (click)=\"last()\">\n            <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"m6.377 11.085 5.125-5.125L6.377.835M.836 11.085 5.961 5.96.836.835\" />\n            </svg>\n          </button>\n        </div>\n\n        @if (showSlideInput()) {\n          <div class=\"pecb-slide-viewer__count\">\n            <label [attr.for]=\"uid + '-page'\">{{ slideWord() }}</label>\n            <input\n              class=\"pecb-slide-viewer__page-input\"\n              type=\"number\"\n              inputmode=\"numeric\"\n              [id]=\"uid + '-page'\"\n              min=\"1\"\n              [attr.max]=\"total() || 1\"\n              [value]=\"pageInputValue()\"\n              [disabled]=\"navDisabled()\"\n              [attr.aria-label]=\"text().slideNumber\"\n              (input)=\"onPageInput($event)\"\n              (change)=\"onPageCommit($event)\"\n              (keydown)=\"onPageInputKeydown($event)\"\n            />\n            <span aria-hidden=\"true\">{{ text().of }}{{ total() }}</span>\n          </div>\n        }\n\n        @if (zoomable()) {\n          <div class=\"pecb-slide-viewer__zoom\" role=\"group\">\n            <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().zoomOut\" [disabled]=\"navDisabled() || !isZoomed()\" (click)=\"zoomOut()\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\" /></svg>\n            </button>\n            <button type=\"button\" class=\"pecb-slide-viewer__zoom-value\" [attr.aria-label]=\"text().zoomReset\" [disabled]=\"navDisabled() || !isZoomed()\" (click)=\"zoomReset()\">\n              {{ zoomPercent() }}%\n            </button>\n            <button type=\"button\" class=\"pecb-slide-viewer__nb\" [attr.aria-label]=\"text().zoomIn\" [disabled]=\"navDisabled()\" (click)=\"zoomIn()\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\" /></svg>\n            </button>\n          </div>\n        }\n\n        <div class=\"pecb-slide-viewer__right\">\n          <!-- Version select or any other control the product wants here -->\n          <ng-content select=\"[pecbSlideViewerVersion]\"></ng-content>\n\n          @if (showFullscreen()) {\n            <button\n              type=\"button\"\n              class=\"pecb-slide-viewer__nb\"\n              [attr.aria-label]=\"isFullscreen() ? text().exitFullscreen : text().enterFullscreen\"\n              [attr.aria-pressed]=\"isFullscreen()\"\n              [disabled]=\"navDisabled()\"\n              (click)=\"toggleFullscreen()\"\n            >\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m13-5v3a2 2 0 0 1-2 2h-3\" />\n              </svg>\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Note (mock `.sl-note`) -->\n      @if (hasNote()) {\n        <div class=\"pecb-slide-viewer__note\" [class.pecb-slide-viewer__note--open]=\"noteOpen()\">\n          <button\n            type=\"button\"\n            class=\"pecb-slide-viewer__note-h\"\n            [attr.aria-expanded]=\"noteOpen()\"\n            [attr.aria-controls]=\"uid + '-note'\"\n            (click)=\"toggleNote()\"\n          >\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M14 11H8M10 15H8M16 7H8M20 6.8v10.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h6.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C20 4.28 20 5.12 20 6.8Z\" />\n            </svg>\n            <span>{{ text().note }}</span>\n            <i class=\"pecb-slide-viewer__chev\" aria-hidden=\"true\">\n              <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"m6 9 6 6 6-6\" />\n              </svg>\n            </i>\n          </button>\n          <div class=\"pecb-slide-viewer__note-b\" [id]=\"uid + '-note'\" [attr.hidden]=\"noteOpen() ? null : ''\">\n            @if (note(); as n) {\n              <div [innerHTML]=\"n\"></div>\n            }\n            <!-- Host-rendered note body (an editor, actions\u2026) -->\n            <ng-content select=\"[pecbSlideViewerNote]\"></ng-content>\n          </div>\n        </div>\n      }\n\n      <!-- Anything the product wants under the stage column (e.g. an LTI table) -->\n      <ng-content select=\"[pecbSlideViewerBelow]\"></ng-content>\n    </div>\n\n    <!-- \u2500\u2500 Sidebar: search + thumbnails (mock `.sl-side`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (sidebar() !== 'none') {\n      <aside class=\"pecb-slide-viewer__side\" [attr.aria-label]=\"text().thumbnails\">\n        <!-- Host header: a title, \"Add slide\"\u2026 -->\n        <ng-content select=\"[pecbSlideViewerSidebarHeader]\"></ng-content>\n\n        @if (showSearch()) {\n          <div class=\"pecb-slide-viewer__search\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\" />\n              <path d=\"m21 21-4.3-4.3\" />\n            </svg>\n            <input\n              #search\n              type=\"search\"\n              [attr.placeholder]=\"text().searchPlaceholder\"\n              [attr.aria-label]=\"text().searchPlaceholder\"\n              [attr.aria-controls]=\"uid + '-thumbs'\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"onSearchKeydown($event)\"\n            />\n          </div>\n          @if (isSearching()) {\n            <p class=\"pecb-slide-viewer__results\" aria-live=\"polite\">{{ searchSummary() }}</p>\n          }\n        }\n\n        <div #thumbs class=\"pecb-slide-viewer__thumbs\" [id]=\"uid + '-thumbs'\">\n          @if (error() || isEmpty()) {\n            <p class=\"pecb-slide-viewer__empty\">{{ error() ? text().errorTitle : text().emptyTitle }}</p>\n          } @else if (loading() && total() === 0) {\n            @for (row of skeletonRows; track row) {\n              <div class=\"pecb-slide-viewer__thumb pecb-slide-viewer__thumb--skeleton\" aria-hidden=\"true\">\n                <div class=\"pecb-slide-viewer__thumb-img\"></div>\n                <div class=\"pecb-slide-viewer__thumb-n\"></div>\n              </div>\n            }\n          } @else {\n            <!-- Spacers are always present: removing one mid-render would let the browser clamp the scroll position. -->\n            <div class=\"pecb-slide-viewer__spacer\" [style.height.px]=\"spacerTop()\" aria-hidden=\"true\"></div>\n            @for (n of visibleTiles(); track n) {\n              @let slide = slides()[n - 1];\n              @if (slide) {\n                <div\n                  class=\"pecb-slide-viewer__thumb\"\n                  [class.pecb-slide-viewer__thumb--pending]=\"tilePending(slide)\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  [attr.data-n]=\"n\"\n                  [class.pecb-slide-viewer__thumb--active]=\"n === currentPage()\"\n                  [class.pecb-slide-viewer__thumb--hidden]=\"slide.hidden\"\n                  [class.pecb-slide-viewer__thumb--selected]=\"selectable() && isSelected(slide, n)\"\n                  [class.pecb-slide-viewer__thumb--dragging]=\"dragFrom() === n\"\n                  [class.pecb-slide-viewer__thumb--drop-target]=\"dragOver() === n && dragFrom() !== n\"\n                  [attr.aria-current]=\"n === currentPage() ? 'true' : null\"\n                  [attr.aria-label]=\"slideTitle(slide, n)\"\n                  [attr.aria-description]=\"reorderable() ? text().dragHint : null\"\n                  [attr.draggable]=\"reorderable() ? 'true' : null\"\n                  (click)=\"onThumbnailClick(n)\"\n                  (keydown.enter)=\"onThumbnailClick(n)\"\n                  (keydown.space)=\"onThumbnailClick(n); $event.preventDefault()\"\n                  (dragstart)=\"onTileDragStart($event, n)\"\n                  (dragover)=\"onTileDragOver($event, n)\"\n                  (drop)=\"onTileDrop($event, n)\"\n                  (dragend)=\"onTileDragEnd()\"\n                >\n                  <div class=\"pecb-slide-viewer__thumb-img\">\n                    @if (thumbnailSrc(slide); as src) {\n                      <img [src]=\"src\" alt=\"\" loading=\"lazy\" decoding=\"async\" draggable=\"false\" />\n                    } @else if (slide.title) {\n                      <span>{{ slide.title }}</span>\n                    }\n\n                    @if (selectable()) {\n                      <label class=\"pecb-slide-viewer__check\" (click)=\"$event.stopPropagation()\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isSelected(slide, n)\"\n                          [attr.aria-label]=\"selectLabel(n)\"\n                          (change)=\"onTileCheckbox($event, slide, n)\"\n                        />\n                        <span class=\"pecb-slide-viewer__check-box\" aria-hidden=\"true\">\n                          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\" /></svg>\n                        </span>\n                      </label>\n                    }\n\n                    @if (slide.hidden) {\n                      <span class=\"pecb-slide-viewer__hidden-badge\">{{ text().hidden }}</span>\n                    }\n\n                    @if (reorderable()) {\n                      <span class=\"pecb-slide-viewer__grip\" aria-hidden=\"true\">\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"9\" cy=\"6\" r=\"1.6\" /><circle cx=\"15\" cy=\"6\" r=\"1.6\" /><circle cx=\"9\" cy=\"12\" r=\"1.6\" /><circle cx=\"15\" cy=\"12\" r=\"1.6\" /><circle cx=\"9\" cy=\"18\" r=\"1.6\" /><circle cx=\"15\" cy=\"18\" r=\"1.6\" /></svg>\n                      </span>\n                    }\n\n                    @if (thumbnailTemplate(); as tpl) {\n                      <div class=\"pecb-slide-viewer__thumb-extra\">\n                        <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: thumbnailContext(slide, n)\" />\n                      </div>\n                    }\n                  </div>\n                  <div class=\"pecb-slide-viewer__thumb-n\">{{ n }}</div>\n                </div>\n              }\n            }\n            <div class=\"pecb-slide-viewer__spacer\" [style.height.px]=\"spacerBottom()\" aria-hidden=\"true\"></div>\n            @if (isSearching() && matches().length === 0) {\n              <p class=\"pecb-slide-viewer__empty\">{{ text().noResults }}</p>\n            }\n          }\n        </div>\n\n        <!-- Host footer: comments, bulk actions\u2026 -->\n        <ng-content select=\"[pecbSlideViewerSidebarFooter]\"></ng-content>\n      </aside>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;container-type:inline-size;container-name:pecb-slide-viewer;--pecb-slide-radius: 12px;--pecb-slide-gap: 20px;--pecb-slide-sidebar-width: 340px;--pecb-slide-sidebar-top: 86px;--pecb-slide-thumbs-max-height: 620px;--pecb-slide-note-max-height: 210px;--pecb-slide-active: #212427;--pecb-slide-border: #ececec;--pecb-slide-stage-bg: #f4f4f4;--pecb-slide-fullscreen-bg: #0b0b0d;--pecb-slide-thumb-radius: 8px;--pecb-slide-number-bg: var(--pecb-slide-active);--pecb-slide-font: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif}.pecb-slide-viewer{display:flex;flex-direction:column;gap:16px;font-family:var(--pecb-slide-font);color:#212427;outline:none}.pecb-slide-viewer:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #212427;border-radius:var(--pecb-slide-radius)}.pecb-slide-viewer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--pecb-slide-border);border-radius:var(--pecb-slide-radius);padding:12px 14px}.pecb-slide-viewer__days{display:flex;gap:8px;flex-wrap:wrap}.pecb-slide-viewer__day{border:none;background:none;color:inherit;height:38px;padding:0 18px;border:1px solid var(--pecb-slide-border);background:#fff;border-radius:8px;font:inherit;font-size:14px;font-weight:600;color:#616161;cursor:pointer;transition:background .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-slide-viewer__day:focus{outline:none}.pecb-slide-viewer__day:hover{background:#f4f4f4}.pecb-slide-viewer__day:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__day--active{background:var(--pecb-slide-active);border-color:var(--pecb-slide-active);color:#fff}.pecb-slide-viewer__day--active:hover{background:var(--pecb-slide-active)}.pecb-slide-viewer__tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.pecb-slide-viewer__tool{border:none;background:none;color:inherit;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;color:#212427;cursor:pointer;white-space:nowrap;transition:background .15s ease-in-out}.pecb-slide-viewer__tool:focus{outline:none}.pecb-slide-viewer__tool svg{flex:none;color:#616161}.pecb-slide-viewer__tool:hover:not(:disabled){background:#f4f4f4}.pecb-slide-viewer__tool:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__tool:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-slide-viewer__tool:disabled svg{color:#c2c2c2}.pecb-slide-viewer__main{display:grid;grid-template-columns:minmax(0,1fr) var(--pecb-slide-sidebar-width);gap:var(--pecb-slide-gap);align-items:start}.pecb-slide-viewer--no-sidebar .pecb-slide-viewer__main{grid-template-columns:minmax(0,1fr)}.pecb-slide-viewer--sidebar-start .pecb-slide-viewer__main{grid-template-columns:var(--pecb-slide-sidebar-width) minmax(0,1fr)}.pecb-slide-viewer--sidebar-start .pecb-slide-viewer__stagecol{order:2}.pecb-slide-viewer--sidebar-start .pecb-slide-viewer__side{order:1}.pecb-slide-viewer__stagecol{min-width:0;display:flex;flex-direction:column;gap:14px}.pecb-slide-viewer__stage{position:relative;width:100%;aspect-ratio:var(--pecb-slide-aspect-ratio, 16/10);background:var(--pecb-slide-stage-bg);border-radius:var(--pecb-slide-radius);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y pinch-zoom}.pecb-slide-viewer__stage:fullscreen{border-radius:0;background:var(--pecb-slide-fullscreen-bg);aspect-ratio:auto;width:100vw;height:100vh}.pecb-slide-viewer__stage--skeleton{background:#ececec}.pecb-slide-viewer__stage--skeleton:before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 45%,rgba(255,255,255,.7) 55%,transparent);animation:pecb-slide-shimmer 1.6s ease-in-out infinite}.pecb-slide-viewer__viewport{position:absolute;inset:0;overflow:hidden}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport{overflow:auto;cursor:grab}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar{width:8px;height:8px}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar-track{background:transparent}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-slide-viewer--zoomed .pecb-slide-viewer__viewport::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-slide-viewer__image{display:block;width:100%;height:100%;object-fit:contain;background:var(--pecb-slide-stage-bg)}.pecb-slide-viewer__stage:fullscreen .pecb-slide-viewer__image{background:var(--pecb-slide-fullscreen-bg)}.pecb-slide-viewer__stage--fallback .pecb-slide-viewer__image{image-rendering:auto;filter:saturate(.98)}.pecb-slide-viewer__overlay{position:absolute;inset:0;pointer-events:none}.pecb-slide-viewer__overlay>*{pointer-events:auto}.pecb-slide-viewer__overlay:empty{display:none}.pecb-slide-viewer__message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:#616161}.pecb-slide-viewer__message:has(>:not(.pecb-slide-viewer__message-default)) .pecb-slide-viewer__message-default{display:none}.pecb-slide-viewer__message--error{color:#313131}.pecb-slide-viewer__message--error svg{color:#a11e29}.pecb-slide-viewer__message-default{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:360px}.pecb-slide-viewer__message-default svg{color:#919191;margin-bottom:6px}.pecb-slide-viewer__message-default strong{font-size:16px;font-weight:600;color:#212427}.pecb-slide-viewer__message-default span{font-size:14px;line-height:1.5}.pecb-slide-viewer__retry{border:none;background:none;color:inherit;margin-top:10px;height:38px;padding:0 18px;border:1px solid #c2c2c2;border-radius:8px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:#212427;cursor:pointer;transition:background .15s ease-in-out}.pecb-slide-viewer__retry:focus{outline:none}.pecb-slide-viewer__retry:hover{background:#f4f4f4}.pecb-slide-viewer__retry:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__stage-n{position:absolute;left:16px;bottom:16px;font-size:13px;font-weight:600;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}.pecb-slide-viewer__progress{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;pointer-events:none}.pecb-slide-viewer__progress:after{content:\"\";position:absolute;inset:0;width:40%;background:var(--pecb-slide-active);opacity:.7;border-radius:999px;animation:pecb-slide-progress 1s ease-in-out infinite}.pecb-slide-viewer__veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.pecb-slide-viewer__veil-text{padding:6px 12px;border-radius:999px;background:#ffffffd9;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#616161}.pecb-slide-viewer__fs-exit{padding:0;border:none;background:none;font:inherit;color:inherit;position:absolute;top:16px;right:16px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#1414168c;color:#fff;cursor:pointer}.pecb-slide-viewer__fs-exit:focus{outline:none}.pecb-slide-viewer__fs-exit:hover{background:#141416bf}.pecb-slide-viewer__fs-exit:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.pecb-slide-viewer__bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.pecb-slide-viewer__nav{display:flex;gap:8px}.pecb-slide-viewer__nb{padding:0;border:none;background:none;font:inherit;color:inherit;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c2c2c2;background:#fff;border-radius:8px;color:#212427;cursor:pointer;transition:transform .1s,background .12s}.pecb-slide-viewer__nb:focus{outline:none}.pecb-slide-viewer__nb svg{display:block}.pecb-slide-viewer__nb:hover:not(:disabled){background:#f4f4f4}.pecb-slide-viewer__nb:active:not(:disabled){transform:scale(.92);background:#ececec}.pecb-slide-viewer__nb:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__nb:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-slide-viewer__count{display:flex;align-items:center;gap:10px;font-size:14px;color:#616161}.pecb-slide-viewer__count label{cursor:default}.pecb-slide-viewer__page-input{width:70px;height:44px;border:1px solid var(--pecb-slide-border);border-radius:8px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;text-align:center;color:#212427;background:#fff;-moz-appearance:textfield;appearance:textfield}.pecb-slide-viewer__page-input::-webkit-outer-spin-button,.pecb-slide-viewer__page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pecb-slide-viewer__page-input:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:1px}.pecb-slide-viewer__page-input:disabled{color:#c2c2c2;background:#fafafa}.pecb-slide-viewer__zoom{display:flex;align-items:center;gap:6px}.pecb-slide-viewer__zoom-value{border:none;background:none;color:inherit;min-width:56px;height:44px;padding:0 8px;border:1px solid var(--pecb-slide-border);border-radius:8px;background:#fff;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:#616161;cursor:pointer}.pecb-slide-viewer__zoom-value:focus{outline:none}.pecb-slide-viewer__zoom-value:disabled{cursor:default;color:#919191}.pecb-slide-viewer__zoom-value:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__right{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}.pecb-slide-viewer__right>:not(.pecb-slide-viewer__nb){min-width:220px}.pecb-slide-viewer__note{background:#fff;border:1px solid var(--pecb-slide-border);border-radius:var(--pecb-slide-radius);overflow:hidden}.pecb-slide-viewer__note-h{border:none;background:none;color:inherit;width:100%;display:flex;align-items:center;gap:10px;padding:18px 20px;font:inherit;font-size:15px;font-weight:600;color:#212427;cursor:pointer;text-align:left}.pecb-slide-viewer__note-h:focus{outline:none}.pecb-slide-viewer__note-h svg{flex:none;color:#616161}.pecb-slide-viewer__note-h:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:-2px;border-radius:var(--pecb-slide-radius)}.pecb-slide-viewer__chev{margin-left:auto;display:inline-flex;transition:transform .18s}.pecb-slide-viewer__note--open .pecb-slide-viewer__chev{transform:rotate(180deg)}.pecb-slide-viewer__note-b{padding:0 20px 20px;font-size:13.5px;line-height:1.6;color:#616161;max-height:var(--pecb-slide-note-max-height);overflow-y:auto}.pecb-slide-viewer__note-b::-webkit-scrollbar{width:8px;height:8px}.pecb-slide-viewer__note-b::-webkit-scrollbar-track{background:#f4f4f4}.pecb-slide-viewer__note-b::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-slide-viewer__note-b::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-slide-viewer__note-b[hidden]{display:none}.pecb-slide-viewer__note-b ::ng-deep p{margin:0 0 12px}.pecb-slide-viewer__note-b ::ng-deep p:last-child{margin:0}.pecb-slide-viewer__note-b ::ng-deep ul,.pecb-slide-viewer__note-b ::ng-deep ol{padding-left:20px;margin:0 0 12px}.pecb-slide-viewer__note-b>[pecbSlideViewerNote]{display:block}.pecb-slide-viewer__side{position:sticky;top:var(--pecb-slide-sidebar-top);min-width:0;background:#fff;border:1px solid var(--pecb-slide-border);border-radius:var(--pecb-slide-radius);padding:14px;display:flex;flex-direction:column;gap:14px}.pecb-slide-viewer__search{display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--pecb-slide-border);border-radius:8px;padding:0 12px;background:#fff}.pecb-slide-viewer__search svg{flex:none;color:#c2c2c2}.pecb-slide-viewer__search input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:#212427}.pecb-slide-viewer__search input::placeholder{color:#919191}.pecb-slide-viewer__search input::-webkit-search-cancel-button{-webkit-appearance:none}.pecb-slide-viewer__search:focus-within{border-color:#c2c2c2;box-shadow:0 0 0 3px #21242714}.pecb-slide-viewer__results{margin:-6px 0 0;font-size:12px;font-weight:600;color:#919191}.pecb-slide-viewer__thumbs{display:flex;flex-direction:column;gap:12px;max-height:var(--pecb-slide-thumbs-max-height);overflow-y:auto;overflow-anchor:none;padding-right:6px;scroll-behavior:smooth}.pecb-slide-viewer__thumbs::-webkit-scrollbar{width:8px;height:8px}.pecb-slide-viewer__thumbs::-webkit-scrollbar-track{background:#f4f4f4}.pecb-slide-viewer__thumbs::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-slide-viewer__thumbs::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-slide-viewer__thumb{display:block;width:100%;flex:none;border-radius:var(--pecb-slide-thumb-radius);overflow:hidden;border:2px solid transparent;background:#fff;cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:border-color .15s ease-in-out,opacity .15s ease-in-out}.pecb-slide-viewer__thumb:hover{border-color:#c2c2c2}.pecb-slide-viewer__thumb:focus-visible{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__thumb--active{border-color:var(--pecb-slide-active)}.pecb-slide-viewer__thumb--active .pecb-slide-viewer__thumb-n{background:var(--pecb-slide-number-bg);color:#fff}.pecb-slide-viewer__thumb--selected{border-color:var(--pecb-slide-active)}.pecb-slide-viewer__thumb--hidden{opacity:.55}.pecb-slide-viewer__thumb--dragging{opacity:.4}.pecb-slide-viewer__thumb--drop-target{border-color:var(--pecb-slide-active);border-style:dashed}.pecb-slide-viewer--reorderable .pecb-slide-viewer__thumb{cursor:grab}.pecb-slide-viewer__thumb-img{position:relative;aspect-ratio:16/9;display:flex;align-items:center;background:var(--pecb-slide-stage-bg);overflow:hidden}.pecb-slide-viewer__thumb-img img{display:block;width:100%;height:100%;object-fit:cover}.pecb-slide-viewer__thumb-img span{padding:0 14px;font-size:14px;font-weight:600;color:#616161}.pecb-slide-viewer__thumb-n{text-align:center;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:#616161;padding:6px 0}.pecb-slide-viewer__check{position:absolute;top:8px;left:8px;margin:0;cursor:pointer}.pecb-slide-viewer__check input{position:absolute;opacity:0;width:1px;height:1px}.pecb-slide-viewer__check input:focus-visible+.pecb-slide-viewer__check-box{outline:2px solid var(--pecb-slide-active);outline-offset:2px}.pecb-slide-viewer__check input:checked+.pecb-slide-viewer__check-box{background:var(--pecb-slide-active);border-color:var(--pecb-slide-active);color:#fff}.pecb-slide-viewer__check-box{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;border:1.5px solid #c2c2c2;background:#ffffffeb;color:transparent;transition:background .15s ease-in-out,border-color .15s ease-in-out}.pecb-slide-viewer__hidden-badge{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:999px;background:#212427bf;color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}.pecb-slide-viewer__grip{position:absolute;right:6px;bottom:6px;display:inline-flex;padding:3px;border-radius:4px;background:#ffffffd9;color:#616161}.pecb-slide-viewer__thumb-extra{position:absolute;inset:0;pointer-events:none}.pecb-slide-viewer__thumb-extra>*{pointer-events:auto}.pecb-slide-viewer__spacer{flex:none;width:100%}.pecb-slide-viewer__spacer[style*=\"height: 0px\"]{display:none}.pecb-slide-viewer__thumb--pending .pecb-slide-viewer__thumb-img{background:#ececec}.pecb-slide-viewer__thumb--pending .pecb-slide-viewer__thumb-img:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 50%,transparent);animation:pecb-slide-shimmer 1.6s ease-in-out infinite}.pecb-slide-viewer__thumb--skeleton{pointer-events:none}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-img,.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n{position:relative;overflow:hidden;background:#ececec}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n{height:28px;margin-top:4px;border-radius:6px}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-img:after,.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 50%,transparent);animation:pecb-slide-shimmer 1.6s ease-in-out infinite}.pecb-slide-viewer__empty{margin:0;padding:12px;font-size:13.5px;color:#919191}.pecb-slide-viewer__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@container pecb-slide-viewer (max-width: 1080px){.pecb-slide-viewer__main{grid-template-columns:minmax(0,1fr)}.pecb-slide-viewer__side{position:static}}@container pecb-slide-viewer (max-width: 640px){.pecb-slide-viewer__top{padding:10px 12px}.pecb-slide-viewer__tool span{display:none}.pecb-slide-viewer__tool{padding:0 10px}.pecb-slide-viewer__nb{width:40px;height:40px}.pecb-slide-viewer__page-input{height:40px;width:60px}.pecb-slide-viewer__right{margin-left:0;flex:1 1 100%}.pecb-slide-viewer__thumbs{max-height:360px}}@keyframes pecb-slide-progress{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes pecb-slide-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.pecb-slide-viewer__day,.pecb-slide-viewer__tool,.pecb-slide-viewer__nb,.pecb-slide-viewer__chev,.pecb-slide-viewer__thumb{transition:none}.pecb-slide-viewer__thumbs{scroll-behavior:auto}.pecb-slide-viewer__progress:after{animation:none;width:100%}.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-img:after,.pecb-slide-viewer__thumb--skeleton .pecb-slide-viewer__thumb-n:after,.pecb-slide-viewer__thumb--pending .pecb-slide-viewer__thumb-img:after,.pecb-slide-viewer__stage--skeleton:before{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rootRef: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], thumbsRef: [{ type: i0.ViewChild, args: ['thumbs', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], thumbnailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlideViewerThumbnailDirective), { isSignal: true }] }], dayTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlideViewerDayDirective), { isSignal: true }] }], days: [{ type: i0.Input, args: [{ isSignal: true, alias: "days", required: false }] }], slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], showNote: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNote", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingProgress", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }], canDownloadSlides: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDownloadSlides", required: false }] }], stageAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "stageAspectRatio", required: false }] }], sidebarPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPosition", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showSlideInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlideInput", required: false }] }], showFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullscreen", required: false }] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], zoomSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSteps", required: false }] }], skipHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipHidden", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], virtualizeAbove: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualizeAbove", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], prefetch: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefetch", required: false }] }], swipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipe", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], keyMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyMap", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], activeDayId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDayId", required: false }] }, { type: i0.Output, args: ["activeDayIdChange"] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }], noteOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteOpen", required: false }] }, { type: i0.Output, args: ["noteOpenChange"] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], dayChange: [{ type: i0.Output, args: ["dayChange"] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], tool: [{ type: i0.Output, args: ["tool"] }], fullscreenChange: [{ type: i0.Output, args: ["fullscreenChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], fullImageRequest: [{ type: i0.Output, args: ["fullImageRequest"] }], slideMove: [{ type: i0.Output, args: ["slideMove"] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
 /**
  * An injectable, Toastr-style notification service.
  *
@@ -21905,5 +23045,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, ActionItemComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseContentPanelComponent, CoursePlayerComponent, CourseTileComponent, CredentialCardComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FormSectionCardComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, HubCardComponent, HubCardGridComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, ListItemComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, OutlinedFieldComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PaymentPlanCardComponent, PaymentScheduleCardComponent, PaymentSummaryComponent, PeriodPaymentModalComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressArcComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TagSelectComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
+export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, ActionItemComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseContentPanelComponent, CoursePlayerComponent, CourseTileComponent, CredentialCardComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_SLIDE_VIEWER_KEY_MAP, DEFAULT_SLIDE_VIEWER_LABELS, DEFAULT_SLIDE_VIEWER_TOOLS, DEFAULT_SLIDE_VIEWER_ZOOM_STEPS, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FormSectionCardComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, HubCardComponent, HubCardGridComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, ListItemComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, OutlinedFieldComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PaymentPlanCardComponent, PaymentScheduleCardComponent, PaymentSummaryComponent, PeriodPaymentModalComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressArcComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SlideViewerComponent, SlideViewerDayDirective, SlideViewerThumbnailDirective, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TagSelectComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, clampSlidePage, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
 //# sourceMappingURL=pecb-ui-components.mjs.map