@algoux/standard-ranklist-renderer-component-angular 0.6.0 → 0.6.1

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

@@ -0,0 +1,2005 @@
+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;
+}
+
+class ModalComponent {
+    open = false;
+    title;
+    width;
+    rootClassName;
+    wrapClassName;
+    destroyOnClose = true;
+    closeOnEsc = true;
+    closeOnMaskClick = true;
+    panelStyle = {};
+    openChange = new EventEmitter();
+    close = new EventEmitter();
+    dialogRef;
+    isMounted = this.open || !this.destroyOnClose;
+    animationState = this.open ? 'pre-open' : 'closing';
+    transformOrigin = { x: 0, y: 0 };
+    closeTimer = null;
+    openTimer = null;
+    bodyScrollLocked = false;
+    focusScopeId = null;
+    constructor() {
+        if (typeof document !== 'undefined') {
+            ensureModalInteractionTracker();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['open'] || changes['destroyOnClose']) {
+            this.syncOpenState();
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.open) {
+            this.registerFocusScope();
+        }
+    }
+    ngOnDestroy() {
+        this.clearTimers();
+        this.releaseFocusScope();
+        if (this.bodyScrollLocked) {
+            unlockModalBodyScroll();
+            this.bodyScrollLocked = false;
+        }
+    }
+    handleEscape(event) {
+        if (this.open && this.closeOnEsc) {
+            this.requestClose('escape');
+        }
+    }
+    handleMaskMouseDown(event) {
+        if (this.closeOnMaskClick && event.target === event.currentTarget) {
+            this.requestClose('mask');
+        }
+    }
+    requestClose(reason) {
+        this.openChange.emit(false);
+        this.close.emit(reason);
+    }
+    shouldRender() {
+        return this.isMounted || !this.destroyOnClose;
+    }
+    rootClasses() {
+        return [SRK_ANIMATED_MODAL_ROOT_CLASS, this.rootClassName].filter(Boolean);
+    }
+    dialogStyle() {
+        return {
+            ...this.panelStyle,
+            width: this.width ? `${this.width}px` : this.panelStyle?.['width'],
+            '--srk-modal-origin-x': `${this.transformOrigin.x}px`,
+            '--srk-modal-origin-y': `${this.transformOrigin.y}px`,
+            '--srk-modal-max-width': this.width
+                ? `${this.width}px`
+                : typeof this.panelStyle?.['width'] === 'string'
+                    ? this.panelStyle['width']
+                    : undefined,
+        };
+    }
+    clearTimers() {
+        if (this.closeTimer !== null) {
+            window.clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        if (this.openTimer !== null) {
+            window.clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    syncOpenState() {
+        this.clearTimers();
+        if (this.open) {
+            this.isMounted = true;
+            this.transformOrigin = { x: 0, y: 0 };
+            this.animationState = 'pre-open';
+            if (typeof window !== 'undefined') {
+                this.openTimer = window.setTimeout(() => {
+                    this.registerFocusScope();
+                    const resolution = resolveModalTransformOrigin(this.dialogRef?.nativeElement || null);
+                    this.transformOrigin = resolution.origin;
+                    this.animationState = 'opening';
+                    this.openTimer = null;
+                }, 0);
+            }
+        }
+        else {
+            this.releaseFocusScope();
+            this.animationState = 'closing';
+            if (!this.destroyOnClose) {
+                this.isMounted = true;
+            }
+            else if (this.isMounted && typeof window !== 'undefined') {
+                this.closeTimer = window.setTimeout(() => {
+                    this.isMounted = false;
+                    this.updateBodyScrollLock();
+                    this.closeTimer = null;
+                }, MODAL_ANIMATION_DURATION_MS);
+            }
+        }
+        this.updateBodyScrollLock();
+    }
+    updateBodyScrollLock() {
+        const shouldLock = this.open || (this.destroyOnClose && this.isMounted);
+        if (shouldLock && !this.bodyScrollLocked) {
+            lockModalBodyScroll();
+            this.bodyScrollLocked = true;
+            return;
+        }
+        if (!shouldLock && this.bodyScrollLocked) {
+            unlockModalBodyScroll();
+            this.bodyScrollLocked = false;
+        }
+    }
+    registerFocusScope() {
+        const nextFocusScopeId = registerModalFocusScope(this.dialogRef?.nativeElement || null, {
+            onEscape: this.closeOnEsc ? (event) => this.handleEscape(event) : undefined,
+        });
+        if (this.focusScopeId === null) {
+            this.focusScopeId = nextFocusScopeId;
+        }
+    }
+    releaseFocusScope() {
+        if (this.focusScopeId !== null) {
+            unregisterModalFocusScope(this.focusScopeId);
+            this.focusScopeId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalComponent, isStandalone: true, selector: "srk-modal", inputs: { open: "open", title: "title", width: "width", rootClassName: "rootClassName", wrapClassName: "wrapClassName", destroyOnClose: "destroyOnClose", closeOnEsc: "closeOnEsc", closeOnMaskClick: "closeOnMaskClick", panelStyle: "panelStyle" }, outputs: { openChange: "openChange", close: "close" }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div *ngIf="shouldRender()" class="srk-modal-root" [ngClass]="rootClasses()" [attr.data-srk-modal-state]="animationState">
+      <div class="srk-modal-mask"></div>
+      <div
+        class="srk-modal-wrap"
+        [ngClass]="wrapClassName"
+        tabindex="-1"
+        (mousedown)="handleMaskMouseDown($event)"
+      >
+        <div
+          #dialog
+          class="srk-modal"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title || undefined"
+          data-srk-modal-panel="true"
+          tabindex="-1"
+          [ngStyle]="dialogStyle()"
+        >
+          <div class="srk-modal-content">
+            <button
+              aria-label="Close"
+              class="srk-modal-close"
+              type="button"
+              (click)="requestClose('close-button')"
+            >
+              <span class="srk-modal-close-x"></span>
+            </button>
+            <div *ngIf="title !== undefined" class="srk-modal-header">
+              <div class="srk-modal-title">{{ title }}</div>
+            </div>
+            <div class="srk-modal-body">
+              <ng-content />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'srk-modal',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div *ngIf="shouldRender()" class="srk-modal-root" [ngClass]="rootClasses()" [attr.data-srk-modal-state]="animationState">
+      <div class="srk-modal-mask"></div>
+      <div
+        class="srk-modal-wrap"
+        [ngClass]="wrapClassName"
+        tabindex="-1"
+        (mousedown)="handleMaskMouseDown($event)"
+      >
+        <div
+          #dialog
+          class="srk-modal"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title || undefined"
+          data-srk-modal-panel="true"
+          tabindex="-1"
+          [ngStyle]="dialogStyle()"
+        >
+          <div class="srk-modal-content">
+            <button
+              aria-label="Close"
+              class="srk-modal-close"
+              type="button"
+              (click)="requestClose('close-button')"
+            >
+              <span class="srk-modal-close-x"></span>
+            </button>
+            <div *ngIf="title !== undefined" class="srk-modal-header">
+              <div class="srk-modal-title">{{ title }}</div>
+            </div>
+            <div class="srk-modal-body">
+              <ng-content />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], rootClassName: [{
+                type: Input
+            }], wrapClassName: [{
+                type: Input
+            }], destroyOnClose: [{
+                type: Input
+            }], closeOnEsc: [{
+                type: Input
+            }], closeOnMaskClick: [{
+                type: Input
+            }], panelStyle: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], dialogRef: [{
+                type: ViewChild,
+                args: ['dialog']
+            }] } });
+
+class DefaultSolutionModalComponent {
+    open = false;
+    user;
+    problem;
+    problemIndex = 0;
+    solutions = [];
+    title;
+    width = 320;
+    rootClassName = 'srk-general-modal-root';
+    wrapClassName = 'srk-solutions-modal';
+    panelStyle = {};
+    openChange = new EventEmitter();
+    close = new EventEmitter();
+    formatSolutionTimestamp = formatSolutionTimestamp;
+    cachedUser = null;
+    cachedProblem;
+    cachedProblemIndex = 0;
+    cachedSolutions = [];
+    ngOnChanges(_changes) {
+        if (this.user) {
+            this.cachedUser = this.user;
+            this.cachedProblem = this.problem;
+            this.cachedProblemIndex = this.problemIndex;
+            this.cachedSolutions = this.solutions;
+        }
+    }
+    resolvedTitle() {
+        return this.title || (this.cachedUser ? getSolutionModalTitle(this.cachedProblemIndex, this.cachedUser) : '');
+    }
+    solutionMeta(solution) {
+        return getSolutionResultMeta(solution.result);
+    }
+    trackBySolution(index, solution) {
+        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: `
+    <srk-modal
+      *ngIf="cachedUser"
+      [open]="open"
+      [title]="resolvedTitle()"
+      [width]="width"
+      [rootClassName]="rootClassName"
+      [wrapClassName]="wrapClassName"
+      [panelStyle]="panelStyle"
+      (close)="close.emit($event)"
+      (openChange)="openChange.emit($event)"
+    >
+      <table class="srk-common-table srk-solutions-table">
+        <thead>
+          <tr>
+            <th class="srk--text-left">Result</th>
+            <th class="srk--text-right">Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let solution of cachedSolutions; let index = index; trackBy: trackBySolution">
+            <td>
+              <span
+                class="srk-solution-result-text"
+                [ngClass]="solutionMeta(solution).className"
+              >
+                {{ solutionMeta(solution).label }}
+              </span>
+            </td>
+            <td class="srk--text-right">{{ formatSolutionTimestamp(solution) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </srk-modal>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ModalComponent, selector: "srk-modal", inputs: ["open", "title", "width", "rootClassName", "wrapClassName", "destroyOnClose", "closeOnEsc", "closeOnMaskClick", "panelStyle"], outputs: ["openChange", "close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultSolutionModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'srk-default-solution-modal',
+                    standalone: true,
+                    imports: [CommonModule, ModalComponent],
+                    template: `
+    <srk-modal
+      *ngIf="cachedUser"
+      [open]="open"
+      [title]="resolvedTitle()"
+      [width]="width"
+      [rootClassName]="rootClassName"
+      [wrapClassName]="wrapClassName"
+      [panelStyle]="panelStyle"
+      (close)="close.emit($event)"
+      (openChange)="openChange.emit($event)"
+    >
+      <table class="srk-common-table srk-solutions-table">
+        <thead>
+          <tr>
+            <th class="srk--text-left">Result</th>
+            <th class="srk--text-right">Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let solution of cachedSolutions; let index = index; trackBy: trackBySolution">
+            <td>
+              <span
+                class="srk-solution-result-text"
+                [ngClass]="solutionMeta(solution).className"
+              >
+                {{ solutionMeta(solution).label }}
+              </span>
+            </td>
+            <td class="srk--text-right">{{ formatSolutionTimestamp(solution) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </srk-modal>
+  `,
+                }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], problem: [{
+                type: Input
+            }], problemIndex: [{
+                type: Input
+            }], solutions: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], rootClassName: [{
+                type: Input
+            }], wrapClassName: [{
+                type: Input
+            }], panelStyle: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class DefaultUserModalComponent {
+    open = false;
+    user;
+    markers = [];
+    theme = EnumTheme.light;
+    title = 'User Info';
+    width = 420;
+    rootClassName = 'srk-general-modal-root';
+    wrapClassName = 'srk-user-modal';
+    panelStyle = {};
+    formatSrkAssetUrl;
+    openChange = new EventEmitter();
+    close = new EventEmitter();
+    resolveText = resolveText;
+    cachedUser = null;
+    ngOnChanges(_changes) {
+        if (this.user) {
+            this.cachedUser = this.user;
+        }
+    }
+    resolvedMarkers() {
+        if (!this.cachedUser) {
+            return [];
+        }
+        return resolveUserMarkers(this.cachedUser, this.markers).map((marker) => ({
+            marker,
+            presentation: getMarkerPresentation(marker, this.theme),
+        }));
+    }
+    formatAssetUrl(url, field) {
+        return resolveSrkAssetUrl(url, field, this.formatSrkAssetUrl);
+    }
+    trackByMarkerId(_index, entry) {
+        return entry.marker.id;
+    }
+    trackByMemberName(_index, member) {
+        return resolveText(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: `
+    <srk-modal
+      *ngIf="cachedUser as modalUser"
+      [open]="open"
+      [title]="title"
+      [width]="width"
+      [rootClassName]="rootClassName"
+      [wrapClassName]="wrapClassName"
+      [panelStyle]="panelStyle"
+      (close)="close.emit($event)"
+      (openChange)="openChange.emit($event)"
+    >
+      <div class="srk-user-modal-info">
+        <h3 class="srk-user-modal-info-user-name">{{ resolveText(modalUser.name) }}</h3>
+        <p *ngIf="modalUser.organization" class="srk-user-modal-info-user-second-name">
+          {{ resolveText(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">
+            {{ modalUser.official === false ? '＊ 非正式参加者' : '正式参加者' }}
+          </span>
+          <span
+            *ngFor="let entry of resolvedMarkers(); trackBy: trackByMarkerId"
+            class="srk-user-modal-info-labels-label"
+            [ngClass]="entry.presentation.className"
+            [ngStyle]="entry.presentation.style"
+          >
+            {{ resolveText(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>
+          </ng-container>
+        </div>
+        <div *ngIf="modalUser.photo" class="srk-user-modal-info-photo">
+          <img
+            [src]="formatAssetUrl(modalUser.photo, 'user.photo')"
+            alt="User portrait"
+            class="srk-user-modal-info-photo-img"
+          />
+        </div>
+      </div>
+    </srk-modal>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ModalComponent, selector: "srk-modal", inputs: ["open", "title", "width", "rootClassName", "wrapClassName", "destroyOnClose", "closeOnEsc", "closeOnMaskClick", "panelStyle"], outputs: ["openChange", "close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultUserModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'srk-default-user-modal',
+                    standalone: true,
+                    imports: [CommonModule, ModalComponent],
+                    template: `
+    <srk-modal
+      *ngIf="cachedUser as modalUser"
+      [open]="open"
+      [title]="title"
+      [width]="width"
+      [rootClassName]="rootClassName"
+      [wrapClassName]="wrapClassName"
+      [panelStyle]="panelStyle"
+      (close)="close.emit($event)"
+      (openChange)="openChange.emit($event)"
+    >
+      <div class="srk-user-modal-info">
+        <h3 class="srk-user-modal-info-user-name">{{ resolveText(modalUser.name) }}</h3>
+        <p *ngIf="modalUser.organization" class="srk-user-modal-info-user-second-name">
+          {{ resolveText(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">
+            {{ modalUser.official === false ? '＊ 非正式参加者' : '正式参加者' }}
+          </span>
+          <span
+            *ngFor="let entry of resolvedMarkers(); trackBy: trackByMarkerId"
+            class="srk-user-modal-info-labels-label"
+            [ngClass]="entry.presentation.className"
+            [ngStyle]="entry.presentation.style"
+          >
+            {{ resolveText(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>
+          </ng-container>
+        </div>
+        <div *ngIf="modalUser.photo" class="srk-user-modal-info-photo">
+          <img
+            [src]="formatAssetUrl(modalUser.photo, 'user.photo')"
+            alt="User portrait"
+            class="srk-user-modal-info-photo-img"
+          />
+        </div>
+      </div>
+    </srk-modal>
+  `,
+                }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], markers: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], rootClassName: [{
+                type: Input
+            }], wrapClassName: [{
+                type: Input
+            }], panelStyle: [{
+                type: Input
+            }], formatSrkAssetUrl: [{
+                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;
+    live = false;
+    td = 0;
+    timeTravel = new EventEmitter();
+    localTime = Date.now();
+    inTimeMachine = false;
+    timeTravelIsChanging = false;
+    timeTravelCurrentValue = 0;
+    timeTravelValue = null;
+    liveInterval;
+    ngOnInit() {
+        this.timeTravelCurrentValue = this.maxAvailableMinutes();
+        if (this.live) {
+            this.liveInterval = window.setInterval(() => this.handleProgressTimer(), 1000);
+        }
+    }
+    ngOnDestroy() {
+        if (this.liveInterval) {
+            window.clearInterval(this.liveInterval);
+        }
+    }
+    secToTimeStr(seconds) {
+        return secToTimeStr(Math.round(seconds));
+    }
+    timeLabel(minutes) {
+        return secToTimeStr(minutes * 60);
+    }
+    durationMinutes() {
+        return getProgressDurationMinutes(this.data.contest);
+    }
+    maxAvailableMinutes() {
+        return getProgressMaxAvailableMinutes(this.data.contest, this.localTime, this.td);
+    }
+    isEnded() {
+        return isProgressEnded(this.data.contest, this.localTime, this.td);
+    }
+    progressMetrics() {
+        return getProgressMetrics(this.data, this.localTime, this.td, this.timeTravelCurrentValue, this.inTimeMachine);
+    }
+    beginTimeTravel() {
+        this.timeTravelIsChanging = true;
+        this.inTimeMachine = true;
+    }
+    updateTimeTravelValue(event) {
+        this.timeTravelCurrentValue = Number(event.target.value);
+    }
+    commitTimeTravel() {
+        if (this.timeTravelIsChanging) {
+            this.handleTimeTravelChange(this.timeTravelCurrentValue);
+        }
+    }
+    handleProgressTimer() {
+        this.localTime = Date.now();
+        if (this.isEnded() && this.liveInterval) {
+            window.clearInterval(this.liveInterval);
+        }
+        if (!this.timeTravelIsChanging && this.timeTravelValue === null) {
+            this.timeTravelCurrentValue = this.maxAvailableMinutes();
+        }
+    }
+    handleTimeTravelChange(value) {
+        const exited = value >= this.durationMinutes() || value >= this.maxAvailableMinutes();
+        this.timeTravel.emit(exited ? null : value * 60 * 1000);
+        this.inTimeMachine = !exited;
+        this.timeTravelValue = exited ? null : value * 60 * 1000;
+        this.timeTravelIsChanging = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressBarComponent, isStandalone: true, selector: "srk-progress-bar", inputs: { data: "data", enableTimeTravel: "enableTimeTravel", live: "live", td: "td" }, outputs: { timeTravel: "timeTravel" }, ngImport: i0, template: `
+    <div class="srk-progress-bar-container">
+      <div class="srk-progress-bar">
+        <div class="srk-progress-bar-body">
+          <div
+            class="srk-progress-bar-segment srk-progress-bar-normal"
+            [style.width.%]="progressMetrics().frozenBreakpoint * 100"
+          >
+            <div class="srk-progress-bar-fill" [style.width.%]="progressMetrics().normalInnerPercent"></div>
+          </div>
+          <div
+            class="srk-progress-bar-segment srk-progress-bar-frozen"
+            [style.width.%]="(1 - progressMetrics().frozenBreakpoint) * 100"
+          >
+            <div class="srk-progress-bar-fill" [style.width.%]="progressMetrics().frozenInnerPercent"></div>
+          </div>
+        </div>
+        <div
+          *ngIf="enableTimeTravel && progressMetrics().supportRegen"
+          class="srk-progress-slider-layer"
+        >
+          <div
+            *ngIf="timeTravelIsChanging"
+            class="srk-progress-slider-tooltip"
+            [style.left.%]="durationMinutes() ? (timeTravelCurrentValue / durationMinutes()) * 100 : 0"
+          >
+            {{ timeLabel(timeTravelCurrentValue) }}
+          </div>
+          <input
+            aria-label="Time Travel"
+            class="srk-progress-slider"
+            min="0"
+            step="1"
+            type="range"
+            [max]="durationMinutes()"
+            [title]="timeLabel(timeTravelCurrentValue)"
+            [value]="timeTravelCurrentValue"
+            (blur)="commitTimeTravel()"
+            (input)="updateTimeTravelValue($event)"
+            (keydown)="beginTimeTravel()"
+            (keyup)="commitTimeTravel()"
+            (mousedown)="beginTimeTravel()"
+            (mouseup)="commitTimeTravel()"
+            (touchend)="commitTimeTravel()"
+            (touchstart)="beginTimeTravel()"
+          />
+        </div>
+      </div>
+      <div class="srk-progress-secondary-area">
+        <div
+          class="srk-progress-secondary-area-left"
+          [style.display]="live || inTimeMachine ? '' : 'none'"
+        >
+          Elapsed: {{ secToTimeStr(progressMetrics().elapsed / 1000) }}
+        </div>
+        <div class="srk-progress-secondary-area-center">
+          <div *ngIf="inTimeMachine" class="srk-progress-time-machine-status">
+            <div class="srk-progress-time-machine-text">Time Travel Mode</div>
+          </div>
+          <div *ngIf="!inTimeMachine && live && !isEnded()" class="srk-progress-live-text">
+            Live
+          </div>
+          <div *ngIf="!inTimeMachine && (!live || isEnded())" style="visibility: hidden">
+            SRK
+          </div>
+        </div>
+        <div
+          class="srk-progress-secondary-area-right"
+          [style.display]="live || inTimeMachine ? '' : 'none'"
+        >
+          Remaining: {{ secToTimeStr(progressMetrics().remaining / 1000) }}
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'srk-progress-bar',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div class="srk-progress-bar-container">
+      <div class="srk-progress-bar">
+        <div class="srk-progress-bar-body">
+          <div
+            class="srk-progress-bar-segment srk-progress-bar-normal"
+            [style.width.%]="progressMetrics().frozenBreakpoint * 100"
+          >
+            <div class="srk-progress-bar-fill" [style.width.%]="progressMetrics().normalInnerPercent"></div>
+          </div>
+          <div
+            class="srk-progress-bar-segment srk-progress-bar-frozen"
+            [style.width.%]="(1 - progressMetrics().frozenBreakpoint) * 100"
+          >
+            <div class="srk-progress-bar-fill" [style.width.%]="progressMetrics().frozenInnerPercent"></div>
+          </div>
+        </div>
+        <div
+          *ngIf="enableTimeTravel && progressMetrics().supportRegen"
+          class="srk-progress-slider-layer"
+        >
+          <div
+            *ngIf="timeTravelIsChanging"
+            class="srk-progress-slider-tooltip"
+            [style.left.%]="durationMinutes() ? (timeTravelCurrentValue / durationMinutes()) * 100 : 0"
+          >
+            {{ timeLabel(timeTravelCurrentValue) }}
+          </div>
+          <input
+            aria-label="Time Travel"
+            class="srk-progress-slider"
+            min="0"
+            step="1"
+            type="range"
+            [max]="durationMinutes()"
+            [title]="timeLabel(timeTravelCurrentValue)"
+            [value]="timeTravelCurrentValue"
+            (blur)="commitTimeTravel()"
+            (input)="updateTimeTravelValue($event)"
+            (keydown)="beginTimeTravel()"
+            (keyup)="commitTimeTravel()"
+            (mousedown)="beginTimeTravel()"
+            (mouseup)="commitTimeTravel()"
+            (touchend)="commitTimeTravel()"
+            (touchstart)="beginTimeTravel()"
+          />
+        </div>
+      </div>
+      <div class="srk-progress-secondary-area">
+        <div
+          class="srk-progress-secondary-area-left"
+          [style.display]="live || inTimeMachine ? '' : 'none'"
+        >
+          Elapsed: {{ secToTimeStr(progressMetrics().elapsed / 1000) }}
+        </div>
+        <div class="srk-progress-secondary-area-center">
+          <div *ngIf="inTimeMachine" class="srk-progress-time-machine-status">
+            <div class="srk-progress-time-machine-text">Time Travel Mode</div>
+          </div>
+          <div *ngIf="!inTimeMachine && live && !isEnded()" class="srk-progress-live-text">
+            Live
+          </div>
+          <div *ngIf="!inTimeMachine && (!live || isEnded())" style="visibility: hidden">
+            SRK
+          </div>
+        </div>
+        <div
+          class="srk-progress-secondary-area-right"
+          [style.display]="live || inTimeMachine ? '' : 'none'"
+        >
+          Remaining: {{ secToTimeStr(progressMetrics().remaining / 1000) }}
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], enableTimeTravel: [{
+                type: Input
+            }], live: [{
+                type: Input
+            }], td: [{
+                type: Input
+            }], timeTravel: [{
+                type: Output
+            }] } });
+
+class SrkStatusCellTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrkStatusCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SrkStatusCellTemplateDirective, isStandalone: true, selector: "ng-template[srkStatusCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrkStatusCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[srkStatusCell]',
+                    standalone: true,
+                }]
+        }] });
+
+class SrkUserCellTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrkUserCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SrkUserCellTemplateDirective, isStandalone: true, selector: "ng-template[srkUserCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrkUserCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[srkUserCell]',
+                    standalone: true,
+                }]
+        }] });
+
+class RanklistComponent {
+    data;
+    theme = EnumTheme.light;
+    borderedRows = false;
+    rowBordered = false;
+    columnBordered = false;
+    stripedRows = false;
+    formatSrkAssetUrl;
+    splitOrganization = false;
+    columnTitles;
+    statusCellPreset = 'classic';
+    statusColorAsText = false;
+    showProblemStatisticsFooter = false;
+    showDirtColumn = false;
+    showSEColumn = false;
+    emptyStatusPlaceholder = null;
+    userAvatarPlacement = 'user';
+    userClick = new EventEmitter();
+    solutionClick = new EventEmitter();
+    statusCellTemplate;
+    userCellTemplate;
+    supportedVersions = srkSupportedVersions;
+    firstBloodStar = '\u2605';
+    statusSeparator = ' ';
+    problemStatisticsFooterRows = [
+        {
+            key: 'accepted',
+            label: 'Accepted',
+            tooltip: 'Number of participants who solved this problem',
+        },
+        {
+            key: 'tried',
+            label: 'Tried',
+            tooltip: 'Number of participants who attempted this problem',
+        },
+        {
+            key: 'submitted',
+            label: 'Submitted',
+            tooltip: 'Total number of valid submissions for this problem',
+        },
+        {
+            key: 'dirt',
+            label: 'Dirt',
+            tooltip: 'Wrong submissions among participants who solved this problem',
+        },
+        {
+            key: 'se',
+            label: 'SE',
+            tooltip: 'Average hardness, calculated as (participants - accepted) / participants',
+        },
+        {
+            key: 'firstAccepted',
+            label: 'FB at',
+            tooltip: 'First Blood at, also known as first solve time, in minutes',
+        },
+        {
+            key: 'lastAccepted',
+            label: 'LB at',
+            tooltip: 'Last Blood at, also known as last solve time, in minutes',
+        },
+    ];
+    problemStatisticsSource;
+    problemStatisticsCache;
+    get problemStatistics() {
+        if (!this.showProblemStatisticsFooter && !this.showSEColumn) {
+            return [];
+        }
+        if (this.problemStatisticsSource !== this.data || !this.problemStatisticsCache) {
+            this.problemStatisticsSource = this.data;
+            this.problemStatisticsCache = calculateProblemStatisticsFooter(this.data);
+        }
+        return this.problemStatisticsCache;
+    }
+    isSupportedVersion() {
+        return caniuse(this.data.version);
+    }
+    showTimeColumn() {
+        return shouldShowTimeColumn$1(this.data.rows);
+    }
+    showAvatarInOrganization() {
+        return this.splitOrganization && this.userAvatarPlacement === 'organization';
+    }
+    leftFooterColumnCount() {
+        return this.data.series.length + 1 + 1 + (this.showTimeColumn() ? 1 : 0) + (this.splitOrganization ? 1 : 0);
+    }
+    getRankValues(row) {
+        return row.rankValues || this.data.series.map(() => ({ rank: null, segmentIndex: null }));
+    }
+    getRankText(rankValue, row) {
+        return rankValue.rank ? rankValue.rank : row.user.official === false ? '＊' : '';
+    }
+    resolveDisplayText(text) {
+        return resolveText(text);
+    }
+    resolveSeriesColumnTitle(series, index) {
+        const seriesTitles = this.columnTitles?.series;
+        if (typeof seriesTitles === 'function') {
+            return seriesTitles(series, index) ?? series.title;
+        }
+        if (Array.isArray(seriesTitles)) {
+            return seriesTitles[index] ?? series.title;
+        }
+        return series.title;
+    }
+    resolveColumnTitle(key, fallback) {
+        return this.columnTitles?.[key] ?? fallback;
+    }
+    problemAlias(problem, problemIndex) {
+        return problem.alias || numberToAlphabet(problemIndex);
+    }
+    problemStatsTitle(statistics) {
+        const ratio = statistics.submitted ? ((statistics.accepted / statistics.submitted) * 100).toFixed(1) : 0;
+        return `${statistics.accepted} / ${statistics.submitted} (${ratio}%)`;
+    }
+    problemHeaderBackgroundImage(problem, gradientDirection = 180) {
+        return getProblemHeaderBackgroundImage$1(problem.style, this.theme, gradientDirection);
+    }
+    resolvedUserMarkers(user) {
+        return resolveUserMarkers(user, this.data.markers).map((marker) => ({
+            marker,
+            presentation: getMarkerPresentation$1(marker, this.theme),
+        }));
+    }
+    formatAssetUrl(url, field) {
+        return resolveSrkAssetUrl$1(url, field, this.formatSrkAssetUrl);
+    }
+    formatTime(time) {
+        return formatTimeDuration(time, 'min', Math.floor);
+    }
+    calculateDirtPercentage(row) {
+        return calculateDirtPercentage(row);
+    }
+    calculateSEValue(row, problemStatistics) {
+        return calculateSEValue(row, problemStatistics);
+    }
+    statusPresentation(status) {
+        return getRankProblemStatusCellPresentation(status, this.data, this.statusCellPreset);
+    }
+    isNumber(value) {
+        return typeof value === 'number';
+    }
+    getStatusSolutions(status) {
+        return [...(status.solutions || [])].reverse();
+    }
+    statusCellClass(status) {
+        const classNames = ['srk-prest-status-block', 'srk--text-center', 'srk--nowrap'];
+        if (this.isStatusClickable(status)) {
+            classNames.push('srk--cursor-pointer');
+        }
+        if (this.statusColorAsText) {
+            classNames.push('srk-prest-status-block-color-text');
+        }
+        if (status.result === 'FB') {
+            classNames.push('srk-prest-status-block-fb');
+        }
+        else if (status.result === 'AC') {
+            classNames.push('srk-prest-status-block-accepted');
+        }
+        else if (status.result === '?') {
+            classNames.push('srk-prest-status-block-frozen');
+        }
+        else if (status.result === 'RJ') {
+            classNames.push('srk-prest-status-block-failed');
+        }
+        return classNames.join(' ');
+    }
+    isStatusClickable(status) {
+        return this.getStatusSolutions(status).length > 0;
+    }
+    statusCellRole(status) {
+        return this.isStatusClickable(status) ? 'button' : null;
+    }
+    statusCellTabIndex(status) {
+        return this.isStatusClickable(status) ? 0 : null;
+    }
+    buildUserCellContext(row, rowIndex) {
+        return {
+            $implicit: row.user,
+            user: row.user,
+            row,
+            rowIndex,
+            ranklist: this.data,
+            markers: this.data.markers,
+            hideOrganization: this.splitOrganization,
+            hideAvatar: this.showAvatarInOrganization(),
+            onClick: (event) => this.emitUserClick(event, row, rowIndex),
+        };
+    }
+    buildStatusCellContext(row, rowIndex, status, problemIndex) {
+        return {
+            $implicit: status,
+            status,
+            problem: this.data.problems[problemIndex],
+            problemIndex,
+            user: row.user,
+            row,
+            rowIndex,
+            ranklist: this.data,
+            solutions: this.getStatusSolutions(status),
+            statusCellPreset: this.statusCellPreset,
+            statusColorAsText: this.statusColorAsText,
+            emptyStatusPlaceholder: this.emptyStatusPlaceholder,
+            onClick: (event) => this.emitSolutionClick(event, row, rowIndex, status, problemIndex),
+        };
+    }
+    activateUserCellFromKeyboard(event, row, rowIndex) {
+        event.preventDefault();
+        this.emitUserClick(undefined, row, rowIndex);
+    }
+    activateStatusCellFromKeyboard(event, row, rowIndex, status, problemIndex) {
+        event.preventDefault();
+        this.emitSolutionClick(undefined, row, rowIndex, status, problemIndex);
+    }
+    emitUserClick(event, row, rowIndex) {
+        if (event) {
+            captureModalTriggerPointFromMouseEvent(event, {
+                source: 'user-cell',
+                context: {
+                    rowIndex,
+                    userId: row.user.id || null,
+                    userName: this.resolveDisplayText(row.user.name),
+                },
+            });
+        }
+        this.userClick.emit({
+            user: row.user,
+            row,
+            rowIndex,
+            ranklist: this.data,
+        });
+    }
+    emitSolutionClick(event, row, rowIndex, status, problemIndex) {
+        const solutions = this.getStatusSolutions(status);
+        if (!solutions.length) {
+            return;
+        }
+        if (event) {
+            captureModalTriggerPointFromMouseEvent(event, {
+                source: 'status-cell',
+                context: {
+                    rowIndex,
+                    problemIndex,
+                    problemAlias: this.data.problems[problemIndex]?.alias || null,
+                    problemTitle: this.data.problems[problemIndex] ? this.resolveDisplayText(this.data.problems[problemIndex].title) : null,
+                    userId: row.user.id || null,
+                },
+            });
+        }
+        this.solutionClick.emit({
+            user: row.user,
+            row,
+            rowIndex,
+            problemIndex,
+            problem: this.data.problems[problemIndex],
+            status,
+            solutions,
+            ranklist: this.data,
+        });
+    }
+    resolveSeriesSegment(rankValue, series) {
+        const index = rankValue.segmentIndex || rankValue.segmentIndex === 0 ? rankValue.segmentIndex : -1;
+        return (series?.segments || [])[index] || {};
+    }
+    isSeriesSegmentedColumn(series) {
+        return (series?.segments || []).some((segment) => typeof segment.style === 'string');
+    }
+    getSeriesSegmentClass(rankValue, series) {
+        const segmentStyle = this.resolveSeriesSegment(rankValue, series).style;
+        return typeof segmentStyle === 'string' ? `srk-preset-series-segment-${segmentStyle}` : '';
+    }
+    getSeriesSegmentStyle(rankValue, series) {
+        const emptyColor = {
+            [EnumTheme.light]: undefined,
+            [EnumTheme.dark]: undefined,
+        };
+        const segmentStyle = this.resolveSeriesSegment(rankValue, series).style;
+        if (!segmentStyle || typeof segmentStyle === 'string') {
+            return {};
+        }
+        const style = resolveStyle(segmentStyle);
+        const textColor = style.textColor || emptyColor;
+        const backgroundColor = style.backgroundColor || emptyColor;
+        return {
+            color: textColor[this.theme],
+            backgroundColor: backgroundColor[this.theme],
+        };
+    }
+    getProblemStatisticsFooterCellPrimary(key, stat) {
+        switch (key) {
+            case 'accepted':
+                return stat.accepted;
+            case 'tried':
+                return stat.tried;
+            case 'submitted':
+                return stat.submitted;
+            case 'dirt':
+                return stat.dirt;
+            case 'se':
+                return formatProblemStatisticsAverageHardness(stat);
+            case 'firstAccepted':
+                return formatProblemStatisticsAcceptedMinute(stat.firstAcceptedTime);
+            case 'lastAccepted':
+                return formatProblemStatisticsAcceptedMinute(stat.lastAcceptedTime);
+            default:
+                return '';
+        }
+    }
+    getProblemStatisticsFooterCellSecondary(key, stat) {
+        switch (key) {
+            case 'accepted':
+                return formatProblemStatisticsPercent(stat.accepted, stat.participantCount);
+            case 'tried':
+                return formatProblemStatisticsPercent(stat.tried, stat.participantCount);
+            case 'dirt':
+                return formatProblemStatisticsPercent(stat.dirt, stat.dirtSubmitted);
+            default:
+                return undefined;
+        }
+    }
+    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", borderedRows: "borderedRows", rowBordered: "rowBordered", columnBordered: "columnBordered", stripedRows: "stripedRows", 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: `
+    <div *ngIf="data.type !== 'general'; else versionState">
+      srk type "{{ data.type }}" is not supported
+    </div>
+
+    <ng-template #versionState>
+      <div *ngIf="!isSupportedVersion(); else ranklistTable">
+        srk version "{{ data.version }}" is not supported (current supported: {{ supportedVersions }})
+      </div>
+    </ng-template>
+
+    <ng-template #ranklistTable>
+      <div class="srk-common-table srk-main">
+        <table
+          [class.srk-table-row-bordered]="borderedRows || rowBordered"
+          [class.srk-table-column-bordered]="columnBordered"
+          [class.srk-table-row-striped]="stripedRows"
+        >
+          <thead>
+            <tr>
+              <th
+                *ngFor="let seriesItem of data.series; let seriesIndex = index"
+                class="srk-series-header srk--text-right srk--nowrap"
+                [class.srk-series-segmented-column]="isSeriesSegmentedColumn(seriesItem)"
+              >
+                {{ resolveSeriesColumnTitle(seriesItem, seriesIndex) }}
+              </th>
+              <th
+                *ngIf="splitOrganization"
+                class="srk-organization-header srk--text-left srk--nowrap"
+              >
+                {{ resolveColumnTitle('organization', 'Organization') }}
+              </th>
+              <th class="srk--text-left srk--nowrap">{{ resolveColumnTitle('user', 'Name') }}</th>
+              <th class="srk--text-right srk--nowrap">{{ resolveColumnTitle('score', 'Score') }}</th>
+              <th *ngIf="showTimeColumn()" class="srk--text-right srk--nowrap">
+                {{ resolveColumnTitle('time', 'Time') }}
+              </th>
+              <th
+                *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)"
+                  >
+                    {{ problem.statistics.accepted }}
+                  </span>
+                </ng-template>
+              </th>
+              <th *ngIf="showDirtColumn" class="srk-dirt-header srk--text-right srk--nowrap">
+                {{ resolveColumnTitle('dirt', 'Dirt') }}
+              </th>
+              <th *ngIf="showSEColumn" class="srk-se-header srk--text-right srk--nowrap">
+                {{ resolveColumnTitle('se', 'SE') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let row of data.rows; let rowIndex = index">
+              <td
+                *ngFor="let rankValue of getRankValues(row); let seriesIndex = index"
+                class="srk--text-right srk--nowrap"
+                [ngClass]="getSeriesSegmentClass(rankValue, data.series[seriesIndex])"
+                [class.srk-series-segmented-column]="isSeriesSegmentedColumn(data.series[seriesIndex])"
+                [ngStyle]="getSeriesSegmentStyle(rankValue, data.series[seriesIndex])"
+              >
+                {{ getRankText(rankValue, row) }}
+              </td>
+
+              <td
+                *ngIf="splitOrganization"
+                class="srk-organization-cell srk--text-left srk--nowrap"
+                [class.srk-organization-cell-avatar]="showAvatarInOrganization() && !!row.user.avatar"
+              >
+                <div class="srk-organization-cell-content">
+                  <div *ngIf="showAvatarInOrganization() && row.user.avatar" class="srk-user-avatar">
+                    <img
+                      [src]="formatAssetUrl(row.user.avatar, 'user.avatar')"
+                      alt="User Avatar"
+                    />
+                  </div>
+                  <span
+                    class="srk-organization-name-text"
+                    [title]="row.user.organization ? resolveDisplayText(row.user.organization) : ''"
+                    [textContent]="row.user.organization ? resolveDisplayText(row.user.organization) : ''"
+                  ></span>
+                </div>
+              </td>
+
+              <ng-container *ngIf="userCellTemplate; else defaultUserCell">
+                <ng-container
+                  [ngTemplateOutlet]="userCellTemplate.templateRef"
+                  [ngTemplateOutletContext]="buildUserCellContext(row, rowIndex)"
+                />
+              </ng-container>
+              <ng-template #defaultUserCell>
+                <td
+                  class="srk--text-left srk--nowrap srk-user-cell srk--cursor-pointer"
+                  role="button"
+                  tabindex="0"
+                  (click)="emitUserClick($event, row, rowIndex)"
+                  (keydown.enter)="activateUserCellFromKeyboard($event, row, rowIndex)"
+                  (keydown.space)="activateUserCellFromKeyboard($event, row, rowIndex)"
+                >
+                  <div class="srk-user-cell-content">
+                    <div *ngIf="row.user.avatar && !showAvatarInOrganization()" class="srk-user-avatar">
+                      <img
+                        [src]="formatAssetUrl(row.user.avatar, 'user.avatar')"
+                        alt="User Avatar"
+                      />
+                    </div>
+                    <div class="srk-user-body">
+                      <div class="srk-user-name-row">
+                        <span
+                          class="srk-user-name-text"
+                          [title]="resolveDisplayText(row.user.name)"
+                        >
+                          {{ resolveDisplayText(row.user.name) }}
+                        </span>
+                        <span class="srk-marker-dot-group">
+                          <span
+                            *ngFor="let marker of resolvedUserMarkers(row.user)"
+                            class="srk-marker srk-marker-dot srk--c-tooltip"
+                            [ngClass]="marker.presentation.className"
+                            [ngStyle]="marker.presentation.style"
+                            [attr.data-tooltip]="resolveDisplayText(marker.marker.label)"
+                          ></span>
+                        </span>
+                      </div>
+                      <p
+                        *ngIf="row.user.organization && !splitOrganization"
+                        class="srk-user-secondary-text srk--text-ellipsis"
+                        title=""
+                      >
+                        {{ resolveDisplayText(row.user.organization) }}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </ng-template>
+
+              <td class="srk--text-right srk--nowrap">{{ row.score.value }}</td>
+              <td *ngIf="showTimeColumn()" class="srk--text-right srk--nowrap">
+                {{ row.score.time ? formatTime(row.score.time) : '-' }}
+              </td>
+
+              <ng-container *ngFor="let status of row.statuses; let problemIndex = index">
+                <ng-container *ngIf="statusCellTemplate; else defaultStatusCell">
+                  <ng-container
+                    [ngTemplateOutlet]="statusCellTemplate.templateRef"
+                    [ngTemplateOutletContext]="buildStatusCellContext(row, rowIndex, status, problemIndex)"
+                  />
+                </ng-container>
+                <ng-template #defaultStatusCell>
+                  <td
+                    *ngIf="status.result === 'FB' || status.result === 'AC'; else failedOrFrozenStatus"
+                    [ngClass]="statusCellClass(status)"
+                    [attr.role]="statusCellRole(status)"
+                    [attr.tabindex]="statusCellTabIndex(status)"
+                    (click)="emitSolutionClick($event, row, rowIndex, status, problemIndex)"
+                    (keydown.enter)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                    (keydown.space)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                  >
+                    <span
+                      *ngIf="statusColorAsText && status.result === 'FB'"
+                      class="srk-prest-status-block-fb-star"
+                      [textContent]="firstBloodStar"
+                    ></span>
+                    <ng-container *ngIf="statusPresentation(status) as presentation">
+                      <ng-container *ngIf="isNumber(presentation.score); else statusText">
+                        <span class="srk-prest-status-block-score">{{ presentation.score }}</span>
+                        <span class="srk-prest-status-block-score-details">
+                          {{ presentation.scoreDetails }}
+                        </span>
+                      </ng-container>
+                      <ng-template #statusText>
+                        <ng-container *ngIf="presentation.secondary !== undefined; else singleStatus">
+                          <span class="srk-prest-status-block-primary">{{ presentation.primary || '' }}</span>
+                          <span [textContent]="statusSeparator"></span>
+                          <span class="srk-prest-status-block-secondary">{{ presentation.secondary }}</span>
+                        </ng-container>
+                        <ng-template #singleStatus>{{ presentation.primary }}</ng-template>
+                      </ng-template>
+                    </ng-container>
+                  </td>
+                  <ng-template #failedOrFrozenStatus>
+                    <td
+                      *ngIf="status.result === '?' || status.result === 'RJ'; else emptyStatus"
+                      [ngClass]="statusCellClass(status)"
+                      [attr.role]="statusCellRole(status)"
+                      [attr.tabindex]="statusCellTabIndex(status)"
+                      (click)="emitSolutionClick($event, row, rowIndex, status, problemIndex)"
+                      (keydown.enter)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                      (keydown.space)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                    >
+                      <ng-container *ngIf="statusPresentation(status) as presentation">
+                        <ng-container *ngIf="presentation.secondary !== undefined; else singleStatus">
+                          <span class="srk-prest-status-block-primary">{{ presentation.primary || '' }}</span>
+                          <span [textContent]="statusSeparator"></span>
+                          <span class="srk-prest-status-block-secondary">{{ presentation.secondary }}</span>
+                        </ng-container>
+                        <ng-template #singleStatus>{{ presentation.primary }}</ng-template>
+                      </ng-container>
+                    </td>
+                  </ng-template>
+                  <ng-template #emptyStatus>
+                    <td class="srk-status-placeholder-cell srk--text-center srk--nowrap">
+                      {{ emptyStatusPlaceholder }}
+                    </td>
+                  </ng-template>
+                </ng-template>
+              </ng-container>
+
+              <td *ngIf="showDirtColumn" class="srk-dirt-cell srk--text-right srk--nowrap">
+                {{ calculateDirtPercentage(row) }}
+              </td>
+              <td *ngIf="showSEColumn" class="srk-se-cell srk--text-right srk--nowrap">
+                {{ calculateSEValue(row, problemStatistics) }}
+              </td>
+            </tr>
+          </tbody>
+          <tfoot *ngIf="showProblemStatisticsFooter">
+            <tr
+              *ngFor="let footerRow of problemStatisticsFooterRows"
+              class="srk-problem-statistics-footer-row"
+            >
+              <td
+                class="srk-problem-statistics-footer-labels srk--text-right srk--nowrap"
+                [attr.colspan]="leftFooterColumnCount()"
+              >
+                <span
+                  class="srk-problem-statistics-footer-label srk--c-tooltip"
+                  [attr.data-tooltip]="footerRow.tooltip"
+                >
+                  {{ footerRow.label }}
+                </span>
+              </td>
+              <td
+                *ngFor="let stat of problemStatistics"
+                class="srk-problem-statistics-footer-cell srk--text-center srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary">
+                  {{ getProblemStatisticsFooterCellPrimary(footerRow.key, stat) }}
+                </span>
+                <ng-container *ngIf="getProblemStatisticsFooterCellSecondary(footerRow.key, stat) !== undefined">
+                  <span> </span>
+                  <span class="srk-problem-statistics-footer-secondary">
+                    {{ getProblemStatisticsFooterCellSecondary(footerRow.key, stat) }}
+                  </span>
+                </ng-container>
+              </td>
+              <td
+                *ngIf="showDirtColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-dirt-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+              <td
+                *ngIf="showSEColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-se-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+            </tr>
+            <tr class="srk-problem-statistics-footer-row srk-problem-statistics-footer-problem-label-row">
+              <td
+                class="srk-problem-statistics-footer-labels srk--text-right srk--nowrap"
+                [attr.colspan]="leftFooterColumnCount()"
+              ></td>
+              <td
+                *ngFor="let problem of data.problems; let problemIndex = index"
+                class="srk-problem-statistics-footer-cell srk-problem-statistics-footer-problem-header srk-problem-header srk--text-center srk--nowrap"
+                [style.background-image]="problemHeaderBackgroundImage(problem, 0)"
+              >
+                <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
+              </td>
+              <td
+                *ngIf="showDirtColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-dirt-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+              <td
+                *ngIf="showSEColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-se-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RanklistComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'srk-ranklist',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    template: `
+    <div *ngIf="data.type !== 'general'; else versionState">
+      srk type "{{ data.type }}" is not supported
+    </div>
+
+    <ng-template #versionState>
+      <div *ngIf="!isSupportedVersion(); else ranklistTable">
+        srk version "{{ data.version }}" is not supported (current supported: {{ supportedVersions }})
+      </div>
+    </ng-template>
+
+    <ng-template #ranklistTable>
+      <div class="srk-common-table srk-main">
+        <table
+          [class.srk-table-row-bordered]="borderedRows || rowBordered"
+          [class.srk-table-column-bordered]="columnBordered"
+          [class.srk-table-row-striped]="stripedRows"
+        >
+          <thead>
+            <tr>
+              <th
+                *ngFor="let seriesItem of data.series; let seriesIndex = index"
+                class="srk-series-header srk--text-right srk--nowrap"
+                [class.srk-series-segmented-column]="isSeriesSegmentedColumn(seriesItem)"
+              >
+                {{ resolveSeriesColumnTitle(seriesItem, seriesIndex) }}
+              </th>
+              <th
+                *ngIf="splitOrganization"
+                class="srk-organization-header srk--text-left srk--nowrap"
+              >
+                {{ resolveColumnTitle('organization', 'Organization') }}
+              </th>
+              <th class="srk--text-left srk--nowrap">{{ resolveColumnTitle('user', 'Name') }}</th>
+              <th class="srk--text-right srk--nowrap">{{ resolveColumnTitle('score', 'Score') }}</th>
+              <th *ngIf="showTimeColumn()" class="srk--text-right srk--nowrap">
+                {{ resolveColumnTitle('time', 'Time') }}
+              </th>
+              <th
+                *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)"
+                  >
+                    {{ problem.statistics.accepted }}
+                  </span>
+                </ng-template>
+              </th>
+              <th *ngIf="showDirtColumn" class="srk-dirt-header srk--text-right srk--nowrap">
+                {{ resolveColumnTitle('dirt', 'Dirt') }}
+              </th>
+              <th *ngIf="showSEColumn" class="srk-se-header srk--text-right srk--nowrap">
+                {{ resolveColumnTitle('se', 'SE') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let row of data.rows; let rowIndex = index">
+              <td
+                *ngFor="let rankValue of getRankValues(row); let seriesIndex = index"
+                class="srk--text-right srk--nowrap"
+                [ngClass]="getSeriesSegmentClass(rankValue, data.series[seriesIndex])"
+                [class.srk-series-segmented-column]="isSeriesSegmentedColumn(data.series[seriesIndex])"
+                [ngStyle]="getSeriesSegmentStyle(rankValue, data.series[seriesIndex])"
+              >
+                {{ getRankText(rankValue, row) }}
+              </td>
+
+              <td
+                *ngIf="splitOrganization"
+                class="srk-organization-cell srk--text-left srk--nowrap"
+                [class.srk-organization-cell-avatar]="showAvatarInOrganization() && !!row.user.avatar"
+              >
+                <div class="srk-organization-cell-content">
+                  <div *ngIf="showAvatarInOrganization() && row.user.avatar" class="srk-user-avatar">
+                    <img
+                      [src]="formatAssetUrl(row.user.avatar, 'user.avatar')"
+                      alt="User Avatar"
+                    />
+                  </div>
+                  <span
+                    class="srk-organization-name-text"
+                    [title]="row.user.organization ? resolveDisplayText(row.user.organization) : ''"
+                    [textContent]="row.user.organization ? resolveDisplayText(row.user.organization) : ''"
+                  ></span>
+                </div>
+              </td>
+
+              <ng-container *ngIf="userCellTemplate; else defaultUserCell">
+                <ng-container
+                  [ngTemplateOutlet]="userCellTemplate.templateRef"
+                  [ngTemplateOutletContext]="buildUserCellContext(row, rowIndex)"
+                />
+              </ng-container>
+              <ng-template #defaultUserCell>
+                <td
+                  class="srk--text-left srk--nowrap srk-user-cell srk--cursor-pointer"
+                  role="button"
+                  tabindex="0"
+                  (click)="emitUserClick($event, row, rowIndex)"
+                  (keydown.enter)="activateUserCellFromKeyboard($event, row, rowIndex)"
+                  (keydown.space)="activateUserCellFromKeyboard($event, row, rowIndex)"
+                >
+                  <div class="srk-user-cell-content">
+                    <div *ngIf="row.user.avatar && !showAvatarInOrganization()" class="srk-user-avatar">
+                      <img
+                        [src]="formatAssetUrl(row.user.avatar, 'user.avatar')"
+                        alt="User Avatar"
+                      />
+                    </div>
+                    <div class="srk-user-body">
+                      <div class="srk-user-name-row">
+                        <span
+                          class="srk-user-name-text"
+                          [title]="resolveDisplayText(row.user.name)"
+                        >
+                          {{ resolveDisplayText(row.user.name) }}
+                        </span>
+                        <span class="srk-marker-dot-group">
+                          <span
+                            *ngFor="let marker of resolvedUserMarkers(row.user)"
+                            class="srk-marker srk-marker-dot srk--c-tooltip"
+                            [ngClass]="marker.presentation.className"
+                            [ngStyle]="marker.presentation.style"
+                            [attr.data-tooltip]="resolveDisplayText(marker.marker.label)"
+                          ></span>
+                        </span>
+                      </div>
+                      <p
+                        *ngIf="row.user.organization && !splitOrganization"
+                        class="srk-user-secondary-text srk--text-ellipsis"
+                        title=""
+                      >
+                        {{ resolveDisplayText(row.user.organization) }}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </ng-template>
+
+              <td class="srk--text-right srk--nowrap">{{ row.score.value }}</td>
+              <td *ngIf="showTimeColumn()" class="srk--text-right srk--nowrap">
+                {{ row.score.time ? formatTime(row.score.time) : '-' }}
+              </td>
+
+              <ng-container *ngFor="let status of row.statuses; let problemIndex = index">
+                <ng-container *ngIf="statusCellTemplate; else defaultStatusCell">
+                  <ng-container
+                    [ngTemplateOutlet]="statusCellTemplate.templateRef"
+                    [ngTemplateOutletContext]="buildStatusCellContext(row, rowIndex, status, problemIndex)"
+                  />
+                </ng-container>
+                <ng-template #defaultStatusCell>
+                  <td
+                    *ngIf="status.result === 'FB' || status.result === 'AC'; else failedOrFrozenStatus"
+                    [ngClass]="statusCellClass(status)"
+                    [attr.role]="statusCellRole(status)"
+                    [attr.tabindex]="statusCellTabIndex(status)"
+                    (click)="emitSolutionClick($event, row, rowIndex, status, problemIndex)"
+                    (keydown.enter)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                    (keydown.space)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                  >
+                    <span
+                      *ngIf="statusColorAsText && status.result === 'FB'"
+                      class="srk-prest-status-block-fb-star"
+                      [textContent]="firstBloodStar"
+                    ></span>
+                    <ng-container *ngIf="statusPresentation(status) as presentation">
+                      <ng-container *ngIf="isNumber(presentation.score); else statusText">
+                        <span class="srk-prest-status-block-score">{{ presentation.score }}</span>
+                        <span class="srk-prest-status-block-score-details">
+                          {{ presentation.scoreDetails }}
+                        </span>
+                      </ng-container>
+                      <ng-template #statusText>
+                        <ng-container *ngIf="presentation.secondary !== undefined; else singleStatus">
+                          <span class="srk-prest-status-block-primary">{{ presentation.primary || '' }}</span>
+                          <span [textContent]="statusSeparator"></span>
+                          <span class="srk-prest-status-block-secondary">{{ presentation.secondary }}</span>
+                        </ng-container>
+                        <ng-template #singleStatus>{{ presentation.primary }}</ng-template>
+                      </ng-template>
+                    </ng-container>
+                  </td>
+                  <ng-template #failedOrFrozenStatus>
+                    <td
+                      *ngIf="status.result === '?' || status.result === 'RJ'; else emptyStatus"
+                      [ngClass]="statusCellClass(status)"
+                      [attr.role]="statusCellRole(status)"
+                      [attr.tabindex]="statusCellTabIndex(status)"
+                      (click)="emitSolutionClick($event, row, rowIndex, status, problemIndex)"
+                      (keydown.enter)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                      (keydown.space)="activateStatusCellFromKeyboard($event, row, rowIndex, status, problemIndex)"
+                    >
+                      <ng-container *ngIf="statusPresentation(status) as presentation">
+                        <ng-container *ngIf="presentation.secondary !== undefined; else singleStatus">
+                          <span class="srk-prest-status-block-primary">{{ presentation.primary || '' }}</span>
+                          <span [textContent]="statusSeparator"></span>
+                          <span class="srk-prest-status-block-secondary">{{ presentation.secondary }}</span>
+                        </ng-container>
+                        <ng-template #singleStatus>{{ presentation.primary }}</ng-template>
+                      </ng-container>
+                    </td>
+                  </ng-template>
+                  <ng-template #emptyStatus>
+                    <td class="srk-status-placeholder-cell srk--text-center srk--nowrap">
+                      {{ emptyStatusPlaceholder }}
+                    </td>
+                  </ng-template>
+                </ng-template>
+              </ng-container>
+
+              <td *ngIf="showDirtColumn" class="srk-dirt-cell srk--text-right srk--nowrap">
+                {{ calculateDirtPercentage(row) }}
+              </td>
+              <td *ngIf="showSEColumn" class="srk-se-cell srk--text-right srk--nowrap">
+                {{ calculateSEValue(row, problemStatistics) }}
+              </td>
+            </tr>
+          </tbody>
+          <tfoot *ngIf="showProblemStatisticsFooter">
+            <tr
+              *ngFor="let footerRow of problemStatisticsFooterRows"
+              class="srk-problem-statistics-footer-row"
+            >
+              <td
+                class="srk-problem-statistics-footer-labels srk--text-right srk--nowrap"
+                [attr.colspan]="leftFooterColumnCount()"
+              >
+                <span
+                  class="srk-problem-statistics-footer-label srk--c-tooltip"
+                  [attr.data-tooltip]="footerRow.tooltip"
+                >
+                  {{ footerRow.label }}
+                </span>
+              </td>
+              <td
+                *ngFor="let stat of problemStatistics"
+                class="srk-problem-statistics-footer-cell srk--text-center srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary">
+                  {{ getProblemStatisticsFooterCellPrimary(footerRow.key, stat) }}
+                </span>
+                <ng-container *ngIf="getProblemStatisticsFooterCellSecondary(footerRow.key, stat) !== undefined">
+                  <span> </span>
+                  <span class="srk-problem-statistics-footer-secondary">
+                    {{ getProblemStatisticsFooterCellSecondary(footerRow.key, stat) }}
+                  </span>
+                </ng-container>
+              </td>
+              <td
+                *ngIf="showDirtColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-dirt-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+              <td
+                *ngIf="showSEColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-se-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+            </tr>
+            <tr class="srk-problem-statistics-footer-row srk-problem-statistics-footer-problem-label-row">
+              <td
+                class="srk-problem-statistics-footer-labels srk--text-right srk--nowrap"
+                [attr.colspan]="leftFooterColumnCount()"
+              ></td>
+              <td
+                *ngFor="let problem of data.problems; let problemIndex = index"
+                class="srk-problem-statistics-footer-cell srk-problem-statistics-footer-problem-header srk-problem-header srk--text-center srk--nowrap"
+                [style.background-image]="problemHeaderBackgroundImage(problem, 0)"
+              >
+                <span class="srk--display-block">{{ problemAlias(problem, problemIndex) }}</span>
+              </td>
+              <td
+                *ngIf="showDirtColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-dirt-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+              <td
+                *ngIf="showSEColumn"
+                class="srk-problem-statistics-footer-cell srk-extra-statistics-footer-cell srk-se-footer-cell srk--nowrap"
+              >
+                <span class="srk-problem-statistics-footer-primary"></span>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], theme: [{
+                type: Input
+            }], borderedRows: [{
+                type: Input
+            }], rowBordered: [{
+                type: Input
+            }], columnBordered: [{
+                type: Input
+            }], stripedRows: [{
+                type: Input
+            }], formatSrkAssetUrl: [{
+                type: Input
+            }], splitOrganization: [{
+                type: Input
+            }], columnTitles: [{
+                type: Input
+            }], statusCellPreset: [{
+                type: Input
+            }], statusColorAsText: [{
+                type: Input
+            }], showProblemStatisticsFooter: [{
+                type: Input
+            }], showDirtColumn: [{
+                type: Input
+            }], showSEColumn: [{
+                type: Input
+            }], emptyStatusPlaceholder: [{
+                type: Input
+            }], userAvatarPlacement: [{
+                type: Input
+            }], userClick: [{
+                type: Output
+            }], solutionClick: [{
+                type: Output
+            }], statusCellTemplate: [{
+                type: ContentChild,
+                args: [SrkStatusCellTemplateDirective]
+            }], userCellTemplate: [{
+                type: ContentChild,
+                args: [SrkUserCellTemplateDirective]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DefaultSolutionModalComponent, DefaultUserModalComponent, ModalComponent, ProgressBarComponent, RanklistComponent, SrkStatusCellTemplateDirective, SrkUserCellTemplateDirective };
+//# sourceMappingURL=algoux-standard-ranklist-renderer-component-angular.mjs.map