@provoly/dashboard 0.14.5 → 0.14.6

package/fesm2022/provoly-dashboard-pipeline.mjs

@@ -20,6 +20,8 @@ import * as i5 from '@angular/cdk/bidi';
 import { LiteGraph, LGraphNode, LGraph, LGraphCanvas } from 'litegraph.js';
 import { map as map$1, debounceTime, mergeMap as mergeMap$1, catchError } from 'rxjs/operators';
 import { TemplatePortal } from '@angular/cdk/portal';
+import * as i5$1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from '@angular/common/http';
 
 const PipelineActions = {
@@ -705,13 +707,17 @@ class PryPipelineListComponent {
                 this.toggleActions.nativeElement.focus();
             }, 10);
             const modal = document.querySelector('div.modal');
-            // const displayedElement = document.querySelector('div.pipelineList-dropdown__actions') as HTMLDivElement;
-            const displayedElement = document.querySelector('.m-context-menu');
             if (!!modal) {
-                modal.style.left =
-                    Math.max(0, Math.min(window.innerWidth - displayedElement.clientWidth, $event.clientX - 150)) + 'px';
-                modal.style.top =
-                    Math.max(0, Math.min(window.innerHeight - displayedElement.clientHeight, $event.clientY - 10)) + 'px';
+                if ($event.pointerType === 'mouse') {
+                    modal.style.left = $event.clientX - 150 + 'px';
+                    modal.style.top = $event.clientY - 10 + 'px';
+                }
+                else {
+                    const toggleMenuButton = document.querySelector('#' + $event.target.id);
+                    const rect = toggleMenuButton?.getBoundingClientRect();
+                    modal.style.left = (rect?.left ?? 0) - (modal?.clientWidth ?? 0) + 'px';
+                    modal.style.top = (rect?.top ?? 0) + 'px';
+                }
             }
         }
         else {
@@ -795,12 +801,19 @@ class PryPipelineListComponent {
     focusElement(element) {
         element.focus();
     }
+    navigateContextMenu(button, nextButton) {
+        if (!nextButton.disabled) {
+            nextButton.tabIndex = 0;
+            nextButton.focus();
+            button.tabIndex = -1;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineListComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryPipelineListComponent, selector: "pry-pipeline-list", viewQueries: [{ propertyName: "templateDropdown", first: true, predicate: ["dropdown"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }, { propertyName: "toggleActions", first: true, predicate: ["toggleActions"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }], ngImport: i0, template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\" [ngSwitch]=\"selectedMode\">\n  <ng-container *ngSwitchCase=\"ViewMode.CATALOG\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n        {{ '@pry.pipeline.create' | i18n }}\n      </button>\n    </div>\n    <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"date\"\n      prySortDirection=\"desc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.pipeline.transformation_catalog' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n          <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n          <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n          <th>\n            <div class=\"u-display-flex -align-center -column\">\n              {{ '@pry.pipeline.details.execution_status' | i18n }}\n            </div>\n          </th>\n          <th>{{ '@pry.pipeline.action' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let transfo of transformation$ | async | prySortData: sortActive : sortDirection; let index = index\"\n        >\n          <td>\n            <div *ngIf=\"transfo.active; else deactivated\" class=\"container-state\">\n              <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n              <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n            </div>\n            <ng-template #deactivated>\n              <div class=\"container-state\">\n                <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n              </div>\n            </ng-template>\n          </td>\n          <td>{{ transfo.title }}</td>\n          <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n          <td *ngIf=\"transfo.lastJobExecution\" class=\"u-display-flex -align-center -column\">\n            <div [ngSwitch]=\"transfo.lastJobExecution.status\">\n              <ng-container *ngSwitchCase=\"ExecutionState.TERMINATED\">\n                <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.STARTED\">\n                <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.ERROR\">\n                <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n              {{ '@pry.pipeline.consult' | i18n }}\n              <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n            </button>\n          </td>\n          <td>\n            <button\n              class=\"a-btn a-btn--more\"\n              type=\"button\"\n              id=\"actions\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!this.overlayRef\"\n              (click)=\"toggleMoreDropdown($event, index, transfo)\"\n            >\n              <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CONSULT\">\n    <ng-container *ngIf=\"selectedTransfo\">\n      <pry-pipeline-details\n        [pipeline]=\"selectedTransfo\"\n        (goToList)=\"list()\"\n        (goToEditor)=\"savePipeline($event)\"\n        (executeConfirm)=\"toggleExecuteConfirm()\"\n      ></pry-pipeline-details>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CREATION\">\n    <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.EDITOR\">\n    <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n  </ng-container>\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <div\n    class=\"m-context-menu\"\n    id=\"panelActions\"\n    *ngIf=\"selectedTransfo\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.escape)=\"closeDropdown()\"\n  >\n    <ul class=\"m-context-menu__list\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog panelActions\">\n      <li class=\"m-context-menu__list__item\" role=\"none\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          #toggleActions\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.tab)=\"disableSelectedTranso()\"\n        >\n          <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          (keydown.tab)=\"closeDropdown()\"\n          [disabled]=\"selectedTransfo.active === false\"\n          (click)=\"toggleExecuteConfirm()\"\n        >\n          <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    *ngIf=\"selectedTransfo\"\n    (keydown.escape)=\"toggleExecuteConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusElement(this.confirm)\"\n          (click)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #confirm\n        id=\"confirm\"\n        class=\"a-btn a-btn--primary\"\n        (click)=\"confirmExecution(selectedTransfo)\"\n        (keydown.tab)=\"focusElement(this.cross)\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3$2.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3$2.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3$2.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "component", type: PryPipelineEditorComponent, selector: "pry-pipeline-editor", inputs: ["pipeline"], outputs: ["goToConsult"] }, { kind: "component", type: PryPipelineCssComponent, selector: "pry-pipeline-css" }, { kind: "component", type: PryPipelineDetailsComponent, selector: "pry-pipeline-details", inputs: ["pipeline"], outputs: ["goToList", "goToConsult", "goToEditor", "executeConfirm"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i3$2.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i6.PrySinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryPipelineListComponent, selector: "pry-pipeline-list", viewQueries: [{ propertyName: "templateDropdown", first: true, predicate: ["dropdown"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }, { propertyName: "toggleActions", first: true, predicate: ["toggleActions"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }], ngImport: i0, template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\" [ngSwitch]=\"selectedMode\">\n  <ng-container *ngSwitchCase=\"ViewMode.CATALOG\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n        {{ '@pry.pipeline.create' | i18n }}\n      </button>\n    </div>\n    <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"date\"\n      prySortDirection=\"desc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.pipeline.transformation_catalog' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n          <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n          <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n          <th>\n            <div class=\"u-display-flex -align-center -column\">\n              {{ '@pry.pipeline.details.execution_status' | i18n }}\n            </div>\n          </th>\n          <th>{{ '@pry.pipeline.action' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let transfo of transformation$ | async | prySortData : sortActive : sortDirection; let index = index\"\n        >\n          <td>\n            <div *ngIf=\"transfo.active; else deactivated\" class=\"container-state\">\n              <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n              <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n            </div>\n            <ng-template #deactivated>\n              <div class=\"container-state\">\n                <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n              </div>\n            </ng-template>\n          </td>\n          <td>{{ transfo.title }}</td>\n          <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n          <td *ngIf=\"transfo.lastJobExecution\" class=\"u-display-flex -align-center -column\">\n            <div [ngSwitch]=\"transfo.lastJobExecution.status\">\n              <ng-container *ngSwitchCase=\"ExecutionState.TERMINATED\">\n                <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.STARTED\">\n                <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.ERROR\">\n                <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n              {{ '@pry.pipeline.consult' | i18n }}\n              <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n            </button>\n          </td>\n          <td>\n            <button\n              class=\"a-btn a-btn--more\"\n              type=\"button\"\n              id=\"actions-{{ index }}\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!overlayRef\"\n              (click)=\"toggleMoreDropdown($event, index, transfo)\"\n            >\n              <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CONSULT\">\n    <ng-container *ngIf=\"selectedTransfo\">\n      <pry-pipeline-details\n        [pipeline]=\"selectedTransfo\"\n        (goToList)=\"list()\"\n        (goToEditor)=\"savePipeline($event)\"\n        (executeConfirm)=\"toggleExecuteConfirm()\"\n      ></pry-pipeline-details>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CREATION\">\n    <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.EDITOR\">\n    <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n  </ng-container>\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <div\n    class=\"m-context-menu\"\n    id=\"panelActions\"\n    *ngIf=\"selectedTransfo\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.escape)=\"closeDropdown()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog panelActions\"\n  >\n    <ul class=\"m-context-menu__list\">\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #toggleActions\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.arrowDown)=\"navigateContextMenu(activate, execute)\"\n          (keydown.arrowUp)=\"navigateContextMenu(activate, execute)\"\n          tabindex=\"0\"\n          #activate\n        >\n          <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #execute\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          tabindex=\"-1\"\n          (keydown.arrowDown)=\"navigateContextMenu(execute, activate)\"\n          (keydown.arrowUp)=\"navigateContextMenu(execute, activate)\"\n          [disabled]=\"!selectedTransfo.active\"\n          (click)=\"toggleExecuteConfirm()\"\n        >\n          <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    *ngIf=\"selectedTransfo\"\n    (keydown.escape)=\"toggleExecuteConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusElement(confirm)\"\n          (click)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #confirm\n        id=\"confirm\"\n        class=\"a-btn a-btn--primary\"\n        (click)=\"confirmExecution(selectedTransfo)\"\n        (keydown.tab)=\"focusElement(cross)\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3$2.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3$2.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3$2.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: PryPipelineEditorComponent, selector: "pry-pipeline-editor", inputs: ["pipeline"], outputs: ["goToConsult"] }, { kind: "component", type: PryPipelineCssComponent, selector: "pry-pipeline-css" }, { kind: "component", type: PryPipelineDetailsComponent, selector: "pry-pipeline-details", inputs: ["pipeline"], outputs: ["goToList", "goToConsult", "goToEditor", "executeConfirm"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i3$2.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i6.PrySinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-pipeline-list', template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\" [ngSwitch]=\"selectedMode\">\n  <ng-container *ngSwitchCase=\"ViewMode.CATALOG\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n        {{ '@pry.pipeline.create' | i18n }}\n      </button>\n    </div>\n    <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"date\"\n      prySortDirection=\"desc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.pipeline.transformation_catalog' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n          <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n          <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n          <th>\n            <div class=\"u-display-flex -align-center -column\">\n              {{ '@pry.pipeline.details.execution_status' | i18n }}\n            </div>\n          </th>\n          <th>{{ '@pry.pipeline.action' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let transfo of transformation$ | async | prySortData: sortActive : sortDirection; let index = index\"\n        >\n          <td>\n            <div *ngIf=\"transfo.active; else deactivated\" class=\"container-state\">\n              <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n              <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n            </div>\n            <ng-template #deactivated>\n              <div class=\"container-state\">\n                <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n              </div>\n            </ng-template>\n          </td>\n          <td>{{ transfo.title }}</td>\n          <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n          <td *ngIf=\"transfo.lastJobExecution\" class=\"u-display-flex -align-center -column\">\n            <div [ngSwitch]=\"transfo.lastJobExecution.status\">\n              <ng-container *ngSwitchCase=\"ExecutionState.TERMINATED\">\n                <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.STARTED\">\n                <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.ERROR\">\n                <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n              {{ '@pry.pipeline.consult' | i18n }}\n              <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n            </button>\n          </td>\n          <td>\n            <button\n              class=\"a-btn a-btn--more\"\n              type=\"button\"\n              id=\"actions\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!this.overlayRef\"\n              (click)=\"toggleMoreDropdown($event, index, transfo)\"\n            >\n              <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CONSULT\">\n    <ng-container *ngIf=\"selectedTransfo\">\n      <pry-pipeline-details\n        [pipeline]=\"selectedTransfo\"\n        (goToList)=\"list()\"\n        (goToEditor)=\"savePipeline($event)\"\n        (executeConfirm)=\"toggleExecuteConfirm()\"\n      ></pry-pipeline-details>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CREATION\">\n    <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.EDITOR\">\n    <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n  </ng-container>\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <div\n    class=\"m-context-menu\"\n    id=\"panelActions\"\n    *ngIf=\"selectedTransfo\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.escape)=\"closeDropdown()\"\n  >\n    <ul class=\"m-context-menu__list\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog panelActions\">\n      <li class=\"m-context-menu__list__item\" role=\"none\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          #toggleActions\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.tab)=\"disableSelectedTranso()\"\n        >\n          <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          (keydown.tab)=\"closeDropdown()\"\n          [disabled]=\"selectedTransfo.active === false\"\n          (click)=\"toggleExecuteConfirm()\"\n        >\n          <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    *ngIf=\"selectedTransfo\"\n    (keydown.escape)=\"toggleExecuteConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusElement(this.confirm)\"\n          (click)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #confirm\n        id=\"confirm\"\n        class=\"a-btn a-btn--primary\"\n        (click)=\"confirmExecution(selectedTransfo)\"\n        (keydown.tab)=\"focusElement(this.cross)\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-pipeline-list', template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\" [ngSwitch]=\"selectedMode\">\n  <ng-container *ngSwitchCase=\"ViewMode.CATALOG\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n        {{ '@pry.pipeline.create' | i18n }}\n      </button>\n    </div>\n    <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"date\"\n      prySortDirection=\"desc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.pipeline.transformation_catalog' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n          <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n          <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n          <th>\n            <div class=\"u-display-flex -align-center -column\">\n              {{ '@pry.pipeline.details.execution_status' | i18n }}\n            </div>\n          </th>\n          <th>{{ '@pry.pipeline.action' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let transfo of transformation$ | async | prySortData : sortActive : sortDirection; let index = index\"\n        >\n          <td>\n            <div *ngIf=\"transfo.active; else deactivated\" class=\"container-state\">\n              <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n              <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n            </div>\n            <ng-template #deactivated>\n              <div class=\"container-state\">\n                <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n              </div>\n            </ng-template>\n          </td>\n          <td>{{ transfo.title }}</td>\n          <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n          <td *ngIf=\"transfo.lastJobExecution\" class=\"u-display-flex -align-center -column\">\n            <div [ngSwitch]=\"transfo.lastJobExecution.status\">\n              <ng-container *ngSwitchCase=\"ExecutionState.TERMINATED\">\n                <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.STARTED\">\n                <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.ERROR\">\n                <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n              {{ '@pry.pipeline.consult' | i18n }}\n              <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n            </button>\n          </td>\n          <td>\n            <button\n              class=\"a-btn a-btn--more\"\n              type=\"button\"\n              id=\"actions-{{ index }}\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!overlayRef\"\n              (click)=\"toggleMoreDropdown($event, index, transfo)\"\n            >\n              <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CONSULT\">\n    <ng-container *ngIf=\"selectedTransfo\">\n      <pry-pipeline-details\n        [pipeline]=\"selectedTransfo\"\n        (goToList)=\"list()\"\n        (goToEditor)=\"savePipeline($event)\"\n        (executeConfirm)=\"toggleExecuteConfirm()\"\n      ></pry-pipeline-details>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CREATION\">\n    <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.EDITOR\">\n    <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n  </ng-container>\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <div\n    class=\"m-context-menu\"\n    id=\"panelActions\"\n    *ngIf=\"selectedTransfo\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.escape)=\"closeDropdown()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog panelActions\"\n  >\n    <ul class=\"m-context-menu__list\">\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #toggleActions\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.arrowDown)=\"navigateContextMenu(activate, execute)\"\n          (keydown.arrowUp)=\"navigateContextMenu(activate, execute)\"\n          tabindex=\"0\"\n          #activate\n        >\n          <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #execute\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          tabindex=\"-1\"\n          (keydown.arrowDown)=\"navigateContextMenu(execute, activate)\"\n          (keydown.arrowUp)=\"navigateContextMenu(execute, activate)\"\n          [disabled]=\"!selectedTransfo.active\"\n          (click)=\"toggleExecuteConfirm()\"\n        >\n          <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    *ngIf=\"selectedTransfo\"\n    (keydown.escape)=\"toggleExecuteConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusElement(confirm)\"\n          (click)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #confirm\n        id=\"confirm\"\n        class=\"a-btn a-btn--primary\"\n        (click)=\"confirmExecution(selectedTransfo)\"\n        (keydown.tab)=\"focusElement(cross)\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateDropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { read: TemplateRef }]
@@ -1103,7 +1116,8 @@ class PryPipelineModule {
             PryToggleModule,
             PrySinceDateModule,
             ReactiveFormsModule,
-            OverlayModule], exports: [PryPipelineEditorComponent,
+            OverlayModule,
+            A11yModule], exports: [PryPipelineEditorComponent,
             PryPipelineCssComponent,
             PryPipelineListComponent,
             PryPipelineDetailsComponent] }); }
@@ -1118,7 +1132,8 @@ class PryPipelineModule {
             PryToggleModule,
             PrySinceDateModule,
             ReactiveFormsModule,
-            OverlayModule] }); }
+            OverlayModule,
+            A11yModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineModule, decorators: [{
             type: NgModule,
@@ -1135,7 +1150,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         PryToggleModule,
                         PrySinceDateModule,
                         ReactiveFormsModule,
-                        OverlayModule
+                        OverlayModule,
+                        A11yModule
                     ],
                     declarations: [...components],
                     exports: [...components]