@pecb-ui/components 1.1.10 → 1.1.11

package/fesm2022/pecb-ui-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, output, HostBinding, Component, ChangeDetectionStrategy, model, computed, signal, HostListener, ContentChild, effect, forwardRef, ViewChild, ViewContainerRef, viewChild, ViewEncapsulation, Directive, untracked, ElementRef, ApplicationRef, EnvironmentInjector, createComponent, contentChildren, PLATFORM_ID, Inject, ViewChildren, Renderer2, NgZone } from '@angular/core';
+import { Injectable, inject, input, output, HostBinding, Component, ChangeDetectionStrategy, model, computed, signal, HostListener, ContentChild, effect, forwardRef, ViewChild, ViewContainerRef, viewChild, ViewEncapsulation, Directive, untracked, ElementRef, ApplicationRef, EnvironmentInjector, createComponent, contentChildren, PLATFORM_ID, NgZone, DestroyRef, booleanAttribute, numberAttribute, afterNextRender, Injector, Inject, ViewChildren, Renderer2 } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, NgOptimizedImage, isPlatformBrowser } from '@angular/common';
+import { CommonModule, NgOptimizedImage, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i2 from '@angular/cdk/overlay';
@@ -4525,11 +4525,11 @@ class TableComponent {
         this.selectionChange.emit({ selectedRows, selectedIndices: this.selectedIndices() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "pecb-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, paginationVariant: { classPropertyName: "paginationVariant", publicName: "paginationVariant", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedIndices: { classPropertyName: "selectedIndices", publicName: "selectedIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, wrapText: { classPropertyName: "wrapText", publicName: "wrapText", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, selectAllAriaLabel: { classPropertyName: "selectAllAriaLabel", publicName: "selectAllAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowAriaLabel: { classPropertyName: "selectRowAriaLabel", publicName: "selectRowAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", selectedIndices: "selectedIndicesChange", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", pageChange: "pageChange", rowClick: "rowClick", rowAction: "rowAction", sortChange: "sortChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"pecb-table-wrapper\">\n  <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n    <!-- Loading State -->\n    <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n      <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #defaultLoading>\n        <div class=\"pecb-table__loading-spinner\">\n          <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n          </svg>\n          <span>{{ loadingText() }}</span>\n        </div>\n      </ng-template>\n    </div>\n\n    <!-- Table -->\n  <table\n    *ngIf=\"!loading()\"\n    [class]=\"tableClasses\"\n    [style.min-width]=\"minWidth()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    role=\"table\">\n\n    <!-- Table Header -->\n    <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n      <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n        <!-- Selection Checkbox Column -->\n        <th\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n          role=\"columnheader\"\n          scope=\"col\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isSomeSelected()\"\n              (change)=\"toggleAllSelection()\"\n              [attr.aria-label]=\"selectAllAriaLabel()\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </th>\n\n        <!-- Data Columns -->\n        <th\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell pecb-table__cell--header\"\n          [class.pecb-table__cell--sortable]=\"column.sortable\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [style.width]=\"column.width\"\n          [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n          role=\"columnheader\"\n          scope=\"col\"\n          (click)=\"onHeaderClick(column)\"\n          (keydown.enter)=\"onHeaderClick(column)\"\n          (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n          [attr.tabindex]=\"column.sortable ? 0 : null\">\n          <div class=\"pecb-table__header-content\">\n            <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultHeader>\n              <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n            </ng-template>\n\n            <!-- Sort Icon -->\n            <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n              <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n              </svg>\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- Table Body -->\n    <tbody class=\"pecb-table__body\">\n      <!-- Empty State -->\n      <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n        <td\n          [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n          class=\"pecb-table__cell pecb-table__cell--empty\">\n          <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n          </ng-container>\n          <ng-template #defaultEmpty>\n            <div class=\"pecb-table__empty-content\">\n              <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n            </div>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- Data Rows -->\n      <tr\n        *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n        class=\"pecb-table__row pecb-table__row--data\"\n        [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n        role=\"row\"\n        (click)=\"onRowClick(row, i)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"onRowClick(row, i)\">\n\n        <!-- Selection Checkbox -->\n        <td\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--checkbox\"\n          role=\"cell\"\n          (click)=\"$event.stopPropagation()\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isRowSelected(i)\"\n              (change)=\"toggleRowSelection(i)\"\n              [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </td>\n\n        <!-- Data Cells -->\n        <td\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [class.pecb-table__cell--wrap]=\"isCellWrapped(column)\"\n          [class.pecb-table__cell--truncate]=\"!isCellWrapped(column)\"\n          [style.max-width]=\"column.maxWidth || column.width\"\n          [attr.title]=\"getCellTitle(row, column)\"\n          role=\"cell\">\n\n          <!-- Custom Template -->\n          <ng-container *ngIf=\"column.cellTemplate\">\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n          </ng-container>\n\n          <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n          <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n            <ng-container\n              *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Status Component - renders pecb-status -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n            <pecb-status\n              [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n              [variant]=\"getStatusVariant(column)\"\n              [size]=\"getStatusSize(column)\">\n              {{ getCellValue(row, column.key) }}\n            </pecb-status>\n          </ng-container>\n\n          <!-- User Component - renders avatar + name + email -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n            <div class=\"pecb-table__user-cell\">\n              <img\n                *ngIf=\"getUserData(row, column).avatar\"\n                [src]=\"getUserData(row, column).avatar\"\n                alt=\"\"\n                class=\"pecb-table__user-avatar\">\n              <div class=\"pecb-table__user-info\">\n                <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n                <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n                  {{ getUserData(row, column).secondary }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- Action Component - renders action buttons with icons -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n            <div class=\"pecb-table__action-buttons\">\n              <ng-container *ngFor=\"let action of getActions(column)\">\n                <!-- Divider before this action (consumer-controlled grouping) -->\n                <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n                <button\n                  class=\"pecb-table__action-btn\"\n                  [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n                  [title]=\"action.tooltip || action.id\"\n                  [disabled]=\"action.disabled\"\n                  (click)=\"onActionClick(action, row, i, $event)\">\n                  <!-- View Icon -->\n                  <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                  </svg>\n                  <!-- Edit Icon -->\n                  <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n                    <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n                  </svg>\n                  <!-- Delete Icon -->\n                  <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"3 6 5 6 21 6\"></polyline>\n                    <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n                  </svg>\n                  <!-- Download Icon -->\n                  <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                    <polyline points=\"7 10 12 15 17 10\"></polyline>\n                    <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n                  </svg>\n                  <!-- Copy Icon -->\n                  <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n                    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n                  </svg>\n                  <!-- Custom Icon (SVG string) -->\n                  <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n                </button>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Link Cell -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n            <a\n              [href]=\"getLinkHref(getCellValue(row, column.key))\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"pecb-table__link\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getCellValue(row, column.key) }}\n            </a>\n          </ng-container>\n\n          <!-- Default Text -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n            {{ getCellValue(row, column.key) }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  </div>\n\n  <!-- Pagination (outside table container) -->\n  <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n    <pecb-pagination\n      [totalItems]=\"totalItems()\"\n      [pageSize]=\"pageSize()\"\n      [currentPage]=\"currentPage()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [showPageSizeSelector]=\"showPageSizeSelector()\"\n      [variant]=\"paginationVariant()\"\n      size=\"md\"\n      (pageChange)=\"onPageChange($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\">\n    </pecb-pagination>\n  </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow-x:auto;overflow-y:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#ffffff1a}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__cell--truncate{overflow:hidden;text-overflow:ellipsis}.pecb-table__cell--wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "pecb-pagination", inputs: ["totalItems", "pageSize", "currentPage", "pageSizeOptions", "size", "variant", "showPageSizeSelector", "showItemsInfo", "maxVisiblePages", "disabled", "aria-label", "previousPageAriaLabel", "nextPageAriaLabel", "pageNavigationAriaLabel", "pageAriaLabel", "pageSizeListboxAriaLabel", "itemsPerPageLabel", "itemsInfoTemplate", "itemsInfoCompactTemplate"], outputs: ["pageSizeChange", "currentPageChange", "pageChange"] }, { kind: "component", type: StatusComponent, selector: "pecb-status", inputs: ["type", "variant", "size", "ariaLabel", "text", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "pecb-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, paginationVariant: { classPropertyName: "paginationVariant", publicName: "paginationVariant", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedIndices: { classPropertyName: "selectedIndices", publicName: "selectedIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, wrapText: { classPropertyName: "wrapText", publicName: "wrapText", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, selectAllAriaLabel: { classPropertyName: "selectAllAriaLabel", publicName: "selectAllAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowAriaLabel: { classPropertyName: "selectRowAriaLabel", publicName: "selectRowAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", selectedIndices: "selectedIndicesChange", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", pageChange: "pageChange", rowClick: "rowClick", rowAction: "rowAction", sortChange: "sortChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"pecb-table-wrapper\">\n  <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n    <!-- Loading State -->\n    <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n      <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #defaultLoading>\n        <div class=\"pecb-table__loading-spinner\">\n          <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n          </svg>\n          <span>{{ loadingText() }}</span>\n        </div>\n      </ng-template>\n    </div>\n\n    <!-- Table -->\n  <table\n    *ngIf=\"!loading()\"\n    [class]=\"tableClasses\"\n    [style.min-width]=\"minWidth()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    role=\"table\">\n\n    <!-- Table Header -->\n    <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n      <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n        <!-- Selection Checkbox Column -->\n        <th\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n          role=\"columnheader\"\n          scope=\"col\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isSomeSelected()\"\n              (change)=\"toggleAllSelection()\"\n              [attr.aria-label]=\"selectAllAriaLabel()\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </th>\n\n        <!-- Data Columns -->\n        <th\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell pecb-table__cell--header\"\n          [class.pecb-table__cell--sortable]=\"column.sortable\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [style.width]=\"column.width\"\n          [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n          role=\"columnheader\"\n          scope=\"col\"\n          (click)=\"onHeaderClick(column)\"\n          (keydown.enter)=\"onHeaderClick(column)\"\n          (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n          [attr.tabindex]=\"column.sortable ? 0 : null\">\n          <div class=\"pecb-table__header-content\">\n            <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultHeader>\n              <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n            </ng-template>\n\n            <!-- Sort Icon -->\n            <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n              <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n              </svg>\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- Table Body -->\n    <tbody class=\"pecb-table__body\">\n      <!-- Empty State -->\n      <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n        <td\n          [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n          class=\"pecb-table__cell pecb-table__cell--empty\">\n          <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n          </ng-container>\n          <ng-template #defaultEmpty>\n            <div class=\"pecb-table__empty-content\">\n              <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n            </div>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- Data Rows -->\n      <tr\n        *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n        class=\"pecb-table__row pecb-table__row--data\"\n        [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n        role=\"row\"\n        (click)=\"onRowClick(row, i)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"onRowClick(row, i)\">\n\n        <!-- Selection Checkbox -->\n        <td\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--checkbox\"\n          role=\"cell\"\n          (click)=\"$event.stopPropagation()\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isRowSelected(i)\"\n              (change)=\"toggleRowSelection(i)\"\n              [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </td>\n\n        <!-- Data Cells -->\n        <td\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [class.pecb-table__cell--wrap]=\"isCellWrapped(column)\"\n          [class.pecb-table__cell--truncate]=\"!isCellWrapped(column)\"\n          [style.max-width]=\"column.maxWidth || column.width\"\n          [attr.title]=\"getCellTitle(row, column)\"\n          role=\"cell\">\n\n          <!-- Custom Template -->\n          <ng-container *ngIf=\"column.cellTemplate\">\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n          </ng-container>\n\n          <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n          <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n            <ng-container\n              *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Status Component - renders pecb-status -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n            <pecb-status\n              [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n              [variant]=\"getStatusVariant(column)\"\n              [size]=\"getStatusSize(column)\">\n              {{ getCellValue(row, column.key) }}\n            </pecb-status>\n          </ng-container>\n\n          <!-- User Component - renders avatar + name + email -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n            <div class=\"pecb-table__user-cell\">\n              <img\n                *ngIf=\"getUserData(row, column).avatar\"\n                [src]=\"getUserData(row, column).avatar\"\n                alt=\"\"\n                class=\"pecb-table__user-avatar\">\n              <div class=\"pecb-table__user-info\">\n                <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n                <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n                  {{ getUserData(row, column).secondary }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- Action Component - renders action buttons with icons -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n            <div class=\"pecb-table__action-buttons\">\n              <ng-container *ngFor=\"let action of getActions(column)\">\n                <!-- Divider before this action (consumer-controlled grouping) -->\n                <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n                <button\n                  class=\"pecb-table__action-btn\"\n                  [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n                  [title]=\"action.tooltip || action.id\"\n                  [disabled]=\"action.disabled\"\n                  (click)=\"onActionClick(action, row, i, $event)\">\n                  <!-- View Icon -->\n                  <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                  </svg>\n                  <!-- Edit Icon -->\n                  <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n                    <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n                  </svg>\n                  <!-- Delete Icon -->\n                  <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"3 6 5 6 21 6\"></polyline>\n                    <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n                  </svg>\n                  <!-- Download Icon -->\n                  <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                    <polyline points=\"7 10 12 15 17 10\"></polyline>\n                    <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n                  </svg>\n                  <!-- Copy Icon -->\n                  <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n                    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n                  </svg>\n                  <!-- Custom Icon (SVG string) -->\n                  <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n                </button>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Link Cell -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n            <a\n              [href]=\"getLinkHref(getCellValue(row, column.key))\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"pecb-table__link\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getCellValue(row, column.key) }}\n            </a>\n          </ng-container>\n\n          <!-- Default Text -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n            {{ getCellValue(row, column.key) }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  </div>\n\n  <!-- Pagination (outside table container) -->\n  <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n    <pecb-pagination\n      [totalItems]=\"totalItems()\"\n      [pageSize]=\"pageSize()\"\n      [currentPage]=\"currentPage()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [showPageSizeSelector]=\"showPageSizeSelector()\"\n      [variant]=\"paginationVariant()\"\n      size=\"md\"\n      (pageChange)=\"onPageChange($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\">\n    </pecb-pagination>\n  </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow-x:auto;overflow-y:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none;background-color:#212427}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#373a3d}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__cell--truncate{overflow:hidden;text-overflow:ellipsis}.pecb-table__cell--wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "pecb-pagination", inputs: ["totalItems", "pageSize", "currentPage", "pageSizeOptions", "size", "variant", "showPageSizeSelector", "showItemsInfo", "maxVisiblePages", "disabled", "aria-label", "previousPageAriaLabel", "nextPageAriaLabel", "pageNavigationAriaLabel", "pageAriaLabel", "pageSizeListboxAriaLabel", "itemsPerPageLabel", "itemsInfoTemplate", "itemsInfoCompactTemplate"], outputs: ["pageSizeChange", "currentPageChange", "pageChange"] }, { kind: "component", type: StatusComponent, selector: "pecb-status", inputs: ["type", "variant", "size", "ariaLabel", "text", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pecb-table', imports: [CommonModule, PaginationComponent, StatusComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-table-wrapper\">\n  <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n    <!-- Loading State -->\n    <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n      <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #defaultLoading>\n        <div class=\"pecb-table__loading-spinner\">\n          <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n          </svg>\n          <span>{{ loadingText() }}</span>\n        </div>\n      </ng-template>\n    </div>\n\n    <!-- Table -->\n  <table\n    *ngIf=\"!loading()\"\n    [class]=\"tableClasses\"\n    [style.min-width]=\"minWidth()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    role=\"table\">\n\n    <!-- Table Header -->\n    <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n      <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n        <!-- Selection Checkbox Column -->\n        <th\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n          role=\"columnheader\"\n          scope=\"col\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isSomeSelected()\"\n              (change)=\"toggleAllSelection()\"\n              [attr.aria-label]=\"selectAllAriaLabel()\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </th>\n\n        <!-- Data Columns -->\n        <th\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell pecb-table__cell--header\"\n          [class.pecb-table__cell--sortable]=\"column.sortable\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [style.width]=\"column.width\"\n          [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n          role=\"columnheader\"\n          scope=\"col\"\n          (click)=\"onHeaderClick(column)\"\n          (keydown.enter)=\"onHeaderClick(column)\"\n          (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n          [attr.tabindex]=\"column.sortable ? 0 : null\">\n          <div class=\"pecb-table__header-content\">\n            <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultHeader>\n              <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n            </ng-template>\n\n            <!-- Sort Icon -->\n            <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n              <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n              </svg>\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- Table Body -->\n    <tbody class=\"pecb-table__body\">\n      <!-- Empty State -->\n      <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n        <td\n          [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n          class=\"pecb-table__cell pecb-table__cell--empty\">\n          <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n          </ng-container>\n          <ng-template #defaultEmpty>\n            <div class=\"pecb-table__empty-content\">\n              <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n            </div>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- Data Rows -->\n      <tr\n        *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n        class=\"pecb-table__row pecb-table__row--data\"\n        [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n        role=\"row\"\n        (click)=\"onRowClick(row, i)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"onRowClick(row, i)\">\n\n        <!-- Selection Checkbox -->\n        <td\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--checkbox\"\n          role=\"cell\"\n          (click)=\"$event.stopPropagation()\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isRowSelected(i)\"\n              (change)=\"toggleRowSelection(i)\"\n              [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </td>\n\n        <!-- Data Cells -->\n        <td\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [class.pecb-table__cell--wrap]=\"isCellWrapped(column)\"\n          [class.pecb-table__cell--truncate]=\"!isCellWrapped(column)\"\n          [style.max-width]=\"column.maxWidth || column.width\"\n          [attr.title]=\"getCellTitle(row, column)\"\n          role=\"cell\">\n\n          <!-- Custom Template -->\n          <ng-container *ngIf=\"column.cellTemplate\">\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n          </ng-container>\n\n          <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n          <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n            <ng-container\n              *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Status Component - renders pecb-status -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n            <pecb-status\n              [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n              [variant]=\"getStatusVariant(column)\"\n              [size]=\"getStatusSize(column)\">\n              {{ getCellValue(row, column.key) }}\n            </pecb-status>\n          </ng-container>\n\n          <!-- User Component - renders avatar + name + email -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n            <div class=\"pecb-table__user-cell\">\n              <img\n                *ngIf=\"getUserData(row, column).avatar\"\n                [src]=\"getUserData(row, column).avatar\"\n                alt=\"\"\n                class=\"pecb-table__user-avatar\">\n              <div class=\"pecb-table__user-info\">\n                <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n                <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n                  {{ getUserData(row, column).secondary }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- Action Component - renders action buttons with icons -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n            <div class=\"pecb-table__action-buttons\">\n              <ng-container *ngFor=\"let action of getActions(column)\">\n                <!-- Divider before this action (consumer-controlled grouping) -->\n                <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n                <button\n                  class=\"pecb-table__action-btn\"\n                  [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n                  [title]=\"action.tooltip || action.id\"\n                  [disabled]=\"action.disabled\"\n                  (click)=\"onActionClick(action, row, i, $event)\">\n                  <!-- View Icon -->\n                  <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                  </svg>\n                  <!-- Edit Icon -->\n                  <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n                    <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n                  </svg>\n                  <!-- Delete Icon -->\n                  <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"3 6 5 6 21 6\"></polyline>\n                    <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n                  </svg>\n                  <!-- Download Icon -->\n                  <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                    <polyline points=\"7 10 12 15 17 10\"></polyline>\n                    <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n                  </svg>\n                  <!-- Copy Icon -->\n                  <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n                    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n                  </svg>\n                  <!-- Custom Icon (SVG string) -->\n                  <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n                </button>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Link Cell -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n            <a\n              [href]=\"getLinkHref(getCellValue(row, column.key))\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"pecb-table__link\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getCellValue(row, column.key) }}\n            </a>\n          </ng-container>\n\n          <!-- Default Text -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n            {{ getCellValue(row, column.key) }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  </div>\n\n  <!-- Pagination (outside table container) -->\n  <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n    <pecb-pagination\n      [totalItems]=\"totalItems()\"\n      [pageSize]=\"pageSize()\"\n      [currentPage]=\"currentPage()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [showPageSizeSelector]=\"showPageSizeSelector()\"\n      [variant]=\"paginationVariant()\"\n      size=\"md\"\n      (pageChange)=\"onPageChange($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\">\n    </pecb-pagination>\n  </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow-x:auto;overflow-y:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#ffffff1a}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__cell--truncate{overflow:hidden;text-overflow:ellipsis}.pecb-table__cell--wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"] }]
+            args: [{ selector: 'pecb-table', imports: [CommonModule, PaginationComponent, StatusComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-table-wrapper\">\n  <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n    <!-- Loading State -->\n    <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n      <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #defaultLoading>\n        <div class=\"pecb-table__loading-spinner\">\n          <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n          </svg>\n          <span>{{ loadingText() }}</span>\n        </div>\n      </ng-template>\n    </div>\n\n    <!-- Table -->\n  <table\n    *ngIf=\"!loading()\"\n    [class]=\"tableClasses\"\n    [style.min-width]=\"minWidth()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    role=\"table\">\n\n    <!-- Table Header -->\n    <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n      <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n        <!-- Selection Checkbox Column -->\n        <th\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n          role=\"columnheader\"\n          scope=\"col\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isSomeSelected()\"\n              (change)=\"toggleAllSelection()\"\n              [attr.aria-label]=\"selectAllAriaLabel()\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </th>\n\n        <!-- Data Columns -->\n        <th\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell pecb-table__cell--header\"\n          [class.pecb-table__cell--sortable]=\"column.sortable\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [style.width]=\"column.width\"\n          [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n          role=\"columnheader\"\n          scope=\"col\"\n          (click)=\"onHeaderClick(column)\"\n          (keydown.enter)=\"onHeaderClick(column)\"\n          (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n          [attr.tabindex]=\"column.sortable ? 0 : null\">\n          <div class=\"pecb-table__header-content\">\n            <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultHeader>\n              <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n            </ng-template>\n\n            <!-- Sort Icon -->\n            <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n              <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n              </svg>\n              <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n                <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n              </svg>\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <!-- Table Body -->\n    <tbody class=\"pecb-table__body\">\n      <!-- Empty State -->\n      <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n        <td\n          [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n          class=\"pecb-table__cell pecb-table__cell--empty\">\n          <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n          </ng-container>\n          <ng-template #defaultEmpty>\n            <div class=\"pecb-table__empty-content\">\n              <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n            </div>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- Data Rows -->\n      <tr\n        *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n        class=\"pecb-table__row pecb-table__row--data\"\n        [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n        role=\"row\"\n        (click)=\"onRowClick(row, i)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"onRowClick(row, i)\">\n\n        <!-- Selection Checkbox -->\n        <td\n          *ngIf=\"selectable()\"\n          class=\"pecb-table__cell pecb-table__cell--checkbox\"\n          role=\"cell\"\n          (click)=\"$event.stopPropagation()\">\n          <label class=\"pecb-table__checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-table__checkbox\"\n              [checked]=\"isRowSelected(i)\"\n              (change)=\"toggleRowSelection(i)\"\n              [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n            <span class=\"pecb-table__checkbox-custom\"></span>\n          </label>\n        </td>\n\n        <!-- Data Cells -->\n        <td\n          *ngFor=\"let column of columns(); trackBy: trackByKey\"\n          class=\"pecb-table__cell\"\n          [class]=\"getAlignmentClass(column)\"\n          [ngClass]=\"column.cssClass\"\n          [class.pecb-table__cell--wrap]=\"isCellWrapped(column)\"\n          [class.pecb-table__cell--truncate]=\"!isCellWrapped(column)\"\n          [style.max-width]=\"column.maxWidth || column.width\"\n          [attr.title]=\"getCellTitle(row, column)\"\n          role=\"cell\">\n\n          <!-- Custom Template -->\n          <ng-container *ngIf=\"column.cellTemplate\">\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n          </ng-container>\n\n          <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n          <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n            <ng-container\n              *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Status Component - renders pecb-status -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n            <pecb-status\n              [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n              [variant]=\"getStatusVariant(column)\"\n              [size]=\"getStatusSize(column)\">\n              {{ getCellValue(row, column.key) }}\n            </pecb-status>\n          </ng-container>\n\n          <!-- User Component - renders avatar + name + email -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n            <div class=\"pecb-table__user-cell\">\n              <img\n                *ngIf=\"getUserData(row, column).avatar\"\n                [src]=\"getUserData(row, column).avatar\"\n                alt=\"\"\n                class=\"pecb-table__user-avatar\">\n              <div class=\"pecb-table__user-info\">\n                <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n                <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n                  {{ getUserData(row, column).secondary }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- Action Component - renders action buttons with icons -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n            <div class=\"pecb-table__action-buttons\">\n              <ng-container *ngFor=\"let action of getActions(column)\">\n                <!-- Divider before this action (consumer-controlled grouping) -->\n                <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n                <button\n                  class=\"pecb-table__action-btn\"\n                  [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n                  [title]=\"action.tooltip || action.id\"\n                  [disabled]=\"action.disabled\"\n                  (click)=\"onActionClick(action, row, i, $event)\">\n                  <!-- View Icon -->\n                  <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                  </svg>\n                  <!-- Edit Icon -->\n                  <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n                    <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n                  </svg>\n                  <!-- Delete Icon -->\n                  <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"3 6 5 6 21 6\"></polyline>\n                    <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n                  </svg>\n                  <!-- Download Icon -->\n                  <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                    <polyline points=\"7 10 12 15 17 10\"></polyline>\n                    <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n                  </svg>\n                  <!-- Copy Icon -->\n                  <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n                    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n                  </svg>\n                  <!-- Custom Icon (SVG string) -->\n                  <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n                </button>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Link Cell -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n            <a\n              [href]=\"getLinkHref(getCellValue(row, column.key))\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"pecb-table__link\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getCellValue(row, column.key) }}\n            </a>\n          </ng-container>\n\n          <!-- Default Text -->\n          <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n            {{ getCellValue(row, column.key) }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  </div>\n\n  <!-- Pagination (outside table container) -->\n  <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n    <pecb-pagination\n      [totalItems]=\"totalItems()\"\n      [pageSize]=\"pageSize()\"\n      [currentPage]=\"currentPage()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [showPageSizeSelector]=\"showPageSizeSelector()\"\n      [variant]=\"paginationVariant()\"\n      size=\"md\"\n      (pageChange)=\"onPageChange($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\">\n    </pecb-pagination>\n  </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow-x:auto;overflow-y:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none;background-color:#212427}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#373a3d}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__cell--truncate{overflow:hidden;text-overflow:ellipsis}.pecb-table__cell--wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], paginationVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationVariant", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectedIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndices", required: false }] }, { type: i0.Output, args: ["selectedIndicesChange"] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], wrapText: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapText", required: false }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], selectAllAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllAriaLabel", required: false }] }], selectRowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowAriaLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], emptyTemplate: [{
                 type: ContentChild,
                 args: ['emptyTemplate']
@@ -10655,6 +10655,1819 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'pecb-media', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [class]=\"hostClasses()\"\n  role=\"grid\"\n  [attr.aria-label]=\"ariaLabel() ?? defaultAriaLabel()\"\n>\n  @for (group of groups(); track group.label) {\n    <div class=\"pecb-media__group\">\n      @if (group.label) {\n        <h3 class=\"pecb-media__group-title\">{{ group.label }}</h3>\n      }\n\n      <div class=\"pecb-media__grid\">\n        @for (item of group.items; track item.name) {\n          <button\n            class=\"pecb-media__item\"\n            type=\"button\"\n            [style.width.px]=\"itemSize()\"\n            [style.height.px]=\"itemSize()\"\n            [attr.aria-label]=\"copyLabel() + ' ' + formatName(item.name)\"\n            [attr.title]=\"formatName(item.name)\"\n            (click)=\"copyToClipboard(item)\"\n          >\n            <span\n              class=\"pecb-media__svg\"\n              [innerHTML]=\"item.safeHtml\"\n            ></span>\n\n            @if (copiedItem() === item.name) {\n              <span class=\"pecb-media__tooltip\">{{ copiedLabel() }}</span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".pecb-media{display:block;width:100%}.pecb-media__group{width:100%}.pecb-media__group+.pecb-media__group{margin-top:20px}.pecb-media__group-title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:700;line-height:1.4;color:#313131;margin:0 0 16px}.pecb-media__grid{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.pecb-media__item{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;transition-property:background-color,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-media__item:hover{background-color:#f4f4f4;transform:scale(1.1)}.pecb-media__item:active{transform:scale(.95)}.pecb-media__item:focus-visible{outline:2px solid #007bff;outline-offset:2px}.pecb-media__svg{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.pecb-media__svg svg{display:block;width:100%;height:100%}.pecb-media__tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);padding:2px 8px;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:500;line-height:20px;border-radius:6px;white-space:nowrap;pointer-events:none;animation:pecb-media-fade-in .15s ease-out;z-index:1070}.pecb-media--sm .pecb-media__grid{gap:8px}.pecb-media--lg .pecb-media__grid{gap:16px}.pecb-media--flag .pecb-media__item{overflow:hidden}@keyframes pecb-media-fade-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], socialStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "socialStyle", required: false }] }], flagShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagShape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], defaultAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAriaLabel", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }] } });
 
+const DEFAULT_VIDEO_PLAYER_LABELS = {
+    play: 'Play',
+    pause: 'Pause',
+    replay: 'Replay',
+    skipBack: 'Rewind {n} seconds',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    volume: 'Volume',
+    captionsOn: 'Turn captions on',
+    captionsOff: 'Turn captions off',
+    settings: 'Settings',
+    playbackSpeed: 'Playback speed',
+    normalSpeed: 'Normal',
+    enterFullscreen: 'Enter fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    seek: 'Seek',
+    player: 'Video player',
+    error: 'This video could not be loaded.',
+};
+/** Default playback-rate menu entries. */
+const DEFAULT_VIDEO_PLAYER_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+/**
+ * Formats seconds as `m:ss`, or `h:mm:ss` once the value reaches one hour.
+ * Non-finite / negative input renders as `0:00`.
+ */
+function formatVideoTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0) {
+        return '0:00';
+    }
+    const total = Math.floor(seconds);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const mm = h > 0 ? String(m).padStart(2, '0') : String(m);
+    const ss = String(s).padStart(2, '0');
+    return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+// Internal tuning constants.
+const IDLE_HIDE_DELAY_MS = 2600;
+const LEAVE_HIDE_DELAY_MS = 700;
+const SEEK_SYNC_TOLERANCE_S = 0.5;
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * PECB course video player.
+ *
+ * A fully custom-skinned, accessible HTML5 `<video>` wrapper that reproduces
+ * the PECB "Course Player" design: a rounded dark 16:9 stage, poster, brand
+ * watermark + section label, a blurred centre play button and a bottom
+ * control bar (progress, play/pause, rewind, volume, time, captions, speed
+ * settings, fullscreen).
+ *
+ * The player is self-contained (no icon-registry / service dependencies) so it
+ * can be dropped into any Angular 17+ app. It is responsive (container
+ * queries), keyboard operable, touch friendly and honours
+ * `prefers-reduced-motion`.
+ *
+ * @example Minimal
+ * ```html
+ * <pecb-video-player
+ *   src="https://cdn.example.com/lesson.mp4"
+ *   poster="https://cdn.example.com/lesson.jpg"
+ *   label="SECTION 2">
+ * </pecb-video-player>
+ * ```
+ *
+ * @example Two-way bound & driven from outside (e.g. a transcript panel)
+ * ```html
+ * <pecb-video-player
+ *   [src]="sources"
+ *   [tracks]="captions"
+ *   [(currentTime)]="at"
+ *   [(playing)]="playing"
+ *   (playbackEnded)="onLessonFinished()">
+ * </pecb-video-player>
+ * ```
+ *
+ * Theming — override the CSS custom properties on the host:
+ * ```css
+ * pecb-video-player { --pecb-video-radius: 0; --pecb-video-accent: #a11e29; }
+ * ```
+ */
+class VideoPlayerComponent {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        /** Unique id used to wire ARIA relationships inside the template. */
+        this.uid = generateUniqueId('pecb-video');
+        // ── Element refs ────────────────────────────────────────────────────────────
+        this.rootRef = viewChild('root', ...(ngDevMode ? [{ debugName: "rootRef" }] : []));
+        this.videoRef = viewChild('video', ...(ngDevMode ? [{ debugName: "videoRef" }] : []));
+        this.progressRef = viewChild('progress', ...(ngDevMode ? [{ debugName: "progressRef" }] : []));
+        this.settingsMenuRef = viewChild('settingsMenu', ...(ngDevMode ? [{ debugName: "settingsMenuRef" }] : []));
+        // ── Media inputs ────────────────────────────────────────────────────────────
+        /** Media URL, or a list of `<source>` candidates. */
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : []));
+        /** Poster image shown before playback starts. */
+        this.poster = input(undefined, ...(ngDevMode ? [{ debugName: "poster" }] : []));
+        /** Text tracks (captions / subtitles). The CC button appears when non-empty. */
+        this.tracks = input([], ...(ngDevMode ? [{ debugName: "tracks" }] : []));
+        /** Accessible title of the media, announced as part of the region label. */
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        /** `crossorigin` attribute — required for captions hosted on another origin. */
+        this.crossOrigin = input(undefined, ...(ngDevMode ? [{ debugName: "crossOrigin" }] : []));
+        /** @default 'metadata' */
+        this.preload = input('metadata', ...(ngDevMode ? [{ debugName: "preload" }] : []));
+        /** Attempt to start playback automatically (subject to browser policy). */
+        this.autoplay = input(false, ...(ngDevMode ? [{ debugName: "autoplay", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Restart from the beginning when the media ends. */
+        this.loop = input(false, ...(ngDevMode ? [{ debugName: "loop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Play inline on iOS instead of forcing the native fullscreen player. @default true */
+        this.playsInline = input(true, ...(ngDevMode ? [{ debugName: "playsInline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Initial playhead position in seconds (applied once metadata is loaded). */
+        this.startTime = input(0, ...(ngDevMode ? [{ debugName: "startTime", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        // ── Appearance inputs ───────────────────────────────────────────────────────
+        /** Brand watermark in the bottom-left corner. Empty string hides it. @default 'PECB' */
+        this.watermark = input('PECB', ...(ngDevMode ? [{ debugName: "watermark" }] : []));
+        /** Large label in the bottom-right corner, e.g. `SECTION 2`. */
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /** CSS `aspect-ratio` of the stage. @default '16 / 9' */
+        this.aspectRatio = input('16 / 9', ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
+        /** Show the large centre play/pause button. @default true */
+        this.showCenterButton = input(true, ...(ngDevMode ? [{ debugName: "showCenterButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the rewind button. @default true */
+        this.showSkipBack = input(true, ...(ngDevMode ? [{ debugName: "showSkipBack", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the mute button + volume slider. @default true */
+        this.showVolume = input(true, ...(ngDevMode ? [{ debugName: "showVolume", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the elapsed / total time. @default true */
+        this.showTime = input(true, ...(ngDevMode ? [{ debugName: "showTime", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Force-show/hide the captions button. `undefined` = show only when `tracks` is non-empty. */
+        this.showCaptions = input(undefined, ...(ngDevMode ? [{ debugName: "showCaptions" }] : []));
+        /** Show the settings (playback speed) button. @default true */
+        this.showSettings = input(true, ...(ngDevMode ? [{ debugName: "showSettings", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the fullscreen button. @default true */
+        this.showFullscreen = input(true, ...(ngDevMode ? [{ debugName: "showFullscreen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Seconds the rewind button / arrow keys jump. @default 10 */
+        this.seekStep = input(10, ...(ngDevMode ? [{ debugName: "seekStep", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** Playback-rate options listed in the settings menu. */
+        this.playbackRates = input(DEFAULT_VIDEO_PLAYER_RATES, ...(ngDevMode ? [{ debugName: "playbackRates" }] : []));
+        /** Partial override of the user-visible strings (i18n). */
+        this.labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        // ── Two-way state (models) ──────────────────────────────────────────────────
+        /** Whether the media is playing. Set it to start/stop playback. */
+        this.playing = model(false, ...(ngDevMode ? [{ debugName: "playing" }] : []));
+        /** Playhead position in seconds. Set it to seek. */
+        this.currentTime = model(0, ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
+        /** Volume 0–1. */
+        this.volume = model(1, ...(ngDevMode ? [{ debugName: "volume" }] : []));
+        /** Muted state. */
+        this.muted = model(false, ...(ngDevMode ? [{ debugName: "muted" }] : []));
+        /** Playback rate. */
+        this.playbackRate = model(1, ...(ngDevMode ? [{ debugName: "playbackRate" }] : []));
+        /** Whether the default text track is displayed. */
+        this.captionsEnabled = model(false, ...(ngDevMode ? [{ debugName: "captionsEnabled" }] : []));
+        // ── Outputs ─────────────────────────────────────────────────────────────────
+        /** Fires on every `timeupdate` (~4×/s while playing). */
+        this.timeUpdate = output();
+        /** Duration is known. */
+        this.loadedMetadata = output();
+        /** A seek finished. */
+        this.seekEnd = output();
+        /** Playback reached the end. */
+        this.playbackEnded = output();
+        /** Player entered / left fullscreen. */
+        this.fullscreenChange = output();
+        /** Media failed to load or playback was rejected. */
+        this.playerError = output();
+        // ── Internal state ──────────────────────────────────────────────────────────
+        this.duration = signal(0, ...(ngDevMode ? [{ debugName: "duration" }] : []));
+        this.bufferedEnd = signal(0, ...(ngDevMode ? [{ debugName: "bufferedEnd" }] : []));
+        this.hasEnded = signal(false, ...(ngDevMode ? [{ debugName: "hasEnded" }] : []));
+        this.isBuffering = signal(false, ...(ngDevMode ? [{ debugName: "isBuffering" }] : []));
+        this.hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+        this.isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
+        this.isSeeking = signal(false, ...(ngDevMode ? [{ debugName: "isSeeking" }] : []));
+        this.settingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "settingsOpen" }] : []));
+        this.controlsVisible = signal(true, ...(ngDevMode ? [{ debugName: "controlsVisible" }] : []));
+        this.hasStarted = signal(false, ...(ngDevMode ? [{ debugName: "hasStarted" }] : []));
+        this.hideTimer = null;
+        this.lastPointerType = 'mouse';
+        this.startTimeApplied = false;
+        this.initialLoadDone = false;
+        this.pendingPlay = null;
+        // ── Computed ────────────────────────────────────────────────────────────────
+        this.text = computed(() => ({
+            ...DEFAULT_VIDEO_PLAYER_LABELS,
+            ...this.labels(),
+        }), ...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.skipBackLabel = computed(() => this.text().skipBack.replace('{n}', String(this.seekStep())), ...(ngDevMode ? [{ debugName: "skipBackLabel" }] : []));
+        this.sourceList = computed(() => {
+            const s = this.src();
+            if (!s)
+                return [];
+            return typeof s === 'string' ? [{ src: s }] : s;
+        }, ...(ngDevMode ? [{ debugName: "sourceList" }] : []));
+        /** Single-string src is bound directly so the browser can start fetching ASAP. */
+        this.singleSrc = computed(() => {
+            const s = this.src();
+            return typeof s === 'string' ? s : undefined;
+        }, ...(ngDevMode ? [{ debugName: "singleSrc" }] : []));
+        this.progressPct = computed(() => {
+            const d = this.duration();
+            return d > 0 ? Math.min(100, Math.max(0, (this.currentTime() / d) * 100)) : 0;
+        }, ...(ngDevMode ? [{ debugName: "progressPct" }] : []));
+        this.bufferedPct = computed(() => {
+            const d = this.duration();
+            return d > 0 ? Math.min(100, Math.max(0, (this.bufferedEnd() / d) * 100)) : 0;
+        }, ...(ngDevMode ? [{ debugName: "bufferedPct" }] : []));
+        this.currentTimeLabel = computed(() => formatVideoTime(this.currentTime()), ...(ngDevMode ? [{ debugName: "currentTimeLabel" }] : []));
+        this.durationLabel = computed(() => formatVideoTime(this.duration()), ...(ngDevMode ? [{ debugName: "durationLabel" }] : []));
+        this.captionsButtonVisible = computed(() => this.showCaptions() ?? this.tracks().length > 0, ...(ngDevMode ? [{ debugName: "captionsButtonVisible" }] : []));
+        /** Volume as an integer percentage (0 while muted) — drives the slider. */
+        this.volumePct = computed(() => (this.muted() ? 0 : Math.round(this.volume() * 100)), ...(ngDevMode ? [{ debugName: "volumePct" }] : []));
+        this.volumeLevel = computed(() => {
+            if (this.muted() || this.volume() === 0)
+                return 'muted';
+            return this.volume() < 0.5 ? 'low' : 'high';
+        }, ...(ngDevMode ? [{ debugName: "volumeLevel" }] : []));
+        this.regionLabel = computed(() => {
+            const t = this.title();
+            return t ? `${this.text().player}: ${t}` : this.text().player;
+        }, ...(ngDevMode ? [{ debugName: "regionLabel" }] : []));
+        /** Controls are hidden only while playing and idle. */
+        this.controlsHidden = computed(() => this.playing() &&
+            !this.controlsVisible() &&
+            !this.settingsOpen() &&
+            !this.isSeeking() &&
+            !this.hasEnded(), ...(ngDevMode ? [{ debugName: "controlsHidden" }] : []));
+        this.hostClasses = computed(() => [
+            'pecb-video-player',
+            this.playing() ? 'pecb-video-player--playing' : 'pecb-video-player--paused',
+            this.controlsHidden() ? 'pecb-video-player--idle' : '',
+            this.isFullscreen() ? 'pecb-video-player--fullscreen' : '',
+            this.hasEnded() ? 'pecb-video-player--ended' : '',
+            this.hasError() ? 'pecb-video-player--error' : '',
+            this.isSeeking() ? 'pecb-video-player--seeking' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+        // ── model → <video> synchronisation ───────────────────────────────────────
+        effect(() => {
+            const wantPlaying = this.playing();
+            const video = this.videoRef()?.nativeElement;
+            if (!video)
+                return;
+            untracked(() => {
+                if (wantPlaying && video.paused) {
+                    this.safePlay(video);
+                }
+                else if (!wantPlaying && !video.paused) {
+                    video.pause();
+                }
+            });
+        });
+        effect(() => {
+            const t = this.currentTime();
+            const video = this.videoRef()?.nativeElement;
+            if (!video || !Number.isFinite(t))
+                return;
+            untracked(() => {
+                if (Math.abs(video.currentTime - t) > SEEK_SYNC_TOLERANCE_S) {
+                    video.currentTime = t;
+                }
+            });
+        });
+        effect(() => {
+            const v = Math.min(1, Math.max(0, this.volume()));
+            const m = this.muted();
+            const video = this.videoRef()?.nativeElement;
+            if (!video)
+                return;
+            untracked(() => {
+                if (video.volume !== v)
+                    video.volume = v;
+                if (video.muted !== m)
+                    video.muted = m;
+            });
+        });
+        effect(() => {
+            const rate = this.playbackRate();
+            const video = this.videoRef()?.nativeElement;
+            if (!video || !Number.isFinite(rate) || rate <= 0)
+                return;
+            untracked(() => {
+                if (video.playbackRate !== rate)
+                    video.playbackRate = rate;
+            });
+        });
+        effect(() => {
+            const enabled = this.captionsEnabled();
+            // Re-run when tracks change (they are re-rendered by the template).
+            this.tracks();
+            const video = this.videoRef()?.nativeElement;
+            if (!video)
+                return;
+            untracked(() => this.applyCaptionMode(video, enabled));
+        });
+        // Reload the element when the source set changes after first render.
+        effect(() => {
+            this.sourceList();
+            const video = this.videoRef()?.nativeElement;
+            if (!video)
+                return;
+            untracked(() => {
+                if (!this.initialLoadDone) {
+                    this.initialLoadDone = true;
+                    return;
+                }
+                this.resetForNewSource(video);
+            });
+        });
+        if (this.isBrowser) {
+            afterNextRender(() => this.attachIdleListeners());
+            this.destroyRef.onDestroy(() => this.clearHideTimer());
+        }
+    }
+    // ── Public API ──────────────────────────────────────────────────────────────
+    /** Start playback. */
+    play() {
+        this.playing.set(true);
+    }
+    /** Pause playback. */
+    pause() {
+        this.playing.set(false);
+    }
+    /** Toggle play / pause (replays from the start after the media ended). */
+    togglePlay() {
+        if (this.hasError())
+            return;
+        if (this.hasEnded()) {
+            this.seek(0);
+            this.playing.set(true);
+            return;
+        }
+        this.playing.update((p) => !p);
+    }
+    /** Seek to an absolute position (seconds, clamped to the duration). */
+    seek(seconds) {
+        const d = this.duration();
+        const target = Math.max(0, d > 0 ? Math.min(d, seconds) : seconds);
+        const video = this.videoRef()?.nativeElement;
+        if (video) {
+            video.currentTime = target;
+        }
+        this.currentTime.set(target);
+    }
+    /** Seek relative to the current position. */
+    seekBy(deltaSeconds) {
+        this.seek(this.currentTime() + deltaSeconds);
+    }
+    /** Rewind by `seekStep` seconds. */
+    skipBack() {
+        this.seekBy(-this.seekStep());
+    }
+    /** Toggle mute. Unmuting a zero volume restores it to 50 %. */
+    toggleMute() {
+        const nextMuted = !this.muted();
+        if (!nextMuted && this.volume() === 0) {
+            this.volume.set(0.5);
+        }
+        this.muted.set(nextMuted);
+    }
+    /** Set volume (0–1). A non-zero value also unmutes. */
+    setVolume(value) {
+        const v = Math.min(1, Math.max(0, value));
+        this.volume.set(v);
+        if (v > 0 && this.muted()) {
+            this.muted.set(false);
+        }
+    }
+    /** Set the playback rate and close the settings menu. */
+    setPlaybackRate(rate) {
+        this.playbackRate.set(rate);
+        this.closeSettings(true);
+    }
+    /** Toggle captions on the default text track. */
+    toggleCaptions() {
+        this.captionsEnabled.update((c) => !c);
+    }
+    /** Enter / exit fullscreen for the whole player (falls back to the native iOS player). */
+    async toggleFullscreen() {
+        if (!this.isBrowser)
+            return;
+        const root = this.rootRef()?.nativeElement;
+        const video = this.videoRef()?.nativeElement;
+        if (!root || !video)
+            return;
+        try {
+            if (document.fullscreenElement) {
+                await document.exitFullscreen();
+            }
+            else if (root.requestFullscreen) {
+                await root.requestFullscreen();
+            }
+            else {
+                // iOS Safari: no element fullscreen — use the native video fullscreen.
+                const legacy = video;
+                legacy.webkitEnterFullscreen?.();
+            }
+        }
+        catch {
+            // Fullscreen can be denied (iframe sandbox, user-gesture rules) — ignore.
+        }
+    }
+    /** Open / close the settings (playback speed) menu. */
+    toggleSettings() {
+        if (this.settingsOpen()) {
+            this.closeSettings(true);
+            return;
+        }
+        this.settingsOpen.set(true);
+        this.revealControls();
+        // Focus the checked item once the menu is rendered.
+        queueMicrotask(() => {
+            const menu = this.settingsMenuRef()?.nativeElement;
+            const target = menu?.querySelector('[aria-checked="true"]') ??
+                menu?.querySelector('[role="menuitemradio"]');
+            target?.focus();
+        });
+    }
+    /** Close the settings menu; optionally move focus back to its trigger. */
+    closeSettings(restoreFocus = false) {
+        if (!this.settingsOpen())
+            return;
+        this.settingsOpen.set(false);
+        if (restoreFocus) {
+            this.rootRef()
+                ?.nativeElement.querySelector(`#${this.uid}-settings-btn`)
+                ?.focus();
+        }
+        this.scheduleHide();
+    }
+    // ── <video> event handlers ──────────────────────────────────────────────────
+    onLoadedMetadata(video) {
+        this.duration.set(Number.isFinite(video.duration) ? video.duration : 0);
+        this.hasError.set(false);
+        if (!this.startTimeApplied) {
+            this.startTimeApplied = true;
+            const start = this.startTime() > 0 ? this.startTime() : this.currentTime();
+            if (start > 0) {
+                video.currentTime = Math.min(start, video.duration || start);
+            }
+        }
+        // Re-apply model values in case the effects ran before the element existed.
+        video.volume = Math.min(1, Math.max(0, this.volume()));
+        video.muted = this.muted();
+        video.playbackRate = this.playbackRate();
+        this.applyCaptionMode(video, this.captionsEnabled());
+        this.loadedMetadata.emit({ currentTime: video.currentTime, duration: video.duration });
+    }
+    onDurationChange(video) {
+        this.duration.set(Number.isFinite(video.duration) ? video.duration : 0);
+    }
+    onTimeUpdate(video) {
+        if (!this.isSeeking()) {
+            this.currentTime.set(video.currentTime);
+        }
+        this.timeUpdate.emit({ currentTime: video.currentTime, duration: video.duration });
+    }
+    onProgress(video) {
+        const ranges = video.buffered;
+        if (!ranges || ranges.length === 0)
+            return;
+        // Prefer the range containing the playhead, else the last one.
+        let end = ranges.end(ranges.length - 1);
+        for (let i = 0; i < ranges.length; i++) {
+            if (ranges.start(i) <= video.currentTime && video.currentTime <= ranges.end(i)) {
+                end = ranges.end(i);
+                break;
+            }
+        }
+        this.bufferedEnd.set(end);
+    }
+    onPlay() {
+        this.hasEnded.set(false);
+        this.hasStarted.set(true);
+        this.playing.set(true);
+        this.scheduleHide();
+    }
+    onPause() {
+        this.playing.set(false);
+        this.isBuffering.set(false);
+        this.revealControls(false);
+    }
+    onEnded() {
+        this.hasEnded.set(true);
+        this.playing.set(false);
+        this.revealControls(false);
+        this.playbackEnded.emit();
+    }
+    onWaiting() {
+        this.isBuffering.set(true);
+    }
+    onPlaying() {
+        this.isBuffering.set(false);
+    }
+    onSeeked(video) {
+        this.isBuffering.set(false);
+        if (this.hasEnded() && video.currentTime < video.duration) {
+            this.hasEnded.set(false);
+        }
+        this.seekEnd.emit({ currentTime: video.currentTime, duration: video.duration });
+    }
+    onVolumeChange(video) {
+        this.volume.set(video.volume);
+        this.muted.set(video.muted);
+    }
+    onRateChange(video) {
+        this.playbackRate.set(video.playbackRate);
+    }
+    onMediaError(video) {
+        // Ignore the spurious error fired when the element is reset with no source.
+        if (!video.currentSrc && this.sourceList().length === 0)
+            return;
+        this.hasError.set(true);
+        this.isBuffering.set(false);
+        this.playing.set(false);
+        this.playerError.emit({
+            code: 'media',
+            message: video.error?.message || 'Media error',
+            originalError: video.error ?? undefined,
+        });
+    }
+    // ── Stage interaction ───────────────────────────────────────────────────────
+    onStagePointerDown(event) {
+        this.lastPointerType = event.pointerType || 'mouse';
+    }
+    /** Click on the video surface: toggles play on mouse; on touch, first reveals the controls. */
+    onStageClick() {
+        if (this.settingsOpen()) {
+            this.closeSettings();
+            return;
+        }
+        if (this.lastPointerType === 'touch' && this.controlsHidden()) {
+            this.revealControls();
+            return;
+        }
+        this.togglePlay();
+    }
+    onStageDoubleClick() {
+        if (this.lastPointerType !== 'touch' && this.showFullscreen()) {
+            void this.toggleFullscreen();
+        }
+    }
+    /** Keyboard shortcuts on the player region. */
+    onRootKeydown(event) {
+        const target = event.target;
+        const root = this.rootRef()?.nativeElement;
+        if (event.key === 'Escape' && this.settingsOpen()) {
+            event.preventDefault();
+            this.closeSettings(true);
+            return;
+        }
+        // Let native controls (buttons, sliders, menu) handle their own keys.
+        const onInteractive = !!target &&
+            target !== root &&
+            (target.matches('button, input, [role="slider"], [role="menuitemradio"]') ||
+                !!target.closest('[role="menu"]'));
+        const nativeKey = event.key === ' ' ||
+            event.key === 'Enter' ||
+            event.key.startsWith('Arrow') ||
+            event.key === 'Home' ||
+            event.key === 'End';
+        if (onInteractive && nativeKey) {
+            this.revealControls();
+            return;
+        }
+        let handled = true;
+        switch (event.key) {
+            case ' ':
+            case 'k':
+            case 'K':
+                this.togglePlay();
+                break;
+            case 'ArrowLeft':
+            case 'j':
+            case 'J':
+                this.seekBy(-this.seekStep());
+                break;
+            case 'ArrowRight':
+            case 'l':
+            case 'L':
+                this.seekBy(this.seekStep());
+                break;
+            case 'ArrowUp':
+                if (this.showVolume())
+                    this.setVolume(this.volume() + 0.1);
+                break;
+            case 'ArrowDown':
+                if (this.showVolume())
+                    this.setVolume(this.volume() - 0.1);
+                break;
+            case 'Home':
+                this.seek(0);
+                break;
+            case 'End':
+                this.seek(this.duration());
+                break;
+            case 'm':
+            case 'M':
+                if (this.showVolume())
+                    this.toggleMute();
+                break;
+            case 'f':
+            case 'F':
+                if (this.showFullscreen())
+                    void this.toggleFullscreen();
+                break;
+            case 'c':
+            case 'C':
+                if (this.captionsButtonVisible())
+                    this.toggleCaptions();
+                break;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.revealControls();
+        }
+    }
+    // ── Progress / scrubbing ────────────────────────────────────────────────────
+    onProgressPointerDown(event) {
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        const bar = this.progressRef()?.nativeElement;
+        if (!bar || this.duration() <= 0)
+            return;
+        event.preventDefault();
+        bar.setPointerCapture(event.pointerId);
+        this.isSeeking.set(true);
+        this.seekToPointer(event, bar);
+    }
+    onProgressPointerMove(event) {
+        if (!this.isSeeking())
+            return;
+        this.seekToPointer(event, this.progressRef()?.nativeElement);
+    }
+    onProgressPointerUp(event) {
+        if (!this.isSeeking())
+            return;
+        const bar = this.progressRef()?.nativeElement;
+        if (bar?.hasPointerCapture(event.pointerId)) {
+            bar.releasePointerCapture(event.pointerId);
+        }
+        this.seekToPointer(event, bar);
+        this.isSeeking.set(false);
+        this.scheduleHide();
+    }
+    onProgressKeydown(event) {
+        const d = this.duration();
+        if (d <= 0)
+            return;
+        let handled = true;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this.seekBy(-this.seekStep());
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this.seekBy(this.seekStep());
+                break;
+            case 'PageDown':
+                this.seekBy(-d * 0.1);
+                break;
+            case 'PageUp':
+                this.seekBy(d * 0.1);
+                break;
+            case 'Home':
+                this.seek(0);
+                break;
+            case 'End':
+                this.seek(d);
+                break;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.revealControls();
+        }
+    }
+    seekToPointer(event, bar) {
+        if (!bar)
+            return;
+        const rect = bar.getBoundingClientRect();
+        if (rect.width <= 0)
+            return;
+        const fraction = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        this.seek(fraction * this.duration());
+    }
+    // ── Volume slider ───────────────────────────────────────────────────────────
+    onVolumeInput(event) {
+        const value = Number(event.target.value);
+        this.setVolume(value / 100);
+    }
+    // ── Settings menu ───────────────────────────────────────────────────────────
+    onSettingsMenuKeydown(event) {
+        const menu = this.settingsMenuRef()?.nativeElement;
+        if (!menu)
+            return;
+        const items = Array.from(menu.querySelectorAll('[role="menuitemradio"]'));
+        if (items.length === 0)
+            return;
+        const index = items.indexOf(document.activeElement);
+        let next;
+        switch (event.key) {
+            case 'ArrowDown':
+                next = (index + 1) % items.length;
+                break;
+            case 'ArrowUp':
+                next = (index - 1 + items.length) % items.length;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = items.length - 1;
+                break;
+            case 'Tab':
+                this.closeSettings();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        items[next]?.focus();
+    }
+    onRootFocusOut(event) {
+        const root = this.rootRef()?.nativeElement;
+        const next = event.relatedTarget;
+        if (this.settingsOpen() && root && (!next || !root.contains(next))) {
+            this.closeSettings();
+        }
+    }
+    onDocumentFullscreenChange() {
+        if (!this.isBrowser)
+            return;
+        const root = this.rootRef()?.nativeElement;
+        const active = !!root && document.fullscreenElement === root;
+        if (active !== this.isFullscreen()) {
+            this.isFullscreen.set(active);
+            this.fullscreenChange.emit(active);
+        }
+    }
+    onDocumentPointerDown(event) {
+        if (!this.settingsOpen())
+            return;
+        const root = this.rootRef()?.nativeElement;
+        const menu = this.settingsMenuRef()?.nativeElement;
+        const target = event.target;
+        const settingsBtn = root?.querySelector(`#${this.uid}-settings-btn`);
+        if (!menu?.contains(target) && !settingsBtn?.contains(target)) {
+            this.closeSettings();
+        }
+    }
+    // ── Controls visibility ─────────────────────────────────────────────────────
+    /** Show the controls and (if playing) restart the idle timer. */
+    revealControls(reschedule = true) {
+        if (!this.controlsVisible()) {
+            this.controlsVisible.set(true);
+        }
+        if (reschedule) {
+            this.scheduleHide();
+        }
+        else {
+            this.clearHideTimer();
+        }
+    }
+    scheduleHide(delay = IDLE_HIDE_DELAY_MS) {
+        this.clearHideTimer();
+        if (!this.isBrowser || !this.playing())
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.hideTimer = setTimeout(() => {
+                this.hideTimer = null;
+                if (!this.playing() || this.settingsOpen() || this.isSeeking())
+                    return;
+                // Keep controls visible while a control (not the root itself) has focus.
+                const root = this.rootRef()?.nativeElement;
+                const active = document.activeElement;
+                if (root && active && active !== root && root.contains(active))
+                    return;
+                this.zone.run(() => this.controlsVisible.set(false));
+            }, delay);
+        });
+    }
+    clearHideTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    /**
+     * High-frequency pointer listeners are registered outside the Angular zone so
+     * mouse movement over the stage doesn't trigger change detection; we only
+     * re-enter the zone when the visibility state actually flips.
+     */
+    attachIdleListeners() {
+        const root = this.rootRef()?.nativeElement;
+        if (!root)
+            return;
+        this.zone.runOutsideAngular(() => {
+            const onMove = () => {
+                if (this.controlsVisible()) {
+                    this.scheduleHide();
+                }
+                else {
+                    this.zone.run(() => this.revealControls());
+                }
+            };
+            const onLeave = () => {
+                if (this.playing())
+                    this.scheduleHide(LEAVE_HIDE_DELAY_MS);
+            };
+            root.addEventListener('pointermove', onMove, { passive: true });
+            root.addEventListener('pointerleave', onLeave, { passive: true });
+            this.destroyRef.onDestroy(() => {
+                root.removeEventListener('pointermove', onMove);
+                root.removeEventListener('pointerleave', onLeave);
+            });
+        });
+    }
+    // ── Helpers ─────────────────────────────────────────────────────────────────
+    safePlay(video) {
+        if (this.pendingPlay)
+            return;
+        const attempt = video.play();
+        if (!attempt || typeof attempt.then !== 'function')
+            return;
+        this.pendingPlay = attempt
+            .catch((err) => {
+            this.playing.set(false);
+            this.playerError.emit({
+                code: 'play-rejected',
+                message: err instanceof Error ? err.message : 'Playback was rejected',
+                originalError: err,
+            });
+        })
+            .finally(() => {
+            this.pendingPlay = null;
+        });
+    }
+    applyCaptionMode(video, enabled) {
+        const list = video.textTracks;
+        if (!list || list.length === 0)
+            return;
+        const configured = this.tracks();
+        const defaultIndex = Math.max(0, configured.findIndex((t) => t.default));
+        for (let i = 0; i < list.length; i++) {
+            const track = list[i];
+            if (track.kind !== 'captions' && track.kind !== 'subtitles')
+                continue;
+            track.mode = enabled && i === defaultIndex ? 'showing' : 'hidden';
+        }
+    }
+    resetForNewSource(video) {
+        this.hasError.set(false);
+        this.hasEnded.set(false);
+        this.hasStarted.set(false);
+        this.isBuffering.set(false);
+        this.bufferedEnd.set(0);
+        this.duration.set(0);
+        this.startTimeApplied = false;
+        // Adopt the new source's start position straight away (it is re-applied for
+        // real once metadata lands) so consumers driving `src` + `startTime`
+        // together — a course player switching lessons — never flash 0:00.
+        this.currentTime.set(Math.max(0, this.startTime()));
+        video.load();
+        if (this.playing()) {
+            this.safePlay(video);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: VideoPlayerComponent, isStandalone: true, selector: "pecb-video-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, tracks: { classPropertyName: "tracks", publicName: "tracks", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, playsInline: { classPropertyName: "playsInline", publicName: "playsInline", isSignal: true, isRequired: false, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, watermark: { classPropertyName: "watermark", publicName: "watermark", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, showCenterButton: { classPropertyName: "showCenterButton", publicName: "showCenterButton", isSignal: true, isRequired: false, transformFunction: null }, showSkipBack: { classPropertyName: "showSkipBack", publicName: "showSkipBack", isSignal: true, isRequired: false, transformFunction: null }, showVolume: { classPropertyName: "showVolume", publicName: "showVolume", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showCaptions: { classPropertyName: "showCaptions", publicName: "showCaptions", isSignal: true, isRequired: false, transformFunction: null }, showSettings: { classPropertyName: "showSettings", publicName: "showSettings", isSignal: true, isRequired: false, transformFunction: null }, showFullscreen: { classPropertyName: "showFullscreen", publicName: "showFullscreen", isSignal: true, isRequired: false, transformFunction: null }, seekStep: { classPropertyName: "seekStep", publicName: "seekStep", isSignal: true, isRequired: false, transformFunction: null }, playbackRates: { classPropertyName: "playbackRates", publicName: "playbackRates", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, playing: { classPropertyName: "playing", publicName: "playing", isSignal: true, isRequired: false, transformFunction: null }, currentTime: { classPropertyName: "currentTime", publicName: "currentTime", isSignal: true, isRequired: false, transformFunction: null }, volume: { classPropertyName: "volume", publicName: "volume", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, playbackRate: { classPropertyName: "playbackRate", publicName: "playbackRate", isSignal: true, isRequired: false, transformFunction: null }, captionsEnabled: { classPropertyName: "captionsEnabled", publicName: "captionsEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playing: "playingChange", currentTime: "currentTimeChange", volume: "volumeChange", muted: "mutedChange", playbackRate: "playbackRateChange", captionsEnabled: "captionsEnabledChange", timeUpdate: "timeUpdate", loadedMetadata: "loadedMetadata", seekEnd: "seekEnd", playbackEnded: "playbackEnded", fullscreenChange: "fullscreenChange", playerError: "playerError" }, host: { listeners: { "document:fullscreenchange": "onDocumentFullscreenChange()", "document:pointerdown": "onDocumentPointerDown($event)" }, properties: { "attr.title": "null", "style.--pecb-video-aspect-ratio": "aspectRatio()" }, classAttribute: "pecb-video-player-host" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, isSignal: true }, { propertyName: "progressRef", first: true, predicate: ["progress"], descendants: true, isSignal: true }, { propertyName: "settingsMenuRef", first: true, predicate: ["settingsMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #root\n  [class]=\"hostClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"regionLabel()\"\n  aria-roledescription=\"video player\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n  (focusout)=\"onRootFocusOut($event)\"\n>\n  <!-- \u2500\u2500 Media \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <video\n    #video\n    class=\"pecb-video-player__media\"\n    [attr.src]=\"singleSrc() ?? null\"\n    [attr.poster]=\"poster() ?? null\"\n    [attr.preload]=\"preload()\"\n    [attr.crossorigin]=\"crossOrigin() ?? null\"\n    [attr.playsinline]=\"playsInline() ? '' : null\"\n    [attr.webkit-playsinline]=\"playsInline() ? '' : null\"\n    [attr.autoplay]=\"autoplay() ? '' : null\"\n    [attr.loop]=\"loop() ? '' : null\"\n    [attr.aria-label]=\"title() ?? null\"\n    (loadedmetadata)=\"onLoadedMetadata(video)\"\n    (durationchange)=\"onDurationChange(video)\"\n    (timeupdate)=\"onTimeUpdate(video)\"\n    (progress)=\"onProgress(video)\"\n    (play)=\"onPlay()\"\n    (pause)=\"onPause()\"\n    (ended)=\"onEnded()\"\n    (waiting)=\"onWaiting()\"\n    (playing)=\"onPlaying()\"\n    (seeked)=\"onSeeked(video)\"\n    (volumechange)=\"onVolumeChange(video)\"\n    (ratechange)=\"onRateChange(video)\"\n    (error)=\"onMediaError(video)\"\n    (pointerdown)=\"onStagePointerDown($event)\"\n    (click)=\"onStageClick()\"\n    (dblclick)=\"onStageDoubleClick()\"\n  >\n    @if (!singleSrc()) {\n      @for (s of sourceList(); track s.src) {\n        <source [attr.src]=\"s.src\" [attr.type]=\"s.type ?? null\" [attr.media]=\"s.media ?? null\" />\n      }\n    }\n    @for (t of tracks(); track t.src) {\n      <track\n        [attr.src]=\"t.src\"\n        [attr.kind]=\"t.kind ?? 'captions'\"\n        [attr.srclang]=\"t.srclang\"\n        [attr.label]=\"t.label ?? null\"\n        [attr.default]=\"t.default ? '' : null\"\n      />\n    }\n  </video>\n\n  <!-- \u2500\u2500 Gradient scrim + branding \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-video-player__scrim\" aria-hidden=\"true\"></div>\n\n  @if (watermark()) {\n    <div class=\"pecb-video-player__watermark\" aria-hidden=\"true\">{{ watermark() }}</div>\n  }\n  @if (label()) {\n    <div class=\"pecb-video-player__label\" aria-hidden=\"true\">{{ label() }}</div>\n  }\n\n  <!-- Custom overlays (quizzes, end screens\u2026) projected by the consumer -->\n  <ng-content select=\"[pecbVideoOverlay]\"></ng-content>\n\n  <!-- \u2500\u2500 Centre state: error / buffering / play-pause \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (hasError()) {\n    <div class=\"pecb-video-player__error\" role=\"alert\">\n      <svg class=\"pecb-video-player__error-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"M12 8v4.5\" />\n        <circle cx=\"12\" cy=\"16\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n      </svg>\n      <span>{{ text().error }}</span>\n    </div>\n  } @else if (isBuffering() && playing()) {\n    <div class=\"pecb-video-player__spinner\" aria-hidden=\"true\"></div>\n  } @else if (showCenterButton()) {\n    <button\n      type=\"button\"\n      class=\"pecb-video-player__center\"\n      [attr.aria-label]=\"hasEnded() ? text().replay : playing() ? text().pause : text().play\"\n      (click)=\"togglePlay()\"\n    >\n      @if (hasEnded()) {\n        <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M3 12a9 9 0 1 0 3-6.7\" />\n          <path d=\"M3 4v5h5\" />\n        </svg>\n      } @else if (playing()) {\n        <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n          <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n        </svg>\n      } @else {\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n          <polygon points=\"6 4 20 12 6 20 6 4\" />\n        </svg>\n      }\n    </button>\n  }\n\n  <!-- \u2500\u2500 Control bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-video-player__controls\" [attr.aria-hidden]=\"controlsHidden() ? 'true' : null\">\n    <!-- Progress / seek bar -->\n    <div\n      #progress\n      class=\"pecb-video-player__progress\"\n      role=\"slider\"\n      [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n      [attr.aria-label]=\"text().seek\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"duration()\"\n      [attr.aria-valuenow]=\"currentTime()\"\n      [attr.aria-valuetext]=\"currentTimeLabel() + ' / ' + durationLabel()\"\n      [attr.aria-disabled]=\"duration() > 0 ? null : 'true'\"\n      (pointerdown)=\"onProgressPointerDown($event)\"\n      (pointermove)=\"onProgressPointerMove($event)\"\n      (pointerup)=\"onProgressPointerUp($event)\"\n      (pointercancel)=\"onProgressPointerUp($event)\"\n      (keydown)=\"onProgressKeydown($event)\"\n    >\n      <div class=\"pecb-video-player__track\">\n        <span class=\"pecb-video-player__buffered\" [style.width.%]=\"bufferedPct()\"></span>\n        <span class=\"pecb-video-player__fill\" [style.width.%]=\"progressPct()\"></span>\n        <span class=\"pecb-video-player__knob\" [style.left.%]=\"progressPct()\"></span>\n      </div>\n    </div>\n\n    <!-- Buttons row -->\n    <div class=\"pecb-video-player__bar\">\n      <button\n        type=\"button\"\n        class=\"pecb-video-player__btn\"\n        [attr.aria-label]=\"hasEnded() ? text().replay : playing() ? text().pause : text().play\"\n        [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n        (click)=\"togglePlay()\"\n      >\n        @if (playing()) {\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n            <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n            <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n            <polygon points=\"6 4 20 12 6 20 6 4\" />\n          </svg>\n        }\n      </button>\n\n      @if (showSkipBack()) {\n        <button\n          type=\"button\"\n          class=\"pecb-video-player__btn\"\n          [attr.aria-label]=\"skipBackLabel()\"\n          [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n          (click)=\"skipBack()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <polygon points=\"19 5 9 12 19 19 19 5\" fill=\"currentColor\" stroke=\"none\" />\n            <line x1=\"6\" y1=\"5\" x2=\"6\" y2=\"19\" />\n          </svg>\n        </button>\n      }\n\n      @if (showVolume()) {\n        <div class=\"pecb-video-player__volume\">\n          <button\n            type=\"button\"\n            class=\"pecb-video-player__btn\"\n            [attr.aria-label]=\"muted() ? text().unmute : text().mute\"\n            [attr.aria-pressed]=\"muted()\"\n            [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n            (click)=\"toggleMute()\"\n          >\n            @switch (volumeLevel()) {\n              @case ('muted') {\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polygon points=\"4 9 8 9 12 5 12 19 8 15 4 15 4 9\" fill=\"currentColor\" stroke=\"none\" />\n                  <path d=\"m16 9.5 5 5M21 9.5l-5 5\" />\n                </svg>\n              }\n              @case ('low') {\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polygon points=\"4 9 8 9 12 5 12 19 8 15 4 15 4 9\" fill=\"currentColor\" stroke=\"none\" />\n                  <path d=\"M16 9a4 4 0 0 1 0 6\" />\n                </svg>\n              }\n              @default {\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polygon points=\"4 9 8 9 12 5 12 19 8 15 4 15 4 9\" fill=\"currentColor\" stroke=\"none\" />\n                  <path d=\"M16 9a4 4 0 0 1 0 6\" />\n                  <path d=\"M18.5 6.5a8 8 0 0 1 0 11\" />\n                </svg>\n              }\n            }\n          </button>\n          <input\n            class=\"pecb-video-player__volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            step=\"1\"\n            [value]=\"volumePct()\"\n            [attr.aria-label]=\"text().volume\"\n            [attr.aria-valuetext]=\"volumePct() + '%'\"\n            [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n            [style.--pecb-video-volume-pct]=\"volumePct() + '%'\"\n            (input)=\"onVolumeInput($event)\"\n          />\n        </div>\n      }\n\n      @if (showTime()) {\n        <span class=\"pecb-video-player__time\" aria-live=\"off\">\n          <span class=\"pecb-video-player__time-current\">{{ currentTimeLabel() }}</span>\n          <span class=\"pecb-video-player__time-sep\" aria-hidden=\"true\"> / </span>\n          <span class=\"pecb-video-player__time-total\">{{ durationLabel() }}</span>\n        </span>\n      }\n\n      <div class=\"pecb-video-player__spacer\"></div>\n\n      @if (captionsButtonVisible()) {\n        <button\n          type=\"button\"\n          class=\"pecb-video-player__btn\"\n          [class.pecb-video-player__btn--active]=\"captionsEnabled()\"\n          [attr.aria-label]=\"captionsEnabled() ? text().captionsOff : text().captionsOn\"\n          [attr.aria-pressed]=\"captionsEnabled()\"\n          [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n          (click)=\"toggleCaptions()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n            <path d=\"M10 10a2 2 0 1 0 0 4M17 10a2 2 0 1 0 0 4\" />\n          </svg>\n        </button>\n      }\n\n      @if (showSettings()) {\n        <div class=\"pecb-video-player__settings\">\n          <button\n            type=\"button\"\n            class=\"pecb-video-player__btn\"\n            [id]=\"uid + '-settings-btn'\"\n            [class.pecb-video-player__btn--active]=\"settingsOpen()\"\n            [attr.aria-label]=\"text().settings\"\n            aria-haspopup=\"menu\"\n            [attr.aria-expanded]=\"settingsOpen()\"\n            [attr.aria-controls]=\"uid + '-settings-menu'\"\n            [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n            (click)=\"toggleSettings()\"\n          >\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"3\" />\n              <path d=\"M19.4 13.5a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.2A1.6 1.6 0 0 0 6.6 19l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 13.5H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1.1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9.6A1.6 1.6 0 0 0 10.6 3V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8v.1a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z\" />\n            </svg>\n          </button>\n\n          @if (settingsOpen()) {\n            <div\n              #settingsMenu\n              class=\"pecb-video-player__menu\"\n              role=\"menu\"\n              [id]=\"uid + '-settings-menu'\"\n              [attr.aria-label]=\"text().playbackSpeed\"\n              (keydown)=\"onSettingsMenuKeydown($event)\"\n            >\n              <div class=\"pecb-video-player__menu-title\">{{ text().playbackSpeed }}</div>\n              @for (rate of playbackRates(); track rate) {\n                <button\n                  type=\"button\"\n                  class=\"pecb-video-player__menu-item\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"rate === playbackRate()\"\n                  tabindex=\"-1\"\n                  (click)=\"setPlaybackRate(rate)\"\n                >\n                  <span class=\"pecb-video-player__menu-check\" aria-hidden=\"true\">\n                    @if (rate === playbackRate()) {\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"20 6 9 17 4 12\" />\n                      </svg>\n                    }\n                  </span>\n                  <span>{{ rate === 1 ? text().normalSpeed : rate + '\u00D7' }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showFullscreen()) {\n        <button\n          type=\"button\"\n          class=\"pecb-video-player__btn\"\n          [attr.aria-label]=\"isFullscreen() ? text().exitFullscreen : text().enterFullscreen\"\n          [attr.aria-pressed]=\"isFullscreen()\"\n          [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n          (click)=\"toggleFullscreen()\"\n        >\n          @if (isFullscreen()) {\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m13-5h-3a2 2 0 0 0-2 2v3\" />\n            </svg>\n          } @else {\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m13-5v3a2 2 0 0 1-2 2h-3\" />\n            </svg>\n          }\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;container-type:inline-size;container-name:pecb-video-player;--pecb-video-radius: 12px;--pecb-video-bg: #0b0b0d;--pecb-video-accent: #ffffff;--pecb-video-controls-color: rgba(255, 255, 255, .92);--pecb-video-font-display: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;--pecb-video-font-body: \"Inter\", Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;--pecb-video-focus-ring: #ffffff}.pecb-video-player{position:relative;width:100%;aspect-ratio:var(--pecb-video-aspect-ratio, 16/9);max-height:100%;background:var(--pecb-video-bg);border-radius:var(--pecb-video-radius);overflow:hidden;color:var(--pecb-video-controls-color);font-family:var(--pecb-video-font-display);outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.pecb-video-player:focus-visible{box-shadow:0 0 0 2px var(--pecb-video-bg),0 0 0 4px var(--pecb-video-focus-ring)}.pecb-video-player__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--pecb-video-bg);display:block;cursor:pointer}.pecb-video-player__media::cue{font-family:var(--pecb-video-font-body);font-size:.95em;background:#0009}.pecb-video-player__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0000001f,#0000 30% 60%,#0000008c)}.pecb-video-player__watermark,.pecb-video-player__label{position:absolute;bottom:64px;pointer-events:none;font-family:var(--pecb-video-font-display);font-weight:800;color:#ffffffeb;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.25);transition:opacity .22s ease}.pecb-video-player__watermark{left:24px;font-size:22px;letter-spacing:.04em}.pecb-video-player__label{right:24px;font-size:26px;letter-spacing:.05em;text-transform:uppercase}.pecb-video-player__center{padding:0;border:none;background:none;font:inherit;color:inherit;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#1414168c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease-in-out,transform .15s ease-in-out,opacity .22s ease}.pecb-video-player__center:focus{outline:none}.pecb-video-player__center:hover{background:#141416b8}.pecb-video-player__center:active{transform:translate(-50%,-50%) scale(.96)}.pecb-video-player__center:focus-visible{outline:2px solid var(--pecb-video-focus-ring);outline-offset:2px}.pecb-video-player__center svg polygon{transform:translate(1px)}.pecb-video-player__spinner{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:pecb-video-spin .9s linear infinite;pointer-events:none}.pecb-video-player__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;font-family:var(--pecb-video-font-body);font-size:14px;color:#ffffffd9;background:#00000073}.pecb-video-player__error-icon{width:36px;height:36px;opacity:.9}.pecb-video-player__controls{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;background:linear-gradient(0deg,#0009,#0000);transition:opacity .22s ease,transform .22s ease}.pecb-video-player__progress{position:relative;padding:6px 0;margin:-6px 0;cursor:pointer;touch-action:none;border-radius:6px;outline:none}.pecb-video-player__progress[aria-disabled=true]{cursor:default}.pecb-video-player__progress:focus-visible .pecb-video-player__track{box-shadow:0 0 0 2px #0009,0 0 0 4px var(--pecb-video-focus-ring)}.pecb-video-player__progress:hover .pecb-video-player__knob,.pecb-video-player__progress:focus-visible .pecb-video-player__knob{transform:translate(-50%,-50%) scale(1.15)}.pecb-video-player__track{position:relative;height:4px;border-radius:4px;background:#ffffff47;overflow:visible}.pecb-video-player__buffered,.pecb-video-player__fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;pointer-events:none}.pecb-video-player__buffered{background:#ffffff38}.pecb-video-player__fill{background:var(--pecb-video-accent)}.pecb-video-player__knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--pecb-video-accent);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 3px #00000059;transition:transform .15s ease-in-out}.pecb-video-player__bar{display:flex;align-items:center;gap:6px;color:var(--pecb-video-controls-color);min-height:28px}.pecb-video-player__btn{padding:0;border:none;background:none;font:inherit;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:inherit;opacity:.92;cursor:pointer;transition:opacity .15s ease-in-out,background .15s ease-in-out}.pecb-video-player__btn:focus{outline:none}.pecb-video-player__btn:hover{opacity:1;background:#ffffff1a}.pecb-video-player__btn:focus-visible{opacity:1;outline:2px solid var(--pecb-video-focus-ring);outline-offset:1px}.pecb-video-player__btn--active{opacity:1;position:relative}.pecb-video-player__btn--active:after{content:\"\";position:absolute;left:8px;right:8px;bottom:2px;height:2px;border-radius:2px;background:var(--pecb-video-accent)}.pecb-video-player__btn svg{display:block;flex:0 0 auto}.pecb-video-player__spacer{flex:1 1 auto;min-width:0}.pecb-video-player__time{font-family:var(--pecb-video-font-body);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:4px;opacity:.95}.pecb-video-player__volume{display:flex;align-items:center;flex:0 0 auto}.pecb-video-player__volume-slider{width:0;opacity:0;margin:0;height:28px;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;transition:width .15s ease-in-out,opacity .15s ease-in-out,margin .15s ease-in-out}.pecb-video-player__volume-slider:focus-visible{outline:2px solid var(--pecb-video-focus-ring);outline-offset:1px;border-radius:6px}.pecb-video-player__volume-slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--pecb-video-accent) 0 var(--pecb-video-volume-pct, 100%),rgba(255,255,255,.28) var(--pecb-video-volume-pct, 100%) 100%)}.pecb-video-player__volume-slider::-moz-range-track{height:4px;border-radius:4px;background:#ffffff47}.pecb-video-player__volume-slider::-moz-range-progress{height:4px;border-radius:4px;background:var(--pecb-video-accent)}.pecb-video-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-3.5px;border-radius:50%;border:none;background:var(--pecb-video-accent)}.pecb-video-player__volume-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:none;background:var(--pecb-video-accent)}.pecb-video-player__volume:hover .pecb-video-player__volume-slider,.pecb-video-player__volume:focus-within .pecb-video-player__volume-slider{width:72px;opacity:1;margin-left:4px;margin-right:6px}.pecb-video-player__settings{position:relative;flex:0 0 auto}.pecb-video-player__menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:168px;padding:6px;border-radius:8px;background:#18181bf5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;color:#fff;z-index:2;font-family:var(--pecb-video-font-body);animation:pecb-video-menu-in .14s ease-out}.pecb-video-player__menu-title{padding:6px 10px 8px;font-size:12px;font-weight:500;color:#fff9;letter-spacing:.02em}.pecb-video-player__menu-item{border:none;background:none;font:inherit;display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;font-size:13px;font-weight:500;color:inherit;text-align:left;cursor:pointer}.pecb-video-player__menu-item:focus{outline:none}.pecb-video-player__menu-item:hover,.pecb-video-player__menu-item:focus-visible{background:#ffffff1a;outline:none}.pecb-video-player__menu-item[aria-checked=true]{font-weight:700}.pecb-video-player__menu-check{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pecb-video-player--idle,.pecb-video-player--idle .pecb-video-player__media{cursor:none}.pecb-video-player--idle .pecb-video-player__controls,.pecb-video-player--idle .pecb-video-player__center{opacity:0;pointer-events:none}.pecb-video-player--idle .pecb-video-player__controls{transform:translateY(6px)}.pecb-video-player--fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;max-height:none}.pecb-video-player--fullscreen .pecb-video-player__media{object-fit:contain}.pecb-video-player--error .pecb-video-player__media{cursor:default}@container pecb-video-player (max-width: 640px){.pecb-video-player__watermark,.pecb-video-player__label{bottom:56px}.pecb-video-player__watermark{left:16px;font-size:17px}.pecb-video-player__label{right:16px;font-size:20px}.pecb-video-player__center{width:54px;height:54px}.pecb-video-player__center svg{width:22px;height:22px}.pecb-video-player__controls{padding:8px 12px 10px;gap:6px}.pecb-video-player__bar{gap:4px}.pecb-video-player__time{font-size:11.5px}.pecb-video-player__volume:hover .pecb-video-player__volume-slider,.pecb-video-player__volume:focus-within .pecb-video-player__volume-slider{width:56px}}@container pecb-video-player (max-width: 400px){.pecb-video-player__watermark,.pecb-video-player__label{bottom:50px}.pecb-video-player__watermark{font-size:14px}.pecb-video-player__label{font-size:16px}.pecb-video-player__center{width:46px;height:46px}.pecb-video-player__center svg{width:19px;height:19px}.pecb-video-player__bar{gap:2px}.pecb-video-player__time{font-size:11px;margin-left:2px}.pecb-video-player__time-sep,.pecb-video-player__time-total{display:none}.pecb-video-player__menu{min-width:148px}}@media (hover: none) and (pointer: coarse){.pecb-video-player__volume-slider{display:none}}@media (prefers-reduced-motion: reduce){.pecb-video-player,.pecb-video-player *,.pecb-video-player *:before,.pecb-video-player *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.pecb-video-player__spinner{animation:none;border-top-color:#ffffff40}}@keyframes pecb-video-spin{to{transform:rotate(360deg)}}@keyframes pecb-video-menu-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VideoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pecb-video-player', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'pecb-video-player-host',
+                        // `title` is a component input — keep it off the host so the browser doesn't
+                        // show a native tooltip over the whole stage.
+                        '[attr.title]': 'null',
+                        '[style.--pecb-video-aspect-ratio]': 'aspectRatio()',
+                        '(document:fullscreenchange)': 'onDocumentFullscreenChange()',
+                        '(document:pointerdown)': 'onDocumentPointerDown($event)',
+                    }, template: "<div\n  #root\n  [class]=\"hostClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"regionLabel()\"\n  aria-roledescription=\"video player\"\n  tabindex=\"0\"\n  (keydown)=\"onRootKeydown($event)\"\n  (focusout)=\"onRootFocusOut($event)\"\n>\n  <!-- \u2500\u2500 Media \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <video\n    #video\n    class=\"pecb-video-player__media\"\n    [attr.src]=\"singleSrc() ?? null\"\n    [attr.poster]=\"poster() ?? null\"\n    [attr.preload]=\"preload()\"\n    [attr.crossorigin]=\"crossOrigin() ?? null\"\n    [attr.playsinline]=\"playsInline() ? '' : null\"\n    [attr.webkit-playsinline]=\"playsInline() ? '' : null\"\n    [attr.autoplay]=\"autoplay() ? '' : null\"\n    [attr.loop]=\"loop() ? '' : null\"\n    [attr.aria-label]=\"title() ?? null\"\n    (loadedmetadata)=\"onLoadedMetadata(video)\"\n    (durationchange)=\"onDurationChange(video)\"\n    (timeupdate)=\"onTimeUpdate(video)\"\n    (progress)=\"onProgress(video)\"\n    (play)=\"onPlay()\"\n    (pause)=\"onPause()\"\n    (ended)=\"onEnded()\"\n    (waiting)=\"onWaiting()\"\n    (playing)=\"onPlaying()\"\n    (seeked)=\"onSeeked(video)\"\n    (volumechange)=\"onVolumeChange(video)\"\n    (ratechange)=\"onRateChange(video)\"\n    (error)=\"onMediaError(video)\"\n    (pointerdown)=\"onStagePointerDown($event)\"\n    (click)=\"onStageClick()\"\n    (dblclick)=\"onStageDoubleClick()\"\n  >\n    @if (!singleSrc()) {\n      @for (s of sourceList(); track s.src) {\n        <source [attr.src]=\"s.src\" [attr.type]=\"s.type ?? null\" [attr.media]=\"s.media ?? null\" />\n      }\n    }\n    @for (t of tracks(); track t.src) {\n      <track\n        [attr.src]=\"t.src\"\n        [attr.kind]=\"t.kind ?? 'captions'\"\n        [attr.srclang]=\"t.srclang\"\n        [attr.label]=\"t.label ?? null\"\n        [attr.default]=\"t.default ? '' : null\"\n      />\n    }\n  </video>\n\n  <!-- \u2500\u2500 Gradient scrim + branding \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-video-player__scrim\" aria-hidden=\"true\"></div>\n\n  @if (watermark()) {\n    <div class=\"pecb-video-player__watermark\" aria-hidden=\"true\">{{ watermark() }}</div>\n  }\n  @if (label()) {\n    <div class=\"pecb-video-player__label\" aria-hidden=\"true\">{{ label() }}</div>\n  }\n\n  <!-- Custom overlays (quizzes, end screens\u2026) projected by the consumer -->\n  <ng-content select=\"[pecbVideoOverlay]\"></ng-content>\n\n  <!-- \u2500\u2500 Centre state: error / buffering / play-pause \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (hasError()) {\n    <div class=\"pecb-video-player__error\" role=\"alert\">\n      <svg class=\"pecb-video-player__error-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"M12 8v4.5\" />\n        <circle cx=\"12\" cy=\"16\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n      </svg>\n      <span>{{ text().error }}</span>\n    </div>\n  } @else if (isBuffering() && playing()) {\n    <div class=\"pecb-video-player__spinner\" aria-hidden=\"true\"></div>\n  } @else if (showCenterButton()) {\n    <button\n      type=\"button\"\n      class=\"pecb-video-player__center\"\n      [attr.aria-label]=\"hasEnded() ? text().replay : playing() ? text().pause : text().play\"\n      (click)=\"togglePlay()\"\n    >\n      @if (hasEnded()) {\n        <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M3 12a9 9 0 1 0 3-6.7\" />\n          <path d=\"M3 4v5h5\" />\n        </svg>\n      } @else if (playing()) {\n        <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n          <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n        </svg>\n      } @else {\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n          <polygon points=\"6 4 20 12 6 20 6 4\" />\n        </svg>\n      }\n    </button>\n  }\n\n  <!-- \u2500\u2500 Control bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-video-player__controls\" [attr.aria-hidden]=\"controlsHidden() ? 'true' : null\">\n    <!-- Progress / seek bar -->\n    <div\n      #progress\n      class=\"pecb-video-player__progress\"\n      role=\"slider\"\n      [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n      [attr.aria-label]=\"text().seek\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"duration()\"\n      [attr.aria-valuenow]=\"currentTime()\"\n      [attr.aria-valuetext]=\"currentTimeLabel() + ' / ' + durationLabel()\"\n      [attr.aria-disabled]=\"duration() > 0 ? null : 'true'\"\n      (pointerdown)=\"onProgressPointerDown($event)\"\n      (pointermove)=\"onProgressPointerMove($event)\"\n      (pointerup)=\"onProgressPointerUp($event)\"\n      (pointercancel)=\"onProgressPointerUp($event)\"\n      (keydown)=\"onProgressKeydown($event)\"\n    >\n      <div class=\"pecb-video-player__track\">\n        <span class=\"pecb-video-player__buffered\" [style.width.%]=\"bufferedPct()\"></span>\n        <span class=\"pecb-video-player__fill\" [style.width.%]=\"progressPct()\"></span>\n        <span class=\"pecb-video-player__knob\" [style.left.%]=\"progressPct()\"></span>\n      </div>\n    </div>\n\n    <!-- Buttons row -->\n    <div class=\"pecb-video-player__bar\">\n      <button\n        type=\"button\"\n        class=\"pecb-video-player__btn\"\n        [attr.aria-label]=\"hasEnded() ? text().replay : playing() ? text().pause : text().play\"\n        [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n        (click)=\"togglePlay()\"\n      >\n        @if (playing()) {\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n            <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n            <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n            <polygon points=\"6 4 20 12 6 20 6 4\" />\n          </svg>\n        }\n      </button>\n\n      @if (showSkipBack()) {\n        <button\n          type=\"button\"\n          class=\"pecb-video-player__btn\"\n          [attr.aria-label]=\"skipBackLabel()\"\n          [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n          (click)=\"skipBack()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <polygon points=\"19 5 9 12 19 19 19 5\" fill=\"currentColor\" stroke=\"none\" />\n            <line x1=\"6\" y1=\"5\" x2=\"6\" y2=\"19\" />\n          </svg>\n        </button>\n      }\n\n      @if (showVolume()) {\n        <div class=\"pecb-video-player__volume\">\n          <button\n            type=\"button\"\n            class=\"pecb-video-player__btn\"\n            [attr.aria-label]=\"muted() ? text().unmute : text().mute\"\n            [attr.aria-pressed]=\"muted()\"\n            [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n            (click)=\"toggleMute()\"\n          >\n            @switch (volumeLevel()) {\n              @case ('muted') {\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polygon points=\"4 9 8 9 12 5 12 19 8 15 4 15 4 9\" fill=\"currentColor\" stroke=\"none\" />\n                  <path d=\"m16 9.5 5 5M21 9.5l-5 5\" />\n                </svg>\n              }\n              @case ('low') {\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polygon points=\"4 9 8 9 12 5 12 19 8 15 4 15 4 9\" fill=\"currentColor\" stroke=\"none\" />\n                  <path d=\"M16 9a4 4 0 0 1 0 6\" />\n                </svg>\n              }\n              @default {\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <polygon points=\"4 9 8 9 12 5 12 19 8 15 4 15 4 9\" fill=\"currentColor\" stroke=\"none\" />\n                  <path d=\"M16 9a4 4 0 0 1 0 6\" />\n                  <path d=\"M18.5 6.5a8 8 0 0 1 0 11\" />\n                </svg>\n              }\n            }\n          </button>\n          <input\n            class=\"pecb-video-player__volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            step=\"1\"\n            [value]=\"volumePct()\"\n            [attr.aria-label]=\"text().volume\"\n            [attr.aria-valuetext]=\"volumePct() + '%'\"\n            [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n            [style.--pecb-video-volume-pct]=\"volumePct() + '%'\"\n            (input)=\"onVolumeInput($event)\"\n          />\n        </div>\n      }\n\n      @if (showTime()) {\n        <span class=\"pecb-video-player__time\" aria-live=\"off\">\n          <span class=\"pecb-video-player__time-current\">{{ currentTimeLabel() }}</span>\n          <span class=\"pecb-video-player__time-sep\" aria-hidden=\"true\"> / </span>\n          <span class=\"pecb-video-player__time-total\">{{ durationLabel() }}</span>\n        </span>\n      }\n\n      <div class=\"pecb-video-player__spacer\"></div>\n\n      @if (captionsButtonVisible()) {\n        <button\n          type=\"button\"\n          class=\"pecb-video-player__btn\"\n          [class.pecb-video-player__btn--active]=\"captionsEnabled()\"\n          [attr.aria-label]=\"captionsEnabled() ? text().captionsOff : text().captionsOn\"\n          [attr.aria-pressed]=\"captionsEnabled()\"\n          [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n          (click)=\"toggleCaptions()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n            <path d=\"M10 10a2 2 0 1 0 0 4M17 10a2 2 0 1 0 0 4\" />\n          </svg>\n        </button>\n      }\n\n      @if (showSettings()) {\n        <div class=\"pecb-video-player__settings\">\n          <button\n            type=\"button\"\n            class=\"pecb-video-player__btn\"\n            [id]=\"uid + '-settings-btn'\"\n            [class.pecb-video-player__btn--active]=\"settingsOpen()\"\n            [attr.aria-label]=\"text().settings\"\n            aria-haspopup=\"menu\"\n            [attr.aria-expanded]=\"settingsOpen()\"\n            [attr.aria-controls]=\"uid + '-settings-menu'\"\n            [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n            (click)=\"toggleSettings()\"\n          >\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"3\" />\n              <path d=\"M19.4 13.5a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.2A1.6 1.6 0 0 0 6.6 19l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 13.5H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1.1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9.6A1.6 1.6 0 0 0 10.6 3V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8v.1a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z\" />\n            </svg>\n          </button>\n\n          @if (settingsOpen()) {\n            <div\n              #settingsMenu\n              class=\"pecb-video-player__menu\"\n              role=\"menu\"\n              [id]=\"uid + '-settings-menu'\"\n              [attr.aria-label]=\"text().playbackSpeed\"\n              (keydown)=\"onSettingsMenuKeydown($event)\"\n            >\n              <div class=\"pecb-video-player__menu-title\">{{ text().playbackSpeed }}</div>\n              @for (rate of playbackRates(); track rate) {\n                <button\n                  type=\"button\"\n                  class=\"pecb-video-player__menu-item\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"rate === playbackRate()\"\n                  tabindex=\"-1\"\n                  (click)=\"setPlaybackRate(rate)\"\n                >\n                  <span class=\"pecb-video-player__menu-check\" aria-hidden=\"true\">\n                    @if (rate === playbackRate()) {\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"20 6 9 17 4 12\" />\n                      </svg>\n                    }\n                  </span>\n                  <span>{{ rate === 1 ? text().normalSpeed : rate + '\u00D7' }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showFullscreen()) {\n        <button\n          type=\"button\"\n          class=\"pecb-video-player__btn\"\n          [attr.aria-label]=\"isFullscreen() ? text().exitFullscreen : text().enterFullscreen\"\n          [attr.aria-pressed]=\"isFullscreen()\"\n          [attr.tabindex]=\"controlsHidden() ? -1 : 0\"\n          (click)=\"toggleFullscreen()\"\n        >\n          @if (isFullscreen()) {\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m13-5h-3a2 2 0 0 0-2 2v3\" />\n            </svg>\n          } @else {\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m13-5v3a2 2 0 0 1-2 2h-3\" />\n            </svg>\n          }\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;container-type:inline-size;container-name:pecb-video-player;--pecb-video-radius: 12px;--pecb-video-bg: #0b0b0d;--pecb-video-accent: #ffffff;--pecb-video-controls-color: rgba(255, 255, 255, .92);--pecb-video-font-display: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;--pecb-video-font-body: \"Inter\", Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;--pecb-video-focus-ring: #ffffff}.pecb-video-player{position:relative;width:100%;aspect-ratio:var(--pecb-video-aspect-ratio, 16/9);max-height:100%;background:var(--pecb-video-bg);border-radius:var(--pecb-video-radius);overflow:hidden;color:var(--pecb-video-controls-color);font-family:var(--pecb-video-font-display);outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.pecb-video-player:focus-visible{box-shadow:0 0 0 2px var(--pecb-video-bg),0 0 0 4px var(--pecb-video-focus-ring)}.pecb-video-player__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--pecb-video-bg);display:block;cursor:pointer}.pecb-video-player__media::cue{font-family:var(--pecb-video-font-body);font-size:.95em;background:#0009}.pecb-video-player__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0000001f,#0000 30% 60%,#0000008c)}.pecb-video-player__watermark,.pecb-video-player__label{position:absolute;bottom:64px;pointer-events:none;font-family:var(--pecb-video-font-display);font-weight:800;color:#ffffffeb;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.25);transition:opacity .22s ease}.pecb-video-player__watermark{left:24px;font-size:22px;letter-spacing:.04em}.pecb-video-player__label{right:24px;font-size:26px;letter-spacing:.05em;text-transform:uppercase}.pecb-video-player__center{padding:0;border:none;background:none;font:inherit;color:inherit;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#1414168c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease-in-out,transform .15s ease-in-out,opacity .22s ease}.pecb-video-player__center:focus{outline:none}.pecb-video-player__center:hover{background:#141416b8}.pecb-video-player__center:active{transform:translate(-50%,-50%) scale(.96)}.pecb-video-player__center:focus-visible{outline:2px solid var(--pecb-video-focus-ring);outline-offset:2px}.pecb-video-player__center svg polygon{transform:translate(1px)}.pecb-video-player__spinner{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:pecb-video-spin .9s linear infinite;pointer-events:none}.pecb-video-player__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;font-family:var(--pecb-video-font-body);font-size:14px;color:#ffffffd9;background:#00000073}.pecb-video-player__error-icon{width:36px;height:36px;opacity:.9}.pecb-video-player__controls{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;background:linear-gradient(0deg,#0009,#0000);transition:opacity .22s ease,transform .22s ease}.pecb-video-player__progress{position:relative;padding:6px 0;margin:-6px 0;cursor:pointer;touch-action:none;border-radius:6px;outline:none}.pecb-video-player__progress[aria-disabled=true]{cursor:default}.pecb-video-player__progress:focus-visible .pecb-video-player__track{box-shadow:0 0 0 2px #0009,0 0 0 4px var(--pecb-video-focus-ring)}.pecb-video-player__progress:hover .pecb-video-player__knob,.pecb-video-player__progress:focus-visible .pecb-video-player__knob{transform:translate(-50%,-50%) scale(1.15)}.pecb-video-player__track{position:relative;height:4px;border-radius:4px;background:#ffffff47;overflow:visible}.pecb-video-player__buffered,.pecb-video-player__fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;pointer-events:none}.pecb-video-player__buffered{background:#ffffff38}.pecb-video-player__fill{background:var(--pecb-video-accent)}.pecb-video-player__knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--pecb-video-accent);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 3px #00000059;transition:transform .15s ease-in-out}.pecb-video-player__bar{display:flex;align-items:center;gap:6px;color:var(--pecb-video-controls-color);min-height:28px}.pecb-video-player__btn{padding:0;border:none;background:none;font:inherit;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:inherit;opacity:.92;cursor:pointer;transition:opacity .15s ease-in-out,background .15s ease-in-out}.pecb-video-player__btn:focus{outline:none}.pecb-video-player__btn:hover{opacity:1;background:#ffffff1a}.pecb-video-player__btn:focus-visible{opacity:1;outline:2px solid var(--pecb-video-focus-ring);outline-offset:1px}.pecb-video-player__btn--active{opacity:1;position:relative}.pecb-video-player__btn--active:after{content:\"\";position:absolute;left:8px;right:8px;bottom:2px;height:2px;border-radius:2px;background:var(--pecb-video-accent)}.pecb-video-player__btn svg{display:block;flex:0 0 auto}.pecb-video-player__spacer{flex:1 1 auto;min-width:0}.pecb-video-player__time{font-family:var(--pecb-video-font-body);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:4px;opacity:.95}.pecb-video-player__volume{display:flex;align-items:center;flex:0 0 auto}.pecb-video-player__volume-slider{width:0;opacity:0;margin:0;height:28px;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;transition:width .15s ease-in-out,opacity .15s ease-in-out,margin .15s ease-in-out}.pecb-video-player__volume-slider:focus-visible{outline:2px solid var(--pecb-video-focus-ring);outline-offset:1px;border-radius:6px}.pecb-video-player__volume-slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--pecb-video-accent) 0 var(--pecb-video-volume-pct, 100%),rgba(255,255,255,.28) var(--pecb-video-volume-pct, 100%) 100%)}.pecb-video-player__volume-slider::-moz-range-track{height:4px;border-radius:4px;background:#ffffff47}.pecb-video-player__volume-slider::-moz-range-progress{height:4px;border-radius:4px;background:var(--pecb-video-accent)}.pecb-video-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-3.5px;border-radius:50%;border:none;background:var(--pecb-video-accent)}.pecb-video-player__volume-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:none;background:var(--pecb-video-accent)}.pecb-video-player__volume:hover .pecb-video-player__volume-slider,.pecb-video-player__volume:focus-within .pecb-video-player__volume-slider{width:72px;opacity:1;margin-left:4px;margin-right:6px}.pecb-video-player__settings{position:relative;flex:0 0 auto}.pecb-video-player__menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:168px;padding:6px;border-radius:8px;background:#18181bf5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;color:#fff;z-index:2;font-family:var(--pecb-video-font-body);animation:pecb-video-menu-in .14s ease-out}.pecb-video-player__menu-title{padding:6px 10px 8px;font-size:12px;font-weight:500;color:#fff9;letter-spacing:.02em}.pecb-video-player__menu-item{border:none;background:none;font:inherit;display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;font-size:13px;font-weight:500;color:inherit;text-align:left;cursor:pointer}.pecb-video-player__menu-item:focus{outline:none}.pecb-video-player__menu-item:hover,.pecb-video-player__menu-item:focus-visible{background:#ffffff1a;outline:none}.pecb-video-player__menu-item[aria-checked=true]{font-weight:700}.pecb-video-player__menu-check{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pecb-video-player--idle,.pecb-video-player--idle .pecb-video-player__media{cursor:none}.pecb-video-player--idle .pecb-video-player__controls,.pecb-video-player--idle .pecb-video-player__center{opacity:0;pointer-events:none}.pecb-video-player--idle .pecb-video-player__controls{transform:translateY(6px)}.pecb-video-player--fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;max-height:none}.pecb-video-player--fullscreen .pecb-video-player__media{object-fit:contain}.pecb-video-player--error .pecb-video-player__media{cursor:default}@container pecb-video-player (max-width: 640px){.pecb-video-player__watermark,.pecb-video-player__label{bottom:56px}.pecb-video-player__watermark{left:16px;font-size:17px}.pecb-video-player__label{right:16px;font-size:20px}.pecb-video-player__center{width:54px;height:54px}.pecb-video-player__center svg{width:22px;height:22px}.pecb-video-player__controls{padding:8px 12px 10px;gap:6px}.pecb-video-player__bar{gap:4px}.pecb-video-player__time{font-size:11.5px}.pecb-video-player__volume:hover .pecb-video-player__volume-slider,.pecb-video-player__volume:focus-within .pecb-video-player__volume-slider{width:56px}}@container pecb-video-player (max-width: 400px){.pecb-video-player__watermark,.pecb-video-player__label{bottom:50px}.pecb-video-player__watermark{font-size:14px}.pecb-video-player__label{font-size:16px}.pecb-video-player__center{width:46px;height:46px}.pecb-video-player__center svg{width:19px;height:19px}.pecb-video-player__bar{gap:2px}.pecb-video-player__time{font-size:11px;margin-left:2px}.pecb-video-player__time-sep,.pecb-video-player__time-total{display:none}.pecb-video-player__menu{min-width:148px}}@media (hover: none) and (pointer: coarse){.pecb-video-player__volume-slider{display:none}}@media (prefers-reduced-motion: reduce){.pecb-video-player,.pecb-video-player *,.pecb-video-player *:before,.pecb-video-player *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.pecb-video-player__spinner{animation:none;border-top-color:#ffffff40}}@keyframes pecb-video-spin{to{transform:rotate(360deg)}}@keyframes pecb-video-menu-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rootRef: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], videoRef: [{ type: i0.ViewChild, args: ['video', { isSignal: true }] }], progressRef: [{ type: i0.ViewChild, args: ['progress', { isSignal: true }] }], settingsMenuRef: [{ type: i0.ViewChild, args: ['settingsMenu', { isSignal: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], tracks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracks", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], playsInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "playsInline", required: false }] }], startTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTime", required: false }] }], watermark: [{ type: i0.Input, args: [{ isSignal: true, alias: "watermark", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], showCenterButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCenterButton", required: false }] }], showSkipBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSkipBack", required: false }] }], showVolume: [{ type: i0.Input, args: [{ isSignal: true, alias: "showVolume", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], showCaptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaptions", required: false }] }], showSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSettings", required: false }] }], showFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullscreen", required: false }] }], seekStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "seekStep", required: false }] }], playbackRates: [{ type: i0.Input, args: [{ isSignal: true, alias: "playbackRates", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], playing: [{ type: i0.Input, args: [{ isSignal: true, alias: "playing", required: false }] }, { type: i0.Output, args: ["playingChange"] }], currentTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTime", required: false }] }, { type: i0.Output, args: ["currentTimeChange"] }], volume: [{ type: i0.Input, args: [{ isSignal: true, alias: "volume", required: false }] }, { type: i0.Output, args: ["volumeChange"] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }, { type: i0.Output, args: ["mutedChange"] }], playbackRate: [{ type: i0.Input, args: [{ isSignal: true, alias: "playbackRate", required: false }] }, { type: i0.Output, args: ["playbackRateChange"] }], captionsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionsEnabled", required: false }] }, { type: i0.Output, args: ["captionsEnabledChange"] }], timeUpdate: [{ type: i0.Output, args: ["timeUpdate"] }], loadedMetadata: [{ type: i0.Output, args: ["loadedMetadata"] }], seekEnd: [{ type: i0.Output, args: ["seekEnd"] }], playbackEnded: [{ type: i0.Output, args: ["playbackEnded"] }], fullscreenChange: [{ type: i0.Output, args: ["fullscreenChange"] }], playerError: [{ type: i0.Output, args: ["playerError"] }] } });
+
+/*
+ * Shared data model for the PECB course components
+ * (`pecb-course-content-panel` + `pecb-course-player`).
+ *
+ * Source of truth: "Course Player — Content Redesign" (data.jsx / panel.jsx).
+ */
+// ─── Formatting helpers ───────────────────────────────────────────────────────
+/**
+ * Human-readable lesson length: `"9 min"`, `"12 min 4 sec"`, `"1 hr 3 min"`.
+ * Non-finite / negative input renders as `"0 min"`.
+ */
+function formatCourseDuration(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return '0 min';
+    const total = Math.floor(seconds);
+    const minutes = Math.floor(total / 60);
+    const rest = total % 60;
+    if (minutes >= 60) {
+        const hours = Math.floor(minutes / 60);
+        return `${hours} hr ${minutes % 60} min`;
+    }
+    return `${minutes} min${rest ? ` ${rest} sec` : ''}`;
+}
+/**
+ * Clock reading: `m:ss`, or `h:mm:ss` from one hour up.
+ * Non-finite / negative input renders as `0:00`.
+ */
+function formatCourseTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return '0:00';
+    const total = Math.floor(seconds);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const mm = h > 0 ? String(m).padStart(2, '0') : String(m);
+    return h > 0 ? `${h}:${mm}:${String(s).padStart(2, '0')}` : `${mm}:${String(s).padStart(2, '0')}`;
+}
+// ─── Derivation helpers ───────────────────────────────────────────────────────
+const PART_MARKER = ' — Part ';
+/**
+ * Splits `"Base — Part 3"` into `{ base: 'Base', part: 'Part 3' }`.
+ * A title without the marker yields `{ base: title, part: null }`.
+ */
+function parseLessonPartTitle(title) {
+    const index = title.indexOf(PART_MARKER);
+    if (index === -1)
+        return { base: title, part: null };
+    return { base: title.slice(0, index), part: `Part ${title.slice(index + PART_MARKER.length).trim()}` };
+}
+/**
+ * Resolves the status actually rendered for a lesson.
+ *
+ * The active video lesson follows live playback (`playing` while the player is
+ * running, otherwise `started` — unless it is already `completed`), and a
+ * `playing` status on any *other* lesson degrades to `started`, so exactly one
+ * row can ever show the "now playing" treatment. `locked` always wins.
+ */
+function resolveLessonStatus(lesson, active, livePlaying) {
+    const raw = lesson.status ?? 'available';
+    if (raw === 'locked')
+        return 'locked';
+    if (active && (lesson.type ?? 'video') === 'video') {
+        return livePlaying ? 'playing' : raw === 'completed' ? 'completed' : 'started';
+    }
+    if (!active && raw === 'playing')
+        return 'started';
+    return raw;
+}
+/** Counters for one module, computed from already-resolved lesson statuses. */
+function courseModuleStats(module, resolve = (l) => l.status ?? 'available') {
+    const total = module.lessons.length;
+    let done = 0;
+    let playing = false;
+    let started = false;
+    let durationSeconds = 0;
+    for (const lesson of module.lessons) {
+        const status = resolve(lesson);
+        if (status === 'completed')
+            done++;
+        if (status === 'playing')
+            playing = true;
+        if (status === 'started')
+            started = true;
+        durationSeconds += lesson.durationSeconds ?? 0;
+    }
+    return {
+        total,
+        done,
+        playing,
+        started,
+        durationSeconds,
+        percent: total > 0 ? Math.round((done / total) * 100) : 0,
+    };
+}
+/** Counters for a whole course. */
+function courseProgress(modules, resolve = (l) => l.status ?? 'available') {
+    const lessons = modules.flatMap((m) => m.lessons);
+    const total = lessons.length;
+    let done = 0;
+    let remainingSeconds = 0;
+    for (const lesson of lessons) {
+        const status = resolve(lesson);
+        if (status === 'completed') {
+            done++;
+        }
+        else if ((lesson.type ?? 'video') === 'video') {
+            remainingSeconds += lesson.durationSeconds ?? 0;
+        }
+    }
+    return {
+        total,
+        done,
+        percent: total > 0 ? Math.round((done / total) * 100) : 0,
+        remainingSeconds,
+    };
+}
+/** Finds the module a lesson belongs to. */
+function findCourseModule(modules, lessonId) {
+    if (!lessonId)
+        return undefined;
+    return modules.find((m) => m.lessons.some((l) => l.id === lessonId));
+}
+/** Finds a lesson by id across all modules. */
+function findCourseLesson(modules, lessonId) {
+    if (!lessonId)
+        return undefined;
+    for (const module of modules) {
+        const lesson = module.lessons.find((l) => l.id === lessonId);
+        if (lesson)
+            return lesson;
+    }
+    return undefined;
+}
+
+const DEFAULT_COURSE_CONTENT_PANEL_LABELS = {
+    contentTab: 'Content',
+    transcriptTab: 'Transcript',
+    searchLessons: 'Search lessons and quizzes',
+    searchTranscript: 'Search transcript',
+    clearSearch: 'Clear search',
+    quiz: 'Quiz',
+    questions: '{n} questions',
+    passed: 'Passed · {done}/{total}',
+    answered: '{done} of {total} answered',
+    resume: 'Resume',
+    moduleDone: '{done}/{total} done',
+    section: 'Section {n}',
+    noLessons: 'No lessons match “{query}”.',
+    noTranscript: 'No transcript lines match “{query}”.',
+    autoscroll: 'Autoscroll',
+    courseProgress: 'Course progress',
+    courseProgressDetail: '{done} of {total} lessons · {duration} left',
+    certificate: 'Certificate',
+    locked: 'Locked',
+    lessonList: 'Course content',
+};
+// Disc geometry per density (design: 30 / 26 px).
+const DISC_SIZE = { comfortable: 30, compact: 26 };
+const RING_STROKE = 3;
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * PECB course **Content** panel — the sidebar that sits next to the course
+ * video player.
+ *
+ * Reproduces the "Course Player — Content Redesign" panel exactly: the
+ * Content / Transcript tabs, lesson search, the collapsible **Section**
+ * accordion (one section open at a time, auto-opening the section that owns the
+ * active lesson), status discs (completed / now playing / in-progress ring /
+ * not started / locked), quiz rows with badge + score, per-lesson progress bars,
+ * the "Part 1 / Part 2 …" timeline rail for multi-part lessons, an alternative
+ * flat timeline layout, and the searchable transcript with click-to-seek,
+ * live cue highlighting and an autoscroll toggle.
+ *
+ * It is standalone and data-driven — no player dependency — so it can be used
+ * next to `pecb-video-player`, inside `pecb-course-player`, or on its own.
+ *
+ * @example
+ * ```html
+ * <pecb-course-content-panel
+ *   [modules]="modules"
+ *   [transcript]="cues"
+ *   [(activeLessonId)]="lessonId"
+ *   [playing]="playing()"
+ *   [currentTime]="currentTime()"
+ *   (lessonSelect)="openLesson($event)"
+ *   (transcriptSeek)="seekTo($event)">
+ * </pecb-course-content-panel>
+ * ```
+ *
+ * Theming — override the CSS custom properties on the host:
+ * ```css
+ * pecb-course-content-panel { --pecb-course-panel-accent: #a11e29; }
+ * ```
+ */
+class CourseContentPanelComponent {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.injector = inject(Injector);
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        /** Unique id prefix used to wire ARIA relationships. */
+        this.uid = generateUniqueId('pecb-course-panel');
+        this.transcriptScrollRef = viewChild('transcriptScroll', ...(ngDevMode ? [{ debugName: "transcriptScrollRef" }] : []));
+        // ── Data inputs ─────────────────────────────────────────────────────────────
+        /** Course structure rendered by the Content tab. */
+        this.modules = input([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
+        /**
+         * Transcript cues for the active lesson. A `transcript` on the active
+         * `CourseLesson` takes precedence over this input.
+         */
+        this.transcript = input([], ...(ngDevMode ? [{ debugName: "transcript" }] : []));
+        // ── State (two-way) ─────────────────────────────────────────────────────────
+        /** Currently selected lesson. */
+        this.activeLessonId = model(null, ...(ngDevMode ? [{ debugName: "activeLessonId" }] : []));
+        /** Visible tab. */
+        this.tab = model('content', ...(ngDevMode ? [{ debugName: "tab" }] : []));
+        /**
+         * Id of the expanded section. `null` collapses all of them.
+         * Left `undefined` the panel picks one itself (the active lesson's section,
+         * otherwise the first one).
+         */
+        this.openModuleId = model(undefined, ...(ngDevMode ? [{ debugName: "openModuleId" }] : []));
+        /** Whether the transcript follows playback. */
+        this.autoscroll = model(true, ...(ngDevMode ? [{ debugName: "autoscroll" }] : []));
+        /** Lesson search text (Content tab). */
+        this.query = model('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+        /** Transcript search text. */
+        this.transcriptQuery = model('', ...(ngDevMode ? [{ debugName: "transcriptQuery" }] : []));
+        // ── Live playback state ─────────────────────────────────────────────────────
+        /** Whether the player is currently playing — drives the "now playing" row. */
+        this.playing = input(false, ...(ngDevMode ? [{ debugName: "playing", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Live playhead position in seconds. Used to highlight the transcript cue and
+         * to draw live progress on the active lesson row; falls back to each lesson's
+         * `resumeSeconds` when omitted.
+         */
+        this.currentTime = input(undefined, ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
+        // ── Appearance ──────────────────────────────────────────────────────────────
+        /** @default 'grouped' */
+        this.layout = input('grouped', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /** @default 'comfortable' */
+        this.density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : []));
+        /** Colour of the "now playing" treatment. @default 'charcoal' */
+        this.accent = input('charcoal', ...(ngDevMode ? [{ debugName: "accent" }] : []));
+        /** Show the Content / Transcript tab strip. @default true */
+        this.showTabs = input(true, ...(ngDevMode ? [{ debugName: "showTabs", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the lesson search box. @default true */
+        this.showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the transcript search box. @default true */
+        this.showTranscriptSearch = input(true, ...(ngDevMode ? [{ debugName: "showTranscriptSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the autoscroll footer on the Transcript tab. @default true */
+        this.showAutoscroll = input(true, ...(ngDevMode ? [{ debugName: "showAutoscroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the circular course-progress header above the list. @default false */
+        this.showProgress = input(false, ...(ngDevMode ? [{ debugName: "showProgress", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the "Certificate" pill inside the progress header. @default true */
+        this.showCertificate = input(true, ...(ngDevMode ? [{ debugName: "showCertificate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Render a module that holds exactly one lesson as a single direct-play row
+         * instead of a collapsible section. @default false
+         */
+        this.soloSingleLessonModules = input(false, ...(ngDevMode ? [{ debugName: "soloSingleLessonModules", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Partial override of the user-visible strings (i18n). */
+        this.labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        // ── Outputs ─────────────────────────────────────────────────────────────────
+        /** A lesson row was activated. */
+        this.lessonSelect = output();
+        /** A transcript cue was clicked — seek the player to this position (seconds). */
+        this.transcriptSeek = output();
+        /** A section was expanded or collapsed. */
+        this.moduleToggle = output();
+        /** The "Certificate" pill was clicked. */
+        this.certificateClick = output();
+        // ── Labels ──────────────────────────────────────────────────────────────────
+        this.text = computed(() => ({
+            ...DEFAULT_COURSE_CONTENT_PANEL_LABELS,
+            ...this.labels(),
+        }), ...(ngDevMode ? [{ debugName: "text" }] : []));
+        // ── Theming ─────────────────────────────────────────────────────────────────
+        this.hostClasses = computed(() => [
+            'pecb-course-panel',
+            `pecb-course-panel--${this.density()}`,
+            `pecb-course-panel--${this.layout()}`,
+            `pecb-course-panel--accent-${this.accent()}`,
+        ].join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+        // ── Derived data ────────────────────────────────────────────────────────────
+        this.compact = computed(() => this.density() === 'compact', ...(ngDevMode ? [{ debugName: "compact" }] : []));
+        /** Resolved status of every lesson, keyed by lesson id. */
+        this.statusById = computed(() => {
+            const activeId = this.activeLessonId();
+            const livePlaying = this.playing();
+            const map = new Map();
+            for (const module of this.modules()) {
+                for (const lesson of module.lessons) {
+                    map.set(lesson.id, resolveLessonStatus(lesson, lesson.id === activeId, livePlaying));
+                }
+            }
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "statusById" }] : []));
+        this.resolveStatus = computed(() => {
+            const map = this.statusById();
+            return (lesson) => map.get(lesson.id) ?? (lesson.status ?? 'available');
+        }, ...(ngDevMode ? [{ debugName: "resolveStatus" }] : []));
+        /** Modules narrowed by the search box (design: match lesson titles, else module title). */
+        this.filteredModules = computed(() => {
+            const term = this.query().trim().toLowerCase();
+            const modules = this.modules();
+            if (!term)
+                return modules;
+            return modules
+                .map((module) => ({
+                ...module,
+                lessons: module.lessons.filter((lesson) => lesson.title.toLowerCase().includes(term)),
+            }))
+                .filter((module) => module.lessons.length > 0 || module.title.toLowerCase().includes(term));
+        }, ...(ngDevMode ? [{ debugName: "filteredModules" }] : []));
+        this.moduleViews = computed(() => {
+            const all = this.modules();
+            const activeId = this.activeLessonId();
+            const solo = this.soloSingleLessonModules();
+            const text = this.text();
+            const livePlaying = this.playing();
+            return this.filteredModules().map((module) => {
+                const index = all.findIndex((m) => m.id === module.id);
+                const active = module.lessons.some((lesson) => lesson.id === activeId);
+                const isSolo = solo && module.lessons.length === 1;
+                // Section counters come from the stored statuses (design behaviour), with
+                // live playback folded in so the badge reacts while the video runs.
+                const raw = courseModuleStats(module);
+                const stats = {
+                    ...raw,
+                    playing: raw.playing || (active && livePlaying),
+                };
+                return {
+                    module,
+                    id: module.id,
+                    number: (index === -1 ? all.length : index) + 1,
+                    title: module.title,
+                    stats,
+                    statsLabel: format(text.moduleDone, { done: stats.done, total: stats.total }),
+                    durationLabel: formatCourseDuration(stats.durationSeconds),
+                    allDone: stats.total > 0 && stats.done === stats.total,
+                    active,
+                    runs: isSolo ? [] : this.buildRuns(module.lessons),
+                    solo: isSolo ? this.buildLessonView(module.lessons[0], { titleOverride: module.title }) : null,
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "moduleViews" }] : []));
+        this.timelineRows = computed(() => {
+            const all = this.modules();
+            const activeId = this.activeLessonId();
+            const livePlaying = this.playing();
+            const rows = [];
+            for (const module of this.filteredModules()) {
+                const index = all.findIndex((m) => m.id === module.id);
+                const rawStats = courseModuleStats(module);
+                rows.push({
+                    key: `h-${module.id}`,
+                    header: {
+                        number: (index === -1 ? all.length : index) + 1,
+                        title: module.title,
+                        stats: {
+                            ...rawStats,
+                            playing: rawStats.playing ||
+                                (livePlaying && module.lessons.some((l) => l.id === activeId)),
+                        },
+                    },
+                    lesson: null,
+                });
+                module.lessons.forEach((lesson, i) => {
+                    rows.push({
+                        key: lesson.id,
+                        header: null,
+                        lesson: this.buildLessonView(lesson, { connector: i < module.lessons.length - 1 }),
+                    });
+                });
+            }
+            return rows;
+        }, ...(ngDevMode ? [{ debugName: "timelineRows" }] : []));
+        this.isEmpty = computed(() => this.filteredModules().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+        // ── Progress header ─────────────────────────────────────────────────────────
+        this.progress = computed(() => courseProgress(this.modules()), ...(ngDevMode ? [{ debugName: "progress" }] : []));
+        /** Geometry of the 56 px progress ring (design: r = 22, stroke = 5). */
+        this.progressRing = computed(() => {
+            const radius = 22;
+            const circumference = 2 * Math.PI * radius;
+            return {
+                radius,
+                circumference,
+                offset: circumference * (1 - this.progress().percent / 100),
+            };
+        }, ...(ngDevMode ? [{ debugName: "progressRing" }] : []));
+        this.progressDetail = computed(() => {
+            const stats = this.progress();
+            return format(this.text().courseProgressDetail, {
+                done: stats.done,
+                total: stats.total,
+                duration: formatCourseDuration(stats.remainingSeconds),
+            });
+        }, ...(ngDevMode ? [{ debugName: "progressDetail" }] : []));
+        // ── Transcript ──────────────────────────────────────────────────────────────
+        /** Cues of the active lesson, falling back to the panel-level `transcript`. */
+        this.activeCues = computed(() => {
+            const activeId = this.activeLessonId();
+            for (const module of this.modules()) {
+                const lesson = module.lessons.find((l) => l.id === activeId);
+                if (lesson?.transcript?.length)
+                    return lesson.transcript;
+            }
+            return this.transcript();
+        }, ...(ngDevMode ? [{ debugName: "activeCues" }] : []));
+        /** Index of the cue covering the playhead, or `-1`. */
+        this.activeCueIndex = computed(() => {
+            const cues = this.activeCues();
+            const at = this.currentTime();
+            if (at === undefined || cues.length === 0)
+                return -1;
+            let found = -1;
+            for (let i = 0; i < cues.length; i++) {
+                const next = cues[i + 1];
+                if (at >= cues[i].time && (!next || at < next.time)) {
+                    found = i;
+                    break;
+                }
+            }
+            return found;
+        }, ...(ngDevMode ? [{ debugName: "activeCueIndex" }] : []));
+        this.transcriptRows = computed(() => {
+            const cues = this.activeCues();
+            const term = this.transcriptQuery().trim();
+            const lower = term.toLowerCase();
+            const activeIndex = this.activeCueIndex();
+            const rows = [];
+            cues.forEach((cue, index) => {
+                const matchIndex = lower ? cue.text.toLowerCase().indexOf(lower) : -1;
+                if (lower && matchIndex === -1)
+                    return;
+                rows.push({
+                    key: `${index}-${cue.time}`,
+                    cue,
+                    timeLabel: formatCourseTime(cue.time),
+                    // While searching, the design drops the "current cue" highlight.
+                    current: !lower && index === activeIndex,
+                    before: matchIndex === -1 ? cue.text : cue.text.slice(0, matchIndex),
+                    match: matchIndex === -1 ? '' : cue.text.slice(matchIndex, matchIndex + term.length),
+                    after: matchIndex === -1 ? '' : cue.text.slice(matchIndex + term.length),
+                });
+            });
+            return rows;
+        }, ...(ngDevMode ? [{ debugName: "transcriptRows" }] : []));
+        this.transcriptEmpty = computed(() => this.transcriptRows().length === 0, ...(ngDevMode ? [{ debugName: "transcriptEmpty" }] : []));
+        // ── Messages ────────────────────────────────────────────────────────────────
+        this.noLessonsLabel = computed(() => format(this.text().noLessons, { query: this.query().trim() }), ...(ngDevMode ? [{ debugName: "noLessonsLabel" }] : []));
+        this.noTranscriptLabel = computed(() => format(this.text().noTranscript, { query: this.transcriptQuery().trim() }), ...(ngDevMode ? [{ debugName: "noTranscriptLabel" }] : []));
+        // Keep the section holding the active lesson expanded. Tracks `activeLessonId`
+        // only — so collapsing the current section by hand stays collapsed until the
+        // selection actually changes (design behaviour).
+        effect(() => {
+            const activeId = this.activeLessonId();
+            untracked(() => {
+                if (!activeId)
+                    return;
+                const module = findCourseModule(this.modules(), activeId);
+                if (module)
+                    this.openModuleId.set(module.id);
+            });
+        });
+        // First time modules are available and nothing has been decided yet, expand
+        // the active lesson's section, else the first one.
+        let autoOpened = false;
+        effect(() => {
+            const modules = this.modules();
+            untracked(() => {
+                if (autoOpened || modules.length === 0)
+                    return;
+                autoOpened = true;
+                if (this.openModuleId() !== undefined)
+                    return;
+                const module = findCourseModule(modules, this.activeLessonId());
+                this.openModuleId.set(module?.id ?? modules[0].id);
+            });
+        });
+        // Follow the playhead in the transcript.
+        effect(() => {
+            const index = this.activeCueIndex();
+            const auto = this.autoscroll();
+            const tab = this.tab();
+            const searching = this.transcriptQuery().trim().length > 0;
+            untracked(() => {
+                if (!this.isBrowser || !auto || searching || tab !== 'transcript' || index < 0)
+                    return;
+                afterNextRender(() => this.scrollActiveCueIntoView(), { injector: this.injector });
+            });
+        });
+    }
+    // ── Template helpers ────────────────────────────────────────────────────────
+    /** `"Section 3"` — the `{n}` placeholder resolved against the label set. */
+    sectionLabel(index) {
+        return format(this.text().section, { n: index });
+    }
+    /** Whether a section is expanded. */
+    isModuleOpen(moduleId) {
+        return this.openModuleId() === moduleId;
+    }
+    /** Expand a section, collapsing the one that was open (single-open accordion). */
+    toggleModule(view) {
+        const open = !this.isModuleOpen(view.id);
+        this.openModuleId.set(open ? view.id : null);
+        this.moduleToggle.emit({ module: view.module, open });
+    }
+    /** Roving keyboard support between section headers (WAI-ARIA accordion). */
+    onModuleHeaderKeydown(event) {
+        const key = event.key;
+        if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End')
+            return;
+        const target = event.target;
+        const root = target.closest('.pecb-course-panel__list');
+        if (!root)
+            return;
+        const headers = Array.from(root.querySelectorAll('.pecb-course-panel__section-head'));
+        if (headers.length === 0)
+            return;
+        const index = headers.indexOf(target);
+        if (index === -1)
+            return;
+        let next;
+        switch (key) {
+            case 'ArrowDown':
+                next = (index + 1) % headers.length;
+                break;
+            case 'ArrowUp':
+                next = (index - 1 + headers.length) % headers.length;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            default:
+                next = headers.length - 1;
+        }
+        event.preventDefault();
+        headers[next].focus();
+    }
+    /** Activate a lesson (ignored when locked). */
+    selectLesson(lesson) {
+        if ((lesson.status ?? 'available') === 'locked')
+            return;
+        this.activeLessonId.set(lesson.id);
+        this.lessonSelect.emit(lesson);
+    }
+    /** Seek the player to a transcript cue. */
+    seekToCue(cue) {
+        this.transcriptSeek.emit(cue.time);
+    }
+    setTab(tab) {
+        this.tab.set(tab);
+    }
+    onTabKeydown(event) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+            return;
+        event.preventDefault();
+        this.setTab(this.tab() === 'content' ? 'transcript' : 'content');
+        const next = event.target
+            .closest('[role="tablist"]')
+            ?.querySelector('[aria-selected="false"]');
+        next?.focus();
+    }
+    onQueryInput(event) {
+        this.query.set(event.target.value);
+    }
+    onTranscriptQueryInput(event) {
+        this.transcriptQuery.set(event.target.value);
+    }
+    clearTranscriptQuery() {
+        this.transcriptQuery.set('');
+    }
+    toggleAutoscroll() {
+        this.autoscroll.update((value) => !value);
+    }
+    onAutoscrollChange(event) {
+        this.autoscroll.set(event.target.checked);
+    }
+    // ── Internals ───────────────────────────────────────────────────────────────
+    /**
+     * Splits a module's lessons into runs of consecutive lessons sharing a base
+     * title. A run of two or more where at least one carries a `— Part n` suffix
+     * renders as a sub-heading plus a connected rail (design behaviour).
+     */
+    buildRuns(lessons) {
+        const runs = [];
+        let i = 0;
+        while (i < lessons.length) {
+            const base = parseLessonPartTitle(lessons[i].title).base;
+            const run = [];
+            let j = i;
+            while (j < lessons.length && parseLessonPartTitle(lessons[j].title).base === base) {
+                run.push(lessons[j]);
+                j++;
+            }
+            const hasParts = run.some((lesson) => parseLessonPartTitle(lesson.title).part !== null);
+            if (hasParts && run.length > 1) {
+                runs.push({
+                    key: `parts-${run[0].id}`,
+                    parts: true,
+                    base,
+                    lessons: run.map((lesson) => {
+                        const { part } = parseLessonPartTitle(lesson.title);
+                        // Inside a parts rail the quiz shows only its badge (design).
+                        const titleOverride = (lesson.type ?? 'video') === 'quiz' ? null : part ?? lesson.title;
+                        return this.buildLessonView(lesson, { titleOverride });
+                    }),
+                });
+            }
+            else {
+                runs.push({
+                    key: `plain-${run[0].id}`,
+                    parts: false,
+                    base,
+                    lessons: run.map((lesson) => this.buildLessonView(lesson)),
+                });
+            }
+            i = j;
+        }
+        return runs;
+    }
+    buildLessonView(lesson, options = {}) {
+        const text = this.text();
+        const compact = this.compact();
+        const active = lesson.id === this.activeLessonId();
+        const status = this.resolveStatus()(lesson);
+        const isQuiz = (lesson.type ?? 'video') === 'quiz';
+        const isPlaying = status === 'playing';
+        const isStarted = status === 'started';
+        const isCompleted = status === 'completed';
+        const isLocked = status === 'locked';
+        const duration = lesson.durationSeconds ?? 0;
+        const questions = lesson.questionCount ?? 0;
+        const answered = lesson.answeredCount ?? 0;
+        // The active lesson follows the live playhead; everything else uses its
+        // stored resume position.
+        const live = this.currentTime();
+        const at = active && live !== undefined ? live : lesson.resumeSeconds ?? 0;
+        const fraction = isQuiz
+            ? questions
+                ? Math.min(1, answered / questions)
+                : 0.4
+            : duration
+                ? Math.min(1, at / duration)
+                : 0.4;
+        const discSize = compact ? DISC_SIZE.compact : DISC_SIZE.comfortable;
+        const ringRadius = discSize / 2 - RING_STROKE / 2;
+        const ringCircumference = 2 * Math.PI * ringRadius;
+        const showBar = (isPlaying || isStarted) && (isQuiz ? questions > 0 : duration > 0);
+        const barPercent = isQuiz
+            ? questions
+                ? (answered / questions) * 100
+                : 0
+            : duration
+                ? Math.min(100, (at / duration) * 100)
+                : 0;
+        let quizResultLabel = null;
+        if (isQuiz && isCompleted) {
+            quizResultLabel = format(text.passed, { done: lesson.correctCount ?? 0, total: questions });
+        }
+        else if (isQuiz && isStarted) {
+            quizResultLabel = format(text.answered, { done: answered, total: questions });
+        }
+        const timeLabel = !isQuiz && (isPlaying || isStarted) && duration
+            ? `${isStarted ? `${text.resume} ` : ''}${formatCourseTime(at)} / ${formatCourseTime(duration)}`
+            : null;
+        const displayTitle = options.titleOverride !== undefined ? options.titleOverride : lesson.title;
+        return {
+            lesson,
+            id: lesson.id,
+            active,
+            status,
+            isQuiz,
+            isPlaying,
+            isStarted,
+            isCompleted,
+            isLocked,
+            displayTitle,
+            ariaLabel: isLocked ? `${lesson.title} — ${text.locked}` : lesson.title,
+            durationLabel: formatCourseDuration(duration),
+            questionsLabel: format(text.questions, { n: questions }),
+            quizResultLabel,
+            timeLabel,
+            showBar,
+            barPercent,
+            discSize,
+            discCenter: discSize / 2,
+            ringRadius,
+            ringCircumference,
+            ringOffset: ringCircumference * (1 - fraction),
+            ringViewBox: `0 0 ${discSize} ${discSize}`,
+            checkSize: compact ? 14 : 16,
+            pauseSize: compact ? 11 : 12,
+            // The in-progress ring leaves a touch less room than the plain outline.
+            playIconSize: isStarted ? (compact ? 9 : 10) : compact ? 10 : 11,
+            quizIconSize: isStarted ? (compact ? 13 : 14) : compact ? 14 : 15,
+            connector: options.connector ?? false,
+            connectorDone: isCompleted,
+        };
+    }
+    scrollActiveCueIntoView() {
+        const container = this.transcriptScrollRef()?.nativeElement;
+        if (!container)
+            return;
+        const row = container.querySelector('[data-current="true"]');
+        if (!row)
+            return;
+        const rowRect = row.getBoundingClientRect();
+        const boxRect = container.getBoundingClientRect();
+        const top = container.scrollTop + (rowRect.top - boxRect.top) - (boxRect.height / 2 - rowRect.height / 2);
+        const reduceMotion = typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        container.scrollTo({ top, behavior: reduceMotion ? 'auto' : 'smooth' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CourseContentPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CourseContentPanelComponent, isStandalone: true, selector: "pecb-course-content-panel", inputs: { modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null }, transcript: { classPropertyName: "transcript", publicName: "transcript", isSignal: true, isRequired: false, transformFunction: null }, activeLessonId: { classPropertyName: "activeLessonId", publicName: "activeLessonId", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, openModuleId: { classPropertyName: "openModuleId", publicName: "openModuleId", isSignal: true, isRequired: false, transformFunction: null }, autoscroll: { classPropertyName: "autoscroll", publicName: "autoscroll", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, transcriptQuery: { classPropertyName: "transcriptQuery", publicName: "transcriptQuery", isSignal: true, isRequired: false, transformFunction: null }, playing: { classPropertyName: "playing", publicName: "playing", isSignal: true, isRequired: false, transformFunction: null }, currentTime: { classPropertyName: "currentTime", publicName: "currentTime", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, showTabs: { classPropertyName: "showTabs", publicName: "showTabs", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showTranscriptSearch: { classPropertyName: "showTranscriptSearch", publicName: "showTranscriptSearch", isSignal: true, isRequired: false, transformFunction: null }, showAutoscroll: { classPropertyName: "showAutoscroll", publicName: "showAutoscroll", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, showCertificate: { classPropertyName: "showCertificate", publicName: "showCertificate", isSignal: true, isRequired: false, transformFunction: null }, soloSingleLessonModules: { classPropertyName: "soloSingleLessonModules", publicName: "soloSingleLessonModules", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeLessonId: "activeLessonIdChange", tab: "tabChange", openModuleId: "openModuleIdChange", autoscroll: "autoscrollChange", query: "queryChange", transcriptQuery: "transcriptQueryChange", lessonSelect: "lessonSelect", transcriptSeek: "transcriptSeek", moduleToggle: "moduleToggle", certificateClick: "certificateClick" }, host: { classAttribute: "pecb-course-panel-host" }, viewQueries: [{ propertyName: "transcriptScrollRef", first: true, predicate: ["transcriptScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Lesson row \u2014 one <button> per lesson, shared by the grouped, parts-rail,\n     timeline and solo renderings.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<ng-template #lessonRowTpl let-vm let-solo=\"solo\">\n  <button\n    type=\"button\"\n    class=\"pecb-course-panel__row\"\n    [class.pecb-course-panel__row--active]=\"vm.active\"\n    [class.pecb-course-panel__row--quiz]=\"vm.isQuiz\"\n    [class.pecb-course-panel__row--playing]=\"vm.isPlaying\"\n    [class.pecb-course-panel__row--started]=\"vm.isStarted\"\n    [class.pecb-course-panel__row--completed]=\"vm.isCompleted\"\n    [class.pecb-course-panel__row--locked]=\"vm.isLocked\"\n    [class.pecb-course-panel__row--solo]=\"!!solo\"\n    [disabled]=\"vm.isLocked\"\n    [attr.aria-current]=\"vm.active ? 'true' : null\"\n    [attr.aria-label]=\"vm.ariaLabel\"\n    (click)=\"selectLesson(vm.lesson)\"\n  >\n    @if (vm.active && vm.isPlaying) {\n      <span class=\"pecb-course-panel__row-marker\" aria-hidden=\"true\"></span>\n    }\n\n    <!-- Status disc (+ optional timeline connector) -->\n    <span class=\"pecb-course-panel__disc-col\">\n      <span\n        class=\"pecb-course-panel__disc\"\n        [class.pecb-course-panel__disc--completed]=\"vm.isCompleted\"\n        [class.pecb-course-panel__disc--playing]=\"vm.isPlaying\"\n        [class.pecb-course-panel__disc--started]=\"vm.isStarted\"\n        [class.pecb-course-panel__disc--locked]=\"vm.isLocked\"\n        [class.pecb-course-panel__disc--plain]=\"!vm.isCompleted && !vm.isPlaying && !vm.isStarted\"\n        [style.width.px]=\"vm.discSize\"\n        [style.height.px]=\"vm.discSize\"\n        aria-hidden=\"true\"\n      >\n        @if (vm.isCompleted) {\n          <svg [attr.width]=\"vm.checkSize\" [attr.height]=\"vm.checkSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polyline points=\"20 6 9 17 4 12\" />\n          </svg>\n        } @else if (vm.isPlaying) {\n          <svg [attr.width]=\"vm.pauseSize\" [attr.height]=\"vm.pauseSize\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n            <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n          </svg>\n        } @else if (vm.isStarted) {\n          <svg class=\"pecb-course-panel__ring\" [attr.width]=\"vm.discSize\" [attr.height]=\"vm.discSize\" [attr.viewBox]=\"vm.ringViewBox\">\n            <circle\n              class=\"pecb-course-panel__ring-track\"\n              [attr.cx]=\"vm.discCenter\" [attr.cy]=\"vm.discCenter\" [attr.r]=\"vm.ringRadius\"\n              fill=\"none\" stroke-width=\"3\" />\n            <circle\n              class=\"pecb-course-panel__ring-value\"\n              [attr.cx]=\"vm.discCenter\" [attr.cy]=\"vm.discCenter\" [attr.r]=\"vm.ringRadius\"\n              fill=\"none\" stroke-width=\"3\" stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"vm.ringCircumference\"\n              [attr.stroke-dashoffset]=\"vm.ringOffset\" />\n          </svg>\n          <span class=\"pecb-course-panel__disc-glyph\">\n            @if (vm.isQuiz) {\n              <svg [attr.width]=\"vm.quizIconSize\" [attr.height]=\"vm.quizIconSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\" />\n                <path d=\"M9.5 9.2a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.7-.9 1.4v.4\" />\n                <circle cx=\"12\" cy=\"16.3\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n              </svg>\n            } @else {\n              <svg [attr.width]=\"vm.playIconSize\" [attr.height]=\"vm.playIconSize\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <polygon points=\"6 4 20 12 6 20 6 4\" />\n              </svg>\n            }\n          </span>\n        } @else if (vm.isLocked) {\n          <svg [attr.width]=\"vm.checkSize\" [attr.height]=\"vm.checkSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"5\" y=\"11\" width=\"14\" height=\"9\" rx=\"2\" />\n            <path d=\"M8 11V8a4 4 0 0 1 8 0v3\" />\n          </svg>\n        } @else if (vm.isQuiz) {\n          <svg [attr.width]=\"vm.quizIconSize\" [attr.height]=\"vm.quizIconSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"9\" />\n            <path d=\"M9.5 9.2a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.7-.9 1.4v.4\" />\n            <circle cx=\"12\" cy=\"16.3\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n          </svg>\n        } @else {\n          <svg [attr.width]=\"vm.playIconSize\" [attr.height]=\"vm.playIconSize\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <polygon points=\"6 4 20 12 6 20 6 4\" />\n          </svg>\n        }\n      </span>\n\n      @if (vm.connector) {\n        <span\n          class=\"pecb-course-panel__connector\"\n          [class.pecb-course-panel__connector--done]=\"vm.connectorDone\"\n          aria-hidden=\"true\"\n        ></span>\n      }\n    </span>\n\n    <!-- Body -->\n    <span class=\"pecb-course-panel__row-body\">\n      @if (vm.isQuiz) {\n        <span class=\"pecb-course-panel__quiz-badge-line\">\n          <span class=\"pecb-course-panel__quiz-badge\">{{ text().quiz }}</span>\n        </span>\n      }\n\n      @if (vm.displayTitle) {\n        <span class=\"pecb-course-panel__row-title\">{{ vm.displayTitle }}</span>\n      }\n\n      <span class=\"pecb-course-panel__row-meta\">\n        <span class=\"pecb-course-panel__meta-primary\">\n          @if (vm.isQuiz) {\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" />\n              <path d=\"M9.5 9.2a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.7-.9 1.4v.4\" />\n              <circle cx=\"12\" cy=\"16.3\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n            </svg>\n            {{ vm.questionsLabel }}\n          } @else {\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" />\n              <polyline points=\"12 7 12 12 15.5 14\" />\n            </svg>\n            {{ vm.durationLabel }}\n          }\n        </span>\n\n        @if (vm.quizResultLabel) {\n          <span\n            class=\"pecb-course-panel__meta-result\"\n            [class.pecb-course-panel__meta-result--passed]=\"vm.isCompleted\"\n          >\n            @if (vm.isCompleted) {\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <polyline points=\"20 6 9 17 4 12\" />\n              </svg>\n            }\n            {{ vm.quizResultLabel }}\n          </span>\n        }\n\n        @if (vm.timeLabel) {\n          <span class=\"pecb-course-panel__meta-time\">\n            @if (vm.isStarted) {\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                <polygon points=\"6 4 20 12 6 20 6 4\" />\n              </svg>\n            }\n            {{ vm.timeLabel }}\n          </span>\n        }\n      </span>\n\n      @if (vm.showBar) {\n        <span class=\"pecb-course-panel__bar\" aria-hidden=\"true\">\n          <span class=\"pecb-course-panel__bar-fill\" [style.width.%]=\"vm.barPercent\"></span>\n        </span>\n      }\n    </span>\n\n    @if (solo) {\n      <span class=\"pecb-course-panel__solo-play\" aria-hidden=\"true\">\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <polygon points=\"6 4 20 12 6 20 6 4\" />\n        </svg>\n      </span>\n    }\n  </button>\n</ng-template>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Panel\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div [class]=\"hostClasses()\">\n  @if (showTabs()) {\n    <div class=\"pecb-course-panel__tabs\" role=\"tablist\" [attr.aria-label]=\"text().lessonList\">\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"pecb-course-panel__tab\"\n        [class.pecb-course-panel__tab--active]=\"tab() === 'content'\"\n        [id]=\"uid + '-tab-content'\"\n        [attr.aria-selected]=\"tab() === 'content'\"\n        [attr.aria-controls]=\"uid + '-panel-content'\"\n        [attr.tabindex]=\"tab() === 'content' ? 0 : -1\"\n        (click)=\"setTab('content')\"\n        (keydown)=\"onTabKeydown($event)\"\n      >\n        {{ text().contentTab }}\n        @if (tab() === 'content') {\n          <span class=\"pecb-course-panel__tab-indicator\" aria-hidden=\"true\"></span>\n        }\n      </button>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"pecb-course-panel__tab\"\n        [class.pecb-course-panel__tab--active]=\"tab() === 'transcript'\"\n        [id]=\"uid + '-tab-transcript'\"\n        [attr.aria-selected]=\"tab() === 'transcript'\"\n        [attr.aria-controls]=\"uid + '-panel-transcript'\"\n        [attr.tabindex]=\"tab() === 'transcript' ? 0 : -1\"\n        (click)=\"setTab('transcript')\"\n        (keydown)=\"onTabKeydown($event)\"\n      >\n        {{ text().transcriptTab }}\n        @if (tab() === 'transcript') {\n          <span class=\"pecb-course-panel__tab-indicator\" aria-hidden=\"true\"></span>\n        }\n      </button>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Content tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (tab() === 'content') {\n    <div\n      class=\"pecb-course-panel__body\"\n      role=\"tabpanel\"\n      [id]=\"uid + '-panel-content'\"\n      [attr.aria-labelledby]=\"showTabs() ? uid + '-tab-content' : null\"\n    >\n      @if (showProgress()) {\n        <div class=\"pecb-course-panel__progress\">\n          <span class=\"pecb-course-panel__progress-ring\">\n            <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" aria-hidden=\"true\">\n              <circle class=\"pecb-course-panel__progress-track\" cx=\"28\" cy=\"28\" [attr.r]=\"progressRing().radius\" fill=\"none\" stroke-width=\"5\" />\n              <circle\n                class=\"pecb-course-panel__progress-value\"\n                cx=\"28\" cy=\"28\" [attr.r]=\"progressRing().radius\" fill=\"none\" stroke-width=\"5\" stroke-linecap=\"round\"\n                [attr.stroke-dasharray]=\"progressRing().circumference\"\n                [attr.stroke-dashoffset]=\"progressRing().offset\" />\n            </svg>\n            <span class=\"pecb-course-panel__progress-percent\">{{ progress().percent }}%</span>\n          </span>\n          <span class=\"pecb-course-panel__progress-text\">\n            <span class=\"pecb-course-panel__progress-title\">{{ text().courseProgress }}</span>\n            <span class=\"pecb-course-panel__progress-detail\">{{ progressDetail() }}</span>\n          </span>\n          @if (showCertificate()) {\n            <button type=\"button\" class=\"pecb-course-panel__certificate\" (click)=\"certificateClick.emit()\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"8\" r=\"5\" />\n                <path d=\"M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5\" />\n              </svg>\n              {{ text().certificate }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (showSearch()) {\n        <div class=\"pecb-course-panel__search\">\n          <div class=\"pecb-course-panel__search-box\">\n            <span class=\"pecb-course-panel__search-icon\" aria-hidden=\"true\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"7\" />\n                <path d=\"m20 20-3.2-3.2\" />\n              </svg>\n            </span>\n            <input\n              type=\"search\"\n              class=\"pecb-course-panel__search-input\"\n              [value]=\"query()\"\n              [attr.placeholder]=\"text().searchLessons\"\n              [attr.aria-label]=\"text().searchLessons\"\n              (input)=\"onQueryInput($event)\"\n            />\n          </div>\n        </div>\n      }\n\n      <div class=\"pecb-course-panel__scroll pecb-course-panel__list\">\n        @if (isEmpty()) {\n          <p class=\"pecb-course-panel__empty\">{{ noLessonsLabel() }}</p>\n        } @else if (layout() === 'timeline') {\n          <div class=\"pecb-course-panel__timeline\">\n            @for (row of timelineRows(); track row.key) {\n              @if (row.header; as header) {\n                <div class=\"pecb-course-panel__timeline-head\">\n                  <span class=\"pecb-course-panel__timeline-label\">{{ sectionLabel(header.number) }}</span>\n                  <span class=\"pecb-course-panel__timeline-rule\" aria-hidden=\"true\"></span>\n                  <span class=\"pecb-course-panel__timeline-count\">{{ header.stats.done }}/{{ header.stats.total }}</span>\n                </div>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: row.lesson }\"></ng-container>\n              }\n            }\n          </div>\n        } @else {\n          @for (view of moduleViews(); track view.id) {\n            @if (view.solo; as soloView) {\n              <div class=\"pecb-course-panel__section pecb-course-panel__section--solo\">\n                <ng-container\n                  *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: soloView, solo: true }\"\n                ></ng-container>\n              </div>\n            } @else {\n              <div\n                class=\"pecb-course-panel__section\"\n                [class.pecb-course-panel__section--open]=\"isModuleOpen(view.id)\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"pecb-course-panel__section-head\"\n                  [class.pecb-course-panel__section-head--open]=\"isModuleOpen(view.id)\"\n                  [id]=\"uid + '-head-' + view.id\"\n                  [attr.aria-expanded]=\"isModuleOpen(view.id)\"\n                  [attr.aria-controls]=\"uid + '-region-' + view.id\"\n                  (click)=\"toggleModule(view)\"\n                  (keydown)=\"onModuleHeaderKeydown($event)\"\n                >\n                  <span\n                    class=\"pecb-course-panel__section-badge\"\n                    [class.pecb-course-panel__section-badge--done]=\"view.allDone\"\n                    [class.pecb-course-panel__section-badge--active]=\"!view.allDone && (view.stats.playing || view.stats.started)\"\n                    aria-hidden=\"true\"\n                  >\n                    @if (view.allDone) {\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"20 6 9 17 4 12\" />\n                      </svg>\n                    } @else if (view.stats.playing) {\n                      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n                        <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n                      </svg>\n                    } @else {\n                      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <polygon points=\"6 4 20 12 6 20 6 4\" />\n                      </svg>\n                    }\n                  </span>\n\n                  <span class=\"pecb-course-panel__section-text\">\n                    <span class=\"pecb-course-panel__section-title\">{{ sectionLabel(view.number) }}</span>\n                    <span class=\"pecb-course-panel__section-meta\">\n                      <span>{{ view.statsLabel }}</span>\n                      @if (view.stats.durationSeconds > 0) {\n                        <span class=\"pecb-course-panel__section-duration\">\n                          <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                            <circle cx=\"12\" cy=\"12\" r=\"9\" />\n                            <polyline points=\"12 7 12 12 15.5 14\" />\n                          </svg>\n                          {{ view.durationLabel }}\n                        </span>\n                      }\n                    </span>\n                  </span>\n\n                  <span class=\"pecb-course-panel__section-chevron\" aria-hidden=\"true\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <polyline points=\"6 9 12 15 18 9\" />\n                    </svg>\n                  </span>\n                </button>\n\n                <div class=\"pecb-course-panel__section-wrap\">\n                  <div\n                    class=\"pecb-course-panel__section-clip\"\n                    [id]=\"uid + '-region-' + view.id\"\n                    role=\"region\"\n                    [attr.aria-labelledby]=\"uid + '-head-' + view.id\"\n                    [attr.inert]=\"isModuleOpen(view.id) ? null : ''\"\n                  >\n                    <div class=\"pecb-course-panel__section-body\">\n                      @for (run of view.runs; track run.key) {\n                        @if (run.parts) {\n                          <p class=\"pecb-course-panel__run-title\">{{ run.base }}</p>\n                          <div class=\"pecb-course-panel__rail\">\n                            <span class=\"pecb-course-panel__rail-line\" aria-hidden=\"true\"></span>\n                            @for (lessonView of run.lessons; track lessonView.id) {\n                              <ng-container *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: lessonView }\"></ng-container>\n                            }\n                          </div>\n                        } @else {\n                          @for (lessonView of run.lessons; track lessonView.id) {\n                            <ng-container *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: lessonView }\"></ng-container>\n                          }\n                        }\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- \u2500\u2500 Transcript tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div\n      class=\"pecb-course-panel__body\"\n      role=\"tabpanel\"\n      [id]=\"uid + '-panel-transcript'\"\n      [attr.aria-labelledby]=\"showTabs() ? uid + '-tab-transcript' : null\"\n    >\n      @if (showTranscriptSearch()) {\n        <div class=\"pecb-course-panel__search\">\n          <div class=\"pecb-course-panel__search-box\">\n            <span class=\"pecb-course-panel__search-icon\" aria-hidden=\"true\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"7\" />\n                <path d=\"m20 20-3.2-3.2\" />\n              </svg>\n            </span>\n            <input\n              type=\"search\"\n              class=\"pecb-course-panel__search-input\"\n              [value]=\"transcriptQuery()\"\n              [attr.placeholder]=\"text().searchTranscript\"\n              [attr.aria-label]=\"text().searchTranscript\"\n              (input)=\"onTranscriptQueryInput($event)\"\n            />\n            @if (transcriptQuery()) {\n              <button\n                type=\"button\"\n                class=\"pecb-course-panel__search-clear\"\n                [attr.aria-label]=\"text().clearSearch\"\n                (click)=\"clearTranscriptQuery()\"\n              >\u00D7</button>\n            }\n          </div>\n        </div>\n      }\n\n      <div class=\"pecb-course-panel__scroll pecb-course-panel__transcript\" #transcriptScroll>\n        @if (transcriptEmpty()) {\n          <p class=\"pecb-course-panel__empty\">{{ noTranscriptLabel() }}</p>\n        } @else {\n          <div class=\"pecb-course-panel__cues\">\n            @for (row of transcriptRows(); track row.key) {\n              <button\n                type=\"button\"\n                class=\"pecb-course-panel__cue\"\n                [class.pecb-course-panel__cue--current]=\"row.current\"\n                [attr.data-current]=\"row.current\"\n                [attr.aria-current]=\"row.current ? 'true' : null\"\n                (click)=\"seekToCue(row.cue)\"\n              >\n                <span class=\"pecb-course-panel__cue-time\">{{ row.timeLabel }}</span>\n                <span class=\"pecb-course-panel__cue-text\">{{ row.before }}@if (row.match) {<mark class=\"pecb-course-panel__mark\">{{ row.match }}</mark>}{{ row.after }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (showAutoscroll()) {\n        <div class=\"pecb-course-panel__footer\">\n          <label class=\"pecb-course-panel__autoscroll\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-course-panel__autoscroll-input\"\n              [checked]=\"autoscroll()\"\n              (change)=\"onAutoscrollChange($event)\"\n            />\n            <span class=\"pecb-course-panel__autoscroll-box\" aria-hidden=\"true\">\n              @if (autoscroll()) {\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <polyline points=\"20 6 9 17 4 12\" />\n                </svg>\n              }\n            </span>\n            <span class=\"pecb-course-panel__autoscroll-label\">{{ text().autoscroll }}</span>\n          </label>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;container-type:inline-size;container-name:pecb-course-panel}.pecb-course-panel{--_row-pad-y: 11px;--_row-pad-left: 14px;--_row-pad-right: 16px;--_row-gap: 13px;--_disc: 30px;--_section-pad-y: 15px;--_title-size: 13.5px;display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;background:var(--pecb-course-panel-bg, #ffffff);font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);line-height:normal;color:#212427;overflow:hidden}.pecb-course-panel *,.pecb-course-panel *:before,.pecb-course-panel *:after{box-sizing:border-box}.pecb-course-panel--compact{--_row-pad-y: 8px;--_row-pad-left: 12px;--_row-pad-right: 14px;--_row-gap: 11px;--_disc: 26px;--_section-pad-y: 12px;--_title-size: 12.5px}.pecb-course-panel--accent-red{--pecb-course-panel-accent: #a11e29;--pecb-course-panel-accent-soft: rgba(161, 30, 41, .27)}.pecb-course-panel__tabs{display:flex;flex:0 0 auto;padding:0 20px;border-bottom:1px solid var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__tab{border:none;background:none;font:inherit;color:inherit;position:relative;flex:1;padding:16px 0 14px;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:14px;font-weight:500;color:#616161;cursor:pointer;transition:color .15s ease-in-out}.pecb-course-panel__tab:focus{outline:none}.pecb-course-panel__tab:hover{color:#212427}.pecb-course-panel__tab:focus-visible{outline:2px solid #a11e29;outline-offset:-3px;border-radius:6px}.pecb-course-panel__tab--active{font-weight:700;color:#a11e29}.pecb-course-panel__tab-indicator{position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:3px;background:#a11e29}.pecb-course-panel__body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.pecb-course-panel__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ececec transparent}.pecb-course-panel__scroll::-webkit-scrollbar{width:8px}.pecb-course-panel__scroll::-webkit-scrollbar-thumb{background:#ececec;border-radius:8px}.pecb-course-panel__scroll::-webkit-scrollbar-track{background:transparent}.pecb-course-panel__empty{margin:0;padding:40px;text-align:center;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;color:#919191}.pecb-course-panel__progress{display:flex;flex:0 0 auto;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__progress-ring{position:relative;flex:0 0 auto;width:56px;height:56px}.pecb-course-panel__progress-ring svg{display:block;transform:rotate(-90deg)}.pecb-course-panel__progress-track{stroke:#ececec}.pecb-course-panel__progress-value{stroke:var(--pecb-course-panel-accent, #212427);transition:stroke-dashoffset .5s ease}.pecb-course-panel__progress-percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:14px;font-weight:700;color:#212427}.pecb-course-panel__progress-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.pecb-course-panel__progress-title{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:14px;font-weight:700;color:#212427}.pecb-course-panel__progress-detail{margin-top:3px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:12px;color:#616161}.pecb-course-panel__certificate{border:none;background:none;font:inherit;color:inherit;display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;background:#212427;color:#fff;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s ease-in-out}.pecb-course-panel__certificate:focus{outline:none}.pecb-course-panel__certificate:hover{background:#313131}.pecb-course-panel__certificate:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-panel__search{flex:0 0 auto;padding:12px 20px 10px}.pecb-course-panel__search-box{display:flex;align-items:center;gap:9px;min-height:40px;padding:9px 12px;border:1px solid #c2c2c2;border-radius:6px;background:#fff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-course-panel__search-box:focus-within{border-color:#212427;box-shadow:0 0 0 3px #21242714}.pecb-course-panel__search-icon{display:flex;flex:0 0 auto;color:#919191}.pecb-course-panel__search-input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;color:#212427;appearance:none}.pecb-course-panel__search-input::placeholder{color:#919191}.pecb-course-panel__search-input::-webkit-search-cancel-button,.pecb-course-panel__search-input::-webkit-search-decoration{appearance:none;display:none}.pecb-course-panel__search-clear{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#919191;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:17px;line-height:1;cursor:pointer}.pecb-course-panel__search-clear:focus{outline:none}.pecb-course-panel__search-clear:hover{background:#f4f4f4;color:#212427}.pecb-course-panel__search-clear:focus-visible{outline:2px solid #a11e29;outline-offset:1px}.pecb-course-panel__section{border-bottom:1px solid var(--pecb-course-panel-border, #ececec);background:transparent}.pecb-course-panel__section--open{background:#fff}.pecb-course-panel__section--solo{border-bottom:1px solid var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__section-head{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;gap:12px;width:100%;padding:var(--_section-pad-y) 16px;text-align:left;background:#f4f4f4;cursor:pointer;transition:background .15s ease-in-out}.pecb-course-panel__section-head:focus{outline:none}.pecb-course-panel__section-head:hover{background:#fff}.pecb-course-panel__section-head:focus-visible{outline:2px solid #a11e29;outline-offset:-2px}.pecb-course-panel__section-head--open{background:#ececec}.pecb-course-panel__section-head--open:hover{background:#f4f4f4}.pecb-course-panel__section-badge{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#c2c2c2;color:#fff;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;font-weight:700}.pecb-course-panel__section-badge--active{background:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__section-badge--done{background:#e6f4ea;color:green}.pecb-course-panel__section-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.pecb-course-panel__section-title{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13.5px;font-weight:600;line-height:1.3;color:#212427}.pecb-course-panel__section-meta{display:flex;align-items:center;gap:10px;margin-top:4px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11.5px;color:#919191}.pecb-course-panel__section-duration{display:inline-flex;align-items:center;gap:4px}.pecb-course-panel__section-chevron{display:flex;flex:0 0 auto;color:#919191;transform:rotate(-90deg);transition:transform .18s ease}.pecb-course-panel__section-head--open .pecb-course-panel__section-chevron{transform:rotate(0)}.pecb-course-panel__section-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}.pecb-course-panel__section--open .pecb-course-panel__section-wrap{grid-template-rows:1fr}.pecb-course-panel__section-clip{overflow:hidden;min-height:0}.pecb-course-panel__section-body{display:flex;flex-direction:column;gap:2px;padding:6px 12px 10px var(--_row-pad-left)}.pecb-course-panel--compact .pecb-course-panel__section-body{padding:4px 10px 8px var(--_row-pad-left)}.pecb-course-panel__run-title{margin:0;padding:9px 8px 5px 12px;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;font-weight:600;line-height:1.35;color:#212427;text-wrap:pretty}.pecb-course-panel__rail{position:relative}.pecb-course-panel__rail-line{position:absolute;left:calc(var(--_row-pad-left) + var(--_disc) / 2 - 1px);top:calc(var(--_row-pad-y) + var(--_disc) / 2);bottom:calc(var(--_row-pad-y) + var(--_disc) / 2);z-index:1;width:2px;border-radius:2px;background:#ececec}.pecb-course-panel__row{padding:0;border:none;background:none;font:inherit;color:inherit;position:relative;display:flex;align-items:center;gap:var(--_row-gap);width:100%;padding:var(--_row-pad-y) var(--_row-pad-right) var(--_row-pad-y) var(--_row-pad-left);border-radius:8px;text-align:left;background:transparent;cursor:pointer;transition:background .14s ease,box-shadow .14s ease}.pecb-course-panel__row:focus{outline:none}.pecb-course-panel__row:hover:not(:disabled):not(.pecb-course-panel__row--active){background:#fafafa}.pecb-course-panel__row:focus-visible{outline:2px solid #a11e29;outline-offset:-2px}.pecb-course-panel__row:disabled{cursor:not-allowed}.pecb-course-panel__row--locked{opacity:.72}.pecb-course-panel__row--active{background:#fff;box-shadow:inset 0 0 0 1px var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__row--active.pecb-course-panel__row--completed{background:#e6f4ea}.pecb-course-panel__row--active.pecb-course-panel__row--started{background:#fff4e5}.pecb-course-panel__row--active.pecb-course-panel__row--playing{background:#fbeaec;box-shadow:inset 0 0 0 1px var(--pecb-course-panel-accent-soft, rgba(33, 36, 39, .27))}.pecb-course-panel__row--active.pecb-course-panel__row--quiz{background:#eee8ff}.pecb-course-panel__row--solo{gap:12px;padding:var(--_section-pad-y) 16px;border-radius:0}.pecb-course-panel__row-marker{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__row--solo .pecb-course-panel__row-marker{top:10px;bottom:10px}.pecb-course-panel__row--solo .pecb-course-panel__row-title{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13.5px;font-weight:600;line-height:1.3}.pecb-course-panel__solo-play{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f4f4f4;color:#616161}.pecb-course-panel__disc-col{position:relative;display:flex;flex:0 0 auto;flex-direction:column;align-items:center;align-self:stretch}.pecb-course-panel__disc{position:relative;z-index:2;display:flex;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:none;color:#919191}.pecb-course-panel__disc svg{display:block}.pecb-course-panel__disc--plain{border:1.5px solid #ececec}.pecb-course-panel__disc--completed{background:#57bc57;color:#fff}.pecb-course-panel__disc--playing{background:var(--pecb-course-panel-accent, #212427);color:#fff;box-shadow:0 0 0 4px var(--pecb-course-panel-accent-soft, rgba(33, 36, 39, .27))}.pecb-course-panel__disc--started{background:#fff;color:#ff9c4a}.pecb-course-panel__disc--locked{color:#c2c2c2}.pecb-course-panel__ring{position:absolute;inset:0;transform:rotate(-90deg)}.pecb-course-panel__ring-track{stroke:#ececec}.pecb-course-panel__ring-value{stroke:#ff9c4a;transition:stroke-dashoffset .3s ease}.pecb-course-panel__disc-glyph{position:relative;display:flex;color:#ff9c4a}.pecb-course-panel__connector{flex:1 1 auto;width:2px;margin-top:2px;border-radius:2px;background:#ececec}.pecb-course-panel__connector--done{background:#57bc57}.pecb-course-panel__row-body{display:block;flex:1 1 auto;min-width:0}.pecb-course-panel__quiz-badge-line{display:flex;align-items:center;min-height:18px;margin-bottom:5px}.pecb-course-panel__quiz-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;background:#8e6df0;color:#fff;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.pecb-course-panel__row-title{display:block;margin-bottom:4px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:var(--_title-size);font-weight:500;line-height:1.35;color:#212427;text-wrap:pretty;overflow-wrap:anywhere}.pecb-course-panel--compact .pecb-course-panel__row-title{margin-bottom:2px}.pecb-course-panel__row--active .pecb-course-panel__row-title{font-weight:600}.pecb-course-panel__row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pecb-course-panel__meta-primary{display:inline-flex;align-items:center;gap:5px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11.5px;font-weight:500;color:#919191}.pecb-course-panel__row--quiz .pecb-course-panel__meta-primary{color:#8e6df0}.pecb-course-panel__meta-result{display:inline-flex;align-items:center;gap:4px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11px;font-weight:600;color:#ff9c4a}.pecb-course-panel__meta-result--passed{color:#57bc57}.pecb-course-panel__meta-time{display:inline-flex;align-items:center;gap:5px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11px;font-weight:600;color:#ff9c4a}.pecb-course-panel__row--playing .pecb-course-panel__meta-time{color:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__bar{display:block;margin-top:7px;height:4px;border-radius:4px;background:#ececec;overflow:hidden}.pecb-course-panel__bar-fill{display:block;height:100%;border-radius:4px;background:#ff9c4a;transition:width .2s linear}.pecb-course-panel__row--playing .pecb-course-panel__bar-fill{background:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__timeline{padding:6px 14px 16px}.pecb-course-panel--compact .pecb-course-panel__timeline{padding:4px 12px 12px}.pecb-course-panel__timeline-head{display:flex;align-items:center;gap:10px;padding:18px 2px 8px}.pecb-course-panel--compact .pecb-course-panel__timeline-head{padding:14px 2px 6px}.pecb-course-panel__timeline-label{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#919191}.pecb-course-panel__timeline-rule{flex:1 1 auto;height:1px;background:var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__timeline-count{font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11px;color:#919191}.pecb-course-panel__transcript{padding:0 14px}.pecb-course-panel__cues{padding:8px 6px 20px}.pecb-course-panel__cue{border:none;background:none;font:inherit;color:inherit;display:flex;gap:14px;width:100%;padding:10px 12px;border-radius:8px;text-align:left;background:transparent;cursor:pointer;transition:background .14s ease}.pecb-course-panel__cue:focus{outline:none}.pecb-course-panel__cue:hover:not(.pecb-course-panel__cue--current){background:#fafafa}.pecb-course-panel__cue:focus-visible{outline:2px solid #a11e29;outline-offset:-2px}.pecb-course-panel__cue--current{background:#fbeaec}.pecb-course-panel__cue-time{flex:0 0 auto;width:38px;padding-top:1px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#919191}.pecb-course-panel__cue--current .pecb-course-panel__cue-time{color:#a11e29}.pecb-course-panel__cue-text{font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13.5px;line-height:1.55;color:#313131;text-wrap:pretty;overflow-wrap:anywhere}.pecb-course-panel__cue--current .pecb-course-panel__cue-text{color:#212427}.pecb-course-panel__mark{padding:0 1px;border-radius:3px;background:#fce3b4;color:inherit}.pecb-course-panel__footer{flex:0 0 auto;padding:12px 20px;border-top:1px solid var(--pecb-course-panel-border, #ececec);background:var(--pecb-course-panel-bg, #ffffff)}.pecb-course-panel__autoscroll{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.pecb-course-panel__autoscroll-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.pecb-course-panel__autoscroll-box{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:5px;background:#fff;color:#fff;transition:all .14s ease}.pecb-course-panel__autoscroll-input:checked+.pecb-course-panel__autoscroll-box{border:1px solid #a11e29;background:#a11e29}.pecb-course-panel__autoscroll-input:focus-visible+.pecb-course-panel__autoscroll-box{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-panel__autoscroll-label{font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;font-weight:500;color:#616161}@container pecb-course-panel (max-width: 380px){.pecb-course-panel{--_row-pad-right: 12px}.pecb-course-panel__tabs{padding:0 12px}.pecb-course-panel__tab{padding:12px 0 10px;font-size:13px}.pecb-course-panel__search{padding:10px 12px 8px}.pecb-course-panel__progress{flex-wrap:wrap;gap:12px;padding:12px 16px}.pecb-course-panel__section-head{gap:10px;padding:12px}.pecb-course-panel__section-body{padding-right:8px}.pecb-course-panel__transcript{padding:0 8px}.pecb-course-panel__cue{gap:10px;padding:8px 10px}.pecb-course-panel__cue-text{font-size:13px}.pecb-course-panel__footer{padding:10px 16px}.pecb-course-panel__timeline{padding:4px 10px 12px}}@media (hover: none) and (pointer: coarse){.pecb-course-panel__row,.pecb-course-panel__cue{min-height:44px}}@media (prefers-reduced-motion: reduce){.pecb-course-panel *,.pecb-course-panel *:before,.pecb-course-panel *:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CourseContentPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pecb-course-content-panel', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'pecb-course-panel-host' }, template: "<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Lesson row \u2014 one <button> per lesson, shared by the grouped, parts-rail,\n     timeline and solo renderings.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<ng-template #lessonRowTpl let-vm let-solo=\"solo\">\n  <button\n    type=\"button\"\n    class=\"pecb-course-panel__row\"\n    [class.pecb-course-panel__row--active]=\"vm.active\"\n    [class.pecb-course-panel__row--quiz]=\"vm.isQuiz\"\n    [class.pecb-course-panel__row--playing]=\"vm.isPlaying\"\n    [class.pecb-course-panel__row--started]=\"vm.isStarted\"\n    [class.pecb-course-panel__row--completed]=\"vm.isCompleted\"\n    [class.pecb-course-panel__row--locked]=\"vm.isLocked\"\n    [class.pecb-course-panel__row--solo]=\"!!solo\"\n    [disabled]=\"vm.isLocked\"\n    [attr.aria-current]=\"vm.active ? 'true' : null\"\n    [attr.aria-label]=\"vm.ariaLabel\"\n    (click)=\"selectLesson(vm.lesson)\"\n  >\n    @if (vm.active && vm.isPlaying) {\n      <span class=\"pecb-course-panel__row-marker\" aria-hidden=\"true\"></span>\n    }\n\n    <!-- Status disc (+ optional timeline connector) -->\n    <span class=\"pecb-course-panel__disc-col\">\n      <span\n        class=\"pecb-course-panel__disc\"\n        [class.pecb-course-panel__disc--completed]=\"vm.isCompleted\"\n        [class.pecb-course-panel__disc--playing]=\"vm.isPlaying\"\n        [class.pecb-course-panel__disc--started]=\"vm.isStarted\"\n        [class.pecb-course-panel__disc--locked]=\"vm.isLocked\"\n        [class.pecb-course-panel__disc--plain]=\"!vm.isCompleted && !vm.isPlaying && !vm.isStarted\"\n        [style.width.px]=\"vm.discSize\"\n        [style.height.px]=\"vm.discSize\"\n        aria-hidden=\"true\"\n      >\n        @if (vm.isCompleted) {\n          <svg [attr.width]=\"vm.checkSize\" [attr.height]=\"vm.checkSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polyline points=\"20 6 9 17 4 12\" />\n          </svg>\n        } @else if (vm.isPlaying) {\n          <svg [attr.width]=\"vm.pauseSize\" [attr.height]=\"vm.pauseSize\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n            <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n          </svg>\n        } @else if (vm.isStarted) {\n          <svg class=\"pecb-course-panel__ring\" [attr.width]=\"vm.discSize\" [attr.height]=\"vm.discSize\" [attr.viewBox]=\"vm.ringViewBox\">\n            <circle\n              class=\"pecb-course-panel__ring-track\"\n              [attr.cx]=\"vm.discCenter\" [attr.cy]=\"vm.discCenter\" [attr.r]=\"vm.ringRadius\"\n              fill=\"none\" stroke-width=\"3\" />\n            <circle\n              class=\"pecb-course-panel__ring-value\"\n              [attr.cx]=\"vm.discCenter\" [attr.cy]=\"vm.discCenter\" [attr.r]=\"vm.ringRadius\"\n              fill=\"none\" stroke-width=\"3\" stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"vm.ringCircumference\"\n              [attr.stroke-dashoffset]=\"vm.ringOffset\" />\n          </svg>\n          <span class=\"pecb-course-panel__disc-glyph\">\n            @if (vm.isQuiz) {\n              <svg [attr.width]=\"vm.quizIconSize\" [attr.height]=\"vm.quizIconSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\" />\n                <path d=\"M9.5 9.2a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.7-.9 1.4v.4\" />\n                <circle cx=\"12\" cy=\"16.3\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n              </svg>\n            } @else {\n              <svg [attr.width]=\"vm.playIconSize\" [attr.height]=\"vm.playIconSize\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <polygon points=\"6 4 20 12 6 20 6 4\" />\n              </svg>\n            }\n          </span>\n        } @else if (vm.isLocked) {\n          <svg [attr.width]=\"vm.checkSize\" [attr.height]=\"vm.checkSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"5\" y=\"11\" width=\"14\" height=\"9\" rx=\"2\" />\n            <path d=\"M8 11V8a4 4 0 0 1 8 0v3\" />\n          </svg>\n        } @else if (vm.isQuiz) {\n          <svg [attr.width]=\"vm.quizIconSize\" [attr.height]=\"vm.quizIconSize\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"9\" />\n            <path d=\"M9.5 9.2a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.7-.9 1.4v.4\" />\n            <circle cx=\"12\" cy=\"16.3\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n          </svg>\n        } @else {\n          <svg [attr.width]=\"vm.playIconSize\" [attr.height]=\"vm.playIconSize\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <polygon points=\"6 4 20 12 6 20 6 4\" />\n          </svg>\n        }\n      </span>\n\n      @if (vm.connector) {\n        <span\n          class=\"pecb-course-panel__connector\"\n          [class.pecb-course-panel__connector--done]=\"vm.connectorDone\"\n          aria-hidden=\"true\"\n        ></span>\n      }\n    </span>\n\n    <!-- Body -->\n    <span class=\"pecb-course-panel__row-body\">\n      @if (vm.isQuiz) {\n        <span class=\"pecb-course-panel__quiz-badge-line\">\n          <span class=\"pecb-course-panel__quiz-badge\">{{ text().quiz }}</span>\n        </span>\n      }\n\n      @if (vm.displayTitle) {\n        <span class=\"pecb-course-panel__row-title\">{{ vm.displayTitle }}</span>\n      }\n\n      <span class=\"pecb-course-panel__row-meta\">\n        <span class=\"pecb-course-panel__meta-primary\">\n          @if (vm.isQuiz) {\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" />\n              <path d=\"M9.5 9.2a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.7-.9 1.4v.4\" />\n              <circle cx=\"12\" cy=\"16.3\" r=\".6\" fill=\"currentColor\" stroke=\"none\" />\n            </svg>\n            {{ vm.questionsLabel }}\n          } @else {\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" />\n              <polyline points=\"12 7 12 12 15.5 14\" />\n            </svg>\n            {{ vm.durationLabel }}\n          }\n        </span>\n\n        @if (vm.quizResultLabel) {\n          <span\n            class=\"pecb-course-panel__meta-result\"\n            [class.pecb-course-panel__meta-result--passed]=\"vm.isCompleted\"\n          >\n            @if (vm.isCompleted) {\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <polyline points=\"20 6 9 17 4 12\" />\n              </svg>\n            }\n            {{ vm.quizResultLabel }}\n          </span>\n        }\n\n        @if (vm.timeLabel) {\n          <span class=\"pecb-course-panel__meta-time\">\n            @if (vm.isStarted) {\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                <polygon points=\"6 4 20 12 6 20 6 4\" />\n              </svg>\n            }\n            {{ vm.timeLabel }}\n          </span>\n        }\n      </span>\n\n      @if (vm.showBar) {\n        <span class=\"pecb-course-panel__bar\" aria-hidden=\"true\">\n          <span class=\"pecb-course-panel__bar-fill\" [style.width.%]=\"vm.barPercent\"></span>\n        </span>\n      }\n    </span>\n\n    @if (solo) {\n      <span class=\"pecb-course-panel__solo-play\" aria-hidden=\"true\">\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <polygon points=\"6 4 20 12 6 20 6 4\" />\n        </svg>\n      </span>\n    }\n  </button>\n</ng-template>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Panel\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div [class]=\"hostClasses()\">\n  @if (showTabs()) {\n    <div class=\"pecb-course-panel__tabs\" role=\"tablist\" [attr.aria-label]=\"text().lessonList\">\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"pecb-course-panel__tab\"\n        [class.pecb-course-panel__tab--active]=\"tab() === 'content'\"\n        [id]=\"uid + '-tab-content'\"\n        [attr.aria-selected]=\"tab() === 'content'\"\n        [attr.aria-controls]=\"uid + '-panel-content'\"\n        [attr.tabindex]=\"tab() === 'content' ? 0 : -1\"\n        (click)=\"setTab('content')\"\n        (keydown)=\"onTabKeydown($event)\"\n      >\n        {{ text().contentTab }}\n        @if (tab() === 'content') {\n          <span class=\"pecb-course-panel__tab-indicator\" aria-hidden=\"true\"></span>\n        }\n      </button>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"pecb-course-panel__tab\"\n        [class.pecb-course-panel__tab--active]=\"tab() === 'transcript'\"\n        [id]=\"uid + '-tab-transcript'\"\n        [attr.aria-selected]=\"tab() === 'transcript'\"\n        [attr.aria-controls]=\"uid + '-panel-transcript'\"\n        [attr.tabindex]=\"tab() === 'transcript' ? 0 : -1\"\n        (click)=\"setTab('transcript')\"\n        (keydown)=\"onTabKeydown($event)\"\n      >\n        {{ text().transcriptTab }}\n        @if (tab() === 'transcript') {\n          <span class=\"pecb-course-panel__tab-indicator\" aria-hidden=\"true\"></span>\n        }\n      </button>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Content tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (tab() === 'content') {\n    <div\n      class=\"pecb-course-panel__body\"\n      role=\"tabpanel\"\n      [id]=\"uid + '-panel-content'\"\n      [attr.aria-labelledby]=\"showTabs() ? uid + '-tab-content' : null\"\n    >\n      @if (showProgress()) {\n        <div class=\"pecb-course-panel__progress\">\n          <span class=\"pecb-course-panel__progress-ring\">\n            <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" aria-hidden=\"true\">\n              <circle class=\"pecb-course-panel__progress-track\" cx=\"28\" cy=\"28\" [attr.r]=\"progressRing().radius\" fill=\"none\" stroke-width=\"5\" />\n              <circle\n                class=\"pecb-course-panel__progress-value\"\n                cx=\"28\" cy=\"28\" [attr.r]=\"progressRing().radius\" fill=\"none\" stroke-width=\"5\" stroke-linecap=\"round\"\n                [attr.stroke-dasharray]=\"progressRing().circumference\"\n                [attr.stroke-dashoffset]=\"progressRing().offset\" />\n            </svg>\n            <span class=\"pecb-course-panel__progress-percent\">{{ progress().percent }}%</span>\n          </span>\n          <span class=\"pecb-course-panel__progress-text\">\n            <span class=\"pecb-course-panel__progress-title\">{{ text().courseProgress }}</span>\n            <span class=\"pecb-course-panel__progress-detail\">{{ progressDetail() }}</span>\n          </span>\n          @if (showCertificate()) {\n            <button type=\"button\" class=\"pecb-course-panel__certificate\" (click)=\"certificateClick.emit()\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <circle cx=\"12\" cy=\"8\" r=\"5\" />\n                <path d=\"M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5\" />\n              </svg>\n              {{ text().certificate }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (showSearch()) {\n        <div class=\"pecb-course-panel__search\">\n          <div class=\"pecb-course-panel__search-box\">\n            <span class=\"pecb-course-panel__search-icon\" aria-hidden=\"true\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"7\" />\n                <path d=\"m20 20-3.2-3.2\" />\n              </svg>\n            </span>\n            <input\n              type=\"search\"\n              class=\"pecb-course-panel__search-input\"\n              [value]=\"query()\"\n              [attr.placeholder]=\"text().searchLessons\"\n              [attr.aria-label]=\"text().searchLessons\"\n              (input)=\"onQueryInput($event)\"\n            />\n          </div>\n        </div>\n      }\n\n      <div class=\"pecb-course-panel__scroll pecb-course-panel__list\">\n        @if (isEmpty()) {\n          <p class=\"pecb-course-panel__empty\">{{ noLessonsLabel() }}</p>\n        } @else if (layout() === 'timeline') {\n          <div class=\"pecb-course-panel__timeline\">\n            @for (row of timelineRows(); track row.key) {\n              @if (row.header; as header) {\n                <div class=\"pecb-course-panel__timeline-head\">\n                  <span class=\"pecb-course-panel__timeline-label\">{{ sectionLabel(header.number) }}</span>\n                  <span class=\"pecb-course-panel__timeline-rule\" aria-hidden=\"true\"></span>\n                  <span class=\"pecb-course-panel__timeline-count\">{{ header.stats.done }}/{{ header.stats.total }}</span>\n                </div>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: row.lesson }\"></ng-container>\n              }\n            }\n          </div>\n        } @else {\n          @for (view of moduleViews(); track view.id) {\n            @if (view.solo; as soloView) {\n              <div class=\"pecb-course-panel__section pecb-course-panel__section--solo\">\n                <ng-container\n                  *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: soloView, solo: true }\"\n                ></ng-container>\n              </div>\n            } @else {\n              <div\n                class=\"pecb-course-panel__section\"\n                [class.pecb-course-panel__section--open]=\"isModuleOpen(view.id)\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"pecb-course-panel__section-head\"\n                  [class.pecb-course-panel__section-head--open]=\"isModuleOpen(view.id)\"\n                  [id]=\"uid + '-head-' + view.id\"\n                  [attr.aria-expanded]=\"isModuleOpen(view.id)\"\n                  [attr.aria-controls]=\"uid + '-region-' + view.id\"\n                  (click)=\"toggleModule(view)\"\n                  (keydown)=\"onModuleHeaderKeydown($event)\"\n                >\n                  <span\n                    class=\"pecb-course-panel__section-badge\"\n                    [class.pecb-course-panel__section-badge--done]=\"view.allDone\"\n                    [class.pecb-course-panel__section-badge--active]=\"!view.allDone && (view.stats.playing || view.stats.started)\"\n                    aria-hidden=\"true\"\n                  >\n                    @if (view.allDone) {\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"20 6 9 17 4 12\" />\n                      </svg>\n                    } @else if (view.stats.playing) {\n                      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n                        <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n                      </svg>\n                    } @else {\n                      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <polygon points=\"6 4 20 12 6 20 6 4\" />\n                      </svg>\n                    }\n                  </span>\n\n                  <span class=\"pecb-course-panel__section-text\">\n                    <span class=\"pecb-course-panel__section-title\">{{ sectionLabel(view.number) }}</span>\n                    <span class=\"pecb-course-panel__section-meta\">\n                      <span>{{ view.statsLabel }}</span>\n                      @if (view.stats.durationSeconds > 0) {\n                        <span class=\"pecb-course-panel__section-duration\">\n                          <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                            <circle cx=\"12\" cy=\"12\" r=\"9\" />\n                            <polyline points=\"12 7 12 12 15.5 14\" />\n                          </svg>\n                          {{ view.durationLabel }}\n                        </span>\n                      }\n                    </span>\n                  </span>\n\n                  <span class=\"pecb-course-panel__section-chevron\" aria-hidden=\"true\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <polyline points=\"6 9 12 15 18 9\" />\n                    </svg>\n                  </span>\n                </button>\n\n                <div class=\"pecb-course-panel__section-wrap\">\n                  <div\n                    class=\"pecb-course-panel__section-clip\"\n                    [id]=\"uid + '-region-' + view.id\"\n                    role=\"region\"\n                    [attr.aria-labelledby]=\"uid + '-head-' + view.id\"\n                    [attr.inert]=\"isModuleOpen(view.id) ? null : ''\"\n                  >\n                    <div class=\"pecb-course-panel__section-body\">\n                      @for (run of view.runs; track run.key) {\n                        @if (run.parts) {\n                          <p class=\"pecb-course-panel__run-title\">{{ run.base }}</p>\n                          <div class=\"pecb-course-panel__rail\">\n                            <span class=\"pecb-course-panel__rail-line\" aria-hidden=\"true\"></span>\n                            @for (lessonView of run.lessons; track lessonView.id) {\n                              <ng-container *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: lessonView }\"></ng-container>\n                            }\n                          </div>\n                        } @else {\n                          @for (lessonView of run.lessons; track lessonView.id) {\n                            <ng-container *ngTemplateOutlet=\"lessonRowTpl; context: { $implicit: lessonView }\"></ng-container>\n                          }\n                        }\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- \u2500\u2500 Transcript tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div\n      class=\"pecb-course-panel__body\"\n      role=\"tabpanel\"\n      [id]=\"uid + '-panel-transcript'\"\n      [attr.aria-labelledby]=\"showTabs() ? uid + '-tab-transcript' : null\"\n    >\n      @if (showTranscriptSearch()) {\n        <div class=\"pecb-course-panel__search\">\n          <div class=\"pecb-course-panel__search-box\">\n            <span class=\"pecb-course-panel__search-icon\" aria-hidden=\"true\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"7\" />\n                <path d=\"m20 20-3.2-3.2\" />\n              </svg>\n            </span>\n            <input\n              type=\"search\"\n              class=\"pecb-course-panel__search-input\"\n              [value]=\"transcriptQuery()\"\n              [attr.placeholder]=\"text().searchTranscript\"\n              [attr.aria-label]=\"text().searchTranscript\"\n              (input)=\"onTranscriptQueryInput($event)\"\n            />\n            @if (transcriptQuery()) {\n              <button\n                type=\"button\"\n                class=\"pecb-course-panel__search-clear\"\n                [attr.aria-label]=\"text().clearSearch\"\n                (click)=\"clearTranscriptQuery()\"\n              >\u00D7</button>\n            }\n          </div>\n        </div>\n      }\n\n      <div class=\"pecb-course-panel__scroll pecb-course-panel__transcript\" #transcriptScroll>\n        @if (transcriptEmpty()) {\n          <p class=\"pecb-course-panel__empty\">{{ noTranscriptLabel() }}</p>\n        } @else {\n          <div class=\"pecb-course-panel__cues\">\n            @for (row of transcriptRows(); track row.key) {\n              <button\n                type=\"button\"\n                class=\"pecb-course-panel__cue\"\n                [class.pecb-course-panel__cue--current]=\"row.current\"\n                [attr.data-current]=\"row.current\"\n                [attr.aria-current]=\"row.current ? 'true' : null\"\n                (click)=\"seekToCue(row.cue)\"\n              >\n                <span class=\"pecb-course-panel__cue-time\">{{ row.timeLabel }}</span>\n                <span class=\"pecb-course-panel__cue-text\">{{ row.before }}@if (row.match) {<mark class=\"pecb-course-panel__mark\">{{ row.match }}</mark>}{{ row.after }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (showAutoscroll()) {\n        <div class=\"pecb-course-panel__footer\">\n          <label class=\"pecb-course-panel__autoscroll\">\n            <input\n              type=\"checkbox\"\n              class=\"pecb-course-panel__autoscroll-input\"\n              [checked]=\"autoscroll()\"\n              (change)=\"onAutoscrollChange($event)\"\n            />\n            <span class=\"pecb-course-panel__autoscroll-box\" aria-hidden=\"true\">\n              @if (autoscroll()) {\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <polyline points=\"20 6 9 17 4 12\" />\n                </svg>\n              }\n            </span>\n            <span class=\"pecb-course-panel__autoscroll-label\">{{ text().autoscroll }}</span>\n          </label>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;container-type:inline-size;container-name:pecb-course-panel}.pecb-course-panel{--_row-pad-y: 11px;--_row-pad-left: 14px;--_row-pad-right: 16px;--_row-gap: 13px;--_disc: 30px;--_section-pad-y: 15px;--_title-size: 13.5px;display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;background:var(--pecb-course-panel-bg, #ffffff);font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);line-height:normal;color:#212427;overflow:hidden}.pecb-course-panel *,.pecb-course-panel *:before,.pecb-course-panel *:after{box-sizing:border-box}.pecb-course-panel--compact{--_row-pad-y: 8px;--_row-pad-left: 12px;--_row-pad-right: 14px;--_row-gap: 11px;--_disc: 26px;--_section-pad-y: 12px;--_title-size: 12.5px}.pecb-course-panel--accent-red{--pecb-course-panel-accent: #a11e29;--pecb-course-panel-accent-soft: rgba(161, 30, 41, .27)}.pecb-course-panel__tabs{display:flex;flex:0 0 auto;padding:0 20px;border-bottom:1px solid var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__tab{border:none;background:none;font:inherit;color:inherit;position:relative;flex:1;padding:16px 0 14px;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:14px;font-weight:500;color:#616161;cursor:pointer;transition:color .15s ease-in-out}.pecb-course-panel__tab:focus{outline:none}.pecb-course-panel__tab:hover{color:#212427}.pecb-course-panel__tab:focus-visible{outline:2px solid #a11e29;outline-offset:-3px;border-radius:6px}.pecb-course-panel__tab--active{font-weight:700;color:#a11e29}.pecb-course-panel__tab-indicator{position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:3px;background:#a11e29}.pecb-course-panel__body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.pecb-course-panel__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ececec transparent}.pecb-course-panel__scroll::-webkit-scrollbar{width:8px}.pecb-course-panel__scroll::-webkit-scrollbar-thumb{background:#ececec;border-radius:8px}.pecb-course-panel__scroll::-webkit-scrollbar-track{background:transparent}.pecb-course-panel__empty{margin:0;padding:40px;text-align:center;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;color:#919191}.pecb-course-panel__progress{display:flex;flex:0 0 auto;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__progress-ring{position:relative;flex:0 0 auto;width:56px;height:56px}.pecb-course-panel__progress-ring svg{display:block;transform:rotate(-90deg)}.pecb-course-panel__progress-track{stroke:#ececec}.pecb-course-panel__progress-value{stroke:var(--pecb-course-panel-accent, #212427);transition:stroke-dashoffset .5s ease}.pecb-course-panel__progress-percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:14px;font-weight:700;color:#212427}.pecb-course-panel__progress-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.pecb-course-panel__progress-title{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:14px;font-weight:700;color:#212427}.pecb-course-panel__progress-detail{margin-top:3px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:12px;color:#616161}.pecb-course-panel__certificate{border:none;background:none;font:inherit;color:inherit;display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;background:#212427;color:#fff;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s ease-in-out}.pecb-course-panel__certificate:focus{outline:none}.pecb-course-panel__certificate:hover{background:#313131}.pecb-course-panel__certificate:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-panel__search{flex:0 0 auto;padding:12px 20px 10px}.pecb-course-panel__search-box{display:flex;align-items:center;gap:9px;min-height:40px;padding:9px 12px;border:1px solid #c2c2c2;border-radius:6px;background:#fff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-course-panel__search-box:focus-within{border-color:#212427;box-shadow:0 0 0 3px #21242714}.pecb-course-panel__search-icon{display:flex;flex:0 0 auto;color:#919191}.pecb-course-panel__search-input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;color:#212427;appearance:none}.pecb-course-panel__search-input::placeholder{color:#919191}.pecb-course-panel__search-input::-webkit-search-cancel-button,.pecb-course-panel__search-input::-webkit-search-decoration{appearance:none;display:none}.pecb-course-panel__search-clear{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#919191;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:17px;line-height:1;cursor:pointer}.pecb-course-panel__search-clear:focus{outline:none}.pecb-course-panel__search-clear:hover{background:#f4f4f4;color:#212427}.pecb-course-panel__search-clear:focus-visible{outline:2px solid #a11e29;outline-offset:1px}.pecb-course-panel__section{border-bottom:1px solid var(--pecb-course-panel-border, #ececec);background:transparent}.pecb-course-panel__section--open{background:#fff}.pecb-course-panel__section--solo{border-bottom:1px solid var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__section-head{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;gap:12px;width:100%;padding:var(--_section-pad-y) 16px;text-align:left;background:#f4f4f4;cursor:pointer;transition:background .15s ease-in-out}.pecb-course-panel__section-head:focus{outline:none}.pecb-course-panel__section-head:hover{background:#fff}.pecb-course-panel__section-head:focus-visible{outline:2px solid #a11e29;outline-offset:-2px}.pecb-course-panel__section-head--open{background:#ececec}.pecb-course-panel__section-head--open:hover{background:#f4f4f4}.pecb-course-panel__section-badge{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#c2c2c2;color:#fff;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;font-weight:700}.pecb-course-panel__section-badge--active{background:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__section-badge--done{background:#e6f4ea;color:green}.pecb-course-panel__section-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.pecb-course-panel__section-title{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13.5px;font-weight:600;line-height:1.3;color:#212427}.pecb-course-panel__section-meta{display:flex;align-items:center;gap:10px;margin-top:4px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11.5px;color:#919191}.pecb-course-panel__section-duration{display:inline-flex;align-items:center;gap:4px}.pecb-course-panel__section-chevron{display:flex;flex:0 0 auto;color:#919191;transform:rotate(-90deg);transition:transform .18s ease}.pecb-course-panel__section-head--open .pecb-course-panel__section-chevron{transform:rotate(0)}.pecb-course-panel__section-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}.pecb-course-panel__section--open .pecb-course-panel__section-wrap{grid-template-rows:1fr}.pecb-course-panel__section-clip{overflow:hidden;min-height:0}.pecb-course-panel__section-body{display:flex;flex-direction:column;gap:2px;padding:6px 12px 10px var(--_row-pad-left)}.pecb-course-panel--compact .pecb-course-panel__section-body{padding:4px 10px 8px var(--_row-pad-left)}.pecb-course-panel__run-title{margin:0;padding:9px 8px 5px 12px;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;font-weight:600;line-height:1.35;color:#212427;text-wrap:pretty}.pecb-course-panel__rail{position:relative}.pecb-course-panel__rail-line{position:absolute;left:calc(var(--_row-pad-left) + var(--_disc) / 2 - 1px);top:calc(var(--_row-pad-y) + var(--_disc) / 2);bottom:calc(var(--_row-pad-y) + var(--_disc) / 2);z-index:1;width:2px;border-radius:2px;background:#ececec}.pecb-course-panel__row{padding:0;border:none;background:none;font:inherit;color:inherit;position:relative;display:flex;align-items:center;gap:var(--_row-gap);width:100%;padding:var(--_row-pad-y) var(--_row-pad-right) var(--_row-pad-y) var(--_row-pad-left);border-radius:8px;text-align:left;background:transparent;cursor:pointer;transition:background .14s ease,box-shadow .14s ease}.pecb-course-panel__row:focus{outline:none}.pecb-course-panel__row:hover:not(:disabled):not(.pecb-course-panel__row--active){background:#fafafa}.pecb-course-panel__row:focus-visible{outline:2px solid #a11e29;outline-offset:-2px}.pecb-course-panel__row:disabled{cursor:not-allowed}.pecb-course-panel__row--locked{opacity:.72}.pecb-course-panel__row--active{background:#fff;box-shadow:inset 0 0 0 1px var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__row--active.pecb-course-panel__row--completed{background:#e6f4ea}.pecb-course-panel__row--active.pecb-course-panel__row--started{background:#fff4e5}.pecb-course-panel__row--active.pecb-course-panel__row--playing{background:#fbeaec;box-shadow:inset 0 0 0 1px var(--pecb-course-panel-accent-soft, rgba(33, 36, 39, .27))}.pecb-course-panel__row--active.pecb-course-panel__row--quiz{background:#eee8ff}.pecb-course-panel__row--solo{gap:12px;padding:var(--_section-pad-y) 16px;border-radius:0}.pecb-course-panel__row-marker{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__row--solo .pecb-course-panel__row-marker{top:10px;bottom:10px}.pecb-course-panel__row--solo .pecb-course-panel__row-title{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13.5px;font-weight:600;line-height:1.3}.pecb-course-panel__solo-play{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f4f4f4;color:#616161}.pecb-course-panel__disc-col{position:relative;display:flex;flex:0 0 auto;flex-direction:column;align-items:center;align-self:stretch}.pecb-course-panel__disc{position:relative;z-index:2;display:flex;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:none;color:#919191}.pecb-course-panel__disc svg{display:block}.pecb-course-panel__disc--plain{border:1.5px solid #ececec}.pecb-course-panel__disc--completed{background:#57bc57;color:#fff}.pecb-course-panel__disc--playing{background:var(--pecb-course-panel-accent, #212427);color:#fff;box-shadow:0 0 0 4px var(--pecb-course-panel-accent-soft, rgba(33, 36, 39, .27))}.pecb-course-panel__disc--started{background:#fff;color:#ff9c4a}.pecb-course-panel__disc--locked{color:#c2c2c2}.pecb-course-panel__ring{position:absolute;inset:0;transform:rotate(-90deg)}.pecb-course-panel__ring-track{stroke:#ececec}.pecb-course-panel__ring-value{stroke:#ff9c4a;transition:stroke-dashoffset .3s ease}.pecb-course-panel__disc-glyph{position:relative;display:flex;color:#ff9c4a}.pecb-course-panel__connector{flex:1 1 auto;width:2px;margin-top:2px;border-radius:2px;background:#ececec}.pecb-course-panel__connector--done{background:#57bc57}.pecb-course-panel__row-body{display:block;flex:1 1 auto;min-width:0}.pecb-course-panel__quiz-badge-line{display:flex;align-items:center;min-height:18px;margin-bottom:5px}.pecb-course-panel__quiz-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;background:#8e6df0;color:#fff;font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.pecb-course-panel__row-title{display:block;margin-bottom:4px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:var(--_title-size);font-weight:500;line-height:1.35;color:#212427;text-wrap:pretty;overflow-wrap:anywhere}.pecb-course-panel--compact .pecb-course-panel__row-title{margin-bottom:2px}.pecb-course-panel__row--active .pecb-course-panel__row-title{font-weight:600}.pecb-course-panel__row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pecb-course-panel__meta-primary{display:inline-flex;align-items:center;gap:5px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11.5px;font-weight:500;color:#919191}.pecb-course-panel__row--quiz .pecb-course-panel__meta-primary{color:#8e6df0}.pecb-course-panel__meta-result{display:inline-flex;align-items:center;gap:4px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11px;font-weight:600;color:#ff9c4a}.pecb-course-panel__meta-result--passed{color:#57bc57}.pecb-course-panel__meta-time{display:inline-flex;align-items:center;gap:5px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11px;font-weight:600;color:#ff9c4a}.pecb-course-panel__row--playing .pecb-course-panel__meta-time{color:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__bar{display:block;margin-top:7px;height:4px;border-radius:4px;background:#ececec;overflow:hidden}.pecb-course-panel__bar-fill{display:block;height:100%;border-radius:4px;background:#ff9c4a;transition:width .2s linear}.pecb-course-panel__row--playing .pecb-course-panel__bar-fill{background:var(--pecb-course-panel-accent, #212427)}.pecb-course-panel__timeline{padding:6px 14px 16px}.pecb-course-panel--compact .pecb-course-panel__timeline{padding:4px 12px 12px}.pecb-course-panel__timeline-head{display:flex;align-items:center;gap:10px;padding:18px 2px 8px}.pecb-course-panel--compact .pecb-course-panel__timeline-head{padding:14px 2px 6px}.pecb-course-panel__timeline-label{font-family:var(--pecb-course-panel-font-display, Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#919191}.pecb-course-panel__timeline-rule{flex:1 1 auto;height:1px;background:var(--pecb-course-panel-border, #ececec)}.pecb-course-panel__timeline-count{font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:11px;color:#919191}.pecb-course-panel__transcript{padding:0 14px}.pecb-course-panel__cues{padding:8px 6px 20px}.pecb-course-panel__cue{border:none;background:none;font:inherit;color:inherit;display:flex;gap:14px;width:100%;padding:10px 12px;border-radius:8px;text-align:left;background:transparent;cursor:pointer;transition:background .14s ease}.pecb-course-panel__cue:focus{outline:none}.pecb-course-panel__cue:hover:not(.pecb-course-panel__cue--current){background:#fafafa}.pecb-course-panel__cue:focus-visible{outline:2px solid #a11e29;outline-offset:-2px}.pecb-course-panel__cue--current{background:#fbeaec}.pecb-course-panel__cue-time{flex:0 0 auto;width:38px;padding-top:1px;font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#919191}.pecb-course-panel__cue--current .pecb-course-panel__cue-time{color:#a11e29}.pecb-course-panel__cue-text{font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13.5px;line-height:1.55;color:#313131;text-wrap:pretty;overflow-wrap:anywhere}.pecb-course-panel__cue--current .pecb-course-panel__cue-text{color:#212427}.pecb-course-panel__mark{padding:0 1px;border-radius:3px;background:#fce3b4;color:inherit}.pecb-course-panel__footer{flex:0 0 auto;padding:12px 20px;border-top:1px solid var(--pecb-course-panel-border, #ececec);background:var(--pecb-course-panel-bg, #ffffff)}.pecb-course-panel__autoscroll{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.pecb-course-panel__autoscroll-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.pecb-course-panel__autoscroll-box{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:5px;background:#fff;color:#fff;transition:all .14s ease}.pecb-course-panel__autoscroll-input:checked+.pecb-course-panel__autoscroll-box{border:1px solid #a11e29;background:#a11e29}.pecb-course-panel__autoscroll-input:focus-visible+.pecb-course-panel__autoscroll-box{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-panel__autoscroll-label{font-family:var(--pecb-course-panel-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);font-size:13px;font-weight:500;color:#616161}@container pecb-course-panel (max-width: 380px){.pecb-course-panel{--_row-pad-right: 12px}.pecb-course-panel__tabs{padding:0 12px}.pecb-course-panel__tab{padding:12px 0 10px;font-size:13px}.pecb-course-panel__search{padding:10px 12px 8px}.pecb-course-panel__progress{flex-wrap:wrap;gap:12px;padding:12px 16px}.pecb-course-panel__section-head{gap:10px;padding:12px}.pecb-course-panel__section-body{padding-right:8px}.pecb-course-panel__transcript{padding:0 8px}.pecb-course-panel__cue{gap:10px;padding:8px 10px}.pecb-course-panel__cue-text{font-size:13px}.pecb-course-panel__footer{padding:10px 16px}.pecb-course-panel__timeline{padding:4px 10px 12px}}@media (hover: none) and (pointer: coarse){.pecb-course-panel__row,.pecb-course-panel__cue{min-height:44px}}@media (prefers-reduced-motion: reduce){.pecb-course-panel *,.pecb-course-panel *:before,.pecb-course-panel *:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { transcriptScrollRef: [{ type: i0.ViewChild, args: ['transcriptScroll', { isSignal: true }] }], modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }], transcript: [{ type: i0.Input, args: [{ isSignal: true, alias: "transcript", required: false }] }], activeLessonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeLessonId", required: false }] }, { type: i0.Output, args: ["activeLessonIdChange"] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }, { type: i0.Output, args: ["tabChange"] }], openModuleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModuleId", required: false }] }, { type: i0.Output, args: ["openModuleIdChange"] }], autoscroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoscroll", required: false }] }, { type: i0.Output, args: ["autoscrollChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], transcriptQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "transcriptQuery", required: false }] }, { type: i0.Output, args: ["transcriptQueryChange"] }], playing: [{ type: i0.Input, args: [{ isSignal: true, alias: "playing", required: false }] }], currentTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTime", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], showTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTabs", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showTranscriptSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTranscriptSearch", required: false }] }], showAutoscroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAutoscroll", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], showCertificate: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCertificate", required: false }] }], soloSingleLessonModules: [{ type: i0.Input, args: [{ isSignal: true, alias: "soloSingleLessonModules", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], lessonSelect: [{ type: i0.Output, args: ["lessonSelect"] }], transcriptSeek: [{ type: i0.Output, args: ["transcriptSeek"] }], moduleToggle: [{ type: i0.Output, args: ["moduleToggle"] }], certificateClick: [{ type: i0.Output, args: ["certificateClick"] }] } });
+/** Replaces `{token}` placeholders in a label. */
+function format(template, values) {
+    return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+}
+
+/**
+ * PECB course player — the video stage with the **Content** sidebar attached,
+ * exactly as laid out in "Course Player — Content Redesign".
+ *
+ * Composes {@link VideoPlayerComponent} and {@link CourseContentPanelComponent}
+ * and wires them together: picking a lesson loads its media and resumes at its
+ * saved position, clicking a transcript cue seeks the video, and the panel
+ * follows playback live (now-playing row, progress bars, transcript highlight).
+ *
+ * The two-column grid collapses to a single stacked column when the space it is
+ * given gets narrow, so the same markup works in a page, a drawer or a phone.
+ *
+ * @example
+ * ```html
+ * <pecb-course-player
+ *   [modules]="modules"
+ *   [(activeLessonId)]="lessonId"
+ *   (lessonSelect)="track($event)"
+ *   (lessonEnded)="markComplete($event)">
+ * </pecb-course-player>
+ * ```
+ *
+ * Layout hooks:
+ * ```css
+ * pecb-course-player {
+ *   --pecb-course-player-panel-width: 408px;
+ *   --pecb-course-player-gap: 20px;
+ *   --pecb-course-player-panel-stacked-height: 460px;
+ * }
+ * ```
+ */
+class CoursePlayerComponent {
+    constructor() {
+        // ── Data ────────────────────────────────────────────────────────────────────
+        /** Course structure. */
+        this.modules = input([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
+        /** Fallback transcript, used when the active lesson has no `transcript`. */
+        this.transcript = input([], ...(ngDevMode ? [{ debugName: "transcript" }] : []));
+        // ── State (two-way) ─────────────────────────────────────────────────────────
+        /** Selected lesson. */
+        this.activeLessonId = model(null, ...(ngDevMode ? [{ debugName: "activeLessonId" }] : []));
+        /** Playback state of the video. */
+        this.playing = model(false, ...(ngDevMode ? [{ debugName: "playing" }] : []));
+        /** Playhead position, in seconds. */
+        this.currentTime = model(0, ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
+        /** Which panel tab is showing. */
+        this.panelTab = model('content', ...(ngDevMode ? [{ debugName: "panelTab" }] : []));
+        // ── Video options ───────────────────────────────────────────────────────────
+        /** Poster used when the active lesson has none. */
+        this.poster = input(undefined, ...(ngDevMode ? [{ debugName: "poster" }] : []));
+        /** Media used when the active lesson has no `src` (e.g. a single-video course). */
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : []));
+        /** Caption tracks used when the active lesson has none. */
+        this.tracks = input([], ...(ngDevMode ? [{ debugName: "tracks" }] : []));
+        /** Stage label used when the active lesson has no `stageLabel`. */
+        this.stageLabel = input(undefined, ...(ngDevMode ? [{ debugName: "stageLabel" }] : []));
+        /** Brand watermark on the video stage. @default 'PECB' */
+        this.watermark = input('PECB', ...(ngDevMode ? [{ debugName: "watermark" }] : []));
+        /** @default '16 / 9' */
+        this.aspectRatio = input('16 / 9', ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
+        /** @default 'metadata' */
+        this.preload = input('metadata', ...(ngDevMode ? [{ debugName: "preload" }] : []));
+        /** `crossorigin` for the media element. */
+        this.crossOrigin = input(undefined, ...(ngDevMode ? [{ debugName: "crossOrigin" }] : []));
+        /** Seconds the rewind button / arrow keys jump. @default 10 */
+        this.seekStep = input(10, ...(ngDevMode ? [{ debugName: "seekStep", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** i18n overrides for the video player. */
+        this.videoLabels = input({}, ...(ngDevMode ? [{ debugName: "videoLabels" }] : []));
+        /** Start playing as soon as a video lesson is picked. @default true */
+        this.autoPlayOnSelect = input(true, ...(ngDevMode ? [{ debugName: "autoPlayOnSelect", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the active lesson's title under the video. @default true */
+        this.showLessonTitle = input(true, ...(ngDevMode ? [{ debugName: "showLessonTitle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        // ── Panel options ───────────────────────────────────────────────────────────
+        /** Which side the panel sits on. @default 'end' */
+        this.panelPosition = input('end', ...(ngDevMode ? [{ debugName: "panelPosition" }] : []));
+        /** @default 'grouped' */
+        this.layout = input('grouped', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /** @default 'comfortable' */
+        this.density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : []));
+        /** @default 'charcoal' */
+        this.accent = input('charcoal', ...(ngDevMode ? [{ debugName: "accent" }] : []));
+        /** Show the panel's tab strip. @default true */
+        this.showTabs = input(true, ...(ngDevMode ? [{ debugName: "showTabs", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the lesson search box. @default true */
+        this.showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Show the circular course-progress header. @default false */
+        this.showProgress = input(false, ...(ngDevMode ? [{ debugName: "showProgress", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Render single-lesson sections as direct-play rows. @default false */
+        this.soloSingleLessonModules = input(false, ...(ngDevMode ? [{ debugName: "soloSingleLessonModules", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** i18n overrides for the panel. */
+        this.panelLabels = input({}, ...(ngDevMode ? [{ debugName: "panelLabels" }] : []));
+        // ── Outputs ─────────────────────────────────────────────────────────────────
+        /** A lesson row was picked (fires for quizzes too). */
+        this.lessonSelect = output();
+        /** The video of a lesson played to the end. */
+        this.lessonEnded = output();
+        /** Playhead moved — use it to persist progress. */
+        this.timeUpdate = output();
+        /** The panel's "Certificate" pill was clicked. */
+        this.certificateClick = output();
+        /** The media failed to load, or playback was rejected. */
+        this.playerError = output();
+        // ── Derived ─────────────────────────────────────────────────────────────────
+        /** The lesson currently selected in the panel (may be a quiz). */
+        this.activeLesson = computed(() => findCourseLesson(this.modules(), this.activeLessonId()), ...(ngDevMode ? [{ debugName: "activeLesson" }] : []));
+        /**
+         * Id of the last *video* lesson that was selected. Picking a quiz keeps the
+         * video on the stage (design behaviour) instead of blanking it.
+         */
+        this.videoLessonId = signal(null, ...(ngDevMode ? [{ debugName: "videoLessonId" }] : []));
+        this.videoLesson = computed(() => {
+            const explicit = findCourseLesson(this.modules(), this.videoLessonId());
+            if (explicit)
+                return explicit;
+            // Fall back to the first video lesson so the stage is never empty.
+            for (const module of this.modules()) {
+                const lesson = module.lessons.find((l) => (l.type ?? 'video') === 'video');
+                if (lesson)
+                    return lesson;
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "videoLesson" }] : []));
+        this.videoSrc = computed(() => this.videoLesson()?.src ?? this.src(), ...(ngDevMode ? [{ debugName: "videoSrc" }] : []));
+        this.videoPoster = computed(() => this.videoLesson()?.poster ?? this.poster(), ...(ngDevMode ? [{ debugName: "videoPoster" }] : []));
+        this.videoTracks = computed(() => this.videoLesson()?.tracks ?? this.tracks(), ...(ngDevMode ? [{ debugName: "videoTracks" }] : []));
+        this.videoStageLabel = computed(() => this.videoLesson()?.stageLabel ?? this.stageLabel(), ...(ngDevMode ? [{ debugName: "videoStageLabel" }] : []));
+        this.videoTitle = computed(() => this.videoLesson()?.title, ...(ngDevMode ? [{ debugName: "videoTitle" }] : []));
+        this.lessonTitle = computed(() => this.activeLesson()?.title ?? '', ...(ngDevMode ? [{ debugName: "lessonTitle" }] : []));
+        /** Resume position handed to the player whenever the source changes. */
+        this.startTime = computed(() => this.videoLesson()?.resumeSeconds ?? 0, ...(ngDevMode ? [{ debugName: "startTime" }] : []));
+        this.hostClasses = computed(() => [
+            'pecb-course-player',
+            `pecb-course-player--panel-${this.panelPosition()}`,
+        ].join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+        /** Id of the lesson whose resume position has already been pushed into `currentTime`. */
+        this.resumeAppliedFor = null;
+        // Track the newest video lesson, including the initial selection.
+        effect(() => {
+            const lesson = this.activeLesson();
+            untracked(() => {
+                if (lesson && (lesson.type ?? 'video') === 'video') {
+                    this.videoLessonId.set(lesson.id);
+                }
+            });
+        });
+        // Seed the playhead from the lesson's stored position whenever the loaded
+        // video changes — including the very first one, which arrives as an input
+        // rather than through a click. Without this the panel would show 0:00 for a
+        // half-watched lesson until the media reported its own time.
+        effect(() => {
+            const lesson = this.videoLesson();
+            untracked(() => {
+                if (!lesson || lesson.id === this.resumeAppliedFor)
+                    return;
+                this.resumeAppliedFor = lesson.id;
+                this.currentTime.set(lesson.resumeSeconds ?? 0);
+            });
+        });
+    }
+    // ── Wiring ──────────────────────────────────────────────────────────────────
+    /** Panel → player: load a lesson, resuming where it left off. */
+    onLessonSelect(lesson) {
+        const isVideo = (lesson.type ?? 'video') === 'video';
+        if (isVideo) {
+            this.videoLessonId.set(lesson.id);
+            this.currentTime.set(lesson.resumeSeconds ?? 0);
+            this.playing.set(this.autoPlayOnSelect());
+        }
+        else {
+            // A quiz has nothing to play — stop the video and leave it on the stage.
+            this.playing.set(false);
+        }
+        this.lessonSelect.emit(lesson);
+    }
+    /** Panel → player: jump to a transcript cue and keep playing. */
+    onTranscriptSeek(seconds) {
+        this.currentTime.set(seconds);
+        this.playing.set(true);
+    }
+    onPlaybackEnded() {
+        const lesson = this.videoLesson();
+        if (lesson)
+            this.lessonEnded.emit(lesson);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CoursePlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CoursePlayerComponent, isStandalone: true, selector: "pecb-course-player", inputs: { modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null }, transcript: { classPropertyName: "transcript", publicName: "transcript", isSignal: true, isRequired: false, transformFunction: null }, activeLessonId: { classPropertyName: "activeLessonId", publicName: "activeLessonId", isSignal: true, isRequired: false, transformFunction: null }, playing: { classPropertyName: "playing", publicName: "playing", isSignal: true, isRequired: false, transformFunction: null }, currentTime: { classPropertyName: "currentTime", publicName: "currentTime", isSignal: true, isRequired: false, transformFunction: null }, panelTab: { classPropertyName: "panelTab", publicName: "panelTab", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, tracks: { classPropertyName: "tracks", publicName: "tracks", isSignal: true, isRequired: false, transformFunction: null }, stageLabel: { classPropertyName: "stageLabel", publicName: "stageLabel", isSignal: true, isRequired: false, transformFunction: null }, watermark: { classPropertyName: "watermark", publicName: "watermark", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, seekStep: { classPropertyName: "seekStep", publicName: "seekStep", isSignal: true, isRequired: false, transformFunction: null }, videoLabels: { classPropertyName: "videoLabels", publicName: "videoLabels", isSignal: true, isRequired: false, transformFunction: null }, autoPlayOnSelect: { classPropertyName: "autoPlayOnSelect", publicName: "autoPlayOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showLessonTitle: { classPropertyName: "showLessonTitle", publicName: "showLessonTitle", isSignal: true, isRequired: false, transformFunction: null }, panelPosition: { classPropertyName: "panelPosition", publicName: "panelPosition", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, showTabs: { classPropertyName: "showTabs", publicName: "showTabs", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, soloSingleLessonModules: { classPropertyName: "soloSingleLessonModules", publicName: "soloSingleLessonModules", isSignal: true, isRequired: false, transformFunction: null }, panelLabels: { classPropertyName: "panelLabels", publicName: "panelLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeLessonId: "activeLessonIdChange", playing: "playingChange", currentTime: "currentTimeChange", panelTab: "panelTabChange", lessonSelect: "lessonSelect", lessonEnded: "lessonEnded", timeUpdate: "timeUpdate", certificateClick: "certificateClick", playerError: "playerError" }, host: { classAttribute: "pecb-course-player-host" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n  <!-- \u2500\u2500 Video stage \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-course-player__stage\">\n    <pecb-video-player\n      class=\"pecb-course-player__video\"\n      [src]=\"videoSrc()\"\n      [poster]=\"videoPoster()\"\n      [tracks]=\"videoTracks()\"\n      [title]=\"videoTitle()\"\n      [label]=\"videoStageLabel()\"\n      [watermark]=\"watermark()\"\n      [aspectRatio]=\"aspectRatio()\"\n      [preload]=\"preload()\"\n      [crossOrigin]=\"crossOrigin()\"\n      [seekStep]=\"seekStep()\"\n      [startTime]=\"startTime()\"\n      [labels]=\"videoLabels()\"\n      [(playing)]=\"playing\"\n      [(currentTime)]=\"currentTime\"\n      (timeUpdate)=\"timeUpdate.emit($event)\"\n      (playbackEnded)=\"onPlaybackEnded()\"\n      (playerError)=\"playerError.emit($event)\"\n    ></pecb-video-player>\n\n    @if (showLessonTitle() && lessonTitle()) {\n      <h2 class=\"pecb-course-player__title\">{{ lessonTitle() }}</h2>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Content sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-course-player__panel\">\n    <div class=\"pecb-course-player__panel-inner\">\n      <pecb-course-content-panel\n        [modules]=\"modules()\"\n        [transcript]=\"transcript()\"\n        [(activeLessonId)]=\"activeLessonId\"\n        [(tab)]=\"panelTab\"\n        [playing]=\"playing()\"\n        [currentTime]=\"currentTime()\"\n        [layout]=\"layout()\"\n        [density]=\"density()\"\n        [accent]=\"accent()\"\n        [showTabs]=\"showTabs()\"\n        [showSearch]=\"showSearch()\"\n        [showProgress]=\"showProgress()\"\n        [soloSingleLessonModules]=\"soloSingleLessonModules()\"\n        [labels]=\"panelLabels()\"\n        (lessonSelect)=\"onLessonSelect($event)\"\n        (transcriptSeek)=\"onTranscriptSeek($event)\"\n        (certificateClick)=\"certificateClick.emit()\"\n      ></pecb-course-content-panel>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;container-type:inline-size;container-name:pecb-course-player}.pecb-course-player{display:grid;grid-template-columns:minmax(0,1fr) var(--pecb-course-player-panel-width, 408px);gap:var(--pecb-course-player-gap, 20px);align-items:stretch;height:100%;min-height:0}.pecb-course-player--panel-start{grid-template-columns:var(--pecb-course-player-panel-width, 408px) minmax(0,1fr)}.pecb-course-player--panel-start .pecb-course-player__stage{order:2}.pecb-course-player--panel-start .pecb-course-player__panel{order:1}.pecb-course-player__stage{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}.pecb-course-player__video{flex:0 0 auto}.pecb-course-player__title{flex:0 0 auto;margin:0;padding:0 2px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:700;line-height:1.35;color:#212427;text-wrap:pretty}.pecb-course-player__panel{position:relative;min-width:0;min-height:240px}.pecb-course-player__panel-inner{position:absolute;inset:0;display:flex;overflow:hidden;border:1px solid #ececec;border-radius:var(--pecb-course-player-radius, 12px);background:#fff}.pecb-course-player pecb-course-content-panel{flex:1 1 auto;min-width:0}@container pecb-course-player (max-width: 900px){.pecb-course-player,.pecb-course-player--panel-start{grid-template-columns:minmax(0,1fr);height:auto}.pecb-course-player__stage,.pecb-course-player--panel-start .pecb-course-player__stage{order:1}.pecb-course-player__panel,.pecb-course-player--panel-start .pecb-course-player__panel{order:2;position:static;min-height:0;height:var(--pecb-course-player-panel-stacked-height, 460px)}.pecb-course-player__panel-inner{position:static;height:100%}}@container pecb-course-player (max-width: 560px){.pecb-course-player{gap:16px}.pecb-course-player__panel{height:var(--pecb-course-player-panel-stacked-height, 400px)}.pecb-course-player__title{font-size:14px}}\n"], dependencies: [{ kind: "component", type: VideoPlayerComponent, selector: "pecb-video-player", inputs: ["src", "poster", "tracks", "title", "crossOrigin", "preload", "autoplay", "loop", "playsInline", "startTime", "watermark", "label", "aspectRatio", "showCenterButton", "showSkipBack", "showVolume", "showTime", "showCaptions", "showSettings", "showFullscreen", "seekStep", "playbackRates", "labels", "playing", "currentTime", "volume", "muted", "playbackRate", "captionsEnabled"], outputs: ["playingChange", "currentTimeChange", "volumeChange", "mutedChange", "playbackRateChange", "captionsEnabledChange", "timeUpdate", "loadedMetadata", "seekEnd", "playbackEnded", "fullscreenChange", "playerError"] }, { kind: "component", type: CourseContentPanelComponent, selector: "pecb-course-content-panel", inputs: ["modules", "transcript", "activeLessonId", "tab", "openModuleId", "autoscroll", "query", "transcriptQuery", "playing", "currentTime", "layout", "density", "accent", "showTabs", "showSearch", "showTranscriptSearch", "showAutoscroll", "showProgress", "showCertificate", "soloSingleLessonModules", "labels"], outputs: ["activeLessonIdChange", "tabChange", "openModuleIdChange", "autoscrollChange", "queryChange", "transcriptQueryChange", "lessonSelect", "transcriptSeek", "moduleToggle", "certificateClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CoursePlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pecb-course-player', standalone: true, imports: [VideoPlayerComponent, CourseContentPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'pecb-course-player-host' }, template: "<div [class]=\"hostClasses()\">\n  <!-- \u2500\u2500 Video stage \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-course-player__stage\">\n    <pecb-video-player\n      class=\"pecb-course-player__video\"\n      [src]=\"videoSrc()\"\n      [poster]=\"videoPoster()\"\n      [tracks]=\"videoTracks()\"\n      [title]=\"videoTitle()\"\n      [label]=\"videoStageLabel()\"\n      [watermark]=\"watermark()\"\n      [aspectRatio]=\"aspectRatio()\"\n      [preload]=\"preload()\"\n      [crossOrigin]=\"crossOrigin()\"\n      [seekStep]=\"seekStep()\"\n      [startTime]=\"startTime()\"\n      [labels]=\"videoLabels()\"\n      [(playing)]=\"playing\"\n      [(currentTime)]=\"currentTime\"\n      (timeUpdate)=\"timeUpdate.emit($event)\"\n      (playbackEnded)=\"onPlaybackEnded()\"\n      (playerError)=\"playerError.emit($event)\"\n    ></pecb-video-player>\n\n    @if (showLessonTitle() && lessonTitle()) {\n      <h2 class=\"pecb-course-player__title\">{{ lessonTitle() }}</h2>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Content sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"pecb-course-player__panel\">\n    <div class=\"pecb-course-player__panel-inner\">\n      <pecb-course-content-panel\n        [modules]=\"modules()\"\n        [transcript]=\"transcript()\"\n        [(activeLessonId)]=\"activeLessonId\"\n        [(tab)]=\"panelTab\"\n        [playing]=\"playing()\"\n        [currentTime]=\"currentTime()\"\n        [layout]=\"layout()\"\n        [density]=\"density()\"\n        [accent]=\"accent()\"\n        [showTabs]=\"showTabs()\"\n        [showSearch]=\"showSearch()\"\n        [showProgress]=\"showProgress()\"\n        [soloSingleLessonModules]=\"soloSingleLessonModules()\"\n        [labels]=\"panelLabels()\"\n        (lessonSelect)=\"onLessonSelect($event)\"\n        (transcriptSeek)=\"onTranscriptSeek($event)\"\n        (certificateClick)=\"certificateClick.emit()\"\n      ></pecb-course-content-panel>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;container-type:inline-size;container-name:pecb-course-player}.pecb-course-player{display:grid;grid-template-columns:minmax(0,1fr) var(--pecb-course-player-panel-width, 408px);gap:var(--pecb-course-player-gap, 20px);align-items:stretch;height:100%;min-height:0}.pecb-course-player--panel-start{grid-template-columns:var(--pecb-course-player-panel-width, 408px) minmax(0,1fr)}.pecb-course-player--panel-start .pecb-course-player__stage{order:2}.pecb-course-player--panel-start .pecb-course-player__panel{order:1}.pecb-course-player__stage{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}.pecb-course-player__video{flex:0 0 auto}.pecb-course-player__title{flex:0 0 auto;margin:0;padding:0 2px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:700;line-height:1.35;color:#212427;text-wrap:pretty}.pecb-course-player__panel{position:relative;min-width:0;min-height:240px}.pecb-course-player__panel-inner{position:absolute;inset:0;display:flex;overflow:hidden;border:1px solid #ececec;border-radius:var(--pecb-course-player-radius, 12px);background:#fff}.pecb-course-player pecb-course-content-panel{flex:1 1 auto;min-width:0}@container pecb-course-player (max-width: 900px){.pecb-course-player,.pecb-course-player--panel-start{grid-template-columns:minmax(0,1fr);height:auto}.pecb-course-player__stage,.pecb-course-player--panel-start .pecb-course-player__stage{order:1}.pecb-course-player__panel,.pecb-course-player--panel-start .pecb-course-player__panel{order:2;position:static;min-height:0;height:var(--pecb-course-player-panel-stacked-height, 460px)}.pecb-course-player__panel-inner{position:static;height:100%}}@container pecb-course-player (max-width: 560px){.pecb-course-player{gap:16px}.pecb-course-player__panel{height:var(--pecb-course-player-panel-stacked-height, 400px)}.pecb-course-player__title{font-size:14px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }], transcript: [{ type: i0.Input, args: [{ isSignal: true, alias: "transcript", required: false }] }], activeLessonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeLessonId", required: false }] }, { type: i0.Output, args: ["activeLessonIdChange"] }], playing: [{ type: i0.Input, args: [{ isSignal: true, alias: "playing", required: false }] }, { type: i0.Output, args: ["playingChange"] }], currentTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTime", required: false }] }, { type: i0.Output, args: ["currentTimeChange"] }], panelTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTab", required: false }] }, { type: i0.Output, args: ["panelTabChange"] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], tracks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracks", required: false }] }], stageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stageLabel", required: false }] }], watermark: [{ type: i0.Input, args: [{ isSignal: true, alias: "watermark", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], seekStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "seekStep", required: false }] }], videoLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoLabels", required: false }] }], autoPlayOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayOnSelect", required: false }] }], showLessonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLessonTitle", required: false }] }], panelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelPosition", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], showTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTabs", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], soloSingleLessonModules: [{ type: i0.Input, args: [{ isSignal: true, alias: "soloSingleLessonModules", required: false }] }], panelLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabels", required: false }] }], lessonSelect: [{ type: i0.Output, args: ["lessonSelect"] }], lessonEnded: [{ type: i0.Output, args: ["lessonEnded"] }], timeUpdate: [{ type: i0.Output, args: ["timeUpdate"] }], certificateClick: [{ type: i0.Output, args: ["certificateClick"] }], playerError: [{ type: i0.Output, args: ["playerError"] }] } });
+
 /**
  * An injectable, Toastr-style notification service.
  *
@@ -17297,5 +19110,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionItemComponent, AccordionSmallComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, DEFAULT_LANGUAGES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, capitalize, closestElement, copyToClipboard, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, formatCount, formatErrorForLog, formatErrorMessage, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
+export { AccordionItemComponent, AccordionSmallComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseContentPanelComponent, CoursePlayerComponent, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, capitalize, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
 //# sourceMappingURL=pecb-ui-components.mjs.map