@algoux/standard-ranklist-renderer-component-angular 0.6.2 → 0.6.4

package/dist/fesm2022/algoux-standard-ranklist-renderer-component-angular.mjs

@@ -2,116 +2,8 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, Input, Component, inject, TemplateRef, Directive, ContentChild, ChangeDetectionStrategy } from '@angular/core';
-import { EnumTheme, formatTimeDuration, numberToAlphabet, resolveText, secToTimeStr, resolveStyle, resolveUserMarkers, canRegenerateRanklist } from '@algoux/standard-ranklist-utils';
-import { ensureModalInteractionTracker, unlockModalBodyScroll, SRK_ANIMATED_MODAL_ROOT_CLASS, resolveModalTransformOrigin, MODAL_ANIMATION_DURATION_MS, lockModalBodyScroll, registerModalFocusScope, unregisterModalFocusScope, srkSupportedVersions, calculateProblemStatisticsFooter, caniuse, shouldShowTimeColumn as shouldShowTimeColumn$1, getProblemHeaderBackgroundImage as getProblemHeaderBackgroundImage$1, getMarkerPresentation as getMarkerPresentation$1, resolveSrkAssetUrl as resolveSrkAssetUrl$1, calculateDirtPercentage, calculateSEValue, getRankProblemStatusCellPresentation, captureModalTriggerPointFromMouseEvent, formatProblemStatisticsAcceptedMinute, formatProblemStatisticsAverageHardness, formatProblemStatisticsPercent } from '@algoux/standard-ranklist-renderer-component-core';
-
-const defaultBackgroundColor = {
-    [EnumTheme.light]: '#ffffff',
-    [EnumTheme.dark]: '#191919',
-};
-function resolveSrkAssetUrl(url, field, formatter) {
-    if (typeof formatter === 'function') {
-        return formatter(url, field);
-    }
-    if (url.startsWith('//')) {
-        return url;
-    }
-    const protocolMatch = url.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):/);
-    if (protocolMatch) {
-        const protocol = protocolMatch[1].toLowerCase();
-        if (protocol === 'http' || protocol === 'https' || protocol === 'data') {
-            return url;
-        }
-        console.warn(`unsupported protocol "${protocol}" in srk asset url:`, url);
-        return '';
-    }
-    console.warn('unsupported srk asset url:', url);
-    return '';
-}
-function getAcceptedStatusDetails(status) {
-    return `${status.tries}/${status.time ? formatTimeDuration(status.time, 'min', Math.floor) : '-'}`;
-}
-function getSolutionResultMeta(result) {
-    switch (result) {
-        case 'FB':
-            return { label: 'First Blood', className: 'srk-preset-result-fb' };
-        case 'AC':
-            return { label: 'Accepted', className: 'srk-preset-result-ac' };
-        case 'RJ':
-            return { label: 'Rejected', className: 'srk-preset-result-rj' };
-        case '?':
-            return { label: 'Frozen', className: 'srk-preset-result-fz' };
-        case 'WA':
-            return { label: 'Wrong Answer', className: 'srk-preset-result-rj' };
-        case 'PE':
-            return { label: 'Presentation Error', className: 'srk-preset-result-rj' };
-        case 'TLE':
-            return { label: 'Time Limit Exceeded', className: 'srk-preset-result-rj' };
-        case 'MLE':
-            return { label: 'Memory Limit Exceeded', className: 'srk-preset-result-rj' };
-        case 'OLE':
-            return { label: 'Output Limit Exceeded', className: 'srk-preset-result-rj' };
-        case 'RTE':
-            return { label: 'Runtime Error', className: 'srk-preset-result-rj' };
-        case 'NOUT':
-            return { label: 'No Output' };
-        case 'CE':
-            return { label: 'Compile Error' };
-        case 'UKE':
-            return { label: 'Unknown Error' };
-        case null:
-            return { label: '--' };
-        default:
-            return { label: result };
-    }
-}
-function getSolutionModalTitle(problemIndex, user) {
-    return `Solutions of ${numberToAlphabet(problemIndex)} (${resolveText(user.name)})`;
-}
-function formatSolutionTimestamp(solution) {
-    return secToTimeStr(formatTimeDuration(solution.time, 's'));
-}
-function getProblemHeaderBackgroundImage(style, theme) {
-    const { backgroundColor } = resolveStyle(style || {});
-    const resolvedColor = backgroundColor[theme] || defaultBackgroundColor[theme];
-    const bgColorAlphaStr = withAlpha(resolvedColor, 0.27);
-    return `linear-gradient(180deg, ${resolvedColor} 0%, ${resolvedColor} 10%, ${bgColorAlphaStr} 10%, transparent 100%)`;
-}
-function getMarkerPresentation(marker, theme) {
-    if (typeof marker.style === 'string') {
-        return { className: `srk-preset-marker-${marker.style}` };
-    }
-    if (marker.style) {
-        return {
-            style: {
-                backgroundColor: resolveStyle(marker.style).backgroundColor[theme],
-            },
-        };
-    }
-    return {};
-}
-function shouldShowTimeColumn(rows) {
-    return rows.some((row) => Boolean(row.score?.time));
-}
-function withAlpha(color, alpha) {
-    const hexMatch = color.match(/^#([0-9a-f]{6})$/i);
-    if (hexMatch) {
-        const value = hexMatch[1];
-        const red = parseInt(value.slice(0, 2), 16);
-        const green = parseInt(value.slice(2, 4), 16);
-        const blue = parseInt(value.slice(4, 6), 16);
-        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-    }
-    const rgbMatch = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-    if (rgbMatch) {
-        return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
-    }
-    const rgbaMatch = color.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*[\d.]+\s*\)$/i);
-    if (rgbaMatch) {
-        return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${alpha})`;
-    }
-    return color;
-}
+import { ensureModalInteractionTracker, unlockModalBodyScroll, SRK_ANIMATED_MODAL_ROOT_CLASS, resolveModalTransformOrigin, MODAL_ANIMATION_DURATION_MS, lockModalBodyScroll, registerModalFocusScope, unregisterModalFocusScope, formatSolutionTimestamp, getSolutionModalTitle, getSolutionResultMeta, getMarkerPresentation, resolveSrkAssetUrl, formatTeamMemberName, getProgressDurationMinutes, getProgressMaxAvailableMinutes, isProgressEnded, getProgressMetrics, srkSupportedVersions, calculateProblemStatisticsFooter, caniuse, shouldShowTimeColumn, getProblemHeaderBackgroundImage, calculateDirtPercentage, calculateSEValue, getRankProblemStatusCellPresentation, captureModalTriggerPointFromMouseEvent, formatProblemStatisticsAcceptedMinute, formatProblemStatisticsAverageHardness, formatProblemStatisticsPercent } from '@algoux/standard-ranklist-renderer-component-core';
+import { EnumTheme, resolveUserMarkers, resolveText, secToTimeStr, numberToAlphabet, formatTimeDuration, resolveStyle } from '@algoux/standard-ranklist-utils';
 
 class ModalComponent {
     open = false;
@@ -382,6 +274,7 @@ class DefaultSolutionModalComponent {
     rootClassName = 'srk-general-modal-root';
     wrapClassName = 'srk-solutions-modal';
     panelStyle = {};
+    languages;
     openChange = new EventEmitter();
     close = new EventEmitter();
     formatSolutionTimestamp = formatSolutionTimestamp;
@@ -398,7 +291,7 @@ class DefaultSolutionModalComponent {
         }
     }
     resolvedTitle() {
-        return this.title || (this.cachedUser ? getSolutionModalTitle(this.cachedProblemIndex, this.cachedUser) : '');
+        return this.title || (this.cachedUser ? getSolutionModalTitle(this.cachedProblemIndex, this.cachedUser, this.languages) : '');
     }
     solutionMeta(solution) {
         return getSolutionResultMeta(solution.result);
@@ -407,7 +300,7 @@ class DefaultSolutionModalComponent {
         return `${solution.result}_${solution.time?.[0]}_${index}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultSolutionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultSolutionModalComponent, isStandalone: true, selector: "srk-default-solution-modal", inputs: { open: "open", user: "user", problem: "problem", problemIndex: "problemIndex", solutions: "solutions", title: "title", width: "width", rootClassName: "rootClassName", wrapClassName: "wrapClassName", panelStyle: "panelStyle" }, outputs: { openChange: "openChange", close: "close" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultSolutionModalComponent, isStandalone: true, selector: "srk-default-solution-modal", inputs: { open: "open", user: "user", problem: "problem", problemIndex: "problemIndex", solutions: "solutions", title: "title", width: "width", rootClassName: "rootClassName", wrapClassName: "wrapClassName", panelStyle: "panelStyle", languages: "languages" }, outputs: { openChange: "openChange", close: "close" }, usesOnChanges: true, ngImport: i0, template: `
     <srk-modal
       *ngIf="cachedUser"
       [open]="open"
@@ -505,6 +398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], panelStyle: [{
                 type: Input
+            }], languages: [{
+                type: Input
             }], openChange: [{
                 type: Output
             }], close: [{
@@ -522,9 +417,9 @@ class DefaultUserModalComponent {
     wrapClassName = 'srk-user-modal';
     panelStyle = {};
     formatSrkAssetUrl;
+    languages;
     openChange = new EventEmitter();
     close = new EventEmitter();
-    resolveText = resolveText;
     cachedUser = null;
     ngOnChanges(_changes) {
         if (this.user) {
@@ -543,14 +438,20 @@ class DefaultUserModalComponent {
     formatAssetUrl(url, field) {
         return resolveSrkAssetUrl(url, field, this.formatSrkAssetUrl);
     }
+    resolveDisplayText(text) {
+        return resolveText(text, this.languages);
+    }
+    formatMemberName(member) {
+        return formatTeamMemberName(member, this.languages);
+    }
     trackByMarkerId(_index, entry) {
         return entry.marker.id;
     }
-    trackByMemberName(_index, member) {
-        return resolveText(member.name);
-    }
+    trackByMemberName = (_index, member) => {
+        return this.resolveDisplayText(member.name);
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultUserModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultUserModalComponent, isStandalone: true, selector: "srk-default-user-modal", inputs: { open: "open", user: "user", markers: "markers", theme: "theme", title: "title", width: "width", rootClassName: "rootClassName", wrapClassName: "wrapClassName", panelStyle: "panelStyle", formatSrkAssetUrl: "formatSrkAssetUrl" }, outputs: { openChange: "openChange", close: "close" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultUserModalComponent, isStandalone: true, selector: "srk-default-user-modal", inputs: { open: "open", user: "user", markers: "markers", theme: "theme", title: "title", width: "width", rootClassName: "rootClassName", wrapClassName: "wrapClassName", panelStyle: "panelStyle", formatSrkAssetUrl: "formatSrkAssetUrl", languages: "languages" }, outputs: { openChange: "openChange", close: "close" }, usesOnChanges: true, ngImport: i0, template: `
     <srk-modal
       *ngIf="cachedUser as modalUser"
       [open]="open"
@@ -563,9 +464,9 @@ class DefaultUserModalComponent {
       (openChange)="openChange.emit($event)"
     >
       <div class="srk-user-modal-info">
-        <h3 class="srk-user-modal-info-user-name">{{ resolveText(modalUser.name) }}</h3>
+        <h3 class="srk-user-modal-info-user-name">{{ resolveDisplayText(modalUser.name) }}</h3>
         <p *ngIf="modalUser.organization" class="srk-user-modal-info-user-second-name">
-          {{ resolveText(modalUser.organization) }}
+          {{ resolveDisplayText(modalUser.organization) }}
         </p>
         <div class="srk-user-modal-info-labels">
           <span class="srk-user-modal-info-labels-label srk-user-modal-info-labels-label-preset-general">
@@ -577,13 +478,13 @@ class DefaultUserModalComponent {
             [ngClass]="entry.presentation.className"
             [ngStyle]="entry.presentation.style"
           >
-            {{ resolveText(entry.marker.label) }}
+            {{ resolveDisplayText(entry.marker.label) }}
           </span>
         </div>
         <div *ngIf="modalUser.teamMembers?.length" class="srk-user-modal-info-team-members">
           <ng-container *ngFor="let member of modalUser.teamMembers; let index = index; trackBy: trackByMemberName">
             <span *ngIf="index > 0" class="srk-user-modal-info-team-members-slash"> / </span>
-            <span>{{ resolveText(member.name) }}</span>
+            <span>{{ formatMemberName(member) }}</span>
           </ng-container>
         </div>
         <div *ngIf="modalUser.photo" class="srk-user-modal-info-photo">
@@ -616,9 +517,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       (openChange)="openChange.emit($event)"
     >
       <div class="srk-user-modal-info">
-        <h3 class="srk-user-modal-info-user-name">{{ resolveText(modalUser.name) }}</h3>
+        <h3 class="srk-user-modal-info-user-name">{{ resolveDisplayText(modalUser.name) }}</h3>
         <p *ngIf="modalUser.organization" class="srk-user-modal-info-user-second-name">
-          {{ resolveText(modalUser.organization) }}
+          {{ resolveDisplayText(modalUser.organization) }}
         </p>
         <div class="srk-user-modal-info-labels">
           <span class="srk-user-modal-info-labels-label srk-user-modal-info-labels-label-preset-general">
@@ -630,13 +531,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             [ngClass]="entry.presentation.className"
             [ngStyle]="entry.presentation.style"
           >
-            {{ resolveText(entry.marker.label) }}
+            {{ resolveDisplayText(entry.marker.label) }}
           </span>
         </div>
         <div *ngIf="modalUser.teamMembers?.length" class="srk-user-modal-info-team-members">
           <ng-container *ngFor="let member of modalUser.teamMembers; let index = index; trackBy: trackByMemberName">
             <span *ngIf="index > 0" class="srk-user-modal-info-team-members-slash"> / </span>
-            <span>{{ resolveText(member.name) }}</span>
+            <span>{{ formatMemberName(member) }}</span>
           </ng-container>
         </div>
         <div *ngIf="modalUser.photo" class="srk-user-modal-info-photo">
@@ -670,56 +571,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], formatSrkAssetUrl: [{
                 type: Input
+            }], languages: [{
+                type: Input
             }], openChange: [{
                 type: Output
             }], close: [{
                 type: Output
             }] } });
 
-function getProgressDurationMinutes(contest) {
-    return formatTimeDuration(contest.duration, 'min');
-}
-function getProgressMaxAvailableMinutes(contest, localTime, td = 0) {
-    const startAt = new Date(contest.startAt).getTime();
-    const currentTime = localTime - td;
-    return Math.min(Math.max(Math.floor((currentTime - startAt) / 60000), 0), getProgressDurationMinutes(contest));
-}
-function isProgressEnded(contest, localTime, td = 0) {
-    const startAt = new Date(contest.startAt).getTime();
-    const endAt = startAt + formatTimeDuration(contest.duration, 'ms');
-    const currentTime = localTime - td;
-    return currentTime >= endAt;
-}
-function getProgressMetrics(data, localTime, td, timeTravelCurrentValue, inTimeMachine) {
-    const { contest } = data;
-    const startAt = new Date(contest.startAt).getTime();
-    const endAt = startAt + formatTimeDuration(contest.duration, 'ms');
-    const frozenLength = contest.frozenDuration ? formatTimeDuration(contest.frozenDuration, 'ms') : 0;
-    const currentTime = localTime - td;
-    const length = endAt - startAt;
-    const frozenBreakpoint = length ? 1 - frozenLength / length : 1;
-    const elapsed = Math.min(Math.max(currentTime - startAt, 0), length);
-    const remaining = length - elapsed;
-    const frozenAt = endAt - frozenLength;
-    const percent = length ? (elapsed / length) * 100 : 0;
-    const normalPercent = length ? (Math.max(Math.min(currentTime, frozenAt) - startAt, 0) / length) * 100 : 0;
-    const normalInnerPercent = Math.min(100, frozenBreakpoint ? normalPercent / frozenBreakpoint : 0);
-    const frozenPercent = percent - normalPercent;
-    const frozenInnerPercent = Math.min(100, 1 - frozenBreakpoint ? frozenPercent / (1 - frozenBreakpoint) : 0);
-    const timeTravelElapsed = timeTravelCurrentValue * 60 * 1000;
-    const timeTravelRemaining = length - timeTravelElapsed;
-    return {
-        elapsed: inTimeMachine ? timeTravelElapsed : elapsed,
-        remaining: inTimeMachine ? timeTravelRemaining : remaining,
-        frozenBreakpoint,
-        normalInnerPercent,
-        frozenInnerPercent,
-        timeTravelElapsed,
-        timeTravelRemaining,
-        supportRegen: canRegenerateRanklist(data),
-    };
-}
-
 class ProgressBarComponent {
     data;
     enableTimeTravel = false;
@@ -961,6 +820,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+class SrkProblemHeaderCellTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrkProblemHeaderCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SrkProblemHeaderCellTemplateDirective, isStandalone: true, selector: "ng-template[srkProblemHeaderCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrkProblemHeaderCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[srkProblemHeaderCell]',
+                    standalone: true,
+                }]
+        }] });
+
 class SrkStatusCellTemplateDirective {
     templateRef = inject(TemplateRef);
     static ngTemplateContextGuard(_directive, context) {
@@ -1009,8 +884,11 @@ class RanklistComponent {
     showSEColumn = false;
     emptyStatusPlaceholder = null;
     userAvatarPlacement = 'user';
+    languages;
     userClick = new EventEmitter();
+    problemClick = new EventEmitter();
     solutionClick = new EventEmitter();
+    problemHeaderCellTemplate;
     statusCellTemplate;
     userCellTemplate;
     supportedVersions = srkSupportedVersions;
@@ -1023,8 +901,8 @@ class RanklistComponent {
             tooltip: 'Number of participants who solved this problem',
         },
         {
-            key: 'tried',
-            label: 'Tried',
+            key: 'attempted',
+            label: 'Attempted',
             tooltip: 'Number of participants who attempted this problem',
         },
         {
@@ -1069,7 +947,7 @@ class RanklistComponent {
         return caniuse(this.data.version);
     }
     showTimeColumn() {
-        return shouldShowTimeColumn$1(this.data.rows);
+        return shouldShowTimeColumn(this.data.rows);
     }
     showAvatarInOrganization() {
         return this.splitOrganization && this.userAvatarPlacement === 'organization';
@@ -1084,7 +962,7 @@ class RanklistComponent {
         return rankValue.rank ? rankValue.rank : row.user.official === false ? '＊' : '';
     }
     resolveDisplayText(text) {
-        return resolveText(text);
+        return resolveText(text, this.languages);
     }
     resolveSeriesColumnTitle(series, index) {
         const seriesTitles = this.columnTitles?.series;
@@ -1107,16 +985,16 @@ class RanklistComponent {
         return `${statistics.accepted} / ${statistics.submitted} (${ratio}%)`;
     }
     problemHeaderBackgroundImage(problem, gradientDirection = 180) {
-        return getProblemHeaderBackgroundImage$1(problem.style, this.theme, gradientDirection);
+        return getProblemHeaderBackgroundImage(problem.style, this.theme, gradientDirection);
     }
     resolvedUserMarkers(user) {
         return resolveUserMarkers(user, this.data.markers).map((marker) => ({
             marker,
-            presentation: getMarkerPresentation$1(marker, this.theme),
+            presentation: getMarkerPresentation(marker, this.theme),
         }));
     }
     formatAssetUrl(url, field) {
-        return resolveSrkAssetUrl$1(url, field, this.formatSrkAssetUrl);
+        return resolveSrkAssetUrl(url, field, this.formatSrkAssetUrl);
     }
     formatTime(time) {
         return formatTimeDuration(time, 'min', Math.floor);
@@ -1167,6 +1045,27 @@ class RanklistComponent {
     statusCellTabIndex(status) {
         return this.isStatusClickable(status) ? 0 : null;
     }
+    hasProblemClickListener() {
+        const emitter = this.problemClick;
+        return emitter.observed === true || Boolean(emitter.observers?.length);
+    }
+    problemHeaderRole() {
+        return this.hasProblemClickListener() ? 'button' : null;
+    }
+    problemHeaderTabIndex() {
+        return this.hasProblemClickListener() ? 0 : null;
+    }
+    buildProblemHeaderCellContext(problem, problemIndex) {
+        return {
+            $implicit: problem,
+            problem,
+            problemIndex,
+            index: problemIndex,
+            ranklist: this.data,
+            languages: this.languages,
+            onClick: (event) => this.emitProblemClick(event, problem, problemIndex),
+        };
+    }
     buildUserCellContext(row, rowIndex) {
         return {
             $implicit: row.user,
@@ -1177,6 +1076,7 @@ class RanklistComponent {
             markers: this.data.markers,
             hideOrganization: this.splitOrganization,
             hideAvatar: this.showAvatarInOrganization(),
+            languages: this.languages,
             onClick: (event) => this.emitUserClick(event, row, rowIndex),
         };
     }
@@ -1194,6 +1094,7 @@ class RanklistComponent {
             statusCellPreset: this.statusCellPreset,
             statusColorAsText: this.statusColorAsText,
             emptyStatusPlaceholder: this.emptyStatusPlaceholder,
+            languages: this.languages,
             onClick: (event) => this.emitSolutionClick(event, row, rowIndex, status, problemIndex),
         };
     }
@@ -1201,6 +1102,13 @@ class RanklistComponent {
         event.preventDefault();
         this.emitUserClick(undefined, row, rowIndex);
     }
+    activateProblemHeaderFromKeyboard(event, problem, problemIndex) {
+        if (!this.hasProblemClickListener()) {
+            return;
+        }
+        event.preventDefault();
+        this.emitProblemClick(undefined, problem, problemIndex);
+    }
     activateStatusCellFromKeyboard(event, row, rowIndex, status, problemIndex) {
         event.preventDefault();
         this.emitSolutionClick(undefined, row, rowIndex, status, problemIndex);
@@ -1223,6 +1131,27 @@ class RanklistComponent {
             ranklist: this.data,
         });
     }
+    emitProblemClick(event, problem, problemIndex) {
+        if (!this.hasProblemClickListener()) {
+            return;
+        }
+        if (event) {
+            event.preventDefault();
+            captureModalTriggerPointFromMouseEvent(event, {
+                source: 'problem-header',
+                context: {
+                    problemIndex,
+                    problemAlias: problem.alias || null,
+                    problemTitle: this.resolveDisplayText(problem.title) || null,
+                },
+            });
+        }
+        this.problemClick.emit({
+            problem,
+            problemIndex,
+            ranklist: this.data,
+        });
+    }
     emitSolutionClick(event, row, rowIndex, status, problemIndex) {
         const solutions = this.getStatusSolutions(status);
         if (!solutions.length) {
@@ -1283,8 +1212,8 @@ class RanklistComponent {
         switch (key) {
             case 'accepted':
                 return stat.accepted;
-            case 'tried':
-                return stat.tried;
+            case 'attempted':
+                return stat.attempted;
             case 'submitted':
                 return stat.submitted;
             case 'dirt':
@@ -1303,8 +1232,8 @@ class RanklistComponent {
         switch (key) {
             case 'accepted':
                 return formatProblemStatisticsPercent(stat.accepted, stat.participantCount);
-            case 'tried':
-                return formatProblemStatisticsPercent(stat.tried, stat.participantCount);
+            case 'attempted':
+                return formatProblemStatisticsPercent(stat.attempted, stat.participantCount);
             case 'dirt':
                 return formatProblemStatisticsPercent(stat.dirt, stat.dirtSubmitted);
             default:
@@ -1312,7 +1241,7 @@ class RanklistComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RanklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RanklistComponent, isStandalone: true, selector: "srk-ranklist", inputs: { data: "data", theme: "theme", rowBordered: "rowBordered", columnBordered: "columnBordered", rowStriped: "rowStriped", formatSrkAssetUrl: "formatSrkAssetUrl", splitOrganization: "splitOrganization", columnTitles: "columnTitles", statusCellPreset: "statusCellPreset", statusColorAsText: "statusColorAsText", showProblemStatisticsFooter: "showProblemStatisticsFooter", showDirtColumn: "showDirtColumn", showSEColumn: "showSEColumn", emptyStatusPlaceholder: "emptyStatusPlaceholder", userAvatarPlacement: "userAvatarPlacement" }, outputs: { userClick: "userClick", solutionClick: "solutionClick" }, queries: [{ propertyName: "statusCellTemplate", first: true, predicate: SrkStatusCellTemplateDirective, descendants: true }, { propertyName: "userCellTemplate", first: true, predicate: SrkUserCellTemplateDirective, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RanklistComponent, isStandalone: true, selector: "srk-ranklist", inputs: { data: "data", theme: "theme", rowBordered: "rowBordered", columnBordered: "columnBordered", rowStriped: "rowStriped", formatSrkAssetUrl: "formatSrkAssetUrl", splitOrganization: "splitOrganization", columnTitles: "columnTitles", statusCellPreset: "statusCellPreset", statusColorAsText: "statusColorAsText", showProblemStatisticsFooter: "showProblemStatisticsFooter", showDirtColumn: "showDirtColumn", showSEColumn: "showSEColumn", emptyStatusPlaceholder: "emptyStatusPlaceholder", userAvatarPlacement: "userAvatarPlacement", languages: "languages" }, outputs: { userClick: "userClick", problemClick: "problemClick", solutionClick: "solutionClick" }, queries: [{ propertyName: "problemHeaderCellTemplate", first: true, predicate: SrkProblemHeaderCellTemplateDirective, descendants: true }, { propertyName: "statusCellTemplate", first: true, predicate: SrkStatusCellTemplateDirective, descendants: true }, { propertyName: "userCellTemplate", first: true, predicate: SrkUserCellTemplateDirective, descendants: true }], ngImport: i0, template: `
     <div *ngIf="data.type !== 'general'; else versionState">
       srk type "{{ data.type }}" is not supported
     </div>
@@ -1350,38 +1279,55 @@ class RanklistComponent {
               <th *ngIf="showTimeColumn()" class="srk--text-right srk--nowrap">
                 {{ resolveColumnTitle('time', 'Time') }}
               </th>
-              <th
+              <ng-container
                 *ngFor="let problem of data.problems; let problemIndex = index"
-                class="srk--nowrap srk-problem-header"
-                [style.background-image]="problemHeaderBackgroundImage(problem)"
               >
-                <a
-                  *ngIf="problem.link; else unlinkedProblemHeader"
-                  [href]="problem.link"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style="color: unset"
-                >
-                  <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
-                  <span
-                    *ngIf="problem.statistics"
-                    class="srk--display-block srk-problem-stats"
-                    [title]="problemStatsTitle(problem.statistics)"
-                  >
-                    {{ problem.statistics.accepted }}
-                  </span>
-                </a>
-                <ng-template #unlinkedProblemHeader>
-                  <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
-                  <span
-                    *ngIf="problem.statistics"
-                    class="srk--display-block srk-problem-stats"
-                    [title]="problemStatsTitle(problem.statistics)"
+                <ng-container *ngIf="problemHeaderCellTemplate; else defaultProblemHeader">
+                  <ng-container
+                    [ngTemplateOutlet]="problemHeaderCellTemplate.templateRef"
+                    [ngTemplateOutletContext]="buildProblemHeaderCellContext(problem, problemIndex)"
+                  />
+                </ng-container>
+                <ng-template #defaultProblemHeader>
+                  <th
+                    class="srk--nowrap srk-problem-header"
+                    [class.srk--cursor-pointer]="hasProblemClickListener()"
+                    [attr.role]="problemHeaderRole()"
+                    [attr.tabindex]="problemHeaderTabIndex()"
+                    [style.background-image]="problemHeaderBackgroundImage(problem)"
+                    (click)="emitProblemClick($event, problem, problemIndex)"
+                    (keydown.enter)="activateProblemHeaderFromKeyboard($event, problem, problemIndex)"
+                    (keydown.space)="activateProblemHeaderFromKeyboard($event, problem, problemIndex)"
                   >
-                    {{ problem.statistics.accepted }}
-                  </span>
+                    <a
+                      *ngIf="problem.link && !hasProblemClickListener(); else unlinkedProblemHeader"
+                      [href]="problem.link"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style="color: unset"
+                    >
+                      <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
+                      <span
+                        *ngIf="problem.statistics"
+                        class="srk--display-block srk-problem-stats"
+                        [title]="problemStatsTitle(problem.statistics)"
+                      >
+                        {{ problem.statistics.accepted }}
+                      </span>
+                    </a>
+                    <ng-template #unlinkedProblemHeader>
+                      <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
+                      <span
+                        *ngIf="problem.statistics"
+                        class="srk--display-block srk-problem-stats"
+                        [title]="problemStatsTitle(problem.statistics)"
+                      >
+                        {{ problem.statistics.accepted }}
+                      </span>
+                    </ng-template>
+                  </th>
                 </ng-template>
-              </th>
+              </ng-container>
               <th *ngIf="showDirtColumn" class="srk-dirt-header srk--text-right srk--nowrap">
                 {{ resolveColumnTitle('dirt', 'Dirt') }}
               </th>
@@ -1673,38 +1619,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               <th *ngIf="showTimeColumn()" class="srk--text-right srk--nowrap">
                 {{ resolveColumnTitle('time', 'Time') }}
               </th>
-              <th
+              <ng-container
                 *ngFor="let problem of data.problems; let problemIndex = index"
-                class="srk--nowrap srk-problem-header"
-                [style.background-image]="problemHeaderBackgroundImage(problem)"
               >
-                <a
-                  *ngIf="problem.link; else unlinkedProblemHeader"
-                  [href]="problem.link"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style="color: unset"
-                >
-                  <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
-                  <span
-                    *ngIf="problem.statistics"
-                    class="srk--display-block srk-problem-stats"
-                    [title]="problemStatsTitle(problem.statistics)"
-                  >
-                    {{ problem.statistics.accepted }}
-                  </span>
-                </a>
-                <ng-template #unlinkedProblemHeader>
-                  <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
-                  <span
-                    *ngIf="problem.statistics"
-                    class="srk--display-block srk-problem-stats"
-                    [title]="problemStatsTitle(problem.statistics)"
+                <ng-container *ngIf="problemHeaderCellTemplate; else defaultProblemHeader">
+                  <ng-container
+                    [ngTemplateOutlet]="problemHeaderCellTemplate.templateRef"
+                    [ngTemplateOutletContext]="buildProblemHeaderCellContext(problem, problemIndex)"
+                  />
+                </ng-container>
+                <ng-template #defaultProblemHeader>
+                  <th
+                    class="srk--nowrap srk-problem-header"
+                    [class.srk--cursor-pointer]="hasProblemClickListener()"
+                    [attr.role]="problemHeaderRole()"
+                    [attr.tabindex]="problemHeaderTabIndex()"
+                    [style.background-image]="problemHeaderBackgroundImage(problem)"
+                    (click)="emitProblemClick($event, problem, problemIndex)"
+                    (keydown.enter)="activateProblemHeaderFromKeyboard($event, problem, problemIndex)"
+                    (keydown.space)="activateProblemHeaderFromKeyboard($event, problem, problemIndex)"
                   >
-                    {{ problem.statistics.accepted }}
-                  </span>
+                    <a
+                      *ngIf="problem.link && !hasProblemClickListener(); else unlinkedProblemHeader"
+                      [href]="problem.link"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style="color: unset"
+                    >
+                      <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
+                      <span
+                        *ngIf="problem.statistics"
+                        class="srk--display-block srk-problem-stats"
+                        [title]="problemStatsTitle(problem.statistics)"
+                      >
+                        {{ problem.statistics.accepted }}
+                      </span>
+                    </a>
+                    <ng-template #unlinkedProblemHeader>
+                      <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
+                      <span
+                        *ngIf="problem.statistics"
+                        class="srk--display-block srk-problem-stats"
+                        [title]="problemStatsTitle(problem.statistics)"
+                      >
+                        {{ problem.statistics.accepted }}
+                      </span>
+                    </ng-template>
+                  </th>
                 </ng-template>
-              </th>
+              </ng-container>
               <th *ngIf="showDirtColumn" class="srk-dirt-header srk--text-right srk--nowrap">
                 {{ resolveColumnTitle('dirt', 'Dirt') }}
               </th>
@@ -1982,10 +1945,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], userAvatarPlacement: [{
                 type: Input
+            }], languages: [{
+                type: Input
             }], userClick: [{
                 type: Output
+            }], problemClick: [{
+                type: Output
             }], solutionClick: [{
                 type: Output
+            }], problemHeaderCellTemplate: [{
+                type: ContentChild,
+                args: [SrkProblemHeaderCellTemplateDirective]
             }], statusCellTemplate: [{
                 type: ContentChild,
                 args: [SrkStatusCellTemplateDirective]
@@ -1998,5 +1968,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DefaultSolutionModalComponent, DefaultUserModalComponent, ModalComponent, ProgressBarComponent, RanklistComponent, SrkStatusCellTemplateDirective, SrkUserCellTemplateDirective };
+export { DefaultSolutionModalComponent, DefaultUserModalComponent, ModalComponent, ProgressBarComponent, RanklistComponent, SrkProblemHeaderCellTemplateDirective, SrkStatusCellTemplateDirective, SrkUserCellTemplateDirective };
 //# sourceMappingURL=algoux-standard-ranklist-renderer-component-angular.mjs.map