epub-flow 0.0.1

package/fesm2022/epub-flow.mjs

@@ -0,0 +1,2249 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, Injector, HostListener, Component, Input, effect, EventEmitter, Output, PLATFORM_ID, Inject, input, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { map, Subject, of, takeUntil, finalize, forkJoin, from, mergeMap, toArray } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i1$2 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i7 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i6 from 'ngx-editor';
+import { Editor, NgxEditorModule } from 'ngx-editor';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i4 from 'primeng/api';
+import * as i1$3 from '@angular/platform-browser';
+import * as i8 from 'primeng/tabview';
+import { TabViewModule } from 'primeng/tabview';
+import ePub from 'epubjs';
+import * as i1$4 from 'primeng/progressbar';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { TableModule } from 'primeng/table';
+import { ButtonModule } from 'primeng/button';
+
+class EpubReaderService {
+    http;
+    ePubChapters = signal(null);
+    noteToEdit = signal(null);
+    searchKey = signal('');
+    searchResponseData = signal(null);
+    constructor(http) {
+        this.http = http;
+    }
+    /*
+     *@Desc : To update Epub chapters
+     *@Author: Jaisankar
+     */
+    updateChapters(data) {
+        this.ePubChapters.set(data);
+    }
+    /*
+     *@Desc : To update Search key
+     *@Author: Jaisankar
+     */
+    toUpdateSearchKey(data) {
+        this.searchKey.set(data);
+    }
+    /*
+     *@Desc : To update Search key
+     *@Author: Jaisankar
+     */
+    updateSearchData(data) {
+        this.searchResponseData.set(data);
+    }
+    /*
+     *@Desc : TO STORE SELECTED NOTES
+     *@Author: ABOOBACKER
+     */
+    setNote(data) {
+        this.noteToEdit.set(data);
+    }
+    /*
+     *@Desc : TO GET SELECTED NOTES
+     *@Author: ABOOBACKER
+     */
+    getNote() {
+        return this.noteToEdit();
+    }
+    getDefinition(payload) {
+        const headers = new HttpHeaders({
+            skip: 'true', // Add the custom header
+        });
+        return this.http
+            .get(`https://api.dictionaryapi.dev/api/v2/entries/en/${payload}`, {
+            headers,
+        })
+            .pipe(map((x) => x?.[0] ?? []));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class CustomDialogService {
+    overlay;
+    injector;
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    open(component, options = {}) {
+        // 1. Position Strategy
+        const positionStrategy = this.overlay.position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+        // 2. Overlay Config
+        const overlayConfig = new OverlayConfig({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            // You can map options.windowClass to panelClass if needed, or pass width/height
+            panelClass: options.windowClass
+        });
+        // 3. Create Overlay
+        const overlayRef = this.overlay.create(overlayConfig);
+        // 4. Create DialogRef
+        const ref = new CustomDialogRef();
+        ref.data = options.data;
+        // 5. Create Injector
+        const injector = Injector.create({
+            providers: [
+                { provide: CustomDialogRef, useValue: ref },
+                { provide: CustomDialogService, useValue: this }
+            ],
+            parent: this.injector
+        });
+        // 6. Attach Component
+        const portal = new ComponentPortal(component, null, injector);
+        overlayRef.attach(portal);
+        // 7. Handle Close
+        ref.afterClosed$.subscribe(() => {
+            overlayRef.dispose();
+        });
+        overlayRef.backdropClick().subscribe(() => {
+            if (options.enableClose !== false && !options.closeButton) {
+                // If closeButton is true, usually that handles closing. 
+                // But for backdrop click, we check enableClose. Default is usually true.
+                ref.close();
+            }
+            else if (options.enableClose === undefined) {
+                ref.close();
+            }
+        });
+        return ref;
+    }
+    closeAll() {
+        // This is a simplified version. To properly close all, we'd need to track active refs.
+        // For now, individual dialogs manage their own closure via ref.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Injector }] });
+class CustomDialogRef {
+    afterClosed = new Subject();
+    afterClosed$ = this.afterClosed.asObservable();
+    data;
+    close(result) {
+        this.afterClosed.next(result);
+        this.afterClosed.complete();
+    }
+}
+
+class SharedService {
+    showHide(val) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SharedService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SharedService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class HttpApiService {
+    getAnnotations(params) { return of({}); }
+    getReadProgress(params) { return of({}); }
+    getFreeSample(id) { return of(new Blob()); }
+    getBook(id) { return of(new Blob()); }
+    saveAnnotations(params) { return of({}); }
+    saveReadProgress(params) { return of({}); }
+    deleteNotes(id) { return of({}); }
+    updateSearchData(data) { }
+    addorEditeNote(payload) { return of({}); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class AuthService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AddNotesComponent {
+    dialog;
+    sharedService;
+    epubReader;
+    userApi;
+    dialogRef;
+    messageService;
+    editor; // Editor instance
+    textToAddorEdit;
+    toolbar = [
+        ['bold', 'italic'],
+        ['underline', 'strike'],
+        ['code', 'blockquote'],
+        ['ordered_list', 'bullet_list'],
+        [
+            {
+                heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            },
+        ],
+        ['text_color', 'background_color'],
+        ['align_left', 'align_center', 'align_right', 'align_justify'],
+    ];
+    isSubmitting = false;
+    // FormGroup for handling editor content
+    form = new FormGroup({
+        editorContent: new FormControl(this.textToAddorEdit),
+    });
+    data;
+    // Getter for editor content
+    get editorContent() {
+        return this.form.get('editorContent');
+    }
+    onDestroy$ = new Subject();
+    constructor(dialog, sharedService, epubReader, userApi, dialogRef, messageService) {
+        this.dialog = dialog;
+        this.sharedService = sharedService;
+        this.epubReader = epubReader;
+        this.userApi = userApi;
+        this.dialogRef = dialogRef;
+        this.messageService = messageService;
+    }
+    ngOnInit() {
+        // Initialize the editor
+        this.editor = new Editor();
+        this.textToAddorEdit = this.dialogRef.data.notetoAddorEdit; // Access THE SELECTED NOTE
+        this.form.patchValue({ editorContent: this.textToAddorEdit });
+    }
+    onSubmit() {
+        if (this.form.valid) {
+            const content = this.editorContent.value; // Retrieve content as HTML
+        }
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        console.log('Drag over blocked');
+    }
+    // Prevent drop
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        console.log('Drop blocked');
+    }
+    // Optional: Prevent drag start
+    onDragStart(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        console.log('Drag start blocked');
+    }
+    onRightClick(event) {
+        event.preventDefault(); // Disable the right-click menu
+    }
+    onKeyDown(event) {
+        if (event.ctrlKey && event.key === 'c') {
+            event.preventDefault(); // Prevent the default copy action
+        }
+    }
+    onCopy(event) {
+        event.preventDefault(); // Prevent the copy event
+    }
+    ngOnDestroy() {
+        // Destroy the editor instance to prevent memory leaks
+        this.editor.destroy();
+    }
+    updateNote() {
+        this.isSubmitting = true;
+        const content = this.editorContent.value; // Retrieve content as HTML
+        const payload = {
+            typeId: 1,
+            id: this.dialogRef.data.notedetails.id,
+            bookId: this.dialogRef.data.notedetails.bookId,
+            cfiLocation: this.dialogRef.data.notedetails.cfiLocation,
+            annotatedNotes: this.dialogRef.data.notedetails.annotatedNotes,
+            customNotes: content,
+            colorCode: '',
+        };
+        this.userApi
+            .addorEditeNote(payload)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe({
+            next: (res) => {
+                this.messageService.add({
+                    key: 'notifyToast',
+                    severity: 'success', // Use 'warn' for orange color
+                    summary: 'Success',
+                    detail: res.message,
+                });
+                this.dialog.closeAll();
+            },
+            error: (err) => {
+                this.isSubmitting = false; // re-enable button
+                console.error('Error fetching eBook details:', err);
+            },
+            complete: () => {
+                this.isSubmitting = false; // re-enable button
+            },
+        });
+    }
+    /**
+     * @Desc   : Checks if the provided content has valid, non-empty, and non-whitespace-only text.
+     * @Author : Aboobacker
+     * @Param  : content (string) - The content to validate
+     * @Returns: boolean - true if valid content exists, false otherwise
+     */
+    hasValidContent(content) {
+        if (!content)
+            return false;
+        const textOnly = content.replace(/<[^>]*>/g, '').trim(); // Remove HTML tags
+        return textOnly.length > 0;
+    }
+    addNote() {
+        this.isSubmitting = true; // re-enable button
+        const content = this.editorContent.value; // Retrieve content as HTML
+        const payload = {
+            typeId: 1,
+            id: 0,
+            bookId: this.dialogRef.data.notedetails.bookId,
+            cfiLocation: this.dialogRef.data.notedetails.cfiLocation,
+            annotatedNotes: this.dialogRef.data.notetoAddorEdit,
+            customNotes: content,
+            colorCode: '',
+        };
+        this.userApi
+            .addorEditeNote(payload)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe({
+            next: (res) => {
+                this.messageService.add({
+                    key: 'notifyToast',
+                    severity: 'success', // Use 'warn' for orange color
+                    summary: 'Success',
+                    detail: res.message,
+                });
+                this.dialog.closeAll();
+            },
+            error: (err) => {
+                this.isSubmitting = false; // re-enable button
+                console.error('Error fetching eBook details:', err);
+            },
+            complete: () => {
+                this.isSubmitting = false; // re-enable button
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AddNotesComponent, deps: [{ token: CustomDialogService }, { token: SharedService }, { token: EpubReaderService }, { token: HttpApiService }, { token: CustomDialogRef }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AddNotesComponent, isStandalone: false, selector: "app-add-notes", host: { listeners: { "document:dragover": "onDragOver($event)", "document:drop": "onDrop($event)", "document:dragstart": "onDragStart($event)", "document:contextmenu": "onRightClick($event)", "document:keydown": "onKeyDown($event)", "document:copy": "onCopy($event)" } }, ngImport: i0, template: "<div class=\"note-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">{{ dialogRef.data.addNote ? 'Add Note' : 'Edit Note' }}</h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n  <form class=\"note-form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <!-- Editor Section -->\n    <section class=\"editor-section\">\n      <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"toolbar\">\n      </ngx-editor-menu>\n\n      <ngx-editor class=\"editor-body\" [editor]=\"editor\" formControlName=\"editorContent\">\n      </ngx-editor>\n    </section>\n\n    <!-- Validation -->\n    <p class=\"error\" *ngIf=\"editorContent.invalid && editorContent.touched\">\n      Content is required.\n    </p>\n\n    <!-- Footer / Actions -->\n    <footer class=\"action-bar\">\n      @if (dialogRef.data.addNote) {\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"addNote()\"\n        [disabled]=\"!hasValidContent(editorContent.value) || isSubmitting\">\n        Add Note\n      </button>\n      } @else {\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"updateNote()\"\n        [disabled]=\"!hasValidContent(editorContent.value) || isSubmitting\">\n        Update Note\n      </button>\n      }\n    </footer>\n  </form>\n</div>", styles: [":host{display:block;font-family:Figtree,sans-serif;--primary: #34c759;--primary-hover: #2ebd50;--bg: #ffffff;--text: #1f2937;--border: #e5e7eb}:host-context(.dark-mode){--bg: #1f2937;--text: #f9fafb;--border: #374151}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuBar{background:#1f2937;border-color:#374151}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem{color:#e5e7eb}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem:hover{background-color:#374151;color:#fff}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem.NgxEditor__MenuItem--Active{background-color:#374151;color:#34c759}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem svg{fill:currentColor}:host-context(.dark-mode) ::ng-deep .NgxEditor__Dropdown .NgxEditor__Dropdown--Selected,:host-context(.dark-mode) ::ng-deep .NgxEditor__Dropdown .NgxEditor__Dropdown--Open,:host-context(.dark-mode) ::ng-deep .NgxEditor__Dropdown:hover{background-color:#374151;color:#fff}.note-container{width:100%;max-width:560px;height:auto;min-height:480px;max-height:85vh;background:var(--bg);color:var(--text);border-radius:16px;box-shadow:0 20px 25px -5px #00000026;overflow:hidden;display:flex;flex-direction:column}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}.popup-title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text)}.close-btn{background:transparent;border:none;cursor:pointer;padding:8px;margin:-8px -8px -8px 0;border-radius:50%;color:var(--text);display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s}.close-btn:hover{background-color:#0000000d;opacity:1}:host-context(.dark-mode) .close-btn:hover{background-color:#ffffff1a}.note-form{display:flex;flex-direction:column;flex:1;padding:1.5rem;overflow:hidden}.editor-section{display:flex;flex-direction:column;flex:1;min-height:250px;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s ease;background:var(--bg)}.editor-section:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #34c75926}::ng-deep .NgxEditor__MenuBar{background:var(--bg);border-bottom:1px solid var(--border);padding:.5rem;gap:.25rem;flex-wrap:wrap}::ng-deep .NgxEditor{flex:1;height:100%;min-height:300px;padding:1rem;border:none!important;background:var(--bg);color:var(--text);font-size:.95rem;line-height:1.6;overflow-y:auto}.error{color:#ef4444;font-size:.85rem;margin:.5rem 0 0}.action-bar{display:flex;justify-content:flex-end;padding-top:.75rem}::ng-deep .NgxEditor__Popup{position:absolute;top:calc(var(--ngx-editor-menubar-height) + 2px);box-shadow:var(--ngx-editor-popup-shadow);border-radius:var(--ngx-editor-popup-border-radius);background-color:var(--ngx-editor-popup-bg-color);z-index:100;min-width:101px;padding:8px;right:2px}.btn{min-width:140px;padding:10px 24px;border-radius:10px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 6px #34c7594d}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}@media (max-width: 640px){.note-container{height:100vh;border-radius:0}.note-form{padding:.75rem}.action-bar{justify-content:stretch}.btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i6.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AddNotesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-add-notes', standalone: false, template: "<div class=\"note-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">{{ dialogRef.data.addNote ? 'Add Note' : 'Edit Note' }}</h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n  <form class=\"note-form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <!-- Editor Section -->\n    <section class=\"editor-section\">\n      <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"toolbar\">\n      </ngx-editor-menu>\n\n      <ngx-editor class=\"editor-body\" [editor]=\"editor\" formControlName=\"editorContent\">\n      </ngx-editor>\n    </section>\n\n    <!-- Validation -->\n    <p class=\"error\" *ngIf=\"editorContent.invalid && editorContent.touched\">\n      Content is required.\n    </p>\n\n    <!-- Footer / Actions -->\n    <footer class=\"action-bar\">\n      @if (dialogRef.data.addNote) {\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"addNote()\"\n        [disabled]=\"!hasValidContent(editorContent.value) || isSubmitting\">\n        Add Note\n      </button>\n      } @else {\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"updateNote()\"\n        [disabled]=\"!hasValidContent(editorContent.value) || isSubmitting\">\n        Update Note\n      </button>\n      }\n    </footer>\n  </form>\n</div>", styles: [":host{display:block;font-family:Figtree,sans-serif;--primary: #34c759;--primary-hover: #2ebd50;--bg: #ffffff;--text: #1f2937;--border: #e5e7eb}:host-context(.dark-mode){--bg: #1f2937;--text: #f9fafb;--border: #374151}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuBar{background:#1f2937;border-color:#374151}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem{color:#e5e7eb}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem:hover{background-color:#374151;color:#fff}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem.NgxEditor__MenuItem--Active{background-color:#374151;color:#34c759}:host-context(.dark-mode) ::ng-deep .NgxEditor__MenuItem svg{fill:currentColor}:host-context(.dark-mode) ::ng-deep .NgxEditor__Dropdown .NgxEditor__Dropdown--Selected,:host-context(.dark-mode) ::ng-deep .NgxEditor__Dropdown .NgxEditor__Dropdown--Open,:host-context(.dark-mode) ::ng-deep .NgxEditor__Dropdown:hover{background-color:#374151;color:#fff}.note-container{width:100%;max-width:560px;height:auto;min-height:480px;max-height:85vh;background:var(--bg);color:var(--text);border-radius:16px;box-shadow:0 20px 25px -5px #00000026;overflow:hidden;display:flex;flex-direction:column}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}.popup-title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text)}.close-btn{background:transparent;border:none;cursor:pointer;padding:8px;margin:-8px -8px -8px 0;border-radius:50%;color:var(--text);display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s}.close-btn:hover{background-color:#0000000d;opacity:1}:host-context(.dark-mode) .close-btn:hover{background-color:#ffffff1a}.note-form{display:flex;flex-direction:column;flex:1;padding:1.5rem;overflow:hidden}.editor-section{display:flex;flex-direction:column;flex:1;min-height:250px;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s ease;background:var(--bg)}.editor-section:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #34c75926}::ng-deep .NgxEditor__MenuBar{background:var(--bg);border-bottom:1px solid var(--border);padding:.5rem;gap:.25rem;flex-wrap:wrap}::ng-deep .NgxEditor{flex:1;height:100%;min-height:300px;padding:1rem;border:none!important;background:var(--bg);color:var(--text);font-size:.95rem;line-height:1.6;overflow-y:auto}.error{color:#ef4444;font-size:.85rem;margin:.5rem 0 0}.action-bar{display:flex;justify-content:flex-end;padding-top:.75rem}::ng-deep .NgxEditor__Popup{position:absolute;top:calc(var(--ngx-editor-menubar-height) + 2px);box-shadow:var(--ngx-editor-popup-shadow);border-radius:var(--ngx-editor-popup-border-radius);background-color:var(--ngx-editor-popup-bg-color);z-index:100;min-width:101px;padding:8px;right:2px}.btn{min-width:140px;padding:10px 24px;border-radius:10px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 6px #34c7594d}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}@media (max-width: 640px){.note-container{height:100vh;border-radius:0}.note-form{padding:.75rem}.action-bar{justify-content:stretch}.btn{width:100%}}\n"] }]
+        }], ctorParameters: () => [{ type: CustomDialogService }, { type: SharedService }, { type: EpubReaderService }, { type: HttpApiService }, { type: CustomDialogRef }, { type: i4.MessageService }], propDecorators: { onDragOver: [{
+                type: HostListener,
+                args: ['document:dragover', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['document:drop', ['$event']]
+            }], onDragStart: [{
+                type: HostListener,
+                args: ['document:dragstart', ['$event']]
+            }], onRightClick: [{
+                type: HostListener,
+                args: ['document:contextmenu', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onCopy: [{
+                type: HostListener,
+                args: ['document:copy', ['$event']]
+            }] } });
+
+class NoDataFoundComponent {
+    message = 'No Data Found';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NoDataFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: NoDataFoundComponent, isStandalone: true, selector: "app-no-data-found", inputs: { message: "message" }, ngImport: i0, template: `<div class="no-data-found">{{ message }}</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NoDataFoundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-no-data-found',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<div class="no-data-found">{{ message }}</div>`
+                }]
+        }], propDecorators: { message: [{
+                type: Input
+            }] } });
+
+class SkeletonLoaderComponent {
+    count = 3;
+    type = 'list';
+    items = [];
+    ngOnChanges() {
+        this.items = Array(this.count).fill(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SkeletonLoaderComponent, isStandalone: true, selector: "app-skeleton-loader", inputs: { count: "count", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"skeleton-container\">\n    <div *ngFor=\"let item of items\" class=\"skeleton-item\" [ngClass]=\"type\">\n        <ng-container *ngIf=\"type === 'list'\">\n            <div class=\"skeleton-icon\"></div>\n            <div class=\"skeleton-content\">\n                <div class=\"skeleton-line title\"></div>\n                <div class=\"skeleton-line meta\"></div>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"type === 'text'\">\n            <div class=\"skeleton-line text-long\"></div>\n            <div class=\"skeleton-line text-medium\"></div>\n            <div class=\"skeleton-line text-short\"></div>\n        </ng-container>\n    </div>\n</div>", styles: [".skeleton-container{width:100%;display:flex;flex-direction:column;gap:16px;padding:16px}.skeleton-item{display:flex;gap:16px}.skeleton-item.text{flex-direction:column;gap:8px;padding:0}.skeleton-icon{width:32px;height:32px;border-radius:50%;background-color:var(--border-soft, #e2e8f0);flex-shrink:0;animation:pulse 1.5s infinite}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton-line{height:12px;background-color:var(--border-soft, #e2e8f0);border-radius:4px;animation:pulse 1.5s infinite}.skeleton-line.title{width:80%;height:16px}.skeleton-line.meta{width:40%}.skeleton-line.text-long{width:100%;height:14px}.skeleton-line.text-medium{width:80%;height:14px}.skeleton-line.text-short{width:60%;height:14px}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}:host-context(.dark-mode) .skeleton-icon,:host-context(.dark-mode) .skeleton-line{background-color:#374151}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-skeleton-loader', standalone: true, imports: [CommonModule], template: "<div class=\"skeleton-container\">\n    <div *ngFor=\"let item of items\" class=\"skeleton-item\" [ngClass]=\"type\">\n        <ng-container *ngIf=\"type === 'list'\">\n            <div class=\"skeleton-icon\"></div>\n            <div class=\"skeleton-content\">\n                <div class=\"skeleton-line title\"></div>\n                <div class=\"skeleton-line meta\"></div>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"type === 'text'\">\n            <div class=\"skeleton-line text-long\"></div>\n            <div class=\"skeleton-line text-medium\"></div>\n            <div class=\"skeleton-line text-short\"></div>\n        </ng-container>\n    </div>\n</div>", styles: [".skeleton-container{width:100%;display:flex;flex-direction:column;gap:16px;padding:16px}.skeleton-item{display:flex;gap:16px}.skeleton-item.text{flex-direction:column;gap:8px;padding:0}.skeleton-icon{width:32px;height:32px;border-radius:50%;background-color:var(--border-soft, #e2e8f0);flex-shrink:0;animation:pulse 1.5s infinite}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton-line{height:12px;background-color:var(--border-soft, #e2e8f0);border-radius:4px;animation:pulse 1.5s infinite}.skeleton-line.title{width:80%;height:16px}.skeleton-line.meta{width:40%}.skeleton-line.text-long{width:100%;height:14px}.skeleton-line.text-medium{width:80%;height:14px}.skeleton-line.text-short{width:60%;height:14px}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}:host-context(.dark-mode) .skeleton-icon,:host-context(.dark-mode) .skeleton-line{background-color:#374151}\n"] }]
+        }], propDecorators: { count: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class EpubCommonPopupComponent {
+    sanitizer;
+    userApi;
+    messageService;
+    dialog;
+    dialogRef;
+    loaderService;
+    epubService;
+    sharedService;
+    staticText = {
+        validationText: { atleastThreeChara: 'Enter at least 3 characters to begin searching' },
+        btnText: { cancel: 'Cancel', edit: 'Edit', remove: 'Remove' },
+        htmlText: { nohighlightsavailable: 'No highlights' }
+    };
+    notesandHighlights;
+    bookMarkList;
+    singlenoteDetails;
+    notes;
+    isNotEndOfList = true;
+    template = 2;
+    htmlString;
+    htmlStaticText = {
+        validationText: { atleastThreeChara: 'Min 3 chars' },
+        btnText: { cancel: 'Cancel', edit: 'Edit', remove: 'Remove' },
+        htmlText: { nohighlightsavailable: 'No highlights' }
+    };
+    paginationData = {
+        totalCount: 0,
+        pageSize: 1000,
+        currentPage: 1,
+    };
+    searchKey = '';
+    searchData = null;
+    searchCharaSmall = false;
+    onDestroy$ = new Subject();
+    tabviewIndex = 1;
+    Definition = [];
+    isLoading = false;
+    isSearchDataAvailable = false;
+    constructor(sanitizer, userApi, messageService, dialog, dialogRef, loaderService, epubService, sharedService) {
+        this.sanitizer = sanitizer;
+        this.userApi = userApi;
+        this.messageService = messageService;
+        this.dialog = dialog;
+        this.dialogRef = dialogRef;
+        this.loaderService = loaderService;
+        this.epubService = epubService;
+        this.sharedService = sharedService;
+        effect(() => {
+            this.searchData = this.epubService.searchResponseData();
+            this.isSearchDataAvailable = false; // Reset loading when data arrives
+        });
+    }
+    ngOnInit() {
+        this.template = this.dialogRef.data.template;
+        if (this.dialogRef.data.template === 1) {
+            this.singlenoteDetails = this.dialogRef.data.notedetails;
+            const rawHtml = this.singlenoteDetails.customNotes;
+            this.htmlString = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
+        }
+        if (this.dialogRef.data.template === 2) {
+            this.getHighlightNotes();
+        }
+        if (this.dialogRef.data.template === 4) {
+            this.getBookmark();
+        }
+        if (this.dialogRef.data.template === 5) {
+            this.getDefinition();
+        }
+    }
+    /*
+     *@Desc : Handles tab view changes
+     *@Author: Aboobacker
+     */
+    onTabChange(data) {
+        this.paginationData = {
+            totalCount: 0,
+            pageSize: 10,
+            currentPage: 1,
+        };
+        if (data.index === 1) {
+            //noteas
+            this.tabviewIndex = data.index;
+            this.getNotes();
+        }
+        else {
+            //highlights
+            this.getHighlightNotes();
+        }
+    }
+    /*
+     *@Desc : get highlightNotes
+     *@Author: Aboobacker
+     */
+    getHighlightNotes() {
+        this.isLoading = true;
+        const payload = {
+            keyword: '',
+            pageSize: this.paginationData.pageSize,
+            currentPage: this.paginationData.currentPage,
+            id: '',
+            type: 2,
+            bookId: this.dialogRef.data.bookId,
+        };
+        this.userApi
+            .getAnnotations(payload)
+            .pipe(takeUntil(this.onDestroy$), finalize(() => this.isLoading = false))
+            .subscribe({
+            next: (res) => {
+                this.notesandHighlights = res.highlightedNotes?.items;
+            },
+            error: (err) => {
+                console.error('Error fetching highlightedNotes details:', err);
+            }
+        });
+    }
+    /*
+     *@Desc : get bookMarks
+     *@Author: Aboobacker
+     */
+    getBookmark() {
+        this.isLoading = true;
+        const payload = {
+            keyword: '',
+            pageSize: 1000,
+            currentPage: 1,
+            id: '',
+            type: 4, // type 4 is bookmark
+            bookId: this.dialogRef.data.bookId,
+        };
+        this.userApi
+            .getAnnotations(payload)
+            .pipe(takeUntil(this.onDestroy$), finalize(() => this.isLoading = false))
+            .subscribe({
+            next: (res) => {
+                this.bookMarkList = res?.bookmarks?.items;
+            }
+        });
+    }
+    /*
+     *@Desc : to get Definition
+     *@Author: Aboobacker
+     */
+    getDefinition() {
+        this.isLoading = true;
+        this.epubService
+            .getDefinition(this.dialogRef.data.selectedText)
+            .pipe(takeUntil(this.onDestroy$), finalize(() => this.isLoading = false))
+            .subscribe({
+            next: (res) => {
+                // Ensure Definition is always an array to avoid template errors
+                this.Definition = Array.isArray(res?.meanings) ? res.meanings : [];
+            },
+            error: () => {
+                this.Definition = [];
+            }
+        });
+    }
+    /*
+     *@Desc : get Notes
+     *@Author: Aboobacker
+     */
+    getNotes() {
+        this.isLoading = true;
+        const payload = {
+            keyword: '',
+            pageSize: this.paginationData.pageSize,
+            currentPage: this.paginationData.currentPage,
+            id: '',
+            type: 1,
+            bookId: this.dialogRef.data.bookId,
+        };
+        this.userApi
+            .getAnnotations(payload)
+            .pipe(takeUntil(this.onDestroy$), finalize(() => this.isLoading = false))
+            .subscribe({
+            next: (res) => {
+                if (!res.notes.items.length) {
+                    this.isNotEndOfList = false;
+                }
+                if (this.paginationData.currentPage === 1) {
+                    this.notes = res.notes?.items;
+                }
+                else {
+                    this.notes = [...this.notes, ...res.notes.items];
+                }
+            },
+            error: (err) => {
+                console.error('Error fetching eBook details:', err);
+            }
+        });
+    }
+    /*
+     *@Desc : delete all type of annotations
+     *@Author: Aboobacker
+     */
+    deleteAnnotations(typeId, id) {
+        this.loaderService.showHide(true);
+        const payload = {
+            typeId: typeId,
+            id: id,
+        };
+        this.userApi
+            .deleteNotes(payload)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe({
+            next: (res) => {
+                this.loaderService.showHide(false);
+                this.messageService.add({
+                    key: 'notifyToast',
+                    severity: 'success',
+                    summary: 'Success',
+                    detail: res.message,
+                });
+                if (this.template == 1) {
+                    this.dialog.closeAll();
+                }
+                if (this.template == 2) {
+                    this.getNotes();
+                    this.getHighlightNotes();
+                }
+                if (this.template == 4) {
+                    this.getBookmark();
+                }
+            },
+            error: (err) => {
+                console.error('Error dlt Annotations:', err);
+            },
+            complete: () => { },
+        });
+    }
+    /*
+     *@Desc : open the added note
+     *@Author: Aboobacker
+     */
+    openNote(data) {
+        this.dialogRef.close(data.cfiLocation);
+        const dialog = this.dialog.open(EpubCommonPopupComponent, {
+            closeButton: true,
+            enableClose: false,
+            windowClass: 'highlightandNotes',
+            data: {
+                template: 1,
+                notedetails: data,
+            },
+        });
+    }
+    editNote() {
+        this.epubService.setNote(this.singlenoteDetails.customNotes);
+        const dialog = this.dialog.open(AddNotesComponent, {
+            closeButton: false,
+            windowClass: 'addandeditNotepopup',
+            data: {
+                notedetails: this.singlenoteDetails,
+                notetoAddorEdit: this.singlenoteDetails.customNotes,
+                addNote: false,
+            },
+        });
+    }
+    updateSearchKey() {
+        this.epubService.toUpdateSearchKey(this.searchKey);
+        if (this.searchKey.length >= 3) {
+            this.searchCharaSmall = false;
+            this.isLoading = true; // start local loader 
+        }
+        else {
+            this.searchCharaSmall = true;
+        }
+    }
+    clickSearchItem(cfi) {
+        this.searchKey = '';
+        this.epubService.toUpdateSearchKey('');
+        this.epubService.updateSearchData(null);
+        this.dialogRef.close(cfi);
+    }
+    gotoLocation(data) {
+        this.dialogRef.close(data);
+    }
+    clearSearch() {
+        this.searchKey = '';
+        this.epubService.toUpdateSearchKey('');
+        this.epubService.updateSearchData(null);
+        this.searchCharaSmall = false;
+    }
+    close() {
+        this.epubService.updateSearchData(null);
+        this.dialogRef.close();
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+    closePopup(cfi) {
+        this.dialogRef.close(cfi);
+    }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubCommonPopupComponent, deps: [{ token: i1$3.DomSanitizer }, { token: HttpApiService }, { token: i4.MessageService }, { token: CustomDialogService }, { token: CustomDialogRef }, { token: SharedService }, { token: EpubReaderService }, { token: SharedService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EpubCommonPopupComponent, isStandalone: false, selector: "app-epub-common-popup", ngImport: i0, template: "<!-- Template 1: Single Note View -->\n@if (dialogRef.data.template == 1) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">Note Details</h2>\n    <div class=\"header-actions\">\n      <button class=\"close-btn\" (click)=\"close()\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"popup-content content-padded\">\n    <div class=\"inner-html-class text-lg text-primary mb-6\" [innerHTML]=\"htmlString\"></div>\n  </div>\n\n  <div class=\"dialog-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"close()\">\n      {{ htmlStaticText.btnText.cancel }}\n    </button>\n    <button class=\"btn btn-primary\" (click)=\"editNote()\">\n      {{ htmlStaticText.btnText.edit }}\n    </button>\n    <button class=\"btn btn-danger\" (click)=\"deleteAnnotations(1, this.singlenoteDetails.id)\">\n      {{ htmlStaticText.btnText.remove }}\n    </button>\n  </div>\n</div>\n}\n\n<!-- Template 2: Highlights & Notes Tabs -->\n@if (dialogRef.data.template == 2) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M16.035 2.977l4.988 4.989-12.022 12.021H4v-4.988L16.035 2.977z\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n      Highlights & Notes\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"popup-content\">\n    <p-tabView (onChange)=\"onTabChange($event)\">\n\n      <!-- Highlights Tab -->\n      <p-tabPanel header=\"Highlights\">\n        <div *ngIf=\"isLoading; else highlightsContent\">\n          <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n        </div>\n        <ng-template #highlightsContent>\n          <div *ngIf=\"!notesandHighlights?.length; else noteList\" class=\"empty-state\">\n            {{ htmlStaticText.htmlText.nohighlightsavailable }}\n          </div>\n\n          <ng-template #noteList>\n            <div *ngFor=\"let note of notesandHighlights\" class=\"popup-row\">\n              <div class=\"row-icon-container\">\n                <div class=\"w-2 h-8 rounded-full\" [style.background-color]=\"note.colorCode\"\n                  style=\"width: 4px; height: 32px; border-radius: 4px;\"></div>\n              </div>\n\n              <div class=\"row-content\" (click)=\"gotoLocation(note.cfiLocation)\">\n                <div class=\"row-title line-clamp\">{{ note.annotatedNotes }}</div>\n                <div class=\"row-meta\">\n                  <span>Page {{ note.pageNumber || 'N/A' }}</span>\n                </div>\n              </div>\n\n              <div class=\"row-actions\">\n                <button class=\"action-btn\" (click)=\"deleteAnnotations(2, note.id)\" title=\"Remove\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path\n                      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                      stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </ng-template>\n      </p-tabPanel>\n\n      <!-- Notes Tab -->\n      <p-tabPanel header=\"Notes\">\n        <div *ngIf=\"isLoading; else notesContent\">\n          <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n        </div>\n        <ng-template #notesContent>\n          <div *ngIf=\"!notes?.length; else notesList\" class=\"empty-state\">\n            No notes available.\n          </div>\n\n          <ng-template #notesList>\n            <div *ngFor=\"let item of notes\" class=\"popup-row\">\n              <div class=\"row-icon-container\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n                  <path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n                </svg>\n              </div>\n              <div class=\"row-content\" (click)=\"openNote(item)\">\n                <div class=\"row-title line-clamp\"\n                  [innerHTML]=\"item.annotatedNotes ? item.annotatedNotes : item.customNotes\"></div>\n              </div>\n              <div class=\"row-actions\">\n                <button class=\"action-btn\" (click)=\"deleteAnnotations(1, item.id)\" title=\"Remove\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path\n                      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                      stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </ng-template>\n      </p-tabPanel>\n\n    </p-tabView>\n  </div>\n</div>\n}\n\n<!-- Template 3: Search -->\n@if (dialogRef.data.template == 3) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n      Search\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"search-container\">\n    <div class=\"search-input-wrapper\">\n      <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n        stroke-width=\"2\">\n        <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n      <input [(ngModel)]=\"searchKey\" (keyup.enter)=\"updateSearchKey()\" type=\"text\" placeholder=\"Search in book...\"\n        class=\"search-input\" autofocus />\n      <div class=\"input-actions-wrapper\">\n        <button *ngIf=\"searchKey\" class=\"icon-btn-clear\" (click)=\"clearSearch()\" title=\"Clear search\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button class=\"btn btn-primary btn-sm\" (click)=\"updateSearchKey()\">\n          Search\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"popup-content\">\n    <div *ngIf=\"searchCharaSmall\" class=\"info-banner\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" />\n        <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />\n      </svg>\n      <span>{{ staticText.validationText.atleastThreeChara }}</span>\n    </div>\n\n    <div *ngIf=\"isSearchDataAvailable; else searchResults\">\n      <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n    </div>\n\n    <ng-template #searchResults>\n      <div *ngIf=\"searchKey?.length && searchData && !searchData?.length\" class=\"empty-state\">\n        <app-no-data-found></app-no-data-found>\n      </div>\n\n      <div class=\"search-results\">\n        <div *ngFor=\"let item of searchData\" class=\"popup-row\" (click)=\"clickSearchItem(item.cfi)\">\n          <div class=\"row-content\">\n            <div class=\"row-title\" [innerHTML]=\"item.highlightedSentence\"></div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n}\n\n<!-- Template 4: Bookmarks -->\n@if (dialogRef.data.template == 4) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n      Bookmarks\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"popup-content\">\n    <div *ngIf=\"isLoading; else bookmarkContent\">\n      <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n    </div>\n\n    <ng-template #bookmarkContent>\n      <div *ngIf=\"!bookMarkList || bookMarkList.length === 0\" class=\"empty-state\">\n        No bookmarks yet.\n      </div>\n\n      <div *ngIf=\"bookMarkList && bookMarkList.length > 0\">\n        <div *ngFor=\"let bookmark of bookMarkList\" class=\"popup-row\">\n          <div class=\"row-icon-container\">\n            <!-- Filled Bookmark Icon for list -->\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n              [style.color]=\"bookmark.colorCode || '#3b82f6'\">\n              <path d=\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\" />\n            </svg>\n          </div>\n\n          <div class=\"row-content\" (click)=\"closePopup(bookmark.cfiLocation)\">\n            <div class=\"row-title line-clamp\">{{ bookmark.annotatedNotes || 'Bookmark' }}</div>\n            <div class=\"row-meta mt-2\">\n              <div class=\"progress-container\">\n                <div class=\"progress-fill\" [style.width.%]=\"bookmark.customNotes\"></div>\n              </div>\n              <span>{{ bookmark.customNotes }}%</span>\n            </div>\n          </div>\n\n          <div class=\"row-actions\">\n            <button class=\"action-btn\" (click)=\"deleteAnnotations(4, bookmark.id)\" title=\"Remove\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path\n                  d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n}\n\n<!-- Template 5: Definitions -->\n@if (dialogRef.data.template == 5) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 19.5A2.5 2.5 0 016.5 17H20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n      Definition\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"popup-content content-padded\">\n    <h3 class=\"text-xl font-bold text-primary mb-4 select-text\">\n      \"{{ dialogRef.data.selectedText }}\"\n    </h3>\n\n    <div *ngIf=\"isLoading; else defsContent\">\n      <app-skeleton-loader [count]=\"3\" type=\"text\"></app-skeleton-loader>\n    </div>\n\n    <ng-template #defsContent>\n      <div *ngIf=\"Definition?.length > 0; else noDefs\">\n        <div *ngFor=\"let entry of Definition\" class=\"definition-group\">\n          <span class=\"pos-tag\">{{ entry.partOfSpeech }}</span>\n\n          <div *ngFor=\"let def of entry.definitions\" class=\"def-item\">\n            <p class=\"def-text\">{{ def.definition }}</p>\n            <p *ngIf=\"def.example\" class=\"def-example\">\"{{ def.example }}\"</p>\n          </div>\n        </div>\n      </div>\n\n      <ng-template #noDefs>\n        <div class=\"empty-state\">No definitions found.</div>\n      </ng-template>\n    </ng-template>\n  </div>\n</div>\n}", styles: [":host{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--text-primary: #0f172a;--text-secondary: #64748b;--border-soft: #e2e8f0;--accent: #3b82f6;--accent-hover: #2563eb;--danger: #ef4444;--danger-bg: #fef2f2}:host-context(.dark-mode){--bg-primary: rgb(32 33 32);--bg-secondary: rgb(42 43 42);--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-soft: #334155;--accent: #60a5fa;--accent-hover: #3b82f6;--danger: #f87171;--danger-bg: #450a0a}.popup-container{display:flex;flex-direction:column;width:500px;height:600px;max-width:95vw;max-height:85vh;background:var(--bg-primary);color:var(--text-primary);border-radius:16px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border-soft)}.popup-title{font-size:1.15rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:12px;margin:0}.popup-title svg{color:var(--text-secondary)}.close-btn{background:transparent;border:none;color:var(--text-secondary);padding:8px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.close-btn:hover{background-color:#e2e8f0;color:var(--text-primary)}.popup-content{flex:1;overflow-y:auto;position:relative}.content-padded{padding:24px}.search-container{padding:16px 24px;background:var(--bg-primary);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:10}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-input-wrapper svg.search-icon{position:absolute;left:12px;color:var(--text-secondary);z-index:1}.search-input{width:100%;padding:12px 110px 12px 40px;border-radius:10px;border:1px solid var(--border-soft);font-size:.95rem;background:var(--bg-secondary);color:var(--text-primary);transition:all .2s}.search-input:focus{outline:none;background:var(--bg-primary);border-color:var(--accent);box-shadow:0 0 0 3px #3b82f61a}.input-actions-wrapper{position:absolute;right:8px;display:flex;align-items:center;gap:8px}.icon-btn-clear{background:transparent;border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;border-radius:4px}.icon-btn-clear:hover{background-color:var(--border-soft);color:var(--text-primary)}.info-banner{display:flex;align-items:center;gap:12px;margin:12px 24px;padding:12px 16px;background:var(--primary-lite);color:var(--primary);border-radius:8px;font-size:.85rem;font-weight:500;border:1px solid var(--border-color)}.info-banner svg{flex-shrink:0;opacity:.8}.btn-sm{padding:4px 12px;font-size:.85rem;height:32px}.popup-row{display:flex;align-items:flex-start;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background-color .2s}.popup-row:hover{background-color:var(--bg-secondary)}.popup-row:hover .row-actions{opacity:1}.popup-row:last-child{border-bottom:none}.row-icon-container{flex-shrink:0;margin-top:2px;color:var(--text-secondary)}.row-content{flex:1;min-width:0}.row-title{font-size:.95rem;font-weight:500;color:var(--text-primary);line-height:1.5;margin-bottom:4px}.row-meta{font-size:.8rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.row-actions{opacity:0;transition:opacity .2s;display:flex;align-items:center}.action-btn{background:transparent;border:none;color:var(--text-secondary);padding:6px;border-radius:6px;cursor:pointer;transition:all .2s}.action-btn:hover{background-color:var(--danger-bg);color:var(--danger)}.dialog-footer{padding:16px 24px;border-top:1px solid var(--border-soft);background:var(--bg-primary);display:flex;justify-content:flex-end;gap:12px}.btn{padding:8px 16px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid transparent}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-soft)}.btn-secondary:hover{background:#e2e8f0}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-danger{background:var(--danger-bg);color:var(--danger)}.btn-danger:hover{background:#fee2e2}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-primary{color:var(--accent)}.mb-4{margin-bottom:1rem}.select-text{user-select:text;-webkit-user-select:text}.definition-group{margin-bottom:24px}.pos-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:#3b82f61a;padding:4px 8px;border-radius:6px;margin-bottom:12px}.def-item{padding-bottom:16px;margin-bottom:16px;border-bottom:1px dashed var(--border-soft)}.def-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.def-text{font-size:.95rem;color:var(--text-primary);line-height:1.5;margin-bottom:4px}.def-example{font-size:.85rem;color:var(--text-secondary);font-style:italic;padding-left:12px;border-left:2px solid var(--border-soft)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-secondary);text-align:center;font-style:italic}.progress-container{width:100px;height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:3px}.line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host::ng-deep .p-tabview-nav{background:var(--bg-primary)!important;border-bottom:1px solid var(--border-soft)!important;justify-content:center;padding:0}:host::ng-deep .p-tabview-nav li .p-tabview-nav-link{background:transparent!important;border:none!important;color:var(--text-secondary)!important;font-weight:500;padding:16px 20px!important;box-shadow:none!important;font-size:.95rem}:host::ng-deep .p-tabview-nav li.p-highlight .p-tabview-nav-link{color:var(--accent)!important;border-bottom:2px solid var(--accent)!important}:host::ng-deep .p-tabview-panels{padding:0!important;background:transparent!important}:host::ng-deep .highlight-key{color:var(--danger)!important;font-weight:700;background-color:#ef444426;padding:0 4px;border-radius:3px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i8.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "app-skeleton-loader", inputs: ["count", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubCommonPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-epub-common-popup', standalone: false, template: "<!-- Template 1: Single Note View -->\n@if (dialogRef.data.template == 1) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">Note Details</h2>\n    <div class=\"header-actions\">\n      <button class=\"close-btn\" (click)=\"close()\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"popup-content content-padded\">\n    <div class=\"inner-html-class text-lg text-primary mb-6\" [innerHTML]=\"htmlString\"></div>\n  </div>\n\n  <div class=\"dialog-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"close()\">\n      {{ htmlStaticText.btnText.cancel }}\n    </button>\n    <button class=\"btn btn-primary\" (click)=\"editNote()\">\n      {{ htmlStaticText.btnText.edit }}\n    </button>\n    <button class=\"btn btn-danger\" (click)=\"deleteAnnotations(1, this.singlenoteDetails.id)\">\n      {{ htmlStaticText.btnText.remove }}\n    </button>\n  </div>\n</div>\n}\n\n<!-- Template 2: Highlights & Notes Tabs -->\n@if (dialogRef.data.template == 2) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M16.035 2.977l4.988 4.989-12.022 12.021H4v-4.988L16.035 2.977z\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n      Highlights & Notes\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"popup-content\">\n    <p-tabView (onChange)=\"onTabChange($event)\">\n\n      <!-- Highlights Tab -->\n      <p-tabPanel header=\"Highlights\">\n        <div *ngIf=\"isLoading; else highlightsContent\">\n          <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n        </div>\n        <ng-template #highlightsContent>\n          <div *ngIf=\"!notesandHighlights?.length; else noteList\" class=\"empty-state\">\n            {{ htmlStaticText.htmlText.nohighlightsavailable }}\n          </div>\n\n          <ng-template #noteList>\n            <div *ngFor=\"let note of notesandHighlights\" class=\"popup-row\">\n              <div class=\"row-icon-container\">\n                <div class=\"w-2 h-8 rounded-full\" [style.background-color]=\"note.colorCode\"\n                  style=\"width: 4px; height: 32px; border-radius: 4px;\"></div>\n              </div>\n\n              <div class=\"row-content\" (click)=\"gotoLocation(note.cfiLocation)\">\n                <div class=\"row-title line-clamp\">{{ note.annotatedNotes }}</div>\n                <div class=\"row-meta\">\n                  <span>Page {{ note.pageNumber || 'N/A' }}</span>\n                </div>\n              </div>\n\n              <div class=\"row-actions\">\n                <button class=\"action-btn\" (click)=\"deleteAnnotations(2, note.id)\" title=\"Remove\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path\n                      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                      stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </ng-template>\n      </p-tabPanel>\n\n      <!-- Notes Tab -->\n      <p-tabPanel header=\"Notes\">\n        <div *ngIf=\"isLoading; else notesContent\">\n          <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n        </div>\n        <ng-template #notesContent>\n          <div *ngIf=\"!notes?.length; else notesList\" class=\"empty-state\">\n            No notes available.\n          </div>\n\n          <ng-template #notesList>\n            <div *ngFor=\"let item of notes\" class=\"popup-row\">\n              <div class=\"row-icon-container\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n                  <path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n                </svg>\n              </div>\n              <div class=\"row-content\" (click)=\"openNote(item)\">\n                <div class=\"row-title line-clamp\"\n                  [innerHTML]=\"item.annotatedNotes ? item.annotatedNotes : item.customNotes\"></div>\n              </div>\n              <div class=\"row-actions\">\n                <button class=\"action-btn\" (click)=\"deleteAnnotations(1, item.id)\" title=\"Remove\">\n                  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path\n                      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                      stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </ng-template>\n      </p-tabPanel>\n\n    </p-tabView>\n  </div>\n</div>\n}\n\n<!-- Template 3: Search -->\n@if (dialogRef.data.template == 3) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n      Search\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"search-container\">\n    <div class=\"search-input-wrapper\">\n      <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n        stroke-width=\"2\">\n        <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n      <input [(ngModel)]=\"searchKey\" (keyup.enter)=\"updateSearchKey()\" type=\"text\" placeholder=\"Search in book...\"\n        class=\"search-input\" autofocus />\n      <div class=\"input-actions-wrapper\">\n        <button *ngIf=\"searchKey\" class=\"icon-btn-clear\" (click)=\"clearSearch()\" title=\"Clear search\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button class=\"btn btn-primary btn-sm\" (click)=\"updateSearchKey()\">\n          Search\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"popup-content\">\n    <div *ngIf=\"searchCharaSmall\" class=\"info-banner\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" />\n        <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />\n      </svg>\n      <span>{{ staticText.validationText.atleastThreeChara }}</span>\n    </div>\n\n    <div *ngIf=\"isSearchDataAvailable; else searchResults\">\n      <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n    </div>\n\n    <ng-template #searchResults>\n      <div *ngIf=\"searchKey?.length && searchData && !searchData?.length\" class=\"empty-state\">\n        <app-no-data-found></app-no-data-found>\n      </div>\n\n      <div class=\"search-results\">\n        <div *ngFor=\"let item of searchData\" class=\"popup-row\" (click)=\"clickSearchItem(item.cfi)\">\n          <div class=\"row-content\">\n            <div class=\"row-title\" [innerHTML]=\"item.highlightedSentence\"></div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n}\n\n<!-- Template 4: Bookmarks -->\n@if (dialogRef.data.template == 4) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n      Bookmarks\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"popup-content\">\n    <div *ngIf=\"isLoading; else bookmarkContent\">\n      <app-skeleton-loader [count]=\"4\" type=\"list\"></app-skeleton-loader>\n    </div>\n\n    <ng-template #bookmarkContent>\n      <div *ngIf=\"!bookMarkList || bookMarkList.length === 0\" class=\"empty-state\">\n        No bookmarks yet.\n      </div>\n\n      <div *ngIf=\"bookMarkList && bookMarkList.length > 0\">\n        <div *ngFor=\"let bookmark of bookMarkList\" class=\"popup-row\">\n          <div class=\"row-icon-container\">\n            <!-- Filled Bookmark Icon for list -->\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n              [style.color]=\"bookmark.colorCode || '#3b82f6'\">\n              <path d=\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\" />\n            </svg>\n          </div>\n\n          <div class=\"row-content\" (click)=\"closePopup(bookmark.cfiLocation)\">\n            <div class=\"row-title line-clamp\">{{ bookmark.annotatedNotes || 'Bookmark' }}</div>\n            <div class=\"row-meta mt-2\">\n              <div class=\"progress-container\">\n                <div class=\"progress-fill\" [style.width.%]=\"bookmark.customNotes\"></div>\n              </div>\n              <span>{{ bookmark.customNotes }}%</span>\n            </div>\n          </div>\n\n          <div class=\"row-actions\">\n            <button class=\"action-btn\" (click)=\"deleteAnnotations(4, bookmark.id)\" title=\"Remove\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path\n                  d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n}\n\n<!-- Template 5: Definitions -->\n@if (dialogRef.data.template == 5) {\n<div class=\"popup-container\">\n  <div class=\"popup-header\">\n    <h2 class=\"popup-title\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 19.5A2.5 2.5 0 016.5 17H20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n      Definition\n    </h2>\n    <button class=\"close-btn\" (click)=\"close()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"popup-content content-padded\">\n    <h3 class=\"text-xl font-bold text-primary mb-4 select-text\">\n      \"{{ dialogRef.data.selectedText }}\"\n    </h3>\n\n    <div *ngIf=\"isLoading; else defsContent\">\n      <app-skeleton-loader [count]=\"3\" type=\"text\"></app-skeleton-loader>\n    </div>\n\n    <ng-template #defsContent>\n      <div *ngIf=\"Definition?.length > 0; else noDefs\">\n        <div *ngFor=\"let entry of Definition\" class=\"definition-group\">\n          <span class=\"pos-tag\">{{ entry.partOfSpeech }}</span>\n\n          <div *ngFor=\"let def of entry.definitions\" class=\"def-item\">\n            <p class=\"def-text\">{{ def.definition }}</p>\n            <p *ngIf=\"def.example\" class=\"def-example\">\"{{ def.example }}\"</p>\n          </div>\n        </div>\n      </div>\n\n      <ng-template #noDefs>\n        <div class=\"empty-state\">No definitions found.</div>\n      </ng-template>\n    </ng-template>\n  </div>\n</div>\n}", styles: [":host{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--text-primary: #0f172a;--text-secondary: #64748b;--border-soft: #e2e8f0;--accent: #3b82f6;--accent-hover: #2563eb;--danger: #ef4444;--danger-bg: #fef2f2}:host-context(.dark-mode){--bg-primary: rgb(32 33 32);--bg-secondary: rgb(42 43 42);--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-soft: #334155;--accent: #60a5fa;--accent-hover: #3b82f6;--danger: #f87171;--danger-bg: #450a0a}.popup-container{display:flex;flex-direction:column;width:500px;height:600px;max-width:95vw;max-height:85vh;background:var(--bg-primary);color:var(--text-primary);border-radius:16px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border-soft)}.popup-title{font-size:1.15rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:12px;margin:0}.popup-title svg{color:var(--text-secondary)}.close-btn{background:transparent;border:none;color:var(--text-secondary);padding:8px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.close-btn:hover{background-color:#e2e8f0;color:var(--text-primary)}.popup-content{flex:1;overflow-y:auto;position:relative}.content-padded{padding:24px}.search-container{padding:16px 24px;background:var(--bg-primary);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:10}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-input-wrapper svg.search-icon{position:absolute;left:12px;color:var(--text-secondary);z-index:1}.search-input{width:100%;padding:12px 110px 12px 40px;border-radius:10px;border:1px solid var(--border-soft);font-size:.95rem;background:var(--bg-secondary);color:var(--text-primary);transition:all .2s}.search-input:focus{outline:none;background:var(--bg-primary);border-color:var(--accent);box-shadow:0 0 0 3px #3b82f61a}.input-actions-wrapper{position:absolute;right:8px;display:flex;align-items:center;gap:8px}.icon-btn-clear{background:transparent;border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;border-radius:4px}.icon-btn-clear:hover{background-color:var(--border-soft);color:var(--text-primary)}.info-banner{display:flex;align-items:center;gap:12px;margin:12px 24px;padding:12px 16px;background:var(--primary-lite);color:var(--primary);border-radius:8px;font-size:.85rem;font-weight:500;border:1px solid var(--border-color)}.info-banner svg{flex-shrink:0;opacity:.8}.btn-sm{padding:4px 12px;font-size:.85rem;height:32px}.popup-row{display:flex;align-items:flex-start;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background-color .2s}.popup-row:hover{background-color:var(--bg-secondary)}.popup-row:hover .row-actions{opacity:1}.popup-row:last-child{border-bottom:none}.row-icon-container{flex-shrink:0;margin-top:2px;color:var(--text-secondary)}.row-content{flex:1;min-width:0}.row-title{font-size:.95rem;font-weight:500;color:var(--text-primary);line-height:1.5;margin-bottom:4px}.row-meta{font-size:.8rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.row-actions{opacity:0;transition:opacity .2s;display:flex;align-items:center}.action-btn{background:transparent;border:none;color:var(--text-secondary);padding:6px;border-radius:6px;cursor:pointer;transition:all .2s}.action-btn:hover{background-color:var(--danger-bg);color:var(--danger)}.dialog-footer{padding:16px 24px;border-top:1px solid var(--border-soft);background:var(--bg-primary);display:flex;justify-content:flex-end;gap:12px}.btn{padding:8px 16px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid transparent}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-soft)}.btn-secondary:hover{background:#e2e8f0}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-danger{background:var(--danger-bg);color:var(--danger)}.btn-danger:hover{background:#fee2e2}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-primary{color:var(--accent)}.mb-4{margin-bottom:1rem}.select-text{user-select:text;-webkit-user-select:text}.definition-group{margin-bottom:24px}.pos-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:#3b82f61a;padding:4px 8px;border-radius:6px;margin-bottom:12px}.def-item{padding-bottom:16px;margin-bottom:16px;border-bottom:1px dashed var(--border-soft)}.def-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.def-text{font-size:.95rem;color:var(--text-primary);line-height:1.5;margin-bottom:4px}.def-example{font-size:.85rem;color:var(--text-secondary);font-style:italic;padding-left:12px;border-left:2px solid var(--border-soft)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-secondary);text-align:center;font-style:italic}.progress-container{width:100px;height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:3px}.line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host::ng-deep .p-tabview-nav{background:var(--bg-primary)!important;border-bottom:1px solid var(--border-soft)!important;justify-content:center;padding:0}:host::ng-deep .p-tabview-nav li .p-tabview-nav-link{background:transparent!important;border:none!important;color:var(--text-secondary)!important;font-weight:500;padding:16px 20px!important;box-shadow:none!important;font-size:.95rem}:host::ng-deep .p-tabview-nav li.p-highlight .p-tabview-nav-link{color:var(--accent)!important;border-bottom:2px solid var(--accent)!important}:host::ng-deep .p-tabview-panels{padding:0!important;background:transparent!important}:host::ng-deep .highlight-key{color:var(--danger)!important;font-weight:700;background-color:#ef444426;padding:0 4px;border-radius:3px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: HttpApiService }, { type: i4.MessageService }, { type: CustomDialogService }, { type: CustomDialogRef }, { type: SharedService }, { type: EpubReaderService }, { type: SharedService }] });
+
+class ConfirmPopupComponent {
+    ref;
+    data;
+    constructor(ref) {
+        this.ref = ref;
+        this.data = this.ref.data;
+    }
+    close(result) {
+        this.ref.close(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmPopupComponent, deps: [{ token: CustomDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ConfirmPopupComponent, isStandalone: true, selector: "app-confirm-popup", ngImport: i0, template: `
+        <div class="confirm-popup-container">
+            <h3 class="title">{{ data.heading }}</h3>
+            <p class="message">{{ data.message }}</p>
+            <div class="actions">
+                <button class="btn-cancel" (click)="close(false)">{{ data.btnOneTxt }}</button>
+                <button class="btn-confirm" (click)="close(true)">{{ data.btnTwoTxt }}</button>
+            </div>
+        </div>
+    `, isInline: true, styles: [".confirm-popup-container{padding:24px;background:#fff;border-radius:8px;min-width:300px;box-shadow:0 4px 6px -1px #0000001a}.title{margin:0 0 12px;font-size:1.125rem;font-weight:600;color:#111827}.message{margin:0 0 24px;color:#4b5563;font-size:.95rem}.actions{display:flex;justify-content:flex-end;gap:12px}button{padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s;border:none}.btn-cancel{background:#f3f4f6;color:#374151}.btn-cancel:hover{background:#e5e7eb}.btn-confirm{background:#dc2626;color:#fff}.btn-confirm:hover{background:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirm-popup', standalone: true, imports: [CommonModule], template: `
+        <div class="confirm-popup-container">
+            <h3 class="title">{{ data.heading }}</h3>
+            <p class="message">{{ data.message }}</p>
+            <div class="actions">
+                <button class="btn-cancel" (click)="close(false)">{{ data.btnOneTxt }}</button>
+                <button class="btn-confirm" (click)="close(true)">{{ data.btnTwoTxt }}</button>
+            </div>
+        </div>
+    `, styles: [".confirm-popup-container{padding:24px;background:#fff;border-radius:8px;min-width:300px;box-shadow:0 4px 6px -1px #0000001a}.title{margin:0 0 12px;font-size:1.125rem;font-weight:600;color:#111827}.message{margin:0 0 24px;color:#4b5563;font-size:.95rem}.actions{display:flex;justify-content:flex-end;gap:12px}button{padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s;border:none}.btn-cancel{background:#f3f4f6;color:#374151}.btn-cancel:hover{background:#e5e7eb}.btn-confirm{background:#dc2626;color:#fff}.btn-confirm:hover{background:#b91c1c}\n"] }]
+        }], ctorParameters: () => [{ type: CustomDialogRef }] });
+
+class ChapterlistComponent {
+    chapterData = [];
+    chapterClick = new EventEmitter();
+    closeDialog = new EventEmitter();
+    isExpanded = [];
+    ngOnInit() {
+        if (this.chapterData) {
+            this.isExpanded = new Array(this.chapterData.length).fill(false);
+        }
+    }
+    toggleAccordion(index) {
+        this.isExpanded[index] = !this.isExpanded[index];
+    }
+    onChapterClick(href) {
+        this.chapterClick.emit(href);
+    }
+    onClose() {
+        this.closeDialog.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChapterlistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ChapterlistComponent, isStandalone: false, selector: "app-chapterlist", inputs: { chapterData: "chapterData" }, outputs: { chapterClick: "chapterClick", closeDialog: "closeDialog" }, ngImport: i0, template: "<div id=\"reader-content\" class=\"chapter-list-container bg-white\">\n  <!-- Header -->\n  <div class=\"chapter-header\">\n\n    <h2 class=\"chapter-title\">\n      Contents\n    </h2>\n\n    <button class=\"close-btn\" aria-label=\"Close\" (click)=\"onClose()\">\n      <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n  </div>\n\n\n\n  <!-- Chapter List -->\n  <div class=\"flex-1 overflow-y-auto custom-scrollbar\">\n    <!-- No chapters -->\n    <div *ngIf=\"!chapterData || chapterData.length === 0\" class=\"text-sm text-gray-500 p-8 text-center italic\">\n      No chapters available in this book.\n    </div>\n\n    <ng-container *ngFor=\"let chapter of chapterData\">\n\n      <!-- Main Chapter -->\n      <div class=\"chapter-row main-chapter\" (click)=\"onChapterClick(chapter.href)\">\n        <div class=\"title-container\">\n          <span class=\"title\">{{ chapter.title }}</span>\n          <span *ngIf=\"chapter.page\" class=\"dots\"></span>\n        </div>\n        <span *ngIf=\"chapter.page\" class=\"page\">\n          {{ chapter.page }}\n        </span>\n      </div>\n\n      <!-- Subchapters -->\n      <ng-container *ngIf=\"chapter.subchapters?.length\">\n        <div *ngFor=\"let subchapter of chapter.subchapters\" class=\"chapter-row sub-chapter\"\n          (click)=\"onChapterClick(subchapter.href)\">\n          <div class=\"title-container\">\n            <span class=\"title\">{{ subchapter.title }}</span>\n            <span *ngIf=\"subchapter.page\" class=\"dots\"></span>\n          </div>\n          <span *ngIf=\"subchapter.page\" class=\"page\">\n            {{ subchapter.page }}\n          </span>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", styles: [".chapter-list-container{display:flex;flex-direction:column;height:600px;max-height:80vh;background-color:var(--bg-primary);overflow:hidden;border-radius:12px;transition:background-color .3s ease;border:1px solid transparent}:host-context(.dark-mode) .chapter-list-container{border:1px solid var(--border-base)}.custom-scrollbar{flex:1;overflow-y:auto;scroll-behavior:smooth}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--bg-secondary)}.chapter-row{display:flex;align-items:baseline;padding:14px 24px;cursor:pointer;transition:background-color .2s ease}.chapter-row:hover{background-color:var(--bg-secondary)}.chapter-row:hover .dots{border-bottom-color:var(--text-secondary)}.chapter-row:hover .title{color:var(--text-primary)}.chapter-row .title-container{display:flex;align-items:baseline;flex-grow:1;overflow:hidden}.chapter-row .title{flex-shrink:0;max-width:90%;line-height:1.5;color:var(--text-primary)}.chapter-row .dots{flex-grow:1;border-bottom:1px dotted var(--border-base);margin:0 10px;height:1px;opacity:.8;position:relative;top:-4px}.chapter-row .page{flex-shrink:0;font-size:.95rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:500;min-width:32px;text-align:right}.chapter-row.main-chapter{font-size:18px;font-weight:700;color:var(--text-primary);padding-top:20px;padding-bottom:12px;border-bottom:1px solid var(--border-base)}.chapter-row.main-chapter .title{letter-spacing:-.01em}.chapter-row.main-chapter .page{font-size:1rem;color:var(--text-primary)}.chapter-row.sub-chapter{font-size:15px;font-weight:400;color:var(--text-secondary);padding-left:52px;padding-top:10px;padding-bottom:10px}.chapter-row.sub-chapter:hover .title{color:var(--text-primary)}.chapter-row.sub-chapter .dots{border-bottom-color:var(--border-base)}.header-title{font-family:inherit;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);font-size:1.25rem}.chapter-header{padding:18px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-base)}.chapter-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0}.close-btn{display:flex;align-items:center;justify-content:center;padding:8px;border:none;background:transparent;color:#9ca3af;border-radius:9999px;cursor:pointer;transition:background-color .2s ease,color .2s ease}.close-btn:hover{background-color:var(--border-base);color:var(--text-primary)}.close-btn svg{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChapterlistComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chapterlist', standalone: false, template: "<div id=\"reader-content\" class=\"chapter-list-container bg-white\">\n  <!-- Header -->\n  <div class=\"chapter-header\">\n\n    <h2 class=\"chapter-title\">\n      Contents\n    </h2>\n\n    <button class=\"close-btn\" aria-label=\"Close\" (click)=\"onClose()\">\n      <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n  </div>\n\n\n\n  <!-- Chapter List -->\n  <div class=\"flex-1 overflow-y-auto custom-scrollbar\">\n    <!-- No chapters -->\n    <div *ngIf=\"!chapterData || chapterData.length === 0\" class=\"text-sm text-gray-500 p-8 text-center italic\">\n      No chapters available in this book.\n    </div>\n\n    <ng-container *ngFor=\"let chapter of chapterData\">\n\n      <!-- Main Chapter -->\n      <div class=\"chapter-row main-chapter\" (click)=\"onChapterClick(chapter.href)\">\n        <div class=\"title-container\">\n          <span class=\"title\">{{ chapter.title }}</span>\n          <span *ngIf=\"chapter.page\" class=\"dots\"></span>\n        </div>\n        <span *ngIf=\"chapter.page\" class=\"page\">\n          {{ chapter.page }}\n        </span>\n      </div>\n\n      <!-- Subchapters -->\n      <ng-container *ngIf=\"chapter.subchapters?.length\">\n        <div *ngFor=\"let subchapter of chapter.subchapters\" class=\"chapter-row sub-chapter\"\n          (click)=\"onChapterClick(subchapter.href)\">\n          <div class=\"title-container\">\n            <span class=\"title\">{{ subchapter.title }}</span>\n            <span *ngIf=\"subchapter.page\" class=\"dots\"></span>\n          </div>\n          <span *ngIf=\"subchapter.page\" class=\"page\">\n            {{ subchapter.page }}\n          </span>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", styles: [".chapter-list-container{display:flex;flex-direction:column;height:600px;max-height:80vh;background-color:var(--bg-primary);overflow:hidden;border-radius:12px;transition:background-color .3s ease;border:1px solid transparent}:host-context(.dark-mode) .chapter-list-container{border:1px solid var(--border-base)}.custom-scrollbar{flex:1;overflow-y:auto;scroll-behavior:smooth}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--bg-secondary)}.chapter-row{display:flex;align-items:baseline;padding:14px 24px;cursor:pointer;transition:background-color .2s ease}.chapter-row:hover{background-color:var(--bg-secondary)}.chapter-row:hover .dots{border-bottom-color:var(--text-secondary)}.chapter-row:hover .title{color:var(--text-primary)}.chapter-row .title-container{display:flex;align-items:baseline;flex-grow:1;overflow:hidden}.chapter-row .title{flex-shrink:0;max-width:90%;line-height:1.5;color:var(--text-primary)}.chapter-row .dots{flex-grow:1;border-bottom:1px dotted var(--border-base);margin:0 10px;height:1px;opacity:.8;position:relative;top:-4px}.chapter-row .page{flex-shrink:0;font-size:.95rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:500;min-width:32px;text-align:right}.chapter-row.main-chapter{font-size:18px;font-weight:700;color:var(--text-primary);padding-top:20px;padding-bottom:12px;border-bottom:1px solid var(--border-base)}.chapter-row.main-chapter .title{letter-spacing:-.01em}.chapter-row.main-chapter .page{font-size:1rem;color:var(--text-primary)}.chapter-row.sub-chapter{font-size:15px;font-weight:400;color:var(--text-secondary);padding-left:52px;padding-top:10px;padding-bottom:10px}.chapter-row.sub-chapter:hover .title{color:var(--text-primary)}.chapter-row.sub-chapter .dots{border-bottom-color:var(--border-base)}.header-title{font-family:inherit;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);font-size:1.25rem}.chapter-header{padding:18px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-base)}.chapter-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0}.close-btn{display:flex;align-items:center;justify-content:center;padding:8px;border:none;background:transparent;color:#9ca3af;border-radius:9999px;cursor:pointer;transition:background-color .2s ease,color .2s ease}.close-btn:hover{background-color:var(--border-base);color:var(--text-primary)}.close-btn svg{pointer-events:none}\n"] }]
+        }], propDecorators: { chapterData: [{
+                type: Input
+            }], chapterClick: [{
+                type: Output
+            }], closeDialog: [{
+                type: Output
+            }] } });
+
+class ReaderMainComponent {
+    ngZone;
+    httpService;
+    sharedService;
+    epubService;
+    cdr;
+    route;
+    dialog;
+    messageService;
+    location;
+    platformId;
+    router;
+    overlay;
+    epubUrl = null;
+    epubBlob = null;
+    coverPage = null;
+    // Feature flags
+    enableDarkMode = true;
+    enableSearch = true;
+    enableHighlights = true;
+    enableBookmarks = true;
+    enableChapterList = true;
+    enableTextSelection = true;
+    enableFontSize = true;
+    enableNotes = true;
+    underlineRemoveRequest = new EventEmitter();
+    book;
+    bookId = 0;
+    rendition;
+    readPercentage = {
+        roudedOff: 0,
+        numberFormat: 0,
+    };
+    bookDwnldPerctge = 0;
+    showDwndLoader = true;
+    mainOvelay = false;
+    showHighlightOverlay = false;
+    showhightLightColor = false;
+    audioNarrations = false;
+    toggleDarkMode = false;
+    curentPageEndCfi;
+    chaptersData;
+    selectedData = {
+        selectedCfiRange: '',
+        selectedText: '',
+    };
+    fontSize = 100; //default font size is 100
+    highlightList = [];
+    underlineList = [];
+    searchData = [];
+    searchKeyword = '';
+    newSentence = '';
+    colourCodeList = ['#F44336', '#FFEB3B', '#4CAF50']; //When adding or removing new colour to the colour list it should be updated here
+    readCfi = '';
+    annotedList;
+    readPercentagegetbyApi;
+    freeSample = 'false';
+    showOverlay = false;
+    showBookPageLoader = true;
+    showPreviewModal = false;
+    hasShownPreviewMessage = false;
+    maxPreviewClicks = 5;
+    coverImg = null;
+    isMenuOpen = false;
+    selectionPosition = { top: 0, left: 0 };
+    onDestroy$ = new Subject();
+    readProgressSub;
+    overlayRef;
+    handleKeyUp(event) {
+        if (event.key === 'PrintScreen') {
+            navigator.clipboard.writeText('');
+            this.showOverlay = true;
+            setTimeout(() => {
+                this.showOverlay = false;
+            }, 1500);
+        }
+    }
+    onKeyDown(event) {
+        const blockedKeys = ['c', 'v', 'p', 's', 'u', 'i', 'j'];
+        if ((event.ctrlKey || event.metaKey) && blockedKeys.includes(event.key.toLowerCase())) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (event.key === 'F12') {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    constructor(ngZone, httpService, sharedService, epubService, cdr, route, dialog, messageService, location, platformId, router, overlay) {
+        this.ngZone = ngZone;
+        this.httpService = httpService;
+        this.sharedService = sharedService;
+        this.epubService = epubService;
+        this.cdr = cdr;
+        this.route = route;
+        this.dialog = dialog;
+        this.messageService = messageService;
+        this.location = location;
+        this.platformId = platformId;
+        this.router = router;
+        this.overlay = overlay;
+        effect(() => {
+            this.searchKeyword = this.epubService.searchKey();
+            if (this.searchKeyword && this.searchKeyword.length >= 3) {
+                this.searchBook();
+            }
+        });
+        const queryParams = this.route.snapshot.queryParams;
+        this.bookId = queryParams['bookID'];
+        this.freeSample = queryParams['freeSample'] || 'false';
+    }
+    ngOnInit() {
+        this.coverImg = this.coverPage || this.route.snapshot.queryParams['coverImg'];
+        // Load DotLottie dynamically if needed
+        this.loadDotLottieIfNeeded();
+        if (this.bookId) {
+            this.initialization();
+        }
+        else if (this.epubUrl || this.epubBlob) {
+            this.getBookData();
+        }
+        window.print = () => { };
+    }
+    ngOnChanges(changes) {
+        if (changes['coverPage'] && changes['coverPage'].currentValue) {
+            this.coverImg = changes['coverPage'].currentValue;
+        }
+        if ((changes['epubUrl'] && changes['epubUrl'].currentValue) ||
+            (changes['epubBlob'] && changes['epubBlob'].currentValue)) {
+            this.getBookData();
+        }
+    }
+    loadDotLottieIfNeeded() {
+        if (typeof window.loadDotLottie === 'function') {
+            window.loadDotLottie();
+        }
+    }
+    /*--------------------------------------------------------- Initialization -----------------------------------------------------------------------------------------*/
+    /*
+     *@Desc : To get the initial data to load the book, highlights, underline
+     *@Author: Jaisankar
+     */
+    initialization() {
+        const allApis = [
+            this.httpService.getAnnotations({
+                keyword: '',
+                pageSize: 10,
+                currentPage: 1,
+                type: 3, // type 3 is underline
+                bookId: this.bookId,
+            }),
+            this.httpService.getReadProgress({
+                bookId: this.bookId,
+            }),
+            this.httpService.getAnnotations({
+                keyword: '',
+                pageSize: 10,
+                currentPage: 1,
+                type: 2, // type 2 is highlight
+                bookId: this.bookId,
+            }),
+        ];
+        forkJoin(allApis)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe({
+            next: (value) => {
+                this.annotedList = value;
+                this.readCfi = this.annotedList[1].cfiLocation;
+                this.readPercentagegetbyApi = this.annotedList[1].readProgress;
+                this.highlightList = this.annotedList[2].highlightedNotes.items;
+                this.underlineList = this.annotedList[0].underlinedNotes.items;
+                // this.bookdetails();
+                this.getBookData();
+            },
+            error: () => {
+                // If annotations fail, we might still want to load the book if inputs are present
+                this.sharedService.showHide(false);
+                this.getBookData();
+            },
+            complete: () => { },
+        });
+    }
+    goBack() {
+        this.location.back();
+    }
+    audioNarration() {
+        console.log('Audio Narration clicked');
+    }
+    /*
+     *@Desc : To get the book data from api, initialize all event for the rendition and display the epub
+     *@Author: Jaisankar
+     */
+    getBookData() {
+        this.ngZone.run(() => {
+            this.sharedService.showHide(false);
+        });
+        if (this.epubBlob) {
+            this.loadBookFromBlob(this.epubBlob);
+        }
+        else if (this.epubUrl) {
+            if (typeof this.epubUrl === 'string' && this.epubUrl.trim() !== '') {
+                this.loadBookFromUrl(this.epubUrl);
+            }
+            else {
+                this.handleBookLoadError('Invalid EPUB URL.');
+            }
+        }
+        else {
+            console.error('No EPUB source provided (epubUrl or epubBlob).');
+            // Do not show error to user immediately if waiting for input, unless we want to enforce it.
+            // But if this is called, it usually expects data.
+            this.handleBookLoadError('No book source found.');
+        }
+    }
+    loadBookFromUrl(url) {
+        try {
+            this.book = ePub(url);
+            this.renderBook();
+        }
+        catch (err) {
+            console.error('Error initializing EPUB from URL:', err);
+            this.handleBookLoadError('Failed to load book from URL.');
+        }
+    }
+    loadBookFromBlob(blob) {
+        if (blob.size === 0) {
+            this.handleBookLoadError('The provided EPUB file is empty.');
+            return;
+        }
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(blob);
+        reader.onload = async () => {
+            try {
+                const arrayBuffer = reader.result;
+                if (!arrayBuffer || arrayBuffer.byteLength === 0) {
+                    throw new Error('Empty array buffer');
+                }
+                this.book = ePub(arrayBuffer);
+                this.renderBook();
+            }
+            catch (error) {
+                console.error('Error reading blob:', error);
+                this.handleBookLoadError('Failed to load the EPUB file.');
+            }
+        };
+        reader.onerror = () => {
+            this.handleBookLoadError('Error reading the file.');
+        };
+    }
+    handleBookLoadError(message) {
+        this.showBookPageLoader = false;
+        this.showDwndLoader = false;
+        this.messageService.add({
+            key: 'notifyToast',
+            severity: 'error',
+            summary: 'Error',
+            detail: message,
+        });
+        this.ngZone.run(() => {
+            this.sharedService.showHide(false);
+        });
+    }
+    renderBook() {
+        const area = document.getElementById('reader');
+        if (area) {
+            area.innerHTML = ''; // Clear previous content
+        }
+        this.rendition = this.book.renderTo('reader', {
+            //To render the Epub and pass the config to the library
+            width: '100%', // or "100%", depending on your layout
+            height: '100%', // optional, adjust based on your container
+            allowScriptedContent: true, // Important
+            spread: 'auto'
+        });
+        this.book.ready.then(() => {
+            if (this.book.navigation.toc.length) {
+                // Map through chapters and extract subchapter information
+                const chapters = this.book.navigation.toc.map((spineItem) => ({
+                    title: spineItem.label || `Chapter ${spineItem.index + 1}`,
+                    href: this.book?.spine && spineItem?.href
+                        ? this.book.spine.get(spineItem.href)?.href
+                        : '',
+                    subchapters: (spineItem.subitems || []).map((subItem) => {
+                        const spineEntry = this.book.spine.get(subItem.href);
+                        return {
+                            title: subItem.label || `Subchapter`,
+                            href: spineEntry?.href || '', // fallback to empty string or some default
+                        };
+                    }),
+                }));
+                this.chaptersData = chapters;
+            }
+            this.book.locations.generate(1000).then(() => {
+                // Calculate page numbers for chapters
+                if (this.chaptersData) {
+                    const updateChapterPage = (chapter) => {
+                        const spineItem = this.book.spine.get(chapter.href);
+                        if (spineItem) {
+                            const cfi = spineItem.cfiFromElement(undefined);
+                            chapter.page = this.book.locations.locationFromCfi(cfi);
+                        }
+                        if (chapter.subchapters) {
+                            chapter.subchapters.forEach((sub) => {
+                                const subSpine = this.book.spine.get(sub.href);
+                                if (subSpine) {
+                                    const subCfi = subSpine.cfiFromElement(undefined);
+                                    sub.page = this.book.locations.locationFromCfi(subCfi);
+                                }
+                            });
+                        }
+                    };
+                    this.chaptersData.forEach(updateChapterPage);
+                }
+                this.rendition.on('locationChanged', (location) => {
+                    if (this.freeSample == 'false') {
+                        this.applyHighlights();
+                        this.applyUnderline();
+                    }
+                    this.rendition.themes.default({
+                        '::selection': {
+                            background: '#cceeff', // Soft green
+                            color: '#1b5e20', // Dark text
+                        },
+                        '*': {
+                            '-webkit-tap-highlight-color': 'transparent', // removes green tap
+                            '-webkit-user-select': 'text',
+                            'user-select': 'text',
+                            '-webkit-touch-callout': 'none', // removes iOS popup menu
+                        },
+                    });
+                    this.curentPageEndCfi = location.start;
+                    //To get the location changed event for calculating read percentage and saving current read percentage
+                    const percentage = this.book.locations.percentageFromCfi(location.end);
+                    this.readPercentage.roudedOff =
+                        Math.floor(percentage * 100) || 0;
+                    this.readPercentage.numberFormat = percentage;
+                });
+                this.showDwndLoader = false;
+                if (this.showBookPageLoader === true ||
+                    this.showBookPageLoader === undefined) {
+                    this.showBookPageLoader = true;
+                }
+                if (this.readCfi && this.readCfi?.length) {
+                    setTimeout(() => {
+                        this.showBookPageLoader = false;
+                        this.rendition.display(this.readCfi);
+                    }, 1500);
+                    this.ngZone.run(() => {
+                        this.sharedService.showHide(false);
+                    });
+                }
+                else {
+                    setTimeout(() => {
+                        this.showBookPageLoader = false;
+                        this.rendition.display();
+                    }, 1500);
+                    this.ngZone.run(() => {
+                        this.sharedService.showHide(false);
+                    });
+                }
+            });
+        });
+        //Event when new section is rendered
+        this.rendition.on('rendered', (section) => {
+            this.darkMode();
+        });
+        this.rendition.on('rendered', () => {
+            this.rendition.views().forEach((view) => {
+                let iframe = view.iframe;
+                if (iframe) {
+                    const doc = iframe.contentDocument;
+                    // 🔒 Disable copy, drag, and right-click inside EPUB iframe
+                    ['copy', 'contextmenu', 'dragstart'].forEach((event) => doc.addEventListener(event, (e) => e.preventDefault()));
+                    // 🔒 Block all Ctrl/Cmd-based keyboard shortcuts (e.g., Ctrl+P, Ctrl+C, Cmd+S)
+                    doc.addEventListener('keydown', (e) => {
+                        if (e.ctrlKey || e.metaKey) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    });
+                    // 🎨 Inject CSS to disable dragging and prevent printing from Chrome menu
+                    const style = doc.createElement('style');
+                    style.innerHTML = `
+    /* Disable element dragging */
+    * {
+      -webkit-user-drag: none;
+      user-drag: none;
+    }
+
+    /* Block printing via @media print */
+    @media print {
+      body, html {
+        display: none !important;
+        background: white !important;
+      }
+
+      body::before {
+        content: "🚫 Printing is disabled.";
+        display: block;
+        font-size: 24px;
+        text-align: center;
+        color: red;
+        margin-top: 100px;
+      }
+    }
+  `;
+                    doc.head.appendChild(style);
+                }
+            });
+            const iframe = document.querySelector('iframe');
+            if (iframe) {
+                const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+                if (iframeDoc) {
+                    if (this.freeSample === 'true') {
+                        // Disable all <a> tags inside iframe
+                        const links = iframeDoc.querySelectorAll('a');
+                        links.forEach((link) => {
+                            link.style.pointerEvents = 'none'; // Disable clicking
+                            link.style.color = 'gray'; // Optional: gray out links
+                            // Also prevent default on click as a fallback
+                            link.addEventListener('click', (e) => e.preventDefault());
+                        });
+                    }
+                    let scrollTimeout = null;
+                    iframeDoc.addEventListener('wheel', (event) => {
+                        event.preventDefault(); // Prevent default scroll
+                        if (scrollTimeout) {
+                            clearTimeout(scrollTimeout);
+                        }
+                        scrollTimeout = setTimeout(() => {
+                            if (event.deltaY > 0) {
+                                this.nextClick();
+                            }
+                            else {
+                                this.prevClick();
+                            }
+                        }, 150);
+                    }, { passive: false }); // Important!
+                }
+            }
+        });
+        //Event when selection is made the function will be called and the cfi and selected content will be saved
+        this.rendition.on('selected', (cfiRange, contents) => {
+            if (!this.enableTextSelection) {
+                contents.window.getSelection().removeAllRanges();
+                return;
+            }
+            const selection = contents.window.getSelection();
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            // Get iframe position
+            const frameRect = contents.document.defaultView.frameElement.getBoundingClientRect();
+            this.ngZone.run(() => {
+                this.selectionPosition = {
+                    top: frameRect.top + rect.top - 60, // Position above selection
+                    left: frameRect.left + rect.left + (rect.width / 2)
+                };
+                this.handleSelection(cfiRange, selection.toString().trim());
+            });
+        });
+    }
+    onProgressChange(event) {
+        if (this.freeSample === 'true' && this.hasShownPreviewMessage) {
+            return;
+        }
+        const input = event.target;
+        const percent = +input.value;
+        if (this.freeSample === 'true') {
+            if (percent > this.maxPreviewClicks) {
+                this.hasShownPreviewMessage = true;
+                this.showPreviewModal = true;
+                return;
+            }
+        }
+        // Update progress bar in real-time
+        this.readPercentage.roudedOff = percent;
+        // Also update EPUB location in real-time
+        if (this.book && this.book.locations) {
+            const cfi = this.book.locations.cfiFromPercentage(percent / 100);
+            this.rendition.display(cfi); // this gets called during drag
+        }
+    }
+    /*--------------------------------------------- End of Initialization ---------------------------------------------------------*/
+    mainOverlay() {
+        this.mainOvelay = !this.mainOvelay;
+    }
+    showHighlightOverlaymethod() {
+        this.showHighlightOverlay = !this.showHighlightOverlay;
+    }
+    showhightLightColormethod() {
+        this.showHighlightOverlay = !this.showHighlightOverlay;
+    }
+    handleCloseButtonClick() {
+        if (this.mainOvelay) {
+            this.mainOverlay();
+        }
+        else if (this.showHighlightOverlay) {
+            this.showHighlightOverlaymethod();
+        }
+        else if (this.showhightLightColor) {
+            this.showhightLightColormethod();
+        }
+    }
+    /*
+     *@Desc : To paginate to next page and apply hightlight and underline again
+     *@Author: Jaisankar
+     */
+    nextClick() {
+        if (this.freeSample === 'true' && this.hasShownPreviewMessage) {
+            return;
+        }
+        this.rendition
+            ?.next()
+            .then(() => {
+            this.applyHighlights();
+            this.applyUnderline();
+        })
+            .catch((err) => console.error(err));
+        if (this.freeSample === 'true') {
+            if (this.readPercentage.roudedOff > this.maxPreviewClicks) {
+                this.hasShownPreviewMessage = true;
+                this.showPreviewModal = true;
+                return;
+            }
+        }
+    }
+    /*
+     *@Desc : To paginate to previous page and apply hightlight and underline again
+     *@Author: Jaisankar
+     */
+    prevClick() {
+        this.rendition
+            .prev()
+            .then(() => {
+            this.applyHighlights();
+            this.applyUnderline();
+        })
+            .catch((err) => console.error(err));
+    }
+    /*
+     *@Desc : To toggle between dark and light modes, native toggle feature of epub.js has bugs so custom method implemented
+     *@Author: Jaisankar
+     */
+    darkMode() {
+        const iframe = document.querySelector('iframe');
+        const body = iframe?.contentDocument?.body;
+        // Reset styles first
+        body?.style?.removeProperty('background-color');
+        body?.style?.removeProperty('color');
+        if (this.toggleDarkMode) {
+            document.body.classList.add('dark-mode');
+            // Content colors for dark mode
+            const darkBg = '#121212';
+            const darkText = '#e0e0e0';
+            const accentLink = '#32d74b';
+            if (body) {
+                body.style.setProperty('background-color', darkBg, 'important');
+                body.style.setProperty('color', darkText, 'important');
+                const allElements = body.querySelectorAll('div, section, article, p, li, h1, h2, h3, h4, h5, h6, span');
+                allElements.forEach((el) => {
+                    el.style.setProperty('color', darkText, 'important');
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                const links = body.querySelectorAll('a');
+                links.forEach((a) => {
+                    a.style.setProperty('color', accentLink, 'important');
+                });
+            }
+        }
+        else {
+            document.body.classList.remove('dark-mode');
+            // Reset to light mode defaults
+            if (body) {
+                body.style.setProperty('background-color', '#ffffff', 'important');
+                body.style.setProperty('color', '#1a1a1a', 'important');
+                const allElements = body.querySelectorAll('div, section, article, p, li, h1, h2, h3, h4, h5, h6, span');
+                allElements.forEach((el) => {
+                    el.style.removeProperty('color');
+                    el.style.removeProperty('background-color');
+                });
+            }
+        }
+        if (this.freeSample == 'false') {
+            if (this.highlightList.length) {
+                this.applyHighlights();
+            }
+            if (this.underlineList.length) {
+                this.applyUnderline();
+            }
+        }
+    }
+    /*
+     *@Desc : To toggle fontsizes, and reapply highlights
+     *@Author: Jaisankar
+     */
+    changeFontSize(check) {
+        if (check === '+') {
+            if (this.fontSize < 200) {
+                // Check if we can increase the font size
+                this.fontSize = Math.min(this.fontSize + 10, 200); // Limit max size (200%)
+            }
+            this.rendition.themes.fontSize(this.fontSize.toString() + '%');
+            if (this.highlightList.length) {
+                this.applyHighlights();
+            }
+            if (this.underlineList.length) {
+                this.applyUnderline();
+            }
+        }
+        else {
+            if (this.fontSize > 50) {
+                // Check if we can decrease the font size
+                this.fontSize = Math.max(this.fontSize - 10, 50); // Limit min size (50%)
+            }
+            this.rendition.themes.fontSize(this.fontSize.toString() + '%');
+            if (this.highlightList.length) {
+                this.applyHighlights();
+            }
+            if (this.underlineList.length) {
+                this.applyUnderline();
+            }
+        }
+    }
+    /*
+     *@Desc : To save the cfi of the selected text for highlight and underline
+     *@Author: Jaisankar
+     */
+    handleSelection(cfiRange, selectedText) {
+        this.selectedData.selectedCfiRange = cfiRange;
+        this.selectedData.selectedText = selectedText;
+        this.showHighlightOverlay = true;
+        this.isMenuOpen = false; // Hide main menu if selection happens
+        if (this.mainOvelay) {
+            this.mainOvelay = !this.mainOvelay;
+        }
+        this.cdr.detectChanges();
+    }
+    /*
+     *@Desc : To show chapter popup using custom implementation
+     *@Author: Jaisankar
+     */
+    showChapterList = false;
+    showChapterPopup() {
+        this.showChapterList = true;
+    }
+    onChapterSelect(href) {
+        this.showChapterList = false;
+        if (href) {
+            this.rendition.display(href);
+        }
+    }
+    /*
+     *@Desc : To open add notes popup
+     *@Author: Jaisankar
+     */
+    addNotes() {
+        this.epubService.setNote(this.selectedData.selectedText);
+        const notedetails = {
+            bookId: this.bookId,
+            cfiLocation: this.selectedData.selectedCfiRange,
+        };
+        const dialog = this.dialog.open(AddNotesComponent, {
+            closeButton: true,
+            windowClass: 'addandeditNotepopup',
+            data: {
+                notedetails: notedetails,
+                addNote: true,
+                notetoAddorEdit: this.selectedData.selectedText,
+            },
+        });
+    }
+    /*
+     *@Desc : To first get all items in spine that is sections of epub (not chapters)
+      then load that section and find the matching keywords,
+      then create a span with highlight class replace this span to the sentence where the keyword is found
+      return the new sentence, cfi and old sentance as an object
+     *@Author: Jaisankar
+     */
+    searchBook() {
+        from(this.book.spine.spineItems)
+            .pipe(mergeMap((item) => from(item.load(this.book.load.bind(this.book))).pipe(mergeMap(() => from(item.find(this.searchKeyword))), // Find after loading text
+        map((result) => {
+            // Create a case-insensitive regular expression for the keyword
+            const regex = new RegExp(this.searchKeyword, 'gi');
+            // Replace occurrences of the keyword with the highlighted version
+            this.newSentence = result.excerpt.replace(regex, (match) => {
+                // Wrap each match dynamically, preserving the original case
+                return `<span class="highlight-key">${match}</span>`;
+            });
+            // Unload after processing
+            item.unload();
+            // Create the result object
+            const newReturnObj = {
+                cfi: result.cfi,
+                highlightedSentence: this.newSentence,
+                originalSentence: result.excerpt,
+            };
+            return newReturnObj; // Return the processed result
+        }))), toArray() // Collect all results into a single array
+        )
+            .subscribe({
+            next: (results) => {
+                this.epubService.updateSearchData(results.flat()); //flat to flatten the array ex [a, [b,c] ,d ] output is [a,b,c,d]
+                this.sharedService.showHide(false); //stop loader after the search result is saved
+            },
+            error: (err) => {
+                console.error('Error:', err);
+            },
+        });
+    }
+    /*--------------------------------------------------------- Annotations Start -----------------------------------------------------------------------------------------*/
+    /*--------------------------------------------------------- Underline Section -----------------------------------------------------------------------------------------*/
+    /*
+     *@Desc : Add underline to underline and apply underline
+     *@Author: Jaisankar
+     */
+    addUnderline() {
+        this.underlineList.push({
+            typeId: 3,
+            id: 0,
+            userId: 0,
+            libraryId: 0,
+            bookId: 0,
+            studentId: 0,
+            cfiLocation: this.selectedData.selectedCfiRange,
+            annotatedNotes: this.selectedData.selectedText,
+            customNotes: null,
+            colorCode: '',
+            notesCapturedDate: '',
+            createdBy: 0,
+        });
+        const payload = {
+            typeId: 3, // type 4 is bookmark
+            id: 0, // 0 for new highlight
+            bookId: this.bookId,
+            cfiLocation: this.selectedData.selectedCfiRange,
+            annotatedNotes: this.selectedData.selectedText,
+            customNotes: '',
+            colorCode: '',
+        };
+        if (this.underlineList.length) {
+            this.applyUnderline();
+        }
+        if (this.bookId) {
+            this.httpService
+                .saveAnnotations(payload)
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe({
+                next: (res) => { },
+                error: () => {
+                    this.sharedService.showHide(false);
+                },
+                complete: () => {
+                    this.getunderlineList();
+                    this.sharedService.showHide(false);
+                },
+            });
+        }
+    }
+    /*
+     *@Desc : To remove all underlines first and add underline class and then apply style to the class
+     *@Author: Jaisankar
+     */
+    async applyUnderline() {
+        for (const underline of this.underlineList) {
+            await this.removeUnderline(underline.cfiLocation);
+        }
+        for (const underline of this.underlineList) {
+            await this.addUnderlineClass(underline.cfiLocation);
+        }
+        await this.addStyleToUnderline();
+    }
+    /*
+     *@Desc : To add the highlight class
+     *@Author: Jaisankar
+     */
+    addUnderlineClass(cfi = null) {
+        if (cfi?.length) {
+            this.rendition?.annotations?.underline(cfi || this.selectedData.selectedCfiRange, { class: 'custom-underline' }, (e) => {
+                const target = e.target;
+                const cfiLocation = target.getAttribute('data-epubcfi') || target.closest('[data-epubcfi]')?.getAttribute('data-epubcfi');
+                if (cfiLocation) {
+                    const dialog = this.dialog.open(ConfirmPopupComponent, {
+                        closeButton: false,
+                        data: {
+                            heading: 'Remove Underline?',
+                            message: 'Are you sure you want to remove this underline?',
+                            btnOneTxt: 'Cancel',
+                            btnTwoTxt: 'Remove',
+                        },
+                    });
+                    dialog.afterClosed$.subscribe((res) => {
+                        if (res) {
+                            if (res === true) {
+                                const annotation = this.underlineList.find((annotation) => annotation.cfiLocation === cfiLocation);
+                                if (annotation) {
+                                    this.removeUnderline(cfiLocation);
+                                    this.deleteAnnotations(3, annotation.id);
+                                }
+                            }
+                        }
+                    });
+                }
+                else {
+                    console.log('CFI Location not found', target); // Log target to help debug if needed
+                }
+            }, 'underline');
+        }
+    }
+    /*
+     *@Desc : To remove the highlight class
+     *@Author: Jaisankar
+     */
+    removeUnderline(cfi) {
+        try {
+            this.rendition?.annotations?.remove(cfi, 'underline');
+        }
+        catch (error) {
+            console.error('Error removing underline:', error);
+        }
+    }
+    /*
+     *@Desc : To add colour to the highlights
+     *@Author: Jaisankar
+     */
+    addStyleToUnderline() {
+        // Collect all documents (main + iframes)
+        const docs = [document];
+        this.rendition?.views().forEach((view) => {
+            if (view.iframe?.contentDocument) {
+                docs.push(view.iframe.contentDocument);
+            }
+        });
+        const isDark = this.toggleDarkMode;
+        const strokeColor = isDark ? '#FFFFFF' : '#000000';
+        docs.forEach(doc => {
+            // Target elements with standard and custom underline classes
+            const underlineGroups = doc.querySelectorAll('.epubjs-underline, .underline, .custom-underline');
+            underlineGroups.forEach((group) => {
+                // SVG rects are often used as hit areas
+                const rects = group.querySelectorAll('rect');
+                rects.forEach((rect) => {
+                    rect.style.fill = 'transparent';
+                    rect.style.stroke = 'none';
+                    rect.style.pointerEvents = 'auto'; // Ensure it's clickable
+                });
+                // SVG lines are the actual underline
+                const lines = group.querySelectorAll('line');
+                lines.forEach((line) => {
+                    line.style.stroke = strokeColor;
+                    line.style.strokeWidth = '2';
+                    line.style.pointerEvents = 'auto';
+                });
+            });
+        });
+    }
+    /*
+     *@Desc : To get underline list
+     *@Author: Jaisankar
+     */
+    getunderlineList() {
+        const payload = {
+            keyword: '',
+            pageSize: 1000,
+            currentPage: 1,
+            id: '',
+            type: 3, // type 3 is bookmark
+            bookId: this.bookId,
+        };
+        this.httpService
+            .getAnnotations(payload)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe({
+            next: (res) => {
+                this.underlineList = res.underlinedNotes.items;
+                if (this.underlineList.length) {
+                    this.applyUnderline();
+                }
+            },
+            error: () => {
+                this.sharedService.showHide(false);
+            },
+            complete: () => {
+                this.sharedService.showHide(false);
+            },
+        });
+    }
+    /*--------------------------------------------------------- Highlight Section -----------------------------------------------------------------------------------------*/
+    /*
+     *@Desc : To add highlight and save to db, to add a new colour code it needs to be added to color code array
+      "colorCode": "#F44336" - Red
+      "colorCode": "#FFEB3B" - Yellow
+      "colorCode": "#4CAF50" - Green
+     *@Author: Jaisankar
+     */
+    addHighlight(colourCode) {
+        //push the highlight to the array in FE
+        this.highlightList.push({
+            typeId: 2,
+            id: 0,
+            userId: 0,
+            libraryId: 0,
+            bookId: 0,
+            studentId: 0,
+            cfiLocation: this.selectedData.selectedCfiRange,
+            annotatedNotes: this.selectedData.selectedText,
+            customNotes: null,
+            colorCode: colourCode,
+            notesCapturedDate: '',
+            createdBy: 0,
+        });
+        const payload = {
+            typeId: 2, // type 4 is bookmark
+            id: 0, // 0 for new highlight
+            bookId: this.bookId,
+            cfiLocation: this.selectedData.selectedCfiRange,
+            annotatedNotes: this.selectedData.selectedText,
+            customNotes: '',
+            colorCode: colourCode,
+        };
+        if (this.highlightList.length) {
+            this.applyHighlights();
+        }
+        if (this.bookId) {
+            this.httpService
+                .saveAnnotations(payload)
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe({
+                next: (res) => { },
+                error: () => {
+                    this.sharedService.showHide(false);
+                },
+                complete: () => {
+                    this.getHighlightlist();
+                    this.sharedService.showHide(false);
+                },
+            });
+        }
+    }
+    /*
+     *@Desc : To Remove all highlight first the add the class for highlight and then style based on class
+     *@Author: Jaisankar
+     */
+    async applyHighlights() {
+        for (const highlight of this.highlightList) {
+            await this.removeHighlight(highlight.cfiLocation);
+        }
+        for (const highlight of this.highlightList) {
+            await this.addHighlightClass(highlight.cfiLocation, highlight.colorCode);
+        }
+        await this.colourCodeList.forEach((colourCode) => {
+            this.addColorToHighLights(colourCode);
+        });
+    }
+    /*
+     *@Desc : To Remove all highlights
+     *@Author: Jaisankar
+     */
+    removeHighlight(cfi) {
+        try {
+            this.rendition?.annotations?.remove(cfi, 'highlight');
+        }
+        catch (error) {
+            console.error('Error removing highlight:', error);
+        }
+    }
+    /*
+     *@Desc : To add the highlight class
+     *@Author: Jaisankar
+     */
+    addHighlightClass(cfi = null, colourCode = null) {
+        if (cfi?.length) {
+            this.rendition?.annotations?.highlight(cfi || this.selectedData.selectedCfiRange, { class: `highlight-${colourCode}` }, (e) => {
+                const cfiLocation = e.target?.getAttribute('data-epubcfi');
+                if (cfiLocation) {
+                    const targetCfiLocation = e.target?.getAttribute('data-epubcfi');
+                    if (targetCfiLocation) {
+                        const dialog = this.dialog.open(ConfirmPopupComponent, {
+                            closeButton: false,
+                            data: {
+                                heading: 'Remove Highlight?',
+                                message: 'Are you sure you want to remove this highlight?',
+                                btnOneTxt: 'Cancel',
+                                btnTwoTxt: 'Remove',
+                            },
+                        });
+                        dialog.afterClosed$.subscribe((res) => {
+                            if (res) {
+                                if (res === true) {
+                                    const annotation = this.highlightList.find((annotation) => annotation.cfiLocation === targetCfiLocation);
+                                    if (annotation) {
+                                        this.removeHighlight(targetCfiLocation);
+                                        this.deleteAnnotations(2, annotation.id);
+                                    }
+                                }
+                            }
+                        });
+                    }
+                }
+                else {
+                    console.log('CFI Location not found');
+                }
+            }, 'highlight');
+        }
+    }
+    /*
+     *@Desc : To add colour to the highlights
+     *@Author: Jaisankar
+     */
+    addColorToHighLights(colourCode) {
+        const docs = [document];
+        this.rendition?.views().forEach((view) => {
+            if (view.iframe?.contentDocument) {
+                docs.push(view.iframe.contentDocument);
+            }
+        });
+        docs.forEach(doc => {
+            const rectElements = doc.querySelectorAll(`[data-class="highlight-${colourCode}"] rect`);
+            rectElements.forEach((rect) => {
+                rect.style.fill = colourCode;
+                rect.style.opacity = '0.5';
+            });
+        });
+    }
+    /*
+     *@Desc : To get highlight list
+     *@Author: Jaisankar
+     */
+    getHighlightlist() {
+        const payload = {
+            keyword: '',
+            pageSize: 100,
+            currentPage: 1,
+            id: '',
+            type: 2, // type 2 is bookmark
+            bookId: this.bookId,
+        };
+        this.httpService
+            .getAnnotations(payload)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe({
+            next: (res) => {
+                this.highlightList = res.highlightedNotes.items;
+                if (this.bookId) {
+                    if (this.highlightList.length) {
+                        this.applyHighlights();
+                    }
+                }
+            },
+            error: () => {
+                this.sharedService.showHide(false);
+            },
+            complete: () => {
+                this.sharedService.showHide(false);
+            },
+        });
+    }
+    /*--------------------------------------------------------- Bookmark Section -----------------------------------------------------------------------------------------*/
+    /*
+     *@Desc : To add bookmark and update in db
+     *@Author: Jaisankar
+     */
+    addBookMark() {
+        this.sharedService.showHide(true);
+        let percentage = this.book.locations.percentageFromCfi(this.curentPageEndCfi);
+        percentage = Math.floor(percentage * 100) || 0;
+        this.book
+            .getRange(this.curentPageEndCfi)
+            .then((range) => {
+            if (range) {
+                const payload = {
+                    typeId: 4, // type 4 is bookmark
+                    id: 0, // 0 for new bookmark
+                    bookId: this.bookId,
+                    cfiLocation: this.curentPageEndCfi,
+                    annotatedNotes: range.startContainer?.textContent
+                        ?.trim()
+                        .substring(0, 100),
+                    customNotes: percentage,
+                    colorCode: this.getRandomHexColor,
+                };
+                this.httpService
+                    .saveAnnotations(payload)
+                    .pipe(takeUntil(this.onDestroy$))
+                    .subscribe({
+                    next: (res) => {
+                        this.messageService.add({
+                            key: 'notifyToast',
+                            severity: 'success', // Use 'warn' for orange color
+                            summary: 'Success',
+                            detail: res.message,
+                        });
+                    },
+                    error: () => {
+                        this.sharedService.showHide(false);
+                    },
+                    complete: () => {
+                        this.sharedService.showHide(false);
+                    },
+                });
+            }
+        })
+            .catch((error) => {
+            console.error('Error');
+        });
+    }
+    /*
+     *@Desc : To get Bookmark list
+     *@Author: Jaisankar
+     */
+    getBookMarkList() {
+        const payload = {
+            keyword: '',
+            pageSize: 1000,
+            currentPage: 1,
+            id: '',
+            type: 4, // type 4 is bookmark
+            bookId: this.bookId,
+        };
+        const dialog = this.dialog.open(EpubCommonPopupComponent, {
+            closeButton: true,
+            windowClass: 'highlightandNotes',
+            data: {
+                template: 4,
+                bookId: this.bookId,
+            },
+        });
+        dialog.afterClosed$.subscribe((res) => {
+            if (res?.length) {
+                this.rendition.display(res);
+            }
+        });
+    }
+    /*--------------------------------------------------------- Annotations End -----------------------------------------------------------------------------------------*/
+    /*
+     *@Desc : To save read progress
+     *@Author: Jaisankar
+     */
+    saveReadProgreess() {
+        const payload = {
+            bookId: +this.bookId,
+            pageNumber: 0,
+            cfiLocation: this.curentPageEndCfi,
+            readProgress: this.readPercentage.numberFormat,
+        };
+        if (this.bookId) {
+            this.readProgressSub = this.httpService
+                .saveReadProgress(payload)
+                .subscribe({
+                next: () => { },
+                error: () => {
+                    this.sharedService.showHide(false);
+                },
+                complete: () => {
+                    this.sharedService.showHide(false);
+                },
+            });
+        }
+    }
+    /*
+     *@Desc : To open All common popup based on template
+     *@Author: Aboobacker
+     */
+    openCommonPopup(data) {
+        if (data == 1) {
+            const dialog = this.dialog.open(EpubCommonPopupComponent, {
+                closeButton: true,
+                windowClass: 'highlightandNotes',
+                data: {
+                    template: 2,
+                    bookId: this.bookId,
+                    selectedWord: this.selectedData.selectedText,
+                },
+            });
+            dialog.afterClosed$.subscribe((res) => {
+                if (res) {
+                    this.rendition.display(res);
+                }
+                this.highlightList.forEach((highlight) => {
+                    this.removeHighlight(highlight.cfiLocation);
+                });
+                this.getHighlightlist();
+            });
+        }
+        if (data == 2) {
+            const dialog = this.dialog.open(EpubCommonPopupComponent, {
+                closeButton: true,
+                windowClass: 'highlightandNotes',
+                data: {
+                    template: 3,
+                    bookId: this.bookId,
+                },
+            });
+            dialog.afterClosed$.subscribe((res) => {
+                if (res) {
+                    this.rendition.display(res);
+                }
+            });
+        }
+        if (data == 3) {
+            const dialog = this.dialog.open(EpubCommonPopupComponent, {
+                closeButton: true,
+                windowClass: 'highlightandNotes',
+                data: {
+                    template: 4,
+                    bookId: this.bookId,
+                },
+            });
+        }
+        if (data == 4) {
+            const dialog = this.dialog.open(EpubCommonPopupComponent, {
+                closeButton: true,
+                windowClass: 'highlightandNotes',
+                data: {
+                    template: 5,
+                    bookId: this.bookId,
+                    selectedText: this.selectedData.selectedText,
+                },
+            });
+        }
+    }
+    /*
+     *@Desc : To delete  Annotations
+     *@Author: Aboobacker
+     */
+    deleteAnnotations(typeId, id) {
+        const payload = {
+            typeId: typeId,
+            id: id,
+        };
+        if (this.bookId) {
+            this.httpService
+                .deleteNotes(payload)
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe({
+                next: (res) => { },
+                error: (err) => {
+                    console.error('Error dlt Annotations:', err);
+                },
+                complete: () => {
+                    if (typeId === 2) {
+                        this.getHighlightlist();
+                    }
+                    else {
+                        this.getunderlineList();
+                    }
+                },
+            });
+        }
+    }
+    /*
+     *@Desc : To add note in a page
+     *@Author: Aboobacker
+     */
+    addNoteToPage() {
+        const notedetails = {
+            bookId: this.bookId,
+            cfiLocation: this.curentPageEndCfi,
+        };
+        const dialog = this.dialog.open(AddNotesComponent, {
+            closeButton: true,
+            windowClass: 'addandeditNotepopup',
+            data: {
+                notedetails: notedetails,
+                addNote: true,
+                notetoAddorEdit: '',
+            },
+        });
+    }
+    /*
+     *@Desc : To generate random hexcode for bookmark
+     *@Author: Jaisankar
+     */
+    get getRandomHexColor() {
+        const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+        return `#${randomColor.padStart(6, '0')}`;
+    }
+    toggleAllMenus() {
+        if (this.isMenuOpen || this.showHighlightOverlay || this.showhightLightColor) {
+            this.isMenuOpen = false;
+            this.showHighlightOverlay = false;
+            this.showhightLightColor = false;
+        }
+        else {
+            this.isMenuOpen = !this.isMenuOpen;
+        }
+    }
+    ngOnDestroy() {
+        if (this.rendition) {
+            this.rendition.destroy();
+        }
+        if (isPlatformBrowser(this.platformId)) {
+            document.body.classList.remove('dark-mode');
+        }
+        if (this.freeSample === 'false') {
+            this.saveReadProgreess();
+        }
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ReaderMainComponent, deps: [{ token: i0.NgZone }, { token: HttpApiService }, { token: SharedService }, { token: EpubReaderService }, { token: i0.ChangeDetectorRef }, { token: i3.ActivatedRoute }, { token: CustomDialogService }, { token: i4.MessageService }, { token: i1$2.Location }, { token: PLATFORM_ID }, { token: i3.Router }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ReaderMainComponent, isStandalone: false, selector: "epub-flow", inputs: { epubUrl: "epubUrl", epubBlob: "epubBlob", coverPage: "coverPage", enableDarkMode: "enableDarkMode", enableSearch: "enableSearch", enableHighlights: "enableHighlights", enableBookmarks: "enableBookmarks", enableChapterList: "enableChapterList", enableTextSelection: "enableTextSelection", enableFontSize: "enableFontSize", enableNotes: "enableNotes" }, outputs: { underlineRemoveRequest: "underlineRemoveRequest" }, host: { listeners: { "document:keyup": "handleKeyUp($event)", "document:keydown": "onKeyDown($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"reader-container\" [hidden]=\"showBookPageLoader || showDwndLoader\">\n  <div id=\"reader-content\" style=\"overflow: hidden;\">\n    <div id=\"reader\"></div>\n  </div>\n\n  <div id=\"reader-footer\">\n    <div class=\"footer-container\">\n      <!-- Left: Previous Button -->\n      <button class=\"nav-btn prev-btn\" (click)=\"prevClick()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Center: Progress Bar -->\n      <div class=\"progress-section\">\n        <div class=\"progress-label\">Read Progress</div>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-track\">\n            <div class=\"progress-fill\" [style.width.%]=\"readPercentage.roudedOff\"></div>\n          </div>\n          <input type=\"range\" class=\"progress-slider\" min=\"0\" max=\"100\" [value]=\"readPercentage.roudedOff\"\n            (input)=\"onProgressChange($event)\" />\n          <span class=\"progress-text\">{{ readPercentage.roudedOff }}%</span>\n        </div>\n      </div>\n\n      <!-- Right: Menu Toggle & Next Button -->\n      <div class=\"right-controls\">\n        <!-- Menu Toggle Button (Green) -->\n        <div class=\"menu-container relative\">\n          <!-- The Menu Popup -->\n          @if (isMenuOpen) {\n          <div class=\"menu-popup fade-in\">\n            <ul class=\"menu-list\">\n              <!-- Dark Mode -->\n              <!-- Dark Mode -->\n              @if (enableDarkMode) {\n              <li (click)=\"toggleDarkMode = !toggleDarkMode; darkMode()\">\n                <div class=\"menu-item\">\n                  <span class=\"icon moon-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M13.5 10C12.7 10.3 11.9 10.5 11 10.5C7.4 10.5 4.5 7.6 4.5 4C4.5 3.1 4.7 2.3 5 1.5C2.7 2.5 1 4.8 1 7.5C1 11.1 3.9 14 7.5 14C10.2 14 12.5 12.3 13.5 10Z\"\n                        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                  </span>\n                  <span>{{ toggleDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>\n                </div>\n              </li>\n              }\n\n              <!-- Highlights & Notes -->\n              <!-- Highlights & Notes -->\n              @if (enableHighlights || enableNotes) {\n              <li (click)=\"openCommonPopup(1); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon notes-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M2 4H14M2 8H14M2 12H8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </span>\n                  <span>Highlights & Notes</span>\n                </div>\n              </li>\n              }\n\n              <!-- Search Book -->\n              <!-- Search Book -->\n              @if (enableSearch) {\n              <li (click)=\"openCommonPopup(2); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon search-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 14L10.5 10.5M10.5 10.5C11.4 9.6 12 8.4 12 7C12 4.2 9.8 2 7 2C4.2 2 2 4.2 2 7C2 9.8 4.2 12 7 12C8.4 12 9.6 11.4 10.5 10.5Z\"\n                        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                  </span>\n                  <span>Search Book</span>\n                </div>\n              </li>\n              }\n\n              <!-- Bookmark List -->\n              <!-- Bookmark List -->\n              @if (enableBookmarks) {\n              <li (click)=\"getBookMarkList(); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon bookmark-list-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12 1.33H4C3.26 1.33 2.66 1.93 2.66 2.66V13.33C2.66 14.06 3.26 14.66 4 14.66H12C12.73 14.66 13.33 14.06 13.33 13.33V2.66C13.33 1.93 12.73 1.33 12 1.33ZM6 2.66H7.33V6L6.66 5.5L6 6V2.66ZM12 13.33H4V2.66H4.66V8.66L6.66 7.16L8.66 8.66V2.66H12V13.33Z\"\n                        fill=\"currentColor\" />\n                    </svg>\n                  </span>\n                  <span>Bookmark List</span>\n                </div>\n              </li>\n              }\n\n              <!-- Chapters List -->\n              <!-- Chapters List -->\n              @if (enableChapterList) {\n              <li (click)=\"showChapterPopup(); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon chapter-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12 15.33H2.66C1.93 15.33 1.33 14.73 1.33 14V4.66H2.66V14H12V15.33ZM11 8.66H7V10H11V8.66ZM10 0.66H5.33C4.6 0.66 4 1.26 4 2L4 11.33C4 12.06 4.6 12.66 5.33 12.66H12.66C13.4 12.66 14 12.06 14 11.33V4.66L10 0.66ZM12.66 11.33H5.33V2H9.44L12.66 5.22V11.33Z\"\n                        fill=\"currentColor\" />\n                    </svg>\n                  </span>\n                  <span>Chapters List</span>\n                </div>\n              </li>\n              }\n\n              <!-- Divider Row for Quick Actions -->\n              <!-- Divider Row for Quick Actions -->\n              <li class=\"quick-actions-row\">\n                @if (enableFontSize) {\n                <div class=\"quick-action-btn\" (click)=\"changeFontSize('+')\">\n                  <span class=\"text-sm font-bold\">A+</span>\n                </div>\n                <div class=\"quick-action-btn\" (click)=\"changeFontSize('-')\">\n                  <span class=\"text-sm font-bold\">A-</span>\n                </div>\n                }\n                @if (enableNotes) {\n                <div class=\"quick-action-btn\" (click)=\"addNoteToPage(); isMenuOpen = false\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z\"\n                      fill=\"currentColor\" />\n                  </svg>\n                </div>\n                }\n                @if (enableBookmarks) {\n                <div class=\"quick-action-btn\" (click)=\"addBookMark(); isMenuOpen = false\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M17 3H7C5.9 3 5 3.9 5 5V21L12 18L19 21V5C19 3.9 18.1 3 17 3Z\" fill=\"none\"\n                      stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                  </svg>\n                </div>\n                }\n              </li>\n            </ul>\n          </div>\n          }\n\n          <!-- Selection Menu Inside Footer Hub -->\n          @if (freeSample === 'false') {\n          @if (showHighlightOverlay) {\n          <div class=\"custom-selection-toolbar selection-menu fade-in\">\n            @if (enableNotes) {\n            <div class=\"menu-item\" (click)=\"addNotes(); showHighlightOverlay = false\">\n              <span class=\"menu-text\">Add Notes</span>\n            </div>\n            }\n            @if (enableHighlights) {\n            <div class=\"menu-item\" (click)=\"showhightLightColor = true; showHighlightOverlay = false\" title=\"Highlight\">\n              <span class=\"menu-text\">Highlights</span>\n            </div>\n            }\n            @if (enableHighlights) {\n            <div class=\"menu-item\" (click)=\"addUnderline(); showHighlightOverlay = false\">\n              <span class=\"menu-text\">Underline</span>\n            </div>\n            }\n            @if (enableNotes || enableHighlights) {\n            <!-- Definition often goes with these tools -->\n            <div class=\"menu-item border-none\" (click)=\"openCommonPopup(4); showHighlightOverlay = false\">\n              <span class=\"menu-text\">Definition</span>\n            </div>\n            }\n          </div>\n          }\n\n          @if (showhightLightColor) {\n          <div class=\"custom-selection-toolbar color-picker fade-in\">\n            @for (color of colourCodeList; track color) {\n            <div class=\"color-circle\" [style.background]=\"color\"\n              (click)=\"addHighlight(color); showhightLightColor = false\"></div>\n            }\n            <button class=\"toolbar-btn close-colors\" (click)=\"showhightLightColor = false; showHighlightOverlay = true\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M19 12H5\"></path>\n              </svg>\n            </button>\n          </div>\n          }\n          }\n\n          <!-- The Green Toggle Button -->\n          <button class=\"menu-toggle-btn\" (click)=\"toggleAllMenus()\"\n            [class.open]=\"isMenuOpen || showHighlightOverlay || showhightLightColor\">\n            <!-- X Icon when open, Burger/Menu when closed -->\n            @if (isMenuOpen || showHighlightOverlay || showhightLightColor) {\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            } @else {\n            <!-- Menu Grid Icon -->\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            }\n          </button>\n        </div>\n\n        <!-- Next Button -->\n        <button class=\"nav-btn next-btn\" (click)=\"nextClick()\" [class.ml-4]=\"true\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n@if (showBookPageLoader) {\n<div class=\"fixed inset-0 z-[45] flex items-center justify-center bg-premium-loader fade-in\">\n  <div class=\"text-center\">\n    <div class=\"mb-8 relative inline-block\">\n      <!-- Decorative Backdrop for Book -->\n      <div class=\"absolute inset-0 bg-black/5 blur-2xl rounded-full transform scale-110\"></div>\n\n      <!-- Larger, Premium Book Image -->\n      <img [src]=\"coverImg ?? ''\" alt=\"Loading\"\n        class=\"w-56 h-80 object-cover rounded-xl shadow-premium border-[6px] border-white relative z-10 animate-pulse\" />\n    </div>\n\n    <!-- Enhanced Loading Text Container -->\n    <div class=\"flex flex-col items-center space-y-3\">\n      <div class=\"flex items-center space-x-2 text-gray-400\">\n        <span class=\"text-base font-medium\">Please wait a moment</span>\n        <div class=\"flex space-x-1.5\">\n          <div class=\"w-1.5 h-1.5 bg-accent-color rounded-full animate-bounce\"></div>\n          <div class=\"w-1.5 h-1.5 bg-accent-color rounded-full animate-bounce [animation-delay:-0.15s]\"></div>\n          <div class=\"w-1.5 h-1.5 bg-accent-color rounded-full animate-bounce [animation-delay:-0.3s]\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n@if (showOverlay) {\n<div class=\"screenshot-overlay\"></div>\n}\n\n<!-- Full-screen Preview End Modal -->\n@if (showPreviewModal) {\n<div class=\"fixed inset-0 z-40 bg-white dark:bg-gray-900 flex flex-col items-center justify-center text-center px-4\">\n  <h2\n    class=\"text-[1.375rem] sm:text-2xl font-medium leading-snug text-center text-gray-800 dark:text-white mb-6 max-w-xs sm:max-w-sm mx-auto\">\n    You\u2019ve reached the end of the sample for\n  </h2>\n\n  <img [src]=\"coverImg ?? ''\" alt=\"Book Cover\" class=\"w-40 h-auto rounded-lg shadow-lg mb-6\" />\n</div>\n}\n\n\n<!-- Custom Chapter List Modal -->\n@if (showChapterList) {\n<div class=\"custom-modal-overlay fade-in\">\n  <div class=\"custom-modal-content\">\n    <app-chapterlist [chapterData]=\"chaptersData\" (chapterClick)=\"onChapterSelect($event)\"\n      (closeDialog)=\"showChapterList = false\">\n    </app-chapterlist>\n  </div>\n</div>\n}", styles: [":host{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--text-primary: #0f172a;--text-secondary: #475569;--border-base: #edf2f7;--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--accent-color: #34C759;--modal-bg: #ffffff;--modal-text: #0f172a}:host-context(.dark-mode){--bg-primary: rgb(32 33 32);--bg-secondary: rgb(42 43 42);--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-base: #2d3748;--shadow-base: 0 10px 15px -3px rgba(0, 0, 0, .5);--accent-color: #32d74b;--modal-bg: rgb(32 33 32);--modal-text: #f9fafb}#reader{width:100%;height:100%}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default}.screenshot-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fff;z-index:9999}img,[draggable=true]{-webkit-user-drag:none}::ng-deep *{-webkit-user-drag:none}::ng-deep .textLayer span{-webkit-user-drag:none;pointer-events:auto}.fade-in{animation:fadeIn .5s ease-in forwards}.fade-out{animation:fadeOut .5s ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media print{#viewer{display:none!important}body:before{content:\"Printing is disabled.\";font-size:24px;color:red;text-align:center;display:block;margin-top:100px}}.progress-container{position:relative;height:4px}.range-overlay{position:absolute;top:0;left:0;width:100%;z-index:10;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:none}.range-overlay::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:14px;margin-top:-5px;border-radius:50%;background:#0ea951;border:2px solid #ffffff;box-shadow:0 1px 3px #0003;transition:background .2s ease,transform .2s ease}.range-overlay::-webkit-slider-thumb:hover{background:#0cb14f;transform:scale(1.1)}.range-overlay::-webkit-slider-thumb:active{background:#0ba046;transform:scale(1.15)}.range-overlay::-webkit-slider-runnable-track{background:transparent;height:4px}.range-overlay::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:#0ea951;border:2px solid white}.range-overlay::-moz-range-track{background:transparent;height:4px}.range-overlay::-ms-thumb{height:16px;width:16px;border-radius:50%;background:#0ea951;border:2px solid white}.range-overlay::-ms-track{background:transparent;height:4px;border-color:transparent;color:transparent}#reader-container:after{content:\"\";position:absolute;top:13%;bottom:10%;left:50%;transform:translate(-50%);width:2px;background:linear-gradient(to bottom,#06030300,#0d080833,#0000);box-shadow:0 0 10px #0000001a;z-index:1}@media (max-width: 767px){#reader-container:after{display:none!important}}@media (max-width: 991px){#reader-container:after{display:none!important}}::ng-deep nav{box-shadow:none!important}::ng-deep .highlightandNotes .ngneat-dialog-content{width:510px!important;padding:24px}::ng-deep .highlightandNotes .ngneat-close-dialog{top:1.2rem}::ng-deep .highlightandNotes.dark-mode .ngneat-dialog-content{background-color:#333;color:#fff!important}::ng-deep .highlightandNotes.dark-mode .ngneat-close-dialog{color:#fff!important}::ng-deep .highlightandNotes.dark-mode .ngneat-dialog-content{color:#fff!important}::ng-deep .highlightandNotes.dark-mode .text-\\[\\#272C47\\]{color:#fff!important}::ng-deep .highlightandNotes.dark-mode .text-black{color:#fff!important}::ng-deep .addandeditNotepopup .ngneat-dialog-content{width:690px!important}::ng-deep .crop-popup .ngneat-dialog-content{width:420px!important}:host,app-notes{background-color:var(--bg-primary);display:flex;width:100%;justify-content:center;transition:background-color .3s ease}#reader-container{width:100%;height:98vh;background-color:var(--bg-primary);padding-top:0;display:flex;flex-direction:column;overflow:hidden;transition:background-color .3s ease}#reader-content{flex:1;overflow:hidden;position:relative}#reader-footer{position:relative;width:60vw;margin:0 auto;padding:10px 38px 20px;background:var(--bg-primary);z-index:50;transition:background-color .3s ease}#reader-footer .footer-container{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}#reader-footer .nav-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:background .2s;background:transparent;border:none;color:var(--text-primary)}#reader-footer .nav-btn:hover{background:#f5f5f5}#reader-footer .nav-btn svg{width:20px;height:20px}#reader-footer .progress-section{flex:1;display:flex;flex-direction:column;align-items:center;max-width:600px;margin:0 auto;padding-bottom:5px}#reader-footer .progress-section .progress-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:6px}#reader-footer .progress-section .progress-bar-container{position:relative;width:100%;height:14px;display:flex;align-items:center}#reader-footer .progress-section .progress-bar-container .progress-track{flex:1;height:4px;background:#e7ebeb;border-radius:2px;overflow:hidden;position:relative}#reader-footer .progress-section .progress-bar-container .progress-fill{height:100%;background:#34c759;transition:width .2s ease-out;border-radius:2px}#reader-footer .progress-section .progress-bar-container .progress-slider{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;top:0;left:0;z-index:2}#reader-footer .progress-section .progress-bar-container .progress-text{margin-left:12px;font-size:12px;font-weight:600;min-width:35px;color:var(--text-primary)}#reader-footer .right-controls{display:flex;align-items:center;gap:16px}#reader-footer .menu-toggle-btn{width:48px;height:48px;border-radius:50%;background:#34c759;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 10px #34c7594d;border:none}#reader-footer .menu-toggle-btn.open{background:#34c759;transform:rotate(90deg)}#reader-footer .menu-toggle-btn:hover{transform:scale(1.05);background:#2ebd50}#reader-footer .menu-popup{position:absolute;bottom:70px;right:0;width:280px;background:var(--bg-primary);border-radius:16px;box-shadow:var(--shadow-base);padding:8px 0;z-index:100;border:1px solid var(--border-base);transform-origin:bottom right}#reader-footer .menu-popup .menu-list{list-style:none;padding:0;margin:0}#reader-footer .menu-popup .menu-list li{padding:0 8px;cursor:pointer}#reader-footer .menu-popup .menu-list .menu-item{display:flex;align-items:center;padding:12px;font-size:14px;font-weight:500;color:var(--text-primary);border-radius:8px;transition:background .1s}#reader-footer .menu-popup .menu-list .menu-item:hover{background:var(--bg-secondary)}#reader-footer .menu-popup .menu-list .menu-item .icon{width:32px;display:flex;align-items:center;justify-content:flex-start;color:var(--text-secondary)}#reader-footer .menu-popup .menu-list .menu-item .icon svg{width:18px;height:18px}#reader-footer .menu-popup .quick-actions-row{display:flex;justify-content:space-between;padding:12px 16px;margin-top:8px;border-top:1px solid #f0f0f0;gap:8px}#reader-footer .menu-popup .quick-actions-row .quick-action-btn{flex:1;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg-secondary);cursor:pointer;color:var(--text-primary);transition:all .2s}#reader-footer .menu-popup .quick-actions-row .quick-action-btn:hover{background:var(--border-base)}.calibre{padding:0!important}.hightlight-overlay ::ng-deep .p-overlay{top:-232px!important}app-chapterlist ::ng-deep #reader-content{padding:0!important}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center}.custom-modal-content{background:var(--modal-bg);color:var(--modal-text);width:90%;max-width:500px;border-radius:12px;box-shadow:var(--shadow-base);overflow:hidden;animation:modalEnter .2s ease-out;transition:background-color .3s ease,color .3s ease}@keyframes modalEnter{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.animate-bounce{animation:bounce .6s infinite}.fixed{position:fixed}.inset-0{inset:0}.z-40{z-index:40}.z-45{z-index:45}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-center{text-align:center}.bg-white{background-color:#fff}.bg-white\\/95{background-color:#fffffff2!important}.bg-black\\/5{background-color:#0000000d}.bg-accent-color{background-color:var(--accent-color)}.bg-premium-loader{background:var(--bg-primary)}.blur-2xl{filter:blur(40px)}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1}.relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.z-10{z-index:10}.mb-8{margin-bottom:2rem}.space-y-3>*+*{margin-top:.75rem}.space-x-1\\.5>*+*{margin-left:.375rem}.tracking-tight{letter-spacing:-.025em}.text-gray-800{color:#1f2937}.border-\\[6px\\]{border-width:6px}.backdrop-blur-sm{backdrop-filter:blur(4px)}.w-full{width:100%}.px-4{padding-left:1rem;padding-right:1rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-\\[-1\\.5rem\\]{margin-top:-1.5rem}.ml-1{margin-left:.25rem}.space-x-1>*+*{margin-left:.25rem}.space-x-2>*+*{margin-left:.5rem}.inline-flex{display:inline-flex}.text-gray-700{color:#374151}.text-gray-400{color:#9ca3af}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.w-40{width:10rem}.h-56{height:14rem}.w-56{width:14rem}.h-80{height:20rem}.w-32{width:8rem}.h-44{height:11rem}.object-cover{object-fit:cover}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.shadow-premium{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d}.mx-auto{margin-left:auto;margin-right:auto}.border-4{border-width:4px}.border-white{border-color:#fff}.border-gray-50{border-color:#f9fafb}.w-1\\.5{width:.375rem}.h-1\\.5{height:.375rem}.bg-gray-400{background-color:#9ca3af}.rounded-full{border-radius:9999px}.custom-selection-toolbar{position:absolute;bottom:70px;right:0;z-index:100;width:280px;background:var(--bg-primary);border-radius:16px;box-shadow:var(--shadow-base);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-base);padding:8px 0;transform-origin:bottom right}.custom-selection-toolbar .menu-item{padding:12px 20px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center}.custom-selection-toolbar .menu-item:hover{background:#f8fafc}.custom-selection-toolbar .menu-item:hover .menu-text{color:var(--accent-color)}.custom-selection-toolbar .menu-item.border-none{border-bottom:none}.custom-selection-toolbar .menu-item .menu-text{font-size:15px;font-weight:500;color:#334155}.custom-selection-toolbar.color-picker{width:auto;flex-direction:row;padding:8px 12px;gap:12px;align-items:center}.custom-selection-toolbar.color-picker .color-circle{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000001a;transition:transform .2s ease}.custom-selection-toolbar.color-picker .color-circle:hover{transform:scale(1.2)}.custom-selection-toolbar.color-picker .toolbar-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:#f1f5f9;color:#64748b;cursor:pointer;margin-left:4px}.custom-selection-toolbar.color-picker .toolbar-btn:hover{background:#e2e8f0}:host-context(.dark-mode) .custom-selection-toolbar{background:#1e293b;border-color:#334155}:host-context(.dark-mode) .custom-selection-toolbar .menu-item{border-bottom-color:#334155}:host-context(.dark-mode) .custom-selection-toolbar .menu-item:hover{background:#0f172a}:host-context(.dark-mode) .custom-selection-toolbar .menu-item .menu-text{color:#f1f5f9}:host-context(.dark-mode) .custom-selection-toolbar.color-picker .toolbar-btn{background:#334155;color:#f1f5f9}\n"], dependencies: [{ kind: "component", type: ChapterlistComponent, selector: "app-chapterlist", inputs: ["chapterData"], outputs: ["chapterClick", "closeDialog"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ReaderMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'epub-flow', standalone: false, template: "<div id=\"reader-container\" [hidden]=\"showBookPageLoader || showDwndLoader\">\n  <div id=\"reader-content\" style=\"overflow: hidden;\">\n    <div id=\"reader\"></div>\n  </div>\n\n  <div id=\"reader-footer\">\n    <div class=\"footer-container\">\n      <!-- Left: Previous Button -->\n      <button class=\"nav-btn prev-btn\" (click)=\"prevClick()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Center: Progress Bar -->\n      <div class=\"progress-section\">\n        <div class=\"progress-label\">Read Progress</div>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-track\">\n            <div class=\"progress-fill\" [style.width.%]=\"readPercentage.roudedOff\"></div>\n          </div>\n          <input type=\"range\" class=\"progress-slider\" min=\"0\" max=\"100\" [value]=\"readPercentage.roudedOff\"\n            (input)=\"onProgressChange($event)\" />\n          <span class=\"progress-text\">{{ readPercentage.roudedOff }}%</span>\n        </div>\n      </div>\n\n      <!-- Right: Menu Toggle & Next Button -->\n      <div class=\"right-controls\">\n        <!-- Menu Toggle Button (Green) -->\n        <div class=\"menu-container relative\">\n          <!-- The Menu Popup -->\n          @if (isMenuOpen) {\n          <div class=\"menu-popup fade-in\">\n            <ul class=\"menu-list\">\n              <!-- Dark Mode -->\n              <!-- Dark Mode -->\n              @if (enableDarkMode) {\n              <li (click)=\"toggleDarkMode = !toggleDarkMode; darkMode()\">\n                <div class=\"menu-item\">\n                  <span class=\"icon moon-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M13.5 10C12.7 10.3 11.9 10.5 11 10.5C7.4 10.5 4.5 7.6 4.5 4C4.5 3.1 4.7 2.3 5 1.5C2.7 2.5 1 4.8 1 7.5C1 11.1 3.9 14 7.5 14C10.2 14 12.5 12.3 13.5 10Z\"\n                        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                  </span>\n                  <span>{{ toggleDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>\n                </div>\n              </li>\n              }\n\n              <!-- Highlights & Notes -->\n              <!-- Highlights & Notes -->\n              @if (enableHighlights || enableNotes) {\n              <li (click)=\"openCommonPopup(1); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon notes-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M2 4H14M2 8H14M2 12H8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </span>\n                  <span>Highlights & Notes</span>\n                </div>\n              </li>\n              }\n\n              <!-- Search Book -->\n              <!-- Search Book -->\n              @if (enableSearch) {\n              <li (click)=\"openCommonPopup(2); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon search-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 14L10.5 10.5M10.5 10.5C11.4 9.6 12 8.4 12 7C12 4.2 9.8 2 7 2C4.2 2 2 4.2 2 7C2 9.8 4.2 12 7 12C8.4 12 9.6 11.4 10.5 10.5Z\"\n                        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                  </span>\n                  <span>Search Book</span>\n                </div>\n              </li>\n              }\n\n              <!-- Bookmark List -->\n              <!-- Bookmark List -->\n              @if (enableBookmarks) {\n              <li (click)=\"getBookMarkList(); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon bookmark-list-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12 1.33H4C3.26 1.33 2.66 1.93 2.66 2.66V13.33C2.66 14.06 3.26 14.66 4 14.66H12C12.73 14.66 13.33 14.06 13.33 13.33V2.66C13.33 1.93 12.73 1.33 12 1.33ZM6 2.66H7.33V6L6.66 5.5L6 6V2.66ZM12 13.33H4V2.66H4.66V8.66L6.66 7.16L8.66 8.66V2.66H12V13.33Z\"\n                        fill=\"currentColor\" />\n                    </svg>\n                  </span>\n                  <span>Bookmark List</span>\n                </div>\n              </li>\n              }\n\n              <!-- Chapters List -->\n              <!-- Chapters List -->\n              @if (enableChapterList) {\n              <li (click)=\"showChapterPopup(); isMenuOpen = false\">\n                <div class=\"menu-item\">\n                  <span class=\"icon chapter-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12 15.33H2.66C1.93 15.33 1.33 14.73 1.33 14V4.66H2.66V14H12V15.33ZM11 8.66H7V10H11V8.66ZM10 0.66H5.33C4.6 0.66 4 1.26 4 2L4 11.33C4 12.06 4.6 12.66 5.33 12.66H12.66C13.4 12.66 14 12.06 14 11.33V4.66L10 0.66ZM12.66 11.33H5.33V2H9.44L12.66 5.22V11.33Z\"\n                        fill=\"currentColor\" />\n                    </svg>\n                  </span>\n                  <span>Chapters List</span>\n                </div>\n              </li>\n              }\n\n              <!-- Divider Row for Quick Actions -->\n              <!-- Divider Row for Quick Actions -->\n              <li class=\"quick-actions-row\">\n                @if (enableFontSize) {\n                <div class=\"quick-action-btn\" (click)=\"changeFontSize('+')\">\n                  <span class=\"text-sm font-bold\">A+</span>\n                </div>\n                <div class=\"quick-action-btn\" (click)=\"changeFontSize('-')\">\n                  <span class=\"text-sm font-bold\">A-</span>\n                </div>\n                }\n                @if (enableNotes) {\n                <div class=\"quick-action-btn\" (click)=\"addNoteToPage(); isMenuOpen = false\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z\"\n                      fill=\"currentColor\" />\n                  </svg>\n                </div>\n                }\n                @if (enableBookmarks) {\n                <div class=\"quick-action-btn\" (click)=\"addBookMark(); isMenuOpen = false\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M17 3H7C5.9 3 5 3.9 5 5V21L12 18L19 21V5C19 3.9 18.1 3 17 3Z\" fill=\"none\"\n                      stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                  </svg>\n                </div>\n                }\n              </li>\n            </ul>\n          </div>\n          }\n\n          <!-- Selection Menu Inside Footer Hub -->\n          @if (freeSample === 'false') {\n          @if (showHighlightOverlay) {\n          <div class=\"custom-selection-toolbar selection-menu fade-in\">\n            @if (enableNotes) {\n            <div class=\"menu-item\" (click)=\"addNotes(); showHighlightOverlay = false\">\n              <span class=\"menu-text\">Add Notes</span>\n            </div>\n            }\n            @if (enableHighlights) {\n            <div class=\"menu-item\" (click)=\"showhightLightColor = true; showHighlightOverlay = false\" title=\"Highlight\">\n              <span class=\"menu-text\">Highlights</span>\n            </div>\n            }\n            @if (enableHighlights) {\n            <div class=\"menu-item\" (click)=\"addUnderline(); showHighlightOverlay = false\">\n              <span class=\"menu-text\">Underline</span>\n            </div>\n            }\n            @if (enableNotes || enableHighlights) {\n            <!-- Definition often goes with these tools -->\n            <div class=\"menu-item border-none\" (click)=\"openCommonPopup(4); showHighlightOverlay = false\">\n              <span class=\"menu-text\">Definition</span>\n            </div>\n            }\n          </div>\n          }\n\n          @if (showhightLightColor) {\n          <div class=\"custom-selection-toolbar color-picker fade-in\">\n            @for (color of colourCodeList; track color) {\n            <div class=\"color-circle\" [style.background]=\"color\"\n              (click)=\"addHighlight(color); showhightLightColor = false\"></div>\n            }\n            <button class=\"toolbar-btn close-colors\" (click)=\"showhightLightColor = false; showHighlightOverlay = true\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M19 12H5\"></path>\n              </svg>\n            </button>\n          </div>\n          }\n          }\n\n          <!-- The Green Toggle Button -->\n          <button class=\"menu-toggle-btn\" (click)=\"toggleAllMenus()\"\n            [class.open]=\"isMenuOpen || showHighlightOverlay || showhightLightColor\">\n            <!-- X Icon when open, Burger/Menu when closed -->\n            @if (isMenuOpen || showHighlightOverlay || showhightLightColor) {\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            } @else {\n            <!-- Menu Grid Icon -->\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            }\n          </button>\n        </div>\n\n        <!-- Next Button -->\n        <button class=\"nav-btn next-btn\" (click)=\"nextClick()\" [class.ml-4]=\"true\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n@if (showBookPageLoader) {\n<div class=\"fixed inset-0 z-[45] flex items-center justify-center bg-premium-loader fade-in\">\n  <div class=\"text-center\">\n    <div class=\"mb-8 relative inline-block\">\n      <!-- Decorative Backdrop for Book -->\n      <div class=\"absolute inset-0 bg-black/5 blur-2xl rounded-full transform scale-110\"></div>\n\n      <!-- Larger, Premium Book Image -->\n      <img [src]=\"coverImg ?? ''\" alt=\"Loading\"\n        class=\"w-56 h-80 object-cover rounded-xl shadow-premium border-[6px] border-white relative z-10 animate-pulse\" />\n    </div>\n\n    <!-- Enhanced Loading Text Container -->\n    <div class=\"flex flex-col items-center space-y-3\">\n      <div class=\"flex items-center space-x-2 text-gray-400\">\n        <span class=\"text-base font-medium\">Please wait a moment</span>\n        <div class=\"flex space-x-1.5\">\n          <div class=\"w-1.5 h-1.5 bg-accent-color rounded-full animate-bounce\"></div>\n          <div class=\"w-1.5 h-1.5 bg-accent-color rounded-full animate-bounce [animation-delay:-0.15s]\"></div>\n          <div class=\"w-1.5 h-1.5 bg-accent-color rounded-full animate-bounce [animation-delay:-0.3s]\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n@if (showOverlay) {\n<div class=\"screenshot-overlay\"></div>\n}\n\n<!-- Full-screen Preview End Modal -->\n@if (showPreviewModal) {\n<div class=\"fixed inset-0 z-40 bg-white dark:bg-gray-900 flex flex-col items-center justify-center text-center px-4\">\n  <h2\n    class=\"text-[1.375rem] sm:text-2xl font-medium leading-snug text-center text-gray-800 dark:text-white mb-6 max-w-xs sm:max-w-sm mx-auto\">\n    You\u2019ve reached the end of the sample for\n  </h2>\n\n  <img [src]=\"coverImg ?? ''\" alt=\"Book Cover\" class=\"w-40 h-auto rounded-lg shadow-lg mb-6\" />\n</div>\n}\n\n\n<!-- Custom Chapter List Modal -->\n@if (showChapterList) {\n<div class=\"custom-modal-overlay fade-in\">\n  <div class=\"custom-modal-content\">\n    <app-chapterlist [chapterData]=\"chaptersData\" (chapterClick)=\"onChapterSelect($event)\"\n      (closeDialog)=\"showChapterList = false\">\n    </app-chapterlist>\n  </div>\n</div>\n}", styles: [":host{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--text-primary: #0f172a;--text-secondary: #475569;--border-base: #edf2f7;--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--accent-color: #34C759;--modal-bg: #ffffff;--modal-text: #0f172a}:host-context(.dark-mode){--bg-primary: rgb(32 33 32);--bg-secondary: rgb(42 43 42);--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-base: #2d3748;--shadow-base: 0 10px 15px -3px rgba(0, 0, 0, .5);--accent-color: #32d74b;--modal-bg: rgb(32 33 32);--modal-text: #f9fafb}#reader{width:100%;height:100%}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default}.screenshot-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fff;z-index:9999}img,[draggable=true]{-webkit-user-drag:none}::ng-deep *{-webkit-user-drag:none}::ng-deep .textLayer span{-webkit-user-drag:none;pointer-events:auto}.fade-in{animation:fadeIn .5s ease-in forwards}.fade-out{animation:fadeOut .5s ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media print{#viewer{display:none!important}body:before{content:\"Printing is disabled.\";font-size:24px;color:red;text-align:center;display:block;margin-top:100px}}.progress-container{position:relative;height:4px}.range-overlay{position:absolute;top:0;left:0;width:100%;z-index:10;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:none}.range-overlay::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:14px;margin-top:-5px;border-radius:50%;background:#0ea951;border:2px solid #ffffff;box-shadow:0 1px 3px #0003;transition:background .2s ease,transform .2s ease}.range-overlay::-webkit-slider-thumb:hover{background:#0cb14f;transform:scale(1.1)}.range-overlay::-webkit-slider-thumb:active{background:#0ba046;transform:scale(1.15)}.range-overlay::-webkit-slider-runnable-track{background:transparent;height:4px}.range-overlay::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:#0ea951;border:2px solid white}.range-overlay::-moz-range-track{background:transparent;height:4px}.range-overlay::-ms-thumb{height:16px;width:16px;border-radius:50%;background:#0ea951;border:2px solid white}.range-overlay::-ms-track{background:transparent;height:4px;border-color:transparent;color:transparent}#reader-container:after{content:\"\";position:absolute;top:13%;bottom:10%;left:50%;transform:translate(-50%);width:2px;background:linear-gradient(to bottom,#06030300,#0d080833,#0000);box-shadow:0 0 10px #0000001a;z-index:1}@media (max-width: 767px){#reader-container:after{display:none!important}}@media (max-width: 991px){#reader-container:after{display:none!important}}::ng-deep nav{box-shadow:none!important}::ng-deep .highlightandNotes .ngneat-dialog-content{width:510px!important;padding:24px}::ng-deep .highlightandNotes .ngneat-close-dialog{top:1.2rem}::ng-deep .highlightandNotes.dark-mode .ngneat-dialog-content{background-color:#333;color:#fff!important}::ng-deep .highlightandNotes.dark-mode .ngneat-close-dialog{color:#fff!important}::ng-deep .highlightandNotes.dark-mode .ngneat-dialog-content{color:#fff!important}::ng-deep .highlightandNotes.dark-mode .text-\\[\\#272C47\\]{color:#fff!important}::ng-deep .highlightandNotes.dark-mode .text-black{color:#fff!important}::ng-deep .addandeditNotepopup .ngneat-dialog-content{width:690px!important}::ng-deep .crop-popup .ngneat-dialog-content{width:420px!important}:host,app-notes{background-color:var(--bg-primary);display:flex;width:100%;justify-content:center;transition:background-color .3s ease}#reader-container{width:100%;height:98vh;background-color:var(--bg-primary);padding-top:0;display:flex;flex-direction:column;overflow:hidden;transition:background-color .3s ease}#reader-content{flex:1;overflow:hidden;position:relative}#reader-footer{position:relative;width:60vw;margin:0 auto;padding:10px 38px 20px;background:var(--bg-primary);z-index:50;transition:background-color .3s ease}#reader-footer .footer-container{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}#reader-footer .nav-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:background .2s;background:transparent;border:none;color:var(--text-primary)}#reader-footer .nav-btn:hover{background:#f5f5f5}#reader-footer .nav-btn svg{width:20px;height:20px}#reader-footer .progress-section{flex:1;display:flex;flex-direction:column;align-items:center;max-width:600px;margin:0 auto;padding-bottom:5px}#reader-footer .progress-section .progress-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:6px}#reader-footer .progress-section .progress-bar-container{position:relative;width:100%;height:14px;display:flex;align-items:center}#reader-footer .progress-section .progress-bar-container .progress-track{flex:1;height:4px;background:#e7ebeb;border-radius:2px;overflow:hidden;position:relative}#reader-footer .progress-section .progress-bar-container .progress-fill{height:100%;background:#34c759;transition:width .2s ease-out;border-radius:2px}#reader-footer .progress-section .progress-bar-container .progress-slider{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;top:0;left:0;z-index:2}#reader-footer .progress-section .progress-bar-container .progress-text{margin-left:12px;font-size:12px;font-weight:600;min-width:35px;color:var(--text-primary)}#reader-footer .right-controls{display:flex;align-items:center;gap:16px}#reader-footer .menu-toggle-btn{width:48px;height:48px;border-radius:50%;background:#34c759;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 10px #34c7594d;border:none}#reader-footer .menu-toggle-btn.open{background:#34c759;transform:rotate(90deg)}#reader-footer .menu-toggle-btn:hover{transform:scale(1.05);background:#2ebd50}#reader-footer .menu-popup{position:absolute;bottom:70px;right:0;width:280px;background:var(--bg-primary);border-radius:16px;box-shadow:var(--shadow-base);padding:8px 0;z-index:100;border:1px solid var(--border-base);transform-origin:bottom right}#reader-footer .menu-popup .menu-list{list-style:none;padding:0;margin:0}#reader-footer .menu-popup .menu-list li{padding:0 8px;cursor:pointer}#reader-footer .menu-popup .menu-list .menu-item{display:flex;align-items:center;padding:12px;font-size:14px;font-weight:500;color:var(--text-primary);border-radius:8px;transition:background .1s}#reader-footer .menu-popup .menu-list .menu-item:hover{background:var(--bg-secondary)}#reader-footer .menu-popup .menu-list .menu-item .icon{width:32px;display:flex;align-items:center;justify-content:flex-start;color:var(--text-secondary)}#reader-footer .menu-popup .menu-list .menu-item .icon svg{width:18px;height:18px}#reader-footer .menu-popup .quick-actions-row{display:flex;justify-content:space-between;padding:12px 16px;margin-top:8px;border-top:1px solid #f0f0f0;gap:8px}#reader-footer .menu-popup .quick-actions-row .quick-action-btn{flex:1;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg-secondary);cursor:pointer;color:var(--text-primary);transition:all .2s}#reader-footer .menu-popup .quick-actions-row .quick-action-btn:hover{background:var(--border-base)}.calibre{padding:0!important}.hightlight-overlay ::ng-deep .p-overlay{top:-232px!important}app-chapterlist ::ng-deep #reader-content{padding:0!important}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center}.custom-modal-content{background:var(--modal-bg);color:var(--modal-text);width:90%;max-width:500px;border-radius:12px;box-shadow:var(--shadow-base);overflow:hidden;animation:modalEnter .2s ease-out;transition:background-color .3s ease,color .3s ease}@keyframes modalEnter{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.animate-bounce{animation:bounce .6s infinite}.fixed{position:fixed}.inset-0{inset:0}.z-40{z-index:40}.z-45{z-index:45}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-center{text-align:center}.bg-white{background-color:#fff}.bg-white\\/95{background-color:#fffffff2!important}.bg-black\\/5{background-color:#0000000d}.bg-accent-color{background-color:var(--accent-color)}.bg-premium-loader{background:var(--bg-primary)}.blur-2xl{filter:blur(40px)}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1}.relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.z-10{z-index:10}.mb-8{margin-bottom:2rem}.space-y-3>*+*{margin-top:.75rem}.space-x-1\\.5>*+*{margin-left:.375rem}.tracking-tight{letter-spacing:-.025em}.text-gray-800{color:#1f2937}.border-\\[6px\\]{border-width:6px}.backdrop-blur-sm{backdrop-filter:blur(4px)}.w-full{width:100%}.px-4{padding-left:1rem;padding-right:1rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-\\[-1\\.5rem\\]{margin-top:-1.5rem}.ml-1{margin-left:.25rem}.space-x-1>*+*{margin-left:.25rem}.space-x-2>*+*{margin-left:.5rem}.inline-flex{display:inline-flex}.text-gray-700{color:#374151}.text-gray-400{color:#9ca3af}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.w-40{width:10rem}.h-56{height:14rem}.w-56{width:14rem}.h-80{height:20rem}.w-32{width:8rem}.h-44{height:11rem}.object-cover{object-fit:cover}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.shadow-premium{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d}.mx-auto{margin-left:auto;margin-right:auto}.border-4{border-width:4px}.border-white{border-color:#fff}.border-gray-50{border-color:#f9fafb}.w-1\\.5{width:.375rem}.h-1\\.5{height:.375rem}.bg-gray-400{background-color:#9ca3af}.rounded-full{border-radius:9999px}.custom-selection-toolbar{position:absolute;bottom:70px;right:0;z-index:100;width:280px;background:var(--bg-primary);border-radius:16px;box-shadow:var(--shadow-base);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-base);padding:8px 0;transform-origin:bottom right}.custom-selection-toolbar .menu-item{padding:12px 20px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:all .2s ease;display:flex;align-items:center}.custom-selection-toolbar .menu-item:hover{background:#f8fafc}.custom-selection-toolbar .menu-item:hover .menu-text{color:var(--accent-color)}.custom-selection-toolbar .menu-item.border-none{border-bottom:none}.custom-selection-toolbar .menu-item .menu-text{font-size:15px;font-weight:500;color:#334155}.custom-selection-toolbar.color-picker{width:auto;flex-direction:row;padding:8px 12px;gap:12px;align-items:center}.custom-selection-toolbar.color-picker .color-circle{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000001a;transition:transform .2s ease}.custom-selection-toolbar.color-picker .color-circle:hover{transform:scale(1.2)}.custom-selection-toolbar.color-picker .toolbar-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:#f1f5f9;color:#64748b;cursor:pointer;margin-left:4px}.custom-selection-toolbar.color-picker .toolbar-btn:hover{background:#e2e8f0}:host-context(.dark-mode) .custom-selection-toolbar{background:#1e293b;border-color:#334155}:host-context(.dark-mode) .custom-selection-toolbar .menu-item{border-bottom-color:#334155}:host-context(.dark-mode) .custom-selection-toolbar .menu-item:hover{background:#0f172a}:host-context(.dark-mode) .custom-selection-toolbar .menu-item .menu-text{color:#f1f5f9}:host-context(.dark-mode) .custom-selection-toolbar.color-picker .toolbar-btn{background:#334155;color:#f1f5f9}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: HttpApiService }, { type: SharedService }, { type: EpubReaderService }, { type: i0.ChangeDetectorRef }, { type: i3.ActivatedRoute }, { type: CustomDialogService }, { type: i4.MessageService }, { type: i1$2.Location }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i3.Router }, { type: i1$1.Overlay }], propDecorators: { epubUrl: [{
+                type: Input
+            }], epubBlob: [{
+                type: Input
+            }], coverPage: [{
+                type: Input
+            }], enableDarkMode: [{
+                type: Input
+            }], enableSearch: [{
+                type: Input
+            }], enableHighlights: [{
+                type: Input
+            }], enableBookmarks: [{
+                type: Input
+            }], enableChapterList: [{
+                type: Input
+            }], enableTextSelection: [{
+                type: Input
+            }], enableFontSize: [{
+                type: Input
+            }], enableNotes: [{
+                type: Input
+            }], underlineRemoveRequest: [{
+                type: Output
+            }], handleKeyUp: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class EpubLoaderComponent {
+    loadPercentage = input(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: EpubLoaderComponent, isStandalone: false, selector: "app-epub-loader", inputs: { loadPercentage: { classPropertyName: "loadPercentage", publicName: "loadPercentage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-loader\">\n  <div class=\"flex flex-col w-full loader-container\">\n    <div class=\"text-black text-2xl font-bold mb-2\">Reader Loading</div>\n    <p-progressBar\n      [value]=\"loadPercentage()\"\n      class=\"reader-progress w-full\"\n    />\n    <div class=\"text-percentage text-base font-normal inline-flex m-auto mt-3\">\n      {{ loadPercentage() ? loadPercentage() : '0' }}\n    </div>\n  </div>\n</div>\n", styles: [".page-loader{position:fixed;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;top:0;background:#fff;z-index:99}.page-loader .loader-container{max-width:80%}@media (min-width: 768px){.page-loader .loader-container{max-width:410px}}\n"], dependencies: [{ kind: "component", type: i1$4.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-epub-loader', standalone: false, template: "<div class=\"page-loader\">\n  <div class=\"flex flex-col w-full loader-container\">\n    <div class=\"text-black text-2xl font-bold mb-2\">Reader Loading</div>\n    <p-progressBar\n      [value]=\"loadPercentage()\"\n      class=\"reader-progress w-full\"\n    />\n    <div class=\"text-percentage text-base font-normal inline-flex m-auto mt-3\">\n      {{ loadPercentage() ? loadPercentage() : '0' }}\n    </div>\n  </div>\n</div>\n", styles: [".page-loader{position:fixed;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;top:0;background:#fff;z-index:99}.page-loader .loader-container{max-width:80%}@media (min-width: 768px){.page-loader .loader-container{max-width:410px}}\n"] }]
+        }] });
+
+const routes = [
+    {
+        path: 'reader',
+        component: ReaderMainComponent,
+        pathMatch: 'full',
+    },
+    {
+        path: 'chapter-list',
+        component: ChapterlistComponent,
+    },
+];
+class EpubReaderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderModule, declarations: [ReaderMainComponent,
+            AddNotesComponent,
+            EpubCommonPopupComponent,
+            ChapterlistComponent,
+            EpubLoaderComponent], imports: [CommonModule, i3.RouterModule, NgxEditorModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TabViewModule,
+            ProgressBarModule,
+            TableModule,
+            ButtonModule,
+            NoDataFoundComponent,
+            HttpClientModule,
+            SkeletonLoaderComponent], exports: [ReaderMainComponent,
+            AddNotesComponent,
+            EpubCommonPopupComponent,
+            ChapterlistComponent,
+            EpubLoaderComponent,
+            SkeletonLoaderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderModule, providers: [
+            CustomDialogService,
+            EpubReaderService
+        ], imports: [CommonModule,
+            RouterModule.forChild(routes),
+            NgxEditorModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TabViewModule,
+            ProgressBarModule,
+            TableModule,
+            ButtonModule,
+            NoDataFoundComponent,
+            HttpClientModule,
+            SkeletonLoaderComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EpubReaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ReaderMainComponent,
+                        AddNotesComponent,
+                        EpubCommonPopupComponent,
+                        ChapterlistComponent,
+                        EpubLoaderComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule.forChild(routes),
+                        NgxEditorModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TabViewModule,
+                        ProgressBarModule,
+                        TableModule,
+                        ButtonModule,
+                        NoDataFoundComponent,
+                        HttpClientModule,
+                        SkeletonLoaderComponent,
+                    ],
+                    providers: [
+                        CustomDialogService,
+                        EpubReaderService
+                    ],
+                    exports: [
+                        ReaderMainComponent,
+                        AddNotesComponent,
+                        EpubCommonPopupComponent,
+                        ChapterlistComponent,
+                        EpubLoaderComponent,
+                        SkeletonLoaderComponent
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+// Export other components if needed
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddNotesComponent, ChapterlistComponent, EpubCommonPopupComponent, EpubLoaderComponent, EpubReaderModule, EpubReaderService, ReaderMainComponent, SkeletonLoaderComponent };
+//# sourceMappingURL=epub-flow.mjs.map