@mozaic-ds/angular 2.0.42 → 2.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,7 @@ import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/route
|
|
|
4
4
|
import { NgTemplateOutlet, NgClass, NgComponentOutlet, JsonPipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
-
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, ErrorFilled24, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, CheckCircle24 } from '@mozaic-ds/icons-angular';
|
|
7
|
+
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, ErrorFilled24, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, Keyboard20, CheckCircle24 } from '@mozaic-ds/icons-angular';
|
|
8
8
|
import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { Subject, take, tap, of, firstValueFrom } from 'rxjs';
|
|
@@ -8252,11 +8252,11 @@ class MozGridHeaderComponent {
|
|
|
8252
8252
|
this.dragEngine.startDrag(event, colIndex, center.nativeElement);
|
|
8253
8253
|
}
|
|
8254
8254
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridHeaderComponent, isStandalone: true, selector: "moz-grid-header", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart", selectAllToggle: "selectAllToggle", columnReorder: "columnReorder" }, viewQueries: [{ propertyName: "headerCenter", first: true, predicate: ["headerCenter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n <!-- Left pinned -->\n @if (hasLeftSection()) {\n <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div class=\"grid-header__expand-spacer\"></div>\n } @if (showCheckbox()) {\n <div class=\"grid-header__checkbox\">\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n\n <!-- Center (scrolls natively inside viewport) -->\n <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"$last\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, $index)\"\n />\n </div>\n }\n </div>\n\n <!-- Right pinned -->\n @if (state.pinnedRightColumns().length > 0) {\n <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"$last\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (hasLeftSection()) {\n <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n style=\"width: 36px; min-width: 36px
|
|
8255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridHeaderComponent, isStandalone: true, selector: "moz-grid-header", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart", selectAllToggle: "selectAllToggle", columnReorder: "columnReorder" }, viewQueries: [{ propertyName: "headerCenter", first: true, predicate: ["headerCenter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n <!-- Left pinned -->\n @if (hasLeftSection()) {\n <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div class=\"grid-header__expand-spacer\"></div>\n } @if (showCheckbox()) {\n <div class=\"grid-header__checkbox\">\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n\n <!-- Center (scrolls natively inside viewport) -->\n <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"$last\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, $index)\"\n />\n </div>\n }\n </div>\n\n <!-- Right pinned -->\n @if (state.pinnedRightColumns().length > 0) {\n <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"$last\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (hasLeftSection()) {\n <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n style=\"width: 36px; min-width: 36px\"\n ></div>\n } @if (showCheckbox()) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n style=\"width: 48px; min-width: 48px\"\n ></div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n <div class=\"grid-header__filter-cell\" [style.width.px]=\"col.currentWidth\">\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container\n [ngTemplateOutlet]=\"tmpl\"\n [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n />\n }\n </div>\n }\n </div>\n }\n <div class=\"grid-header__filter-center\" [style.min-width.px]=\"state.unpinnedWidth()\">\n @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n <div\n class=\"grid-header__filter-cell\"\n [class.grid-header__filter-cell--last]=\"$last\"\n [style.width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container\n [ngTemplateOutlet]=\"tmpl\"\n [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n />\n }\n </div>\n }\n <div class=\"grid-header__filler\"></div>\n </div>\n @if (state.pinnedRightColumns().length > 0) {\n <div class=\"grid-header__filter-right\" [style.width.px]=\"state.pinnedRightWidth()\">\n @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--pinned-end\"\n [style.width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container\n [ngTemplateOutlet]=\"tmpl\"\n [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n />\n }\n </div>\n }\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;z-index:3;overflow:hidden}.grid-header{display:flex;height:48px;width:100%;min-width:fit-content;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.grid-header--no-bottom-border{border-bottom:none}.grid-header__left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__center{display:flex;flex:1 0 auto;height:100%}.grid-header__right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;box-sizing:border-box;cursor:pointer;background:inherit}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-wrapper{display:flex;position:relative;flex:0 0 auto}.grid-header__cell-wrapper--last{flex:1 0 auto}.grid-header__filler{flex:1 1 auto;min-width:0;height:100%;background:inherit}.grid-header__expand-spacer{width:36px;min-width:36px;box-sizing:border-box;background:inherit}.grid-header__filter-row{display:flex;min-width:fit-content;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-center{display:flex;flex:1 0 auto;height:100%}.grid-header__filter-right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary)}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none}.grid-header__left moz-grid-header-cell:last-child ::ng-deep .grid-header-cell{border-right:none}.grid-header__right moz-grid-header-cell:first-child ::ng-deep .grid-header-cell{border-left:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-left .grid-header__filter-cell:last-child{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-right .grid-header__filter-cell--pinned-end:first-child{border-left:none}\n"], dependencies: [{ kind: "component", type: MozGridHeaderCellComponent, selector: "moz-grid-header-cell", inputs: ["columnState", "def", "isLast", "pinnedEnd", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8256
8256
|
}
|
|
8257
8257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridHeaderComponent, decorators: [{
|
|
8258
8258
|
type: Component,
|
|
8259
|
-
args: [{ selector: 'moz-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridHeaderCellComponent, MozCheckboxComponent, FormsModule, NgTemplateOutlet], template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n <!-- Left pinned -->\n @if (hasLeftSection()) {\n <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div class=\"grid-header__expand-spacer\"></div>\n } @if (showCheckbox()) {\n <div class=\"grid-header__checkbox\">\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n\n <!-- Center (scrolls natively inside viewport) -->\n <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"$last\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, $index)\"\n />\n </div>\n }\n </div>\n\n <!-- Right pinned -->\n @if (state.pinnedRightColumns().length > 0) {\n <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"$last\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (hasLeftSection()) {\n <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n style=\"width: 36px; min-width: 36px
|
|
8259
|
+
args: [{ selector: 'moz-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridHeaderCellComponent, MozCheckboxComponent, FormsModule, NgTemplateOutlet], template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n <!-- Left pinned -->\n @if (hasLeftSection()) {\n <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div class=\"grid-header__expand-spacer\"></div>\n } @if (showCheckbox()) {\n <div class=\"grid-header__checkbox\">\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n\n <!-- Center (scrolls natively inside viewport) -->\n <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"$last\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, $index)\"\n />\n </div>\n }\n </div>\n\n <!-- Right pinned -->\n @if (state.pinnedRightColumns().length > 0) {\n <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"$last\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n </div>\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (hasLeftSection()) {\n <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n @if (showExpand()) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n style=\"width: 36px; min-width: 36px\"\n ></div>\n } @if (showCheckbox()) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n style=\"width: 48px; min-width: 48px\"\n ></div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n <div class=\"grid-header__filter-cell\" [style.width.px]=\"col.currentWidth\">\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container\n [ngTemplateOutlet]=\"tmpl\"\n [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n />\n }\n </div>\n }\n </div>\n }\n <div class=\"grid-header__filter-center\" [style.min-width.px]=\"state.unpinnedWidth()\">\n @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n <div\n class=\"grid-header__filter-cell\"\n [class.grid-header__filter-cell--last]=\"$last\"\n [style.width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container\n [ngTemplateOutlet]=\"tmpl\"\n [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n />\n }\n </div>\n }\n <div class=\"grid-header__filler\"></div>\n </div>\n @if (state.pinnedRightColumns().length > 0) {\n <div class=\"grid-header__filter-right\" [style.width.px]=\"state.pinnedRightWidth()\">\n @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--pinned-end\"\n [style.width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container\n [ngTemplateOutlet]=\"tmpl\"\n [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n />\n }\n </div>\n }\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;z-index:3;overflow:hidden}.grid-header{display:flex;height:48px;width:100%;min-width:fit-content;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.grid-header--no-bottom-border{border-bottom:none}.grid-header__left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__center{display:flex;flex:1 0 auto;height:100%}.grid-header__right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;box-sizing:border-box;cursor:pointer;background:inherit}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-wrapper{display:flex;position:relative;flex:0 0 auto}.grid-header__cell-wrapper--last{flex:1 0 auto}.grid-header__filler{flex:1 1 auto;min-width:0;height:100%;background:inherit}.grid-header__expand-spacer{width:36px;min-width:36px;box-sizing:border-box;background:inherit}.grid-header__filter-row{display:flex;min-width:fit-content;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-center{display:flex;flex:1 0 auto;height:100%}.grid-header__filter-right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary)}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none}.grid-header__left moz-grid-header-cell:last-child ::ng-deep .grid-header-cell{border-right:none}.grid-header__right moz-grid-header-cell:first-child ::ng-deep .grid-header-cell{border-left:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-left .grid-header__filter-cell:last-child{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-right .grid-header__filter-cell--pinned-end:first-child{border-left:none}\n"] }]
|
|
8260
8260
|
}], ctorParameters: () => [], propDecorators: { headerCenter: [{ type: i0.ViewChild, args: ['headerCenter', { isSignal: true }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], sortClick: [{ type: i0.Output, args: ["sortClick"] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], selectAllToggle: [{ type: i0.Output, args: ["selectAllToggle"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }] } });
|
|
8261
8261
|
|
|
8262
8262
|
/**
|
|
@@ -8888,7 +8888,7 @@ class MozGridCellComponent {
|
|
|
8888
8888
|
});
|
|
8889
8889
|
}
|
|
8890
8890
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8891
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()", "style.overflow": "isFocused() && !isEditing() ? \"visible\" : \"hidden\"" } }, ngImport: i0, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()" } }, ngImport: i0, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #fff);outline:2px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #ea302d)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8892
8892
|
}
|
|
8893
8893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, decorators: [{
|
|
8894
8894
|
type: Component,
|
|
@@ -8904,8 +8904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
8904
8904
|
'[style.flex]': 'isLast() ? "1 0 auto" : "0 0 auto"',
|
|
8905
8905
|
'[style.width.px]': 'isLast() ? undefined : colState().currentWidth',
|
|
8906
8906
|
'[style.min-width.px]': 'isLast() ? colState().currentWidth : resolvedMinWidth()',
|
|
8907
|
-
|
|
8908
|
-
}, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"] }]
|
|
8907
|
+
}, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #fff);outline:2px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #ea302d)}\n"] }]
|
|
8909
8908
|
}], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], colState: [{ type: i0.Input, args: [{ isSignal: true, alias: "colState", required: true }] }], def: [{ type: i0.Input, args: [{ isSignal: true, alias: "def", required: true }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], pinnedEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedEnd", required: false }] }], commitEdit: [{ type: i0.Output, args: ["commitEdit"] }], cancelEdit: [{ type: i0.Output, args: ["cancelEdit"] }] } });
|
|
8910
8909
|
|
|
8911
8910
|
class MozGridRowComponent {
|
|
@@ -9401,6 +9400,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
9401
9400
|
], template: "<div class=\"group-drawer__list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n @for (item of draftGrouped(); track item.field; let idx = $index) {\n <div class=\"group-drawer__item\" cdkDrag>\n <span class=\"group-drawer__drag-handle\" cdkDragHandle>\n <Drag20 />\n </span>\n <span class=\"group-drawer__item-label\">{{ item.headerName }}</span>\n <select\n class=\"group-drawer__sort-select\"\n [value]=\"item.sortDirection\"\n [attr.aria-label]=\"'Sort direction for ' + item.headerName\"\n (change)=\"onSortDirectionChange(idx, $event)\"\n >\n <option value=\"asc\">A \u2192 Z</option>\n <option value=\"desc\">Z \u2192 A</option>\n </select>\n <button\n type=\"button\"\n moz-button\n [attr.aria-label]=\"'Remove ' + item.headerName\"\n (click)=\"removeGroup(item.field)\"\n [iconPosition]=\"'only'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <Cross20 icon />\n </button>\n </div>\n }\n</div>\n\n@if (available().length > 0) {\n<div class=\"group-drawer__available\">\n <h4 class=\"group-drawer__section-title\">Available columns</h4>\n @for (col of available(); track col.field) {\n <div class=\"group-drawer__available-item\">\n <span class=\"group-drawer__available-label\">{{ col.headerName }}</span>\n <button\n type=\"button\"\n class=\"group-drawer__add-btn\"\n [attr.aria-label]=\"'Add ' + col.headerName + ' as group'\"\n (click)=\"addGroup(col.field)\"\n >\n <ListAdd20 />\n </button>\n </div>\n }\n</div>\n} @if (draftGrouped().length === 0 && available().length === 0) {\n<p class=\"group-drawer__empty\">No groupable columns available.</p>\n}\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"apply()\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".group-drawer__list{display:flex;flex-direction:column}.group-drawer__item{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.group-drawer__item:last-child{border-bottom:none}.group-drawer__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary);flex-shrink:0}.group-drawer__drag-handle:active{cursor:grabbing}.group-drawer__item-label{flex:1;font-size:var(--font-size-m, 16px);color:var(--color-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-drawer__sort-select{flex-shrink:0;padding:4px 8px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);cursor:pointer}.group-drawer__sort-select:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.group-drawer__available{margin-top:16px;margin-bottom:32px}.group-drawer__section-title{font-size:var(--font-size-s, 14px);font-weight:600;color:var(--color-text-secondary);margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.group-drawer__available-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-border-primary)}.group-drawer__available-item:last-child{border-bottom:none}.group-drawer__available-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.group-drawer__add-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;border:none;border-radius:var(--border-radius-s, 4px);background:transparent;cursor:pointer;color:var(--color-background-accent-inverse)}.group-drawer__add-btn:hover{background:#1a73e814;color:var(--color-primary-dark, #1557b0)}.group-drawer__empty{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);text-align:center;padding:24px 0}.cdk-drag-preview{display:flex;align-items:center;gap:8px;padding:12px 8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:var(--font-size-m, 16px)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s ease}\n"] }]
|
|
9402
9401
|
}] });
|
|
9403
9402
|
|
|
9403
|
+
const EXCEL_SHORTCUTS = [
|
|
9404
|
+
{
|
|
9405
|
+
title: 'Navigation',
|
|
9406
|
+
items: [
|
|
9407
|
+
{ keys: '← ↑ → ↓', label: 'Déplacer la cellule active' },
|
|
9408
|
+
{ keys: 'Ctrl + Flèche', label: 'Sauter au bord du bloc de données' },
|
|
9409
|
+
{ keys: 'Home / End', label: 'Début / fin de la ligne' },
|
|
9410
|
+
{ keys: 'Ctrl + Home / End', label: 'Première / dernière cellule' },
|
|
9411
|
+
{ keys: 'PageUp / PageDown', label: 'Page précédente / suivante' },
|
|
9412
|
+
{ keys: 'Tab / Shift+Tab', label: 'Cellule suivante / précédente' },
|
|
9413
|
+
{ keys: 'Enter / Shift+Enter', label: 'Descendre / remonter' },
|
|
9414
|
+
],
|
|
9415
|
+
},
|
|
9416
|
+
{
|
|
9417
|
+
title: 'Sélection',
|
|
9418
|
+
items: [
|
|
9419
|
+
{ keys: 'Shift + Flèche', label: 'Étendre la plage' },
|
|
9420
|
+
{ keys: 'Shift + Ctrl + Flèche', label: "Étendre jusqu'au bord du bloc" },
|
|
9421
|
+
{ keys: 'Shift + Home / End', label: 'Étendre au début / fin de la ligne' },
|
|
9422
|
+
{ keys: 'Shift + Ctrl + Home / End', label: 'Étendre au début / fin du tableau' },
|
|
9423
|
+
{ keys: 'Shift + PageUp / Down', label: "Étendre d'une page" },
|
|
9424
|
+
{ keys: 'Ctrl + A', label: 'Sélectionner tout' },
|
|
9425
|
+
{ keys: 'Shift + Espace', label: 'Sélectionner la ligne' },
|
|
9426
|
+
{ keys: 'Ctrl + Espace', label: 'Sélectionner la colonne' },
|
|
9427
|
+
],
|
|
9428
|
+
},
|
|
9429
|
+
{
|
|
9430
|
+
title: 'Édition',
|
|
9431
|
+
items: [
|
|
9432
|
+
{ keys: 'Enter / F2', label: 'Entrer en édition' },
|
|
9433
|
+
{ keys: 'Touche imprimable', label: 'Typing-to-edit (remplace la valeur)' },
|
|
9434
|
+
{ keys: 'Escape', label: "Annuler l'édition" },
|
|
9435
|
+
{ keys: 'Enter', label: 'Valider + descendre' },
|
|
9436
|
+
{ keys: 'Tab / Shift+Tab', label: 'Valider + droite / gauche' },
|
|
9437
|
+
{ keys: 'Alt + Enter', label: 'Retour à la ligne (texte)' },
|
|
9438
|
+
{ keys: 'Ctrl + Enter', label: 'Valider + remplir la sélection' },
|
|
9439
|
+
{ keys: 'Backspace / Delete', label: 'Effacer les cellules sélectionnées' },
|
|
9440
|
+
],
|
|
9441
|
+
},
|
|
9442
|
+
{
|
|
9443
|
+
title: 'Presse-papier',
|
|
9444
|
+
items: [
|
|
9445
|
+
{ keys: 'Ctrl + C', label: 'Copier (TSV)' },
|
|
9446
|
+
{ keys: 'Ctrl + X', label: 'Couper (marching ants)' },
|
|
9447
|
+
{ keys: 'Ctrl + V', label: 'Coller (déplace après Ctrl+X)' },
|
|
9448
|
+
{ keys: 'Ctrl + D', label: 'Remplir vers le bas (fill down)' },
|
|
9449
|
+
{ keys: 'Ctrl + R', label: 'Remplir vers la droite (fill right)' },
|
|
9450
|
+
],
|
|
9451
|
+
},
|
|
9452
|
+
{
|
|
9453
|
+
title: 'Historique',
|
|
9454
|
+
items: [
|
|
9455
|
+
{ keys: 'Ctrl + Z', label: 'Annuler (undo)' },
|
|
9456
|
+
{ keys: 'Ctrl + Y', label: 'Rétablir (redo)' },
|
|
9457
|
+
{ keys: 'Ctrl + Shift + Z', label: 'Rétablir (redo, alt.)' },
|
|
9458
|
+
],
|
|
9459
|
+
},
|
|
9460
|
+
];
|
|
9461
|
+
class GridKeyboardShortcutsDrawerComponent {
|
|
9462
|
+
drawerRef = inject(MozDrawerRef);
|
|
9463
|
+
groups = EXCEL_SHORTCUTS.map((group) => ({
|
|
9464
|
+
title: group.title,
|
|
9465
|
+
items: group.items.map((item) => ({
|
|
9466
|
+
keys: item.keys,
|
|
9467
|
+
label: item.label,
|
|
9468
|
+
parts: item.keys.split(' '),
|
|
9469
|
+
})),
|
|
9470
|
+
}));
|
|
9471
|
+
close() {
|
|
9472
|
+
this.drawerRef.close();
|
|
9473
|
+
}
|
|
9474
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridKeyboardShortcutsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: GridKeyboardShortcutsDrawerComponent, isStandalone: true, selector: "moz-grid-keyboard-shortcuts-drawer", ngImport: i0, template: "<div class=\"shortcuts\">\n @for (group of groups; track group.title) {\n <section class=\"shortcuts__group\">\n <h4 class=\"shortcuts__group-title\">{{ group.title }}</h4>\n <dl class=\"shortcuts__list\">\n @for (item of group.items; track item.keys) {\n <div class=\"shortcuts__item\">\n <dt class=\"shortcuts__keys\">\n @for (part of item.parts; track $index) { @if (part === '+' || part === '/') {\n <span class=\"shortcuts__separator\">{{ part }}</span>\n } @else {\n <kbd class=\"shortcuts__key\">{{ part }}</kbd>\n } }\n </dt>\n <dd class=\"shortcuts__label\">{{ item.label }}</dd>\n </div>\n }\n </dl>\n </section>\n }\n</div>\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"close()\">Close</button>\n</ng-template>\n", styles: [".shortcuts{padding-bottom:24px}.shortcuts__group{margin-bottom:24px}.shortcuts__group:last-child{margin-bottom:0}.shortcuts__group-title{margin:0 0 8px;font-size:var(--font-size-s, 14px);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.shortcuts__list{display:flex;flex-direction:column;margin:0;padding:0}.shortcuts__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--color-border-primary)}.shortcuts__item:last-child{border-bottom:none}.shortcuts__label{margin:0;flex:1;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.shortcuts__keys{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex-shrink:0;margin:0}.shortcuts__key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:var(--color-background-secondary, #f5f5f5);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-family:var(--font-family-monospace, \"SFMono-Regular\", Consolas, monospace);font-size:var(--font-size-50, 12px);font-weight:600;color:var(--color-text-primary);box-shadow:inset 0 -1px #00000014}.shortcuts__separator{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);padding:0 2px}\n"], dependencies: [{ kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9476
|
+
}
|
|
9477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridKeyboardShortcutsDrawerComponent, decorators: [{
|
|
9478
|
+
type: Component,
|
|
9479
|
+
args: [{ selector: 'moz-grid-keyboard-shortcuts-drawer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozButtonComponent, MozDrawerFooterDirective], template: "<div class=\"shortcuts\">\n @for (group of groups; track group.title) {\n <section class=\"shortcuts__group\">\n <h4 class=\"shortcuts__group-title\">{{ group.title }}</h4>\n <dl class=\"shortcuts__list\">\n @for (item of group.items; track item.keys) {\n <div class=\"shortcuts__item\">\n <dt class=\"shortcuts__keys\">\n @for (part of item.parts; track $index) { @if (part === '+' || part === '/') {\n <span class=\"shortcuts__separator\">{{ part }}</span>\n } @else {\n <kbd class=\"shortcuts__key\">{{ part }}</kbd>\n } }\n </dt>\n <dd class=\"shortcuts__label\">{{ item.label }}</dd>\n </div>\n }\n </dl>\n </section>\n }\n</div>\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"close()\">Close</button>\n</ng-template>\n", styles: [".shortcuts{padding-bottom:24px}.shortcuts__group{margin-bottom:24px}.shortcuts__group:last-child{margin-bottom:0}.shortcuts__group-title{margin:0 0 8px;font-size:var(--font-size-s, 14px);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.shortcuts__list{display:flex;flex-direction:column;margin:0;padding:0}.shortcuts__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--color-border-primary)}.shortcuts__item:last-child{border-bottom:none}.shortcuts__label{margin:0;flex:1;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.shortcuts__keys{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex-shrink:0;margin:0}.shortcuts__key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:var(--color-background-secondary, #f5f5f5);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-family:var(--font-family-monospace, \"SFMono-Regular\", Consolas, monospace);font-size:var(--font-size-50, 12px);font-weight:600;color:var(--color-text-primary);box-shadow:inset 0 -1px #00000014}.shortcuts__separator{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);padding:0 2px}\n"] }]
|
|
9480
|
+
}] });
|
|
9481
|
+
|
|
9404
9482
|
class MozGridComponent {
|
|
9405
9483
|
state = inject(GridStateManager);
|
|
9406
9484
|
gridEngine = inject(GridEngine);
|
|
@@ -9491,7 +9569,9 @@ class MozGridComponent {
|
|
|
9491
9569
|
constructor() {
|
|
9492
9570
|
this.keyboardEngine.registerActions({
|
|
9493
9571
|
copy: () => this.onBulkCopy(),
|
|
9494
|
-
paste: () => {
|
|
9572
|
+
paste: () => {
|
|
9573
|
+
void this.onBulkPaste();
|
|
9574
|
+
},
|
|
9495
9575
|
cut: () => this.onCutShortcut(),
|
|
9496
9576
|
deleteRange: () => this.onBulkDelete(),
|
|
9497
9577
|
undo: () => this.onUndo(),
|
|
@@ -9852,7 +9932,9 @@ class MozGridComponent {
|
|
|
9852
9932
|
// Alt+Enter: insert a newline in the draft for text editors (Excel-style).
|
|
9853
9933
|
if (event.altKey) {
|
|
9854
9934
|
const editState = this.state.cellEditState();
|
|
9855
|
-
const def = this.state
|
|
9935
|
+
const def = this.state
|
|
9936
|
+
.columnDefMap()
|
|
9937
|
+
.get(this.state.visibleColumns()[editState.editingCell?.col ?? -1]?.field ?? '');
|
|
9856
9938
|
const editorType = def?.cellEditor ?? 'text';
|
|
9857
9939
|
if (editorType === 'text') {
|
|
9858
9940
|
event.preventDefault();
|
|
@@ -10232,6 +10314,10 @@ class MozGridComponent {
|
|
|
10232
10314
|
groups: [...result.groups],
|
|
10233
10315
|
});
|
|
10234
10316
|
}
|
|
10317
|
+
// --- Keyboard shortcuts drawer ---
|
|
10318
|
+
onKeyboardShortcutsClick() {
|
|
10319
|
+
this.drawerService.open(GridKeyboardShortcutsDrawerComponent, { title: 'Keyboard shortcuts' });
|
|
10320
|
+
}
|
|
10235
10321
|
// --- Settings drawer ---
|
|
10236
10322
|
static DENSITY_ROW_HEIGHT = {
|
|
10237
10323
|
small: 32,
|
|
@@ -10678,30 +10764,29 @@ class MozGridComponent {
|
|
|
10678
10764
|
<div class="moz-grid__toolbar">
|
|
10679
10765
|
<div class="moz-grid__toolbar-left">
|
|
10680
10766
|
@if (fullscreen()) {
|
|
10681
|
-
|
|
10682
|
-
|
|
10683
|
-
|
|
10684
|
-
|
|
10685
|
-
|
|
10686
|
-
|
|
10687
|
-
|
|
10688
|
-
|
|
10689
|
-
|
|
10690
|
-
|
|
10691
|
-
|
|
10692
|
-
|
|
10693
|
-
|
|
10694
|
-
}
|
|
10695
|
-
|
|
10696
|
-
|
|
10697
|
-
|
|
10698
|
-
|
|
10699
|
-
|
|
10700
|
-
|
|
10701
|
-
|
|
10702
|
-
|
|
10703
|
-
|
|
10704
|
-
</moz-icon-button>
|
|
10767
|
+
<moz-icon-button
|
|
10768
|
+
id="grid-fullscreen"
|
|
10769
|
+
[ghost]="true"
|
|
10770
|
+
size="s"
|
|
10771
|
+
[ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
|
|
10772
|
+
(activated)="toggleFullscreen()"
|
|
10773
|
+
>
|
|
10774
|
+
@if (isFullscreen()) {
|
|
10775
|
+
<FullscreenExit20 icon />
|
|
10776
|
+
} @else {
|
|
10777
|
+
<FullscreenEnter20 icon />
|
|
10778
|
+
}
|
|
10779
|
+
</moz-icon-button>
|
|
10780
|
+
} @if (exportable()) {
|
|
10781
|
+
<moz-icon-button
|
|
10782
|
+
id="grid-export"
|
|
10783
|
+
[ghost]="true"
|
|
10784
|
+
size="s"
|
|
10785
|
+
ariaLabel="Export CSV"
|
|
10786
|
+
(activated)="onExportCsv()"
|
|
10787
|
+
>
|
|
10788
|
+
<Download20 icon />
|
|
10789
|
+
</moz-icon-button>
|
|
10705
10790
|
}
|
|
10706
10791
|
<moz-icon-button
|
|
10707
10792
|
id="grid-filter"
|
|
@@ -10730,113 +10815,113 @@ class MozGridComponent {
|
|
|
10730
10815
|
>
|
|
10731
10816
|
<ViewGridX420 icon />
|
|
10732
10817
|
</moz-icon-button>
|
|
10818
|
+
<moz-icon-button
|
|
10819
|
+
id="grid-keyboard-shortcuts"
|
|
10820
|
+
size="s"
|
|
10821
|
+
[ghost]="true"
|
|
10822
|
+
ariaLabel="Keyboard shortcuts"
|
|
10823
|
+
(activated)="onKeyboardShortcutsClick()"
|
|
10824
|
+
>
|
|
10825
|
+
<Keyboard20 icon />
|
|
10826
|
+
</moz-icon-button>
|
|
10733
10827
|
@for (def of toolbarStartDefs(); track def) {
|
|
10734
|
-
|
|
10828
|
+
<ng-container [ngTemplateOutlet]="def.template" />
|
|
10735
10829
|
}
|
|
10736
10830
|
</div>
|
|
10737
10831
|
|
|
10738
10832
|
<!-- Selection banner -->
|
|
10739
10833
|
@if (selectionBannerVisible()) {
|
|
10740
|
-
|
|
10741
|
-
|
|
10742
|
-
|
|
10743
|
-
|
|
10744
|
-
|
|
10745
|
-
|
|
10746
|
-
|
|
10747
|
-
|
|
10748
|
-
|
|
10749
|
-
|
|
10750
|
-
|
|
10751
|
-
|
|
10752
|
-
|
|
10753
|
-
|
|
10754
|
-
|
|
10755
|
-
|
|
10756
|
-
|
|
10757
|
-
|
|
10758
|
-
|
|
10759
|
-
|
|
10760
|
-
[ghost]="true"
|
|
10761
|
-
(click)="onClearSelection()"
|
|
10762
|
-
>
|
|
10763
|
-
Clear
|
|
10764
|
-
</button>
|
|
10765
|
-
</div>
|
|
10834
|
+
<div class="moz-grid__selection-banner">
|
|
10835
|
+
<span class="moz-grid__selection-text">
|
|
10836
|
+
{{ rowSelectionEngine.count() }} row(s) selected
|
|
10837
|
+
</span>
|
|
10838
|
+
@if (rowSelectionEngine.count() < selectionTotalCount()) {
|
|
10839
|
+
<button
|
|
10840
|
+
moz-button
|
|
10841
|
+
type="button"
|
|
10842
|
+
[size]="'s'"
|
|
10843
|
+
[ghost]="true"
|
|
10844
|
+
[appearance]="'accent'"
|
|
10845
|
+
(click)="onSelectAllRows()"
|
|
10846
|
+
>
|
|
10847
|
+
Select all {{ selectionTotalCount() }} rows
|
|
10848
|
+
</button>
|
|
10849
|
+
}
|
|
10850
|
+
<button moz-button type="button" [size]="'s'" [ghost]="true" (click)="onClearSelection()">
|
|
10851
|
+
Clear
|
|
10852
|
+
</button>
|
|
10853
|
+
</div>
|
|
10766
10854
|
}
|
|
10767
10855
|
|
|
10768
10856
|
<div class="moz-grid__toolbar-right">
|
|
10769
10857
|
@for (def of toolbarEndDefs(); track def) {
|
|
10770
|
-
|
|
10858
|
+
<ng-container [ngTemplateOutlet]="def.template" />
|
|
10771
10859
|
}
|
|
10772
10860
|
</div>
|
|
10773
10861
|
</div>
|
|
10774
10862
|
|
|
10775
10863
|
<!-- Tag bars (outside .moz-grid) -->
|
|
10776
10864
|
@if (state.groupColumns().length > 0) {
|
|
10777
|
-
|
|
10778
|
-
|
|
10779
|
-
|
|
10780
|
-
|
|
10781
|
-
|
|
10782
|
-
|
|
10783
|
-
|
|
10784
|
-
|
|
10785
|
-
|
|
10786
|
-
|
|
10787
|
-
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
10791
|
-
>
|
|
10792
|
-
{{ getColumnLabel(entry.field) }}
|
|
10793
|
-
@if (entry.sortDirection === 'asc') {
|
|
10794
|
-
<ChevronUp20 />
|
|
10795
|
-
} @else {
|
|
10796
|
-
<ChevronDown20 />
|
|
10797
|
-
}
|
|
10798
|
-
</button>
|
|
10799
|
-
</moz-tag>
|
|
10800
|
-
</div>
|
|
10801
|
-
}
|
|
10802
|
-
</div>
|
|
10803
|
-
}
|
|
10804
|
-
@if (hasHiddenColumns()) {
|
|
10805
|
-
<div class="moz-grid__tag-bar">
|
|
10806
|
-
<span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
|
|
10807
|
-
@for (col of hiddenColumnsList(); track col.field) {
|
|
10808
|
-
<moz-tag
|
|
10809
|
-
type="removable"
|
|
10810
|
-
size="s"
|
|
10811
|
-
[id]="'hidden-' + col.field"
|
|
10812
|
-
removableLabel="Restore"
|
|
10813
|
-
(removeTag)="onRestoreColumn(col.field)"
|
|
10814
|
-
>{{ col.label }}</moz-tag
|
|
10865
|
+
<div class="moz-grid__tag-bar">
|
|
10866
|
+
<span class="moz-grid__tag-bar-label">GROUPED BY</span>
|
|
10867
|
+
@for (entry of state.groupColumns(); track entry.field) {
|
|
10868
|
+
<div>
|
|
10869
|
+
<moz-tag
|
|
10870
|
+
type="removable"
|
|
10871
|
+
size="s"
|
|
10872
|
+
[id]="'group-' + entry.field"
|
|
10873
|
+
(removeTag)="onRemoveGroup(entry.field)"
|
|
10874
|
+
>
|
|
10875
|
+
<button
|
|
10876
|
+
type="button"
|
|
10877
|
+
class="moz-grid__group-tag-btn"
|
|
10878
|
+
(click)="onToggleGroupSort(entry.field)"
|
|
10815
10879
|
>
|
|
10816
|
-
|
|
10817
|
-
|
|
10818
|
-
|
|
10819
|
-
|
|
10880
|
+
{{ getColumnLabel(entry.field) }}
|
|
10881
|
+
@if (entry.sortDirection === 'asc') {
|
|
10882
|
+
<ChevronUp20 />
|
|
10883
|
+
} @else {
|
|
10884
|
+
<ChevronDown20 />
|
|
10885
|
+
}
|
|
10820
10886
|
</button>
|
|
10821
|
-
|
|
10822
|
-
</div>
|
|
10823
|
-
}
|
|
10824
|
-
@if (state.activeFilters().length > 0) {
|
|
10825
|
-
<div class="moz-grid__tag-bar">
|
|
10826
|
-
<span class="moz-grid__tag-bar-label">FILTERED BY</span>
|
|
10827
|
-
@for (filter of state.activeFilters(); track filter.field) {
|
|
10828
|
-
<moz-tag
|
|
10829
|
-
[type]="filter.removable ? 'removable' : 'informative'"
|
|
10830
|
-
size="s"
|
|
10831
|
-
[id]="'filter-' + filter.field"
|
|
10832
|
-
(removeTag)="onRemoveFilter(filter.field)"
|
|
10833
|
-
>{{ filter.label }}</moz-tag
|
|
10834
|
-
>
|
|
10835
|
-
}
|
|
10836
|
-
<button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
|
|
10837
|
-
Remove all
|
|
10838
|
-
</button>
|
|
10887
|
+
</moz-tag>
|
|
10839
10888
|
</div>
|
|
10889
|
+
}
|
|
10890
|
+
</div>
|
|
10891
|
+
} @if (hasHiddenColumns()) {
|
|
10892
|
+
<div class="moz-grid__tag-bar">
|
|
10893
|
+
<span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
|
|
10894
|
+
@for (col of hiddenColumnsList(); track col.field) {
|
|
10895
|
+
<moz-tag
|
|
10896
|
+
type="removable"
|
|
10897
|
+
size="s"
|
|
10898
|
+
[id]="'hidden-' + col.field"
|
|
10899
|
+
removableLabel="Restore"
|
|
10900
|
+
(removeTag)="onRestoreColumn(col.field)"
|
|
10901
|
+
>{{ col.label }}</moz-tag
|
|
10902
|
+
>
|
|
10903
|
+
} @if (hiddenColumnsList().length > 1) {
|
|
10904
|
+
<button type="button" class="moz-grid__tag-action-btn" (click)="onRestoreAllColumns()">
|
|
10905
|
+
Restore all
|
|
10906
|
+
</button>
|
|
10907
|
+
}
|
|
10908
|
+
</div>
|
|
10909
|
+
} @if (state.activeFilters().length > 0) {
|
|
10910
|
+
<div class="moz-grid__tag-bar">
|
|
10911
|
+
<span class="moz-grid__tag-bar-label">FILTERED BY</span>
|
|
10912
|
+
@for (filter of state.activeFilters(); track filter.field) {
|
|
10913
|
+
<moz-tag
|
|
10914
|
+
[type]="filter.removable ? 'removable' : 'informative'"
|
|
10915
|
+
size="s"
|
|
10916
|
+
[id]="'filter-' + filter.field"
|
|
10917
|
+
(removeTag)="onRemoveFilter(filter.field)"
|
|
10918
|
+
>{{ filter.label }}</moz-tag
|
|
10919
|
+
>
|
|
10920
|
+
}
|
|
10921
|
+
<button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
|
|
10922
|
+
Remove all
|
|
10923
|
+
</button>
|
|
10924
|
+
</div>
|
|
10840
10925
|
}
|
|
10841
10926
|
<ng-content select="[mozGridFilterTags]" />
|
|
10842
10927
|
|
|
@@ -10873,13 +10958,12 @@ class MozGridComponent {
|
|
|
10873
10958
|
|
|
10874
10959
|
<!-- Footer: pagination or infinite scroll loading indicator -->
|
|
10875
10960
|
@if (showPagination()) {
|
|
10876
|
-
|
|
10877
|
-
|
|
10878
|
-
|
|
10879
|
-
|
|
10880
|
-
}
|
|
10881
|
-
|
|
10882
|
-
<moz-grid-loading-indicator />
|
|
10961
|
+
<moz-grid-footer
|
|
10962
|
+
[pageSizeOptions]="pageSizeOptions()"
|
|
10963
|
+
(pageChange)="pageChange.emit($event)"
|
|
10964
|
+
/>
|
|
10965
|
+
} @if (showInfiniteScrollLoader()) {
|
|
10966
|
+
<moz-grid-loading-indicator />
|
|
10883
10967
|
}
|
|
10884
10968
|
|
|
10885
10969
|
<!-- Bulk selection action bar -->
|
|
@@ -10892,7 +10976,7 @@ class MozGridComponent {
|
|
|
10892
10976
|
/>
|
|
10893
10977
|
</div>
|
|
10894
10978
|
</div>
|
|
10895
|
-
`, isInline: true, styles: [":host{display:block;height:100%}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid:focus{outline:none}.moz-grid--loading{opacity:.6;pointer-events:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{width:100%;font-size:var(--font-size-xs, 12px);text-transform:uppercase;white-space:nowrap;color:var(--text-icon-tertiary);font-size:var(--Typography-Font-size-Body-XS, 12px);font-weight:400}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridLoadingIndicatorComponent, selector: "moz-grid-loading-indicator" }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick", "exportClick"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10979
|
+
`, isInline: true, styles: [":host{display:block;height:100%}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid:focus{outline:none}.moz-grid--loading{opacity:.6;pointer-events:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{width:100%;font-size:var(--font-size-xs, 12px);text-transform:uppercase;white-space:nowrap;color:var(--text-icon-tertiary);font-size:var(--Typography-Font-size-Body-XS, 12px);font-weight:400}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridLoadingIndicatorComponent, selector: "moz-grid-loading-indicator" }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick", "exportClick"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: Keyboard20, selector: "Keyboard20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10896
10980
|
}
|
|
10897
10981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridComponent, decorators: [{
|
|
10898
10982
|
type: Component,
|
|
@@ -10937,6 +11021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10937
11021
|
Download20,
|
|
10938
11022
|
ChevronUp20,
|
|
10939
11023
|
ChevronDown20,
|
|
11024
|
+
Keyboard20,
|
|
10940
11025
|
MozButtonComponent,
|
|
10941
11026
|
], template: `
|
|
10942
11027
|
<div class="moz-grid-wrapper" [class.moz-grid-wrapper--fullscreen]="isFullscreen()">
|
|
@@ -10944,30 +11029,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10944
11029
|
<div class="moz-grid__toolbar">
|
|
10945
11030
|
<div class="moz-grid__toolbar-left">
|
|
10946
11031
|
@if (fullscreen()) {
|
|
10947
|
-
|
|
10948
|
-
|
|
10949
|
-
|
|
10950
|
-
|
|
10951
|
-
|
|
10952
|
-
|
|
10953
|
-
|
|
10954
|
-
|
|
10955
|
-
|
|
10956
|
-
|
|
10957
|
-
|
|
10958
|
-
|
|
10959
|
-
|
|
10960
|
-
}
|
|
10961
|
-
|
|
10962
|
-
|
|
10963
|
-
|
|
10964
|
-
|
|
10965
|
-
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
|
|
10969
|
-
|
|
10970
|
-
</moz-icon-button>
|
|
11032
|
+
<moz-icon-button
|
|
11033
|
+
id="grid-fullscreen"
|
|
11034
|
+
[ghost]="true"
|
|
11035
|
+
size="s"
|
|
11036
|
+
[ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
|
|
11037
|
+
(activated)="toggleFullscreen()"
|
|
11038
|
+
>
|
|
11039
|
+
@if (isFullscreen()) {
|
|
11040
|
+
<FullscreenExit20 icon />
|
|
11041
|
+
} @else {
|
|
11042
|
+
<FullscreenEnter20 icon />
|
|
11043
|
+
}
|
|
11044
|
+
</moz-icon-button>
|
|
11045
|
+
} @if (exportable()) {
|
|
11046
|
+
<moz-icon-button
|
|
11047
|
+
id="grid-export"
|
|
11048
|
+
[ghost]="true"
|
|
11049
|
+
size="s"
|
|
11050
|
+
ariaLabel="Export CSV"
|
|
11051
|
+
(activated)="onExportCsv()"
|
|
11052
|
+
>
|
|
11053
|
+
<Download20 icon />
|
|
11054
|
+
</moz-icon-button>
|
|
10971
11055
|
}
|
|
10972
11056
|
<moz-icon-button
|
|
10973
11057
|
id="grid-filter"
|
|
@@ -10996,113 +11080,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10996
11080
|
>
|
|
10997
11081
|
<ViewGridX420 icon />
|
|
10998
11082
|
</moz-icon-button>
|
|
11083
|
+
<moz-icon-button
|
|
11084
|
+
id="grid-keyboard-shortcuts"
|
|
11085
|
+
size="s"
|
|
11086
|
+
[ghost]="true"
|
|
11087
|
+
ariaLabel="Keyboard shortcuts"
|
|
11088
|
+
(activated)="onKeyboardShortcutsClick()"
|
|
11089
|
+
>
|
|
11090
|
+
<Keyboard20 icon />
|
|
11091
|
+
</moz-icon-button>
|
|
10999
11092
|
@for (def of toolbarStartDefs(); track def) {
|
|
11000
|
-
|
|
11093
|
+
<ng-container [ngTemplateOutlet]="def.template" />
|
|
11001
11094
|
}
|
|
11002
11095
|
</div>
|
|
11003
11096
|
|
|
11004
11097
|
<!-- Selection banner -->
|
|
11005
11098
|
@if (selectionBannerVisible()) {
|
|
11006
|
-
|
|
11007
|
-
|
|
11008
|
-
|
|
11009
|
-
|
|
11010
|
-
|
|
11011
|
-
|
|
11012
|
-
|
|
11013
|
-
|
|
11014
|
-
|
|
11015
|
-
|
|
11016
|
-
|
|
11017
|
-
|
|
11018
|
-
|
|
11019
|
-
|
|
11020
|
-
|
|
11021
|
-
|
|
11022
|
-
|
|
11023
|
-
|
|
11024
|
-
|
|
11025
|
-
|
|
11026
|
-
[ghost]="true"
|
|
11027
|
-
(click)="onClearSelection()"
|
|
11028
|
-
>
|
|
11029
|
-
Clear
|
|
11030
|
-
</button>
|
|
11031
|
-
</div>
|
|
11099
|
+
<div class="moz-grid__selection-banner">
|
|
11100
|
+
<span class="moz-grid__selection-text">
|
|
11101
|
+
{{ rowSelectionEngine.count() }} row(s) selected
|
|
11102
|
+
</span>
|
|
11103
|
+
@if (rowSelectionEngine.count() < selectionTotalCount()) {
|
|
11104
|
+
<button
|
|
11105
|
+
moz-button
|
|
11106
|
+
type="button"
|
|
11107
|
+
[size]="'s'"
|
|
11108
|
+
[ghost]="true"
|
|
11109
|
+
[appearance]="'accent'"
|
|
11110
|
+
(click)="onSelectAllRows()"
|
|
11111
|
+
>
|
|
11112
|
+
Select all {{ selectionTotalCount() }} rows
|
|
11113
|
+
</button>
|
|
11114
|
+
}
|
|
11115
|
+
<button moz-button type="button" [size]="'s'" [ghost]="true" (click)="onClearSelection()">
|
|
11116
|
+
Clear
|
|
11117
|
+
</button>
|
|
11118
|
+
</div>
|
|
11032
11119
|
}
|
|
11033
11120
|
|
|
11034
11121
|
<div class="moz-grid__toolbar-right">
|
|
11035
11122
|
@for (def of toolbarEndDefs(); track def) {
|
|
11036
|
-
|
|
11123
|
+
<ng-container [ngTemplateOutlet]="def.template" />
|
|
11037
11124
|
}
|
|
11038
11125
|
</div>
|
|
11039
11126
|
</div>
|
|
11040
11127
|
|
|
11041
11128
|
<!-- Tag bars (outside .moz-grid) -->
|
|
11042
11129
|
@if (state.groupColumns().length > 0) {
|
|
11043
|
-
|
|
11044
|
-
|
|
11045
|
-
|
|
11046
|
-
|
|
11047
|
-
|
|
11048
|
-
|
|
11049
|
-
|
|
11050
|
-
|
|
11051
|
-
|
|
11052
|
-
|
|
11053
|
-
|
|
11054
|
-
|
|
11055
|
-
|
|
11056
|
-
|
|
11057
|
-
>
|
|
11058
|
-
{{ getColumnLabel(entry.field) }}
|
|
11059
|
-
@if (entry.sortDirection === 'asc') {
|
|
11060
|
-
<ChevronUp20 />
|
|
11061
|
-
} @else {
|
|
11062
|
-
<ChevronDown20 />
|
|
11063
|
-
}
|
|
11064
|
-
</button>
|
|
11065
|
-
</moz-tag>
|
|
11066
|
-
</div>
|
|
11067
|
-
}
|
|
11068
|
-
</div>
|
|
11069
|
-
}
|
|
11070
|
-
@if (hasHiddenColumns()) {
|
|
11071
|
-
<div class="moz-grid__tag-bar">
|
|
11072
|
-
<span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
|
|
11073
|
-
@for (col of hiddenColumnsList(); track col.field) {
|
|
11074
|
-
<moz-tag
|
|
11075
|
-
type="removable"
|
|
11076
|
-
size="s"
|
|
11077
|
-
[id]="'hidden-' + col.field"
|
|
11078
|
-
removableLabel="Restore"
|
|
11079
|
-
(removeTag)="onRestoreColumn(col.field)"
|
|
11080
|
-
>{{ col.label }}</moz-tag
|
|
11130
|
+
<div class="moz-grid__tag-bar">
|
|
11131
|
+
<span class="moz-grid__tag-bar-label">GROUPED BY</span>
|
|
11132
|
+
@for (entry of state.groupColumns(); track entry.field) {
|
|
11133
|
+
<div>
|
|
11134
|
+
<moz-tag
|
|
11135
|
+
type="removable"
|
|
11136
|
+
size="s"
|
|
11137
|
+
[id]="'group-' + entry.field"
|
|
11138
|
+
(removeTag)="onRemoveGroup(entry.field)"
|
|
11139
|
+
>
|
|
11140
|
+
<button
|
|
11141
|
+
type="button"
|
|
11142
|
+
class="moz-grid__group-tag-btn"
|
|
11143
|
+
(click)="onToggleGroupSort(entry.field)"
|
|
11081
11144
|
>
|
|
11082
|
-
|
|
11083
|
-
|
|
11084
|
-
|
|
11085
|
-
|
|
11145
|
+
{{ getColumnLabel(entry.field) }}
|
|
11146
|
+
@if (entry.sortDirection === 'asc') {
|
|
11147
|
+
<ChevronUp20 />
|
|
11148
|
+
} @else {
|
|
11149
|
+
<ChevronDown20 />
|
|
11150
|
+
}
|
|
11086
11151
|
</button>
|
|
11087
|
-
|
|
11088
|
-
</div>
|
|
11089
|
-
}
|
|
11090
|
-
@if (state.activeFilters().length > 0) {
|
|
11091
|
-
<div class="moz-grid__tag-bar">
|
|
11092
|
-
<span class="moz-grid__tag-bar-label">FILTERED BY</span>
|
|
11093
|
-
@for (filter of state.activeFilters(); track filter.field) {
|
|
11094
|
-
<moz-tag
|
|
11095
|
-
[type]="filter.removable ? 'removable' : 'informative'"
|
|
11096
|
-
size="s"
|
|
11097
|
-
[id]="'filter-' + filter.field"
|
|
11098
|
-
(removeTag)="onRemoveFilter(filter.field)"
|
|
11099
|
-
>{{ filter.label }}</moz-tag
|
|
11100
|
-
>
|
|
11101
|
-
}
|
|
11102
|
-
<button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
|
|
11103
|
-
Remove all
|
|
11104
|
-
</button>
|
|
11152
|
+
</moz-tag>
|
|
11105
11153
|
</div>
|
|
11154
|
+
}
|
|
11155
|
+
</div>
|
|
11156
|
+
} @if (hasHiddenColumns()) {
|
|
11157
|
+
<div class="moz-grid__tag-bar">
|
|
11158
|
+
<span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
|
|
11159
|
+
@for (col of hiddenColumnsList(); track col.field) {
|
|
11160
|
+
<moz-tag
|
|
11161
|
+
type="removable"
|
|
11162
|
+
size="s"
|
|
11163
|
+
[id]="'hidden-' + col.field"
|
|
11164
|
+
removableLabel="Restore"
|
|
11165
|
+
(removeTag)="onRestoreColumn(col.field)"
|
|
11166
|
+
>{{ col.label }}</moz-tag
|
|
11167
|
+
>
|
|
11168
|
+
} @if (hiddenColumnsList().length > 1) {
|
|
11169
|
+
<button type="button" class="moz-grid__tag-action-btn" (click)="onRestoreAllColumns()">
|
|
11170
|
+
Restore all
|
|
11171
|
+
</button>
|
|
11172
|
+
}
|
|
11173
|
+
</div>
|
|
11174
|
+
} @if (state.activeFilters().length > 0) {
|
|
11175
|
+
<div class="moz-grid__tag-bar">
|
|
11176
|
+
<span class="moz-grid__tag-bar-label">FILTERED BY</span>
|
|
11177
|
+
@for (filter of state.activeFilters(); track filter.field) {
|
|
11178
|
+
<moz-tag
|
|
11179
|
+
[type]="filter.removable ? 'removable' : 'informative'"
|
|
11180
|
+
size="s"
|
|
11181
|
+
[id]="'filter-' + filter.field"
|
|
11182
|
+
(removeTag)="onRemoveFilter(filter.field)"
|
|
11183
|
+
>{{ filter.label }}</moz-tag
|
|
11184
|
+
>
|
|
11185
|
+
}
|
|
11186
|
+
<button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
|
|
11187
|
+
Remove all
|
|
11188
|
+
</button>
|
|
11189
|
+
</div>
|
|
11106
11190
|
}
|
|
11107
11191
|
<ng-content select="[mozGridFilterTags]" />
|
|
11108
11192
|
|
|
@@ -11139,13 +11223,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
11139
11223
|
|
|
11140
11224
|
<!-- Footer: pagination or infinite scroll loading indicator -->
|
|
11141
11225
|
@if (showPagination()) {
|
|
11142
|
-
|
|
11143
|
-
|
|
11144
|
-
|
|
11145
|
-
|
|
11146
|
-
}
|
|
11147
|
-
|
|
11148
|
-
<moz-grid-loading-indicator />
|
|
11226
|
+
<moz-grid-footer
|
|
11227
|
+
[pageSizeOptions]="pageSizeOptions()"
|
|
11228
|
+
(pageChange)="pageChange.emit($event)"
|
|
11229
|
+
/>
|
|
11230
|
+
} @if (showInfiniteScrollLoader()) {
|
|
11231
|
+
<moz-grid-loading-indicator />
|
|
11149
11232
|
}
|
|
11150
11233
|
|
|
11151
11234
|
<!-- Bulk selection action bar -->
|