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

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

@@ -820,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) {
@@ -870,7 +886,9 @@ class RanklistComponent {
     userAvatarPlacement = 'user';
     languages;
     userClick = new EventEmitter();
+    problemClick = new EventEmitter();
     solutionClick = new EventEmitter();
+    problemHeaderCellTemplate;
     statusCellTemplate;
     userCellTemplate;
     supportedVersions = srkSupportedVersions;
@@ -1027,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,
@@ -1063,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);
@@ -1085,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) {
@@ -1174,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", languages: "languages" }, 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>
@@ -1212,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>
@@ -1535,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>
@@ -1848,8 +1949,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], userClick: [{
                 type: Output
+            }], problemClick: [{
+                type: Output
             }], solutionClick: [{
                 type: Output
+            }], problemHeaderCellTemplate: [{
+                type: ContentChild,
+                args: [SrkProblemHeaderCellTemplateDirective]
             }], statusCellTemplate: [{
                 type: ContentChild,
                 args: [SrkStatusCellTemplateDirective]
@@ -1862,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