@skyux/grids 9.0.0-alpha.8 → 9.0.0-beta.0
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.
- package/documentation.json +509 -509
- package/esm2022/lib/modules/grid/grid.component.mjs +7 -4
- package/esm2022/lib/modules/grid/grid.module.mjs +2 -5
- package/esm2022/lib/modules/shared/sky-grids-resources.module.mjs +4 -2
- package/fesm2022/skyux-grids.mjs +10 -8
- package/fesm2022/skyux-grids.mjs.map +1 -1
- package/lib/modules/grid/grid.component.d.ts +1 -0
- package/lib/modules/grid/grid.module.d.ts +1 -1
- package/package.json +8 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { NgModule } from '@angular/core';
|
|
3
3
|
import { FormsModule } from '@angular/forms';
|
|
4
|
-
import { SkyAffixModule
|
|
4
|
+
import { SkyAffixModule } from '@skyux/core';
|
|
5
5
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
6
6
|
import { SkyHelpInlineModule, SkyIconModule, SkyTextHighlightModule, } from '@skyux/indicators';
|
|
7
7
|
import { SkyInlineDeleteModule } from '@skyux/layout';
|
|
@@ -28,7 +28,6 @@ export class SkyGridModule {
|
|
|
28
28
|
SkyHelpInlineModule,
|
|
29
29
|
SkyIconModule,
|
|
30
30
|
SkyInlineDeleteModule,
|
|
31
|
-
SkyOverlayModule,
|
|
32
31
|
SkyPopoverModule,
|
|
33
32
|
SkyTextHighlightModule], exports: [SkyGridComponent, SkyGridColumnComponent] }); }
|
|
34
33
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyGridModule, imports: [CommonModule,
|
|
@@ -40,7 +39,6 @@ export class SkyGridModule {
|
|
|
40
39
|
SkyHelpInlineModule,
|
|
41
40
|
SkyIconModule,
|
|
42
41
|
SkyInlineDeleteModule,
|
|
43
|
-
SkyOverlayModule,
|
|
44
42
|
SkyPopoverModule,
|
|
45
43
|
SkyTextHighlightModule] }); }
|
|
46
44
|
}
|
|
@@ -62,11 +60,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
62
60
|
SkyHelpInlineModule,
|
|
63
61
|
SkyIconModule,
|
|
64
62
|
SkyInlineDeleteModule,
|
|
65
|
-
SkyOverlayModule,
|
|
66
63
|
SkyPopoverModule,
|
|
67
64
|
SkyTextHighlightModule,
|
|
68
65
|
],
|
|
69
66
|
exports: [SkyGridComponent, SkyGridColumnComponent],
|
|
70
67
|
}]
|
|
71
68
|
}] });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvZ3JpZHMvc3JjL2xpYi9tb2R1bGVzL2dyaWQvZ3JpZC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDN0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ2pELE9BQU8sRUFDTCxtQkFBbUIsRUFDbkIsYUFBYSxFQUNiLHNCQUFzQixHQUN2QixNQUFNLG1CQUFtQixDQUFDO0FBQzNCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUVuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBRTVDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBRS9FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzdELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGtCQUFrQixDQUFDOztBQUVwRDs7R0FFRztBQXNCSCxNQUFNLE9BQU8sYUFBYTs4R0FBYixhQUFhOytHQUFiLGFBQWEsaUJBbkJ0QixnQkFBZ0I7WUFDaEIsc0JBQXNCO1lBQ3RCLG9CQUFvQixhQUdwQixZQUFZO1lBQ1osYUFBYTtZQUNiLFdBQVc7WUFDWCxjQUFjO1lBQ2QsaUJBQWlCO1lBQ2pCLHVCQUF1QjtZQUN2QixtQkFBbUI7WUFDbkIsYUFBYTtZQUNiLHFCQUFxQjtZQUNyQixnQkFBZ0I7WUFDaEIsc0JBQXNCLGFBRWQsZ0JBQWdCLEVBQUUsc0JBQXNCOytHQUV2QyxhQUFhLFlBZHRCLFlBQVk7WUFDWixhQUFhO1lBQ2IsV0FBVztZQUNYLGNBQWM7WUFDZCxpQkFBaUI7WUFDakIsdUJBQXVCO1lBQ3ZCLG1CQUFtQjtZQUNuQixhQUFhO1lBQ2IscUJBQXFCO1lBQ3JCLGdCQUFnQjtZQUNoQixzQkFBc0I7OzJGQUliLGFBQWE7a0JBckJ6QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixnQkFBZ0I7d0JBQ2hCLHNCQUFzQjt3QkFDdEIsb0JBQW9CO3FCQUNyQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixhQUFhO3dCQUNiLFdBQVc7d0JBQ1gsY0FBYzt3QkFDZCxpQkFBaUI7d0JBQ2pCLHVCQUF1Qjt3QkFDdkIsbUJBQW1CO3dCQUNuQixhQUFhO3dCQUNiLHFCQUFxQjt3QkFDckIsZ0JBQWdCO3dCQUNoQixzQkFBc0I7cUJBQ3ZCO29CQUNELE9BQU8sRUFBRSxDQUFDLGdCQUFnQixFQUFFLHNCQUFzQixDQUFDO2lCQUNwRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTa3lBZmZpeE1vZHVsZSB9IGZyb20gJ0Bza3l1eC9jb3JlJztcbmltcG9ydCB7IFNreUNoZWNrYm94TW9kdWxlIH0gZnJvbSAnQHNreXV4L2Zvcm1zJztcbmltcG9ydCB7XG4gIFNreUhlbHBJbmxpbmVNb2R1bGUsXG4gIFNreUljb25Nb2R1bGUsXG4gIFNreVRleHRIaWdobGlnaHRNb2R1bGUsXG59IGZyb20gJ0Bza3l1eC9pbmRpY2F0b3JzJztcbmltcG9ydCB7IFNreUlubGluZURlbGV0ZU1vZHVsZSB9IGZyb20gJ0Bza3l1eC9sYXlvdXQnO1xuaW1wb3J0IHsgU2t5UG9wb3Zlck1vZHVsZSB9IGZyb20gJ0Bza3l1eC9wb3BvdmVycyc7XG5cbmltcG9ydCB7IERyYWd1bGFNb2R1bGUgfSBmcm9tICduZzItZHJhZ3VsYSc7XG5cbmltcG9ydCB7IFNreUdyaWRzUmVzb3VyY2VzTW9kdWxlIH0gZnJvbSAnLi4vc2hhcmVkL3NreS1ncmlkcy1yZXNvdXJjZXMubW9kdWxlJztcblxuaW1wb3J0IHsgU2t5R3JpZENlbGxDb21wb25lbnQgfSBmcm9tICcuL2dyaWQtY2VsbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2t5R3JpZENvbHVtbkNvbXBvbmVudCB9IGZyb20gJy4vZ3JpZC1jb2x1bW4uY29tcG9uZW50JztcbmltcG9ydCB7IFNreUdyaWRDb21wb25lbnQgfSBmcm9tICcuL2dyaWQuY29tcG9uZW50JztcblxuLyoqXG4gKiBAZGVwcmVjYXRlZCBgU2t5R3JpZENvbXBvbmVudGAgYW5kIGl0cyBmZWF0dXJlcyBhcmUgZGVwcmVjYXRlZC4gV2UgcmVjb21tZW5kIHVzaW5nIHRoZSBkYXRhIGdyaWQgaW5zdGVhZC4gRm9yIG1vcmUgaW5mb3JtYXRpb24sIHNlZSBodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2NvbXBvbmVudHMvZGF0YS1ncmlkXG4gKi9cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNreUdyaWRDb21wb25lbnQsXG4gICAgU2t5R3JpZENvbHVtbkNvbXBvbmVudCxcbiAgICBTa3lHcmlkQ2VsbENvbXBvbmVudCxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBEcmFndWxhTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlLFxuICAgIFNreUFmZml4TW9kdWxlLFxuICAgIFNreUNoZWNrYm94TW9kdWxlLFxuICAgIFNreUdyaWRzUmVzb3VyY2VzTW9kdWxlLFxuICAgIFNreUhlbHBJbmxpbmVNb2R1bGUsXG4gICAgU2t5SWNvbk1vZHVsZSxcbiAgICBTa3lJbmxpbmVEZWxldGVNb2R1bGUsXG4gICAgU2t5UG9wb3Zlck1vZHVsZSxcbiAgICBTa3lUZXh0SGlnaGxpZ2h0TW9kdWxlLFxuICBdLFxuICBleHBvcnRzOiBbU2t5R3JpZENvbXBvbmVudCwgU2t5R3JpZENvbHVtbkNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIFNreUdyaWRNb2R1bGUge31cbiJdfQ==
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* istanbul ignore file */
|
|
1
2
|
/**
|
|
2
3
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
3
4
|
* The contents of this file were automatically generated by
|
|
@@ -5,11 +6,12 @@
|
|
|
5
6
|
* To update this file, simply rerun the command.
|
|
6
7
|
*/
|
|
7
8
|
import { NgModule } from '@angular/core';
|
|
8
|
-
import { SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, getLibStringForLocale, } from '@skyux/i18n';
|
|
9
|
+
import { SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, SkyLibResourcesService, getLibStringForLocale, } from '@skyux/i18n';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
const RESOURCES = {
|
|
11
12
|
'EN-US': { skyux_grid_multiselect_select_row: { message: 'Select row' } },
|
|
12
13
|
};
|
|
14
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
13
15
|
export class SkyGridsResourcesProvider {
|
|
14
16
|
getString(localeInfo, name) {
|
|
15
17
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -42,4 +44,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
42
44
|
],
|
|
43
45
|
}]
|
|
44
46
|
}] });
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2t5LWdyaWRzLXJlc291cmNlcy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvZ3JpZHMvc3JjL2xpYi9tb2R1bGVzL3NoYXJlZC9za3ktZ3JpZHMtcmVzb3VyY2VzLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwwQkFBMEI7QUFFMUI7Ozs7O0dBS0c7QUFDSCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFDTCwyQkFBMkIsRUFFM0IsYUFBYSxFQUdiLHNCQUFzQixFQUN0QixxQkFBcUIsR0FDdEIsTUFBTSxhQUFhLENBQUM7O0FBRXJCLE1BQU0sU0FBUyxHQUEwQztJQUN2RCxPQUFPLEVBQUUsRUFBRSxpQ0FBaUMsRUFBRSxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsRUFBRTtDQUMxRSxDQUFDO0FBRUYsc0JBQXNCLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0FBRS9DLE1BQU0sT0FBTyx5QkFBeUI7SUFDN0IsU0FBUyxDQUNkLFVBQTRCLEVBQzVCLElBQVk7UUFFWixPQUFPLHFCQUFxQixDQUFDLFNBQVMsRUFBRSxVQUFVLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ25FLENBQUM7Q0FDRjtBQUVEOztHQUVHO0FBV0gsTUFBTSxPQUFPLHVCQUF1Qjs4R0FBdkIsdUJBQXVCOytHQUF2Qix1QkFBdUIsWUFUeEIsYUFBYTsrR0FTWix1QkFBdUIsYUFSdkI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsMkJBQTJCO2dCQUNwQyxRQUFRLEVBQUUseUJBQXlCO2dCQUNuQyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsWUFQUyxhQUFhOzsyRkFTWix1QkFBdUI7a0JBVm5DLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsYUFBYSxDQUFDO29CQUN4QixTQUFTLEVBQUU7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLDJCQUEyQjs0QkFDcEMsUUFBUSxFQUFFLHlCQUF5Qjs0QkFDbkMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBpc3RhbmJ1bCBpZ25vcmUgZmlsZSAqL1xuXG4vKipcbiAqIE5PVElDRTogRE8gTk9UIE1PRElGWSBUSElTIEZJTEUhXG4gKiBUaGUgY29udGVudHMgb2YgdGhpcyBmaWxlIHdlcmUgYXV0b21hdGljYWxseSBnZW5lcmF0ZWQgYnlcbiAqIHRoZSAnbmcgZ2VuZXJhdGUgQHNreXV4L2kxOG46bGliLXJlc291cmNlcy1tb2R1bGUgbGliL21vZHVsZXMvc2hhcmVkL3NreS1ncmlkcycgc2NoZW1hdGljLlxuICogVG8gdXBkYXRlIHRoaXMgZmlsZSwgc2ltcGx5IHJlcnVuIHRoZSBjb21tYW5kLlxuICovXG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU0tZX0xJQl9SRVNPVVJDRVNfUFJPVklERVJTLFxuICBTa3lBcHBMb2NhbGVJbmZvLFxuICBTa3lJMThuTW9kdWxlLFxuICBTa3lMaWJSZXNvdXJjZXMsXG4gIFNreUxpYlJlc291cmNlc1Byb3ZpZGVyLFxuICBTa3lMaWJSZXNvdXJjZXNTZXJ2aWNlLFxuICBnZXRMaWJTdHJpbmdGb3JMb2NhbGUsXG59IGZyb20gJ0Bza3l1eC9pMThuJztcblxuY29uc3QgUkVTT1VSQ0VTOiB7IFtsb2NhbGU6IHN0cmluZ106IFNreUxpYlJlc291cmNlcyB9ID0ge1xuICAnRU4tVVMnOiB7IHNreXV4X2dyaWRfbXVsdGlzZWxlY3Rfc2VsZWN0X3JvdzogeyBtZXNzYWdlOiAnU2VsZWN0IHJvdycgfSB9LFxufTtcblxuU2t5TGliUmVzb3VyY2VzU2VydmljZS5hZGRSZXNvdXJjZXMoUkVTT1VSQ0VTKTtcblxuZXhwb3J0IGNsYXNzIFNreUdyaWRzUmVzb3VyY2VzUHJvdmlkZXIgaW1wbGVtZW50cyBTa3lMaWJSZXNvdXJjZXNQcm92aWRlciB7XG4gIHB1YmxpYyBnZXRTdHJpbmcoXG4gICAgbG9jYWxlSW5mbzogU2t5QXBwTG9jYWxlSW5mbyxcbiAgICBuYW1lOiBzdHJpbmdcbiAgKTogc3RyaW5nIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gZ2V0TGliU3RyaW5nRm9yTG9jYWxlKFJFU09VUkNFUywgbG9jYWxlSW5mby5sb2NhbGUsIG5hbWUpO1xuICB9XG59XG5cbi8qKlxuICogSW1wb3J0IGludG8gYW55IGNvbXBvbmVudCBsaWJyYXJ5IG1vZHVsZSB0aGF0IG5lZWRzIHRvIHVzZSByZXNvdXJjZSBzdHJpbmdzLlxuICovXG5ATmdNb2R1bGUoe1xuICBleHBvcnRzOiBbU2t5STE4bk1vZHVsZV0sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IFNLWV9MSUJfUkVTT1VSQ0VTX1BST1ZJREVSUyxcbiAgICAgIHVzZUNsYXNzOiBTa3lHcmlkc1Jlc291cmNlc1Byb3ZpZGVyLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5R3JpZHNSZXNvdXJjZXNNb2R1bGUge31cbiJdfQ==
|
package/fesm2022/skyux-grids.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i4 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, TemplateRef, ContentChildren, Injectable, Output, ViewChildren, HostListener } from '@angular/core';
|
|
4
|
+
import { NgModule, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, TemplateRef, ContentChildren, Injectable, inject, EnvironmentInjector, Output, ViewChildren, HostListener } from '@angular/core';
|
|
5
5
|
import * as i5 from '@angular/forms';
|
|
6
6
|
import { FormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1 from '@skyux/core';
|
|
8
|
-
import { SkyAffixAutoFitContext, SkyAffixModule
|
|
8
|
+
import { SkyAffixAutoFitContext, SkyAffixModule } from '@skyux/core';
|
|
9
9
|
import * as i6 from '@skyux/forms';
|
|
10
10
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
11
11
|
import * as i7 from '@skyux/indicators';
|
|
@@ -17,11 +17,12 @@ import { SkyPopoverModule } from '@skyux/popovers';
|
|
|
17
17
|
import * as i2 from 'ng2-dragula';
|
|
18
18
|
import { DragulaService, DragulaModule } from 'ng2-dragula';
|
|
19
19
|
import * as i11 from '@skyux/i18n';
|
|
20
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
20
|
+
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
21
21
|
import { getData, ListItemModel } from '@skyux/list-builder-common';
|
|
22
22
|
import { Subject, BehaviorSubject, fromEvent, merge } from 'rxjs';
|
|
23
23
|
import { takeUntil, take, map, distinctUntilChanged, takeWhile } from 'rxjs/operators';
|
|
24
24
|
|
|
25
|
+
/* istanbul ignore file */
|
|
25
26
|
/**
|
|
26
27
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
27
28
|
* The contents of this file were automatically generated by
|
|
@@ -31,6 +32,7 @@ import { takeUntil, take, map, distinctUntilChanged, takeWhile } from 'rxjs/oper
|
|
|
31
32
|
const RESOURCES = {
|
|
32
33
|
'EN-US': { skyux_grid_multiselect_select_row: { message: 'Select row' } },
|
|
33
34
|
};
|
|
35
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
34
36
|
class SkyGridsResourcesProvider {
|
|
35
37
|
getString(localeInfo, name) {
|
|
36
38
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -433,6 +435,7 @@ class SkyGridComponent {
|
|
|
433
435
|
get tableWidth() {
|
|
434
436
|
return this.tableElementRef.nativeElement.offsetWidth;
|
|
435
437
|
}
|
|
438
|
+
#environmentInjector;
|
|
436
439
|
constructor(affixService, changeDetector, dragulaService, gridAdapter, overlayService, skyWindow, uiConfigService, logger) {
|
|
437
440
|
this.affixService = affixService;
|
|
438
441
|
this.changeDetector = changeDetector;
|
|
@@ -506,6 +509,7 @@ class SkyGridComponent {
|
|
|
506
509
|
this.subscriptions = [];
|
|
507
510
|
this.scrollTriggered = false;
|
|
508
511
|
this.selectedColumnIdsSet = false;
|
|
512
|
+
this.#environmentInjector = inject(EnvironmentInjector);
|
|
509
513
|
logger.deprecated('SkyGridComponent', {
|
|
510
514
|
deprecationMajorVersion: 6,
|
|
511
515
|
moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-grid',
|
|
@@ -935,6 +939,7 @@ class SkyGridComponent {
|
|
|
935
939
|
closeOnNavigation: true,
|
|
936
940
|
enableClose: false,
|
|
937
941
|
enablePointerEvents: true,
|
|
942
|
+
environmentInjector: this.#environmentInjector,
|
|
938
943
|
});
|
|
939
944
|
overlay.attachTemplate(this.inlineDeleteTemplateRef, {
|
|
940
945
|
$implicit: this.data.find((item) => item.id === message.data.promptDeleteRow.id),
|
|
@@ -1297,11 +1302,11 @@ class SkyGridComponent {
|
|
|
1297
1302
|
arrayA.every((value, index) => value === arrayB[index]));
|
|
1298
1303
|
}
|
|
1299
1304
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyGridComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i2.DragulaService }, { token: SkyGridAdapterService }, { token: i1.SkyOverlayService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyUIConfigService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1300
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr [dragula]=\"dragulaGroupName\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur()\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\n </th>\n </tr>\n </thead>\n <tbody class=\"sky-grid-tbody\">\n <tr\n class=\"sky-grid-row\"\n *ngFor=\"let item of items; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\n [template]=\"column.template || defaultCellTemplate\"\n [fieldSelector]=\"column.field\"\n [item]=\"item\"\n [columnId]=\"column.id\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i7.λ3, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel"], outputs: ["actionClick"] }, { kind: "component", type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i8.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "directive", type: i9.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "directive", type: i7.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], viewProviders: [DragulaService], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr [dragula]=\"dragulaGroupName\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur()\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\n </th>\n </tr>\n </thead>\n <tbody class=\"sky-grid-tbody\">\n <tr\n class=\"sky-grid-row\"\n *ngFor=\"let item of items; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\n [template]=\"column.template || defaultCellTemplate\"\n [fieldSelector]=\"column.field\"\n [item]=\"item\"\n [columnId]=\"column.id\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}.sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i7.λ3, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel"], outputs: ["actionClick"] }, { kind: "component", type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i8.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "directive", type: i9.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "directive", type: i7.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], viewProviders: [DragulaService], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1301
1306
|
}
|
|
1302
1307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyGridComponent, decorators: [{
|
|
1303
1308
|
type: Component,
|
|
1304
|
-
args: [{ selector: 'sky-grid', viewProviders: [DragulaService], providers: [SkyGridAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr [dragula]=\"dragulaGroupName\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur()\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\n </th>\n </tr>\n </thead>\n <tbody class=\"sky-grid-tbody\">\n <tr\n class=\"sky-grid-row\"\n *ngFor=\"let item of items; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\n [template]=\"column.template || defaultCellTemplate\"\n [fieldSelector]=\"column.field\"\n [item]=\"item\"\n [columnId]=\"column.id\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"] }]
|
|
1309
|
+
args: [{ selector: 'sky-grid', viewProviders: [DragulaService], providers: [SkyGridAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr [dragula]=\"dragulaGroupName\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur()\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\n </th>\n </tr>\n </thead>\n <tbody class=\"sky-grid-tbody\">\n <tr\n class=\"sky-grid-row\"\n *ngFor=\"let item of items; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\n [template]=\"column.template || defaultCellTemplate\"\n [fieldSelector]=\"column.field\"\n [item]=\"item\"\n [columnId]=\"column.id\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}.sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"] }]
|
|
1305
1310
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i2.DragulaService }, { type: SkyGridAdapterService }, { type: i1.SkyOverlayService }, { type: i1.SkyAppWindowRef }, { type: i1.SkyUIConfigService }, { type: i1.SkyLogService }]; }, propDecorators: { columns: [{
|
|
1306
1311
|
type: Input
|
|
1307
1312
|
}], data: [{
|
|
@@ -1392,7 +1397,6 @@ class SkyGridModule {
|
|
|
1392
1397
|
SkyHelpInlineModule,
|
|
1393
1398
|
SkyIconModule,
|
|
1394
1399
|
SkyInlineDeleteModule,
|
|
1395
|
-
SkyOverlayModule,
|
|
1396
1400
|
SkyPopoverModule,
|
|
1397
1401
|
SkyTextHighlightModule], exports: [SkyGridComponent, SkyGridColumnComponent] }); }
|
|
1398
1402
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyGridModule, imports: [CommonModule,
|
|
@@ -1404,7 +1408,6 @@ class SkyGridModule {
|
|
|
1404
1408
|
SkyHelpInlineModule,
|
|
1405
1409
|
SkyIconModule,
|
|
1406
1410
|
SkyInlineDeleteModule,
|
|
1407
|
-
SkyOverlayModule,
|
|
1408
1411
|
SkyPopoverModule,
|
|
1409
1412
|
SkyTextHighlightModule] }); }
|
|
1410
1413
|
}
|
|
@@ -1426,7 +1429,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1426
1429
|
SkyHelpInlineModule,
|
|
1427
1430
|
SkyIconModule,
|
|
1428
1431
|
SkyInlineDeleteModule,
|
|
1429
|
-
SkyOverlayModule,
|
|
1430
1432
|
SkyPopoverModule,
|
|
1431
1433
|
SkyTextHighlightModule,
|
|
1432
1434
|
],
|