@mozaic-ds/angular 0.26.0 → 0.26.1

package/fesm2015/mozaic-ds-angular.mjs

@@ -159,6 +159,7 @@ var IconSize;
     IconSize["M"] = "24px";
     IconSize["L"] = "32px";
     IconSize["XL"] = "48px";
+    IconSize["XXL"] = "64px";
 })(IconSize || (IconSize = {}));
 
 class IconService {
@@ -221,6 +222,7 @@ class IconComponent {
             [IconSize.M]: 'icons-size-m',
             [IconSize.L]: 'icons-size-l',
             [IconSize.XL]: 'icons-size-xl',
+            [IconSize.XXL]: 'icons-size-xxl',
         };
         return strategy[size || null] || strategy[IconSize.S];
     }
@@ -237,10 +239,10 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: IconService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "moz-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.icon": "true" } }, usesOnChanges: true, ngImport: i0, template: "", styles: [".icon{display:inline-flex}.icons-size-s{height:1rem;width:1rem}.icons-size-m{height:1.5rem;width:1.5rem}.icons-size-l{height:2rem;width:2rem}.icons-size-xl{height:3rem;width:3rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "moz-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.icon": "true" } }, usesOnChanges: true, ngImport: i0, template: "", styles: [".icon{display:inline-flex}.icons-size-s{height:1rem;width:1rem}.icons-size-m{height:1.5rem;width:1.5rem}.icons-size-l{height:2rem;width:2rem}.icons-size-xl{height:3rem;width:3rem}.icons-size-xxl{height:4rem;width:4rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.icon]': 'true' }, template: "", styles: [".icon{display:inline-flex}.icons-size-s{height:1rem;width:1rem}.icons-size-m{height:1.5rem;width:1.5rem}.icons-size-l{height:2rem;width:2rem}.icons-size-xl{height:3rem;width:3rem}\n"] }]
+            args: [{ selector: 'moz-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.icon]': 'true' }, template: "", styles: [".icon{display:inline-flex}.icons-size-s{height:1rem;width:1rem}.icons-size-m{height:1.5rem;width:1.5rem}.icons-size-l{height:2rem;width:2rem}.icons-size-xl{height:3rem;width:3rem}.icons-size-xxl{height:4rem;width:4rem}\n"] }]
         }], ctorParameters: function () { return [{ type: IconService }, { type: i0.ElementRef }]; }, propDecorators: { iconName: [{
                 type: Input
             }] } });
@@ -3020,10 +3022,10 @@ class MozDatatableComponent {
     }
 }
 MozDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MozDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableComponent, selector: "moz-datatable", inputs: { footerSettings: "footerSettings", selectionSettings: "selectionSettings", allowAllSelected: "allowAllSelected", datatableSettings: "datatableSettings", tableSummary: "tableSummary" }, outputs: { rowClick: "rowClick", sortColumn: "sortColumn", rowSelected: "rowSelected", rowAllSelected: "rowAllSelected", emptyBodyButtonClicked: "emptyBodyButtonClicked", pageChange: "pageChange", rowPerPageChange: "rowPerPageChange" }, queries: [{ propertyName: "expansionContentComponent", first: true, predicate: MozDatatableRowExpansionContentComponent, descendants: true }, { propertyName: "headerCellComponents", predicate: MozDatatableHeaderCellComponent }, { propertyName: "contentCellComponents", predicate: MozDatatableContentCellComponent }], viewQueries: [{ propertyName: "selectionComponent", first: true, predicate: MozDatatableSelectionComponent, descendants: true }, { propertyName: "thSelectionRef", first: true, predicate: ["thSelection"], descendants: true }, { propertyName: "thSubRowRef", first: true, predicate: ["thSubRow"], descendants: true }], ngImport: i0, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [allowAllSelected]=\"allowAllSelected\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              id=\"checkAllPageRows\"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"\n                    (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n                    (!selectionSettings.allSelected &&\n                      !selectionComponent.isIndeterminate &&\n                      (this.selectionSettings.selectedIds || []).length > 0)\n                  \"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                id=\"th-{{ columnDef.field }}\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                      id=\"checkRow-{{ i }}\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                    id=\"row-{{ i }}-{{ columnDef.field}}\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr class=\"mc-datatable__empty\">\n              <td [attr.colspan]=\"getColspanForExpansionRow()\" class=\"mc-datatable__empty-cell\">\n                <div class=\"mc-datatable__empty-content\">\n                  <div>\n                    <div>\n                      <p>\n                        <strong>\n                          {{\n                            datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                          }}</strong\n                        ><br />\n                        {{\n                          datatableSettings?.labels?.emptyBodyDescription ||\n                            'Please try changing your filters.'\n                        }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                      <button\n                        moz-button\n                        [theme]=\"'neutral'\"\n                        [size]=\"'s'\"\n                        [variation]=\"'bordered'\"\n                        (click)=\"emptyButtonClickEvent()\"\n                      >\n                        <moz-icon\n                          iconName=\"{{\n                            datatableSettings?.icons?.emptyBodyButtonIcon ||\n                              'Navigation_Display_Filter_24px'\n                          }}\"\n                        ></moz-icon>\n                        {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n            </tr></ng-template\n          >\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#ebf5de}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#46a610}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"], dependencies: [{ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: CheckboxComponent, selector: "moz-checkbox", inputs: ["disabled", "indeterminate", "invalid", "id", "checked"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: ["footerSettings", "isLoading"], outputs: ["rowPerPageChangeEmitter", "pageChangeEmitter"] }, { kind: "component", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: ["selectionSettings", "paginationEnabled", "allowAllSelected", "rowData"], outputs: ["updateSelectionAllEmitter"] }, { kind: "directive", type: MozDatatableSortDirective, selector: "[mozDatatableSort]", inputs: ["mozDatatableSort"], outputs: ["sortEmitter"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None });
+MozDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableComponent, selector: "moz-datatable", inputs: { footerSettings: "footerSettings", selectionSettings: "selectionSettings", allowAllSelected: "allowAllSelected", datatableSettings: "datatableSettings", tableSummary: "tableSummary" }, outputs: { rowClick: "rowClick", sortColumn: "sortColumn", rowSelected: "rowSelected", rowAllSelected: "rowAllSelected", emptyBodyButtonClicked: "emptyBodyButtonClicked", pageChange: "pageChange", rowPerPageChange: "rowPerPageChange" }, queries: [{ propertyName: "expansionContentComponent", first: true, predicate: MozDatatableRowExpansionContentComponent, descendants: true }, { propertyName: "headerCellComponents", predicate: MozDatatableHeaderCellComponent }, { propertyName: "contentCellComponents", predicate: MozDatatableContentCellComponent }], viewQueries: [{ propertyName: "selectionComponent", first: true, predicate: MozDatatableSelectionComponent, descendants: true }, { propertyName: "thSelectionRef", first: true, predicate: ["thSelection"], descendants: true }, { propertyName: "thSubRowRef", first: true, predicate: ["thSubRow"], descendants: true }], ngImport: i0, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [allowAllSelected]=\"allowAllSelected\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              id=\"checkAllPageRows\"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"\n                    (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n                    (!selectionSettings.allSelected &&\n                      !selectionComponent.isIndeterminate &&\n                      (this.selectionSettings.selectedIds || []).length > 0)\n                  \"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                id=\"th-{{ columnDef.field }}\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                      id=\"checkRow-{{ i }}\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                    id=\"row-{{ i }}-{{ columnDef.field }}\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr>\n              <td class=\"mc-datatable__empty--td\" [attr.colspan]=\"getColspanForExpansionRow()\">\n                <div class=\"mc-datatable__empty\">\n                  <p>\n                    <strong>\n                      {{\n                        datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                      }}</strong\n                    ><br />\n                    {{\n                      datatableSettings?.labels?.emptyBodyDescription ||\n                        'Please try changing your filters.'\n                    }}\n                  </p>\n                  <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                    <button\n                      moz-button\n                      [theme]=\"'neutral'\"\n                      [size]=\"'s'\"\n                      [variation]=\"'bordered'\"\n                      (click)=\"emptyButtonClickEvent()\"\n                    >\n                      <moz-icon\n                        iconName=\"{{\n                          datatableSettings?.icons?.emptyBodyButtonIcon ||\n                            'Navigation_Display_Filter_24px'\n                        }}\"\n                      ></moz-icon>\n                      {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                    </button>\n                  </div>\n                </div>\n              </td>\n            </tr>\n          </ng-template>\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#ebf5de}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#46a610}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:#e6e6e6;color:#666;display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__empty--td{padding:0!important}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"], dependencies: [{ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: CheckboxComponent, selector: "moz-checkbox", inputs: ["disabled", "indeterminate", "invalid", "id", "checked"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: ["footerSettings", "isLoading"], outputs: ["rowPerPageChangeEmitter", "pageChangeEmitter"] }, { kind: "component", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: ["selectionSettings", "paginationEnabled", "allowAllSelected", "rowData"], outputs: ["updateSelectionAllEmitter"] }, { kind: "directive", type: MozDatatableSortDirective, selector: "[mozDatatableSort]", inputs: ["mozDatatableSort"], outputs: ["sortEmitter"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-datatable', encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [allowAllSelected]=\"allowAllSelected\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              id=\"checkAllPageRows\"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"\n                    (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n                    (!selectionSettings.allSelected &&\n                      !selectionComponent.isIndeterminate &&\n                      (this.selectionSettings.selectedIds || []).length > 0)\n                  \"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                id=\"th-{{ columnDef.field }}\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                      id=\"checkRow-{{ i }}\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                    id=\"row-{{ i }}-{{ columnDef.field}}\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr class=\"mc-datatable__empty\">\n              <td [attr.colspan]=\"getColspanForExpansionRow()\" class=\"mc-datatable__empty-cell\">\n                <div class=\"mc-datatable__empty-content\">\n                  <div>\n                    <div>\n                      <p>\n                        <strong>\n                          {{\n                            datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                          }}</strong\n                        ><br />\n                        {{\n                          datatableSettings?.labels?.emptyBodyDescription ||\n                            'Please try changing your filters.'\n                        }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                      <button\n                        moz-button\n                        [theme]=\"'neutral'\"\n                        [size]=\"'s'\"\n                        [variation]=\"'bordered'\"\n                        (click)=\"emptyButtonClickEvent()\"\n                      >\n                        <moz-icon\n                          iconName=\"{{\n                            datatableSettings?.icons?.emptyBodyButtonIcon ||\n                              'Navigation_Display_Filter_24px'\n                          }}\"\n                        ></moz-icon>\n                        {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n            </tr></ng-template\n          >\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#ebf5de}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#46a610}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"] }]
+            args: [{ selector: 'moz-datatable', encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [allowAllSelected]=\"allowAllSelected\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              id=\"checkAllPageRows\"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"\n                    (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n                    (!selectionSettings.allSelected &&\n                      !selectionComponent.isIndeterminate &&\n                      (this.selectionSettings.selectedIds || []).length > 0)\n                  \"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                id=\"th-{{ columnDef.field }}\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                      id=\"checkRow-{{ i }}\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                    id=\"row-{{ i }}-{{ columnDef.field }}\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr>\n              <td class=\"mc-datatable__empty--td\" [attr.colspan]=\"getColspanForExpansionRow()\">\n                <div class=\"mc-datatable__empty\">\n                  <p>\n                    <strong>\n                      {{\n                        datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                      }}</strong\n                    ><br />\n                    {{\n                      datatableSettings?.labels?.emptyBodyDescription ||\n                        'Please try changing your filters.'\n                    }}\n                  </p>\n                  <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                    <button\n                      moz-button\n                      [theme]=\"'neutral'\"\n                      [size]=\"'s'\"\n                      [variation]=\"'bordered'\"\n                      (click)=\"emptyButtonClickEvent()\"\n                    >\n                      <moz-icon\n                        iconName=\"{{\n                          datatableSettings?.icons?.emptyBodyButtonIcon ||\n                            'Navigation_Display_Filter_24px'\n                        }}\"\n                      ></moz-icon>\n                      {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                    </button>\n                  </div>\n                </div>\n              </td>\n            </tr>\n          </ng-template>\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#ebf5de}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#46a610}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:#e6e6e6;color:#666;display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__empty--td{padding:0!important}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"] }]
         }], propDecorators: { footerSettings: [{
                 type: Input
             }], selectionSettings: [{
@@ -6340,6 +6342,15 @@ class TooltipDirective {
         this.tooltipPosition = 'top';
         this.tooltip = null;
         this.offset = 16;
+        this.mutationObserver = new MutationObserver(() => {
+            if (!document.body.contains(this.el.nativeElement)) {
+                this.hideTooltip();
+            }
+        });
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
     }
     onMouseIn() {
         if (!this.tooltip)