@skyux/lists 5.0.3 → 5.0.4
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/bundles/skyux-lists-testing.umd.js +11 -24
- package/bundles/skyux-lists-testing.umd.js.map +1 -1
- package/bundles/skyux-lists.umd.js +145 -140
- package/bundles/skyux-lists.umd.js.map +1 -1
- package/documentation.json +160 -155
- package/esm2015/modules/filter/filter-button.component.js +4 -4
- package/esm2015/modules/filter/filter-inline-item.component.js +2 -2
- package/esm2015/modules/filter/filter-inline.component.js +2 -2
- package/esm2015/modules/filter/filter-summary-item.component.js +4 -4
- package/esm2015/modules/filter/filter-summary.component.js +3 -3
- package/esm2015/modules/filter/filter.module.js +6 -6
- package/esm2015/modules/infinite-scroll/infinite-scroll-dom-adapter.service.js +8 -9
- package/esm2015/modules/infinite-scroll/infinite-scroll.component.js +8 -10
- package/esm2015/modules/infinite-scroll/infinite-scroll.module.js +6 -20
- package/esm2015/modules/paging/paging.component.js +7 -8
- package/esm2015/modules/paging/paging.module.js +5 -9
- package/esm2015/modules/repeater/repeater-adapter.service.js +1 -1
- package/esm2015/modules/repeater/repeater-item-content.component.js +2 -2
- package/esm2015/modules/repeater/repeater-item-context-menu.component.js +2 -2
- package/esm2015/modules/repeater/repeater-item-title.component.js +2 -2
- package/esm2015/modules/repeater/repeater-item.component.js +10 -10
- package/esm2015/modules/repeater/repeater.component.js +16 -15
- package/esm2015/modules/repeater/repeater.module.js +6 -6
- package/esm2015/modules/repeater/repeater.service.js +2 -2
- package/esm2015/modules/shared/sky-lists-resources.module.js +42 -9
- package/esm2015/modules/sort/sort-item.component.js +8 -7
- package/esm2015/modules/sort/sort-menu-heading.component.js +3 -3
- package/esm2015/modules/sort/sort.component.js +6 -10
- package/esm2015/modules/sort/sort.module.js +6 -10
- package/esm2015/modules/sort/sort.service.js +1 -1
- package/esm2015/testing/filter/filter-fixture-button.js +2 -2
- package/esm2015/testing/filter/filter-fixture-summary.js +1 -1
- package/esm2015/testing/filter/filter-testing.module.js +2 -4
- package/esm2015/testing/infinite-scroll/infinite-scroll-fixture.js +1 -1
- package/esm2015/testing/infinite-scroll/infinite-scroll-testing.module.js +2 -4
- package/esm2015/testing/paging/paging-fixture.js +2 -2
- package/esm2015/testing/paging/paging-testing.module.js +2 -4
- package/esm2015/testing/sort/sort-fixture.js +5 -6
- package/esm2015/testing/sort/sort-testing.module.js +4 -10
- package/fesm2015/skyux-lists-testing.js +12 -25
- package/fesm2015/skyux-lists-testing.js.map +1 -1
- package/fesm2015/skyux-lists.js +128 -123
- package/fesm2015/skyux-lists.js.map +1 -1
- package/package.json +7 -7
package/fesm2015/skyux-lists.js
CHANGED
|
@@ -29,7 +29,36 @@ import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
|
|
|
29
29
|
* To update this file, simply rerun the command.
|
|
30
30
|
*/
|
|
31
31
|
const RESOURCES = {
|
|
32
|
-
'EN-US': {
|
|
32
|
+
'EN-US': {
|
|
33
|
+
skyux_filter_button_title: { message: 'Filter' },
|
|
34
|
+
skyux_filter_summary_close: { message: 'Remove filter' },
|
|
35
|
+
skyux_filter_summary_header: { message: 'Filter' },
|
|
36
|
+
skyux_infinite_scroll_load_more_button: { message: 'Load more' },
|
|
37
|
+
skyux_paging_label: { message: 'Pagination' },
|
|
38
|
+
skyux_paging_next: { message: 'Next' },
|
|
39
|
+
skyux_paging_previous: { message: 'Previous' },
|
|
40
|
+
skyux_repeater_label: { message: 'List of items' },
|
|
41
|
+
skyux_repeater_item_checkbox_label: { message: 'Select row' },
|
|
42
|
+
skyux_repeater_item_reorder_cancel: {
|
|
43
|
+
message: 'Item reordering was canceled. The item was returned to its original position.',
|
|
44
|
+
},
|
|
45
|
+
skyux_repeater_item_reorder_finish: {
|
|
46
|
+
message: 'Dropped the item in position',
|
|
47
|
+
},
|
|
48
|
+
skyux_repeater_item_reorder_instructions: {
|
|
49
|
+
message: 'Item grabbed. Press the up and down arrow keys to change position. Press the spacebar or enter key to drop. And press the escape key to cancel.',
|
|
50
|
+
},
|
|
51
|
+
skyux_repeater_item_reorder_moved: {
|
|
52
|
+
message: 'Moved the item to position',
|
|
53
|
+
},
|
|
54
|
+
skyux_repeater_item_reorder_operation: {
|
|
55
|
+
message: 'Press the spacebar or enter key to reorder.',
|
|
56
|
+
},
|
|
57
|
+
skyux_repeater_item_reorder_top: { message: 'Top' },
|
|
58
|
+
skyux_repeater_item_reorder_top_label: { message: 'Move to top' },
|
|
59
|
+
skyux_sort_button_label: { message: 'Sort' },
|
|
60
|
+
skyux_sort_menu_heading: { message: 'Sort by' },
|
|
61
|
+
},
|
|
33
62
|
};
|
|
34
63
|
class SkyListsResourcesProvider {
|
|
35
64
|
getString(localeInfo, name) {
|
|
@@ -43,20 +72,24 @@ class SkyListsResourcesModule {
|
|
|
43
72
|
}
|
|
44
73
|
SkyListsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
45
74
|
SkyListsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListsResourcesModule, exports: [SkyI18nModule] });
|
|
46
|
-
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListsResourcesModule, providers: [
|
|
75
|
+
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListsResourcesModule, providers: [
|
|
76
|
+
{
|
|
47
77
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
48
78
|
useClass: SkyListsResourcesProvider,
|
|
49
|
-
multi: true
|
|
50
|
-
}
|
|
79
|
+
multi: true,
|
|
80
|
+
},
|
|
81
|
+
], imports: [SkyI18nModule] });
|
|
51
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListsResourcesModule, decorators: [{
|
|
52
83
|
type: NgModule,
|
|
53
84
|
args: [{
|
|
54
85
|
exports: [SkyI18nModule],
|
|
55
|
-
providers: [
|
|
86
|
+
providers: [
|
|
87
|
+
{
|
|
56
88
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
57
89
|
useClass: SkyListsResourcesProvider,
|
|
58
|
-
multi: true
|
|
59
|
-
}
|
|
90
|
+
multi: true,
|
|
91
|
+
},
|
|
92
|
+
],
|
|
60
93
|
}]
|
|
61
94
|
}] });
|
|
62
95
|
|
|
@@ -96,14 +129,14 @@ class SkyFilterButtonComponent {
|
|
|
96
129
|
}
|
|
97
130
|
}
|
|
98
131
|
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
-
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFilterButtonComponent, selector: "sky-filter-button", inputs: { filterButtonId: "filterButtonId", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", active: "active", disabled: "disabled", showButtonText: "showButtonText" }, outputs: { filterButtonClick: "filterButtonClick" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default sky-filter-btn\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"'skyux_filter_button_title' | skyLibResources\"\n [attr.title]=\"'skyux_filter_button_title' | skyLibResources\"\n [disabled]=\"disabled\"\n [id]=\"filterButtonId\"\n [ngClass]=\"{\n 'sky-filter-btn-active': active\n }\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-theme-modern': 'modern'\n }\"\n (click)=\"filterButtonOnClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\"
|
|
132
|
+
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFilterButtonComponent, selector: "sky-filter-button", inputs: { filterButtonId: "filterButtonId", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", active: "active", disabled: "disabled", showButtonText: "showButtonText" }, outputs: { filterButtonClick: "filterButtonClick" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default sky-filter-btn\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"'skyux_filter_button_title' | skyLibResources\"\n [attr.title]=\"'skyux_filter_button_title' | skyLibResources\"\n [disabled]=\"disabled\"\n [id]=\"filterButtonId\"\n [ngClass]=\"{\n 'sky-filter-btn-active': active\n }\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-theme-modern': 'modern'\n }\"\n (click)=\"filterButtonOnClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\" size=\"lg\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"filter\" iconType=\"skyux\"></sky-icon>\n <span *ngIf=\"showButtonText\" class=\"sky-filter-btn-text\">\n {{ 'skyux_filter_button_title' | skyLibResources }}\n </span>\n</button>\n", styles: [".sky-filter-btn-active,.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#212327}.sky-theme-modern.sky-filter-btn-active,.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:focus{color:initial;border:none;box-shadow:inset 0 0 0 1px #0974a1;background-color:#c1e8fb;color:#212327;padding:9px 21px}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:focus:hover{border:none;box-shadow:inset 0 0 0 1px #0974a1;text-decoration:none}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:hover,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{color:#212327}.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #0974a1;background-image:none}.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active[disabled],.sky-theme-modern.sky-filter-btn-active[disabled]:hover,.sky-theme-modern.sky-filter-btn-active[disabled]:focus,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active[disabled]:active,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover[disabled],.sky-theme-modern.sky-filter-btn-active:hover[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:active,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus[disabled],.sky-theme-modern.sky-filter-btn-active:focus[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:active,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern.sky-filter-btn-active:focus,.sky-theme-modern.sky-filter-btn-active:hover:focus,.sky-theme-modern.sky-filter-btn-active:focus:focus{outline:none}.sky-theme-modern.sky-filter-btn-active:focus:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #0974a1,0 1px 8px #0000004d}:host .sky-filter-btn-text{display:none}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn-text,:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-filter-btn-text{display:inline}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
100
133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterButtonComponent, decorators: [{
|
|
101
134
|
type: Component,
|
|
102
135
|
args: [{
|
|
103
136
|
selector: 'sky-filter-button',
|
|
104
137
|
styleUrls: ['./filter-button.component.scss'],
|
|
105
138
|
templateUrl: './filter-button.component.html',
|
|
106
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
139
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
107
140
|
}]
|
|
108
141
|
}], propDecorators: { filterButtonId: [{
|
|
109
142
|
type: Input
|
|
@@ -133,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
133
166
|
args: [{
|
|
134
167
|
selector: 'sky-filter-inline',
|
|
135
168
|
styleUrls: ['./filter-inline.component.scss'],
|
|
136
|
-
templateUrl: './filter-inline.component.html'
|
|
169
|
+
templateUrl: './filter-inline.component.html',
|
|
137
170
|
}]
|
|
138
171
|
}] });
|
|
139
172
|
|
|
@@ -149,7 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
149
182
|
args: [{
|
|
150
183
|
selector: 'sky-filter-inline-item',
|
|
151
184
|
styleUrls: ['./filter-inline-item.component.scss'],
|
|
152
|
-
templateUrl: './filter-inline-item.component.html'
|
|
185
|
+
templateUrl: './filter-inline-item.component.html',
|
|
153
186
|
}]
|
|
154
187
|
}] });
|
|
155
188
|
|
|
@@ -182,14 +215,14 @@ class SkyFilterSummaryItemComponent {
|
|
|
182
215
|
}
|
|
183
216
|
}
|
|
184
217
|
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
185
|
-
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFilterSummaryItemComponent, selector: "sky-filter-summary-item", inputs: { dismissible: "dismissible" }, outputs: { dismiss: "dismiss", itemClick: "itemClick" }, ngImport: i0, template: "<div\n class=\"sky-filter-summary-item\"\n (click)=\"onItemClick()\"\n (keypress.enter)=\"onItemKeypress()\">\n <sky-token\n [ariaLabel]=\"'skyux_filter_summary_close' | skyLibResources\"\n [dismissible]=\"dismissible\"\n (dismiss)=\"onItemDismiss()\">\n <ng-content
|
|
218
|
+
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFilterSummaryItemComponent, selector: "sky-filter-summary-item", inputs: { dismissible: "dismissible" }, outputs: { dismiss: "dismiss", itemClick: "itemClick" }, ngImport: i0, template: "<div\n class=\"sky-filter-summary-item\"\n (click)=\"onItemClick()\"\n (keypress.enter)=\"onItemKeypress()\"\n>\n <sky-token\n [ariaLabel]=\"'skyux_filter_summary_close' | skyLibResources\"\n [dismissible]=\"dismissible\"\n (dismiss)=\"onItemDismiss()\"\n >\n <ng-content> </ng-content>\n </sky-token>\n</div>\n", styles: [".sky-filter-summary-item{display:inline-block}:host:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-filter-summary-item{padding:0 0 5px}.sky-theme-modern .sky-filter-summary-item{padding:0 0 5px}\n"], components: [{ type: i1.λ12, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable"], outputs: ["dismiss", "tokenFocus"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
186
219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterSummaryItemComponent, decorators: [{
|
|
187
220
|
type: Component,
|
|
188
221
|
args: [{
|
|
189
222
|
selector: 'sky-filter-summary-item',
|
|
190
223
|
styleUrls: ['./filter-summary-item.component.scss'],
|
|
191
224
|
templateUrl: './filter-summary-item.component.html',
|
|
192
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
225
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
193
226
|
}]
|
|
194
227
|
}], propDecorators: { dismissible: [{
|
|
195
228
|
type: Input
|
|
@@ -205,14 +238,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
205
238
|
class SkyFilterSummaryComponent {
|
|
206
239
|
}
|
|
207
240
|
SkyFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
208
|
-
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFilterSummaryComponent, selector: "sky-filter-summary", ngImport: i0, template: "<div class=\"sky-filter-summary\">\n <span class=\"sky-filter-summary-header\">{{'skyux_filter_summary_header' | skyLibResources}}:</span>\n <div class=\"sky-filter-summary-items\">\n
|
|
241
|
+
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFilterSummaryComponent, selector: "sky-filter-summary", ngImport: i0, template: "<div class=\"sky-filter-summary\">\n <span class=\"sky-filter-summary-header\"\n >{{ 'skyux_filter_summary_header' | skyLibResources }}:</span\n >\n <div class=\"sky-filter-summary-items\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-filter-summary-header{margin:5px 10px 0 0;font-weight:600}.sky-filter-summary{background-color:#fff;overflow-x:auto;display:flex;align-items:flex-start}.sky-filter-summary-items{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-filter-summary-header{margin:0 10px 0 0}.sky-theme-modern .sky-filter-summary-header{margin:0 10px 0 0}\n"], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
209
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterSummaryComponent, decorators: [{
|
|
210
243
|
type: Component,
|
|
211
244
|
args: [{
|
|
212
245
|
selector: 'sky-filter-summary',
|
|
213
246
|
styleUrls: ['./filter-summary.component.scss'],
|
|
214
247
|
templateUrl: './filter-summary.component.html',
|
|
215
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
248
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
216
249
|
}]
|
|
217
250
|
}] });
|
|
218
251
|
|
|
@@ -237,7 +270,7 @@ SkyFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
237
270
|
SkyIconModule,
|
|
238
271
|
SkyListsResourcesModule,
|
|
239
272
|
SkyTokensModule,
|
|
240
|
-
SkyThemeModule
|
|
273
|
+
SkyThemeModule,
|
|
241
274
|
]] });
|
|
242
275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFilterModule, decorators: [{
|
|
243
276
|
type: NgModule,
|
|
@@ -247,22 +280,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
247
280
|
SkyFilterInlineComponent,
|
|
248
281
|
SkyFilterInlineItemComponent,
|
|
249
282
|
SkyFilterSummaryComponent,
|
|
250
|
-
SkyFilterSummaryItemComponent
|
|
283
|
+
SkyFilterSummaryItemComponent,
|
|
251
284
|
],
|
|
252
285
|
imports: [
|
|
253
286
|
CommonModule,
|
|
254
287
|
SkyIconModule,
|
|
255
288
|
SkyListsResourcesModule,
|
|
256
289
|
SkyTokensModule,
|
|
257
|
-
SkyThemeModule
|
|
290
|
+
SkyThemeModule,
|
|
258
291
|
],
|
|
259
292
|
exports: [
|
|
260
293
|
SkyFilterButtonComponent,
|
|
261
294
|
SkyFilterInlineComponent,
|
|
262
295
|
SkyFilterInlineItemComponent,
|
|
263
296
|
SkyFilterSummaryComponent,
|
|
264
|
-
SkyFilterSummaryItemComponent
|
|
265
|
-
]
|
|
297
|
+
SkyFilterSummaryItemComponent,
|
|
298
|
+
],
|
|
266
299
|
}]
|
|
267
300
|
}] });
|
|
268
301
|
|
|
@@ -296,8 +329,7 @@ class SkyInfiniteScrollDomAdapterService {
|
|
|
296
329
|
*/
|
|
297
330
|
scrollTo(elementRef) {
|
|
298
331
|
const parent = this.findScrollableParent(elementRef.nativeElement);
|
|
299
|
-
return fromEvent(parent, 'scroll')
|
|
300
|
-
.pipe(takeUntil(this.ngUnsubscribe), filter(() => {
|
|
332
|
+
return fromEvent(parent, 'scroll').pipe(takeUntil(this.ngUnsubscribe), filter(() => {
|
|
301
333
|
return this.isElementScrolledInView(elementRef.nativeElement, parent);
|
|
302
334
|
}), map(() => undefined) // Change to void return type
|
|
303
335
|
);
|
|
@@ -305,8 +337,7 @@ class SkyInfiniteScrollDomAdapterService {
|
|
|
305
337
|
createObserver(element) {
|
|
306
338
|
this.observer = new MutationObserver((mutations) => {
|
|
307
339
|
const hasUpdates = !!mutations.find((mutation) => {
|
|
308
|
-
return (!element.contains(mutation.target) &&
|
|
309
|
-
mutation.addedNodes.length > 0);
|
|
340
|
+
return (!element.contains(mutation.target) && mutation.addedNodes.length > 0);
|
|
310
341
|
});
|
|
311
342
|
if (hasUpdates) {
|
|
312
343
|
this._parentChanges.emit();
|
|
@@ -314,10 +345,10 @@ class SkyInfiniteScrollDomAdapterService {
|
|
|
314
345
|
});
|
|
315
346
|
const windowObj = this.windowRef.nativeWindow;
|
|
316
347
|
const parent = this.findScrollableParent(element);
|
|
317
|
-
const observedParent =
|
|
348
|
+
const observedParent = parent === windowObj ? windowObj.document.body : parent;
|
|
318
349
|
this.observer.observe(observedParent, {
|
|
319
350
|
childList: true,
|
|
320
|
-
subtree: true
|
|
351
|
+
subtree: true,
|
|
321
352
|
});
|
|
322
353
|
}
|
|
323
354
|
findScrollableParent(element) {
|
|
@@ -341,11 +372,12 @@ class SkyInfiniteScrollDomAdapterService {
|
|
|
341
372
|
isElementScrolledInView(element, parentElement) {
|
|
342
373
|
const windowObj = this.windowRef.nativeWindow;
|
|
343
374
|
if (parentElement === windowObj) {
|
|
344
|
-
return (parentElement.pageYOffset + parentElement.innerHeight >
|
|
375
|
+
return (parentElement.pageYOffset + parentElement.innerHeight >
|
|
376
|
+
element.offsetTop);
|
|
345
377
|
}
|
|
346
378
|
const elementRect = element.getBoundingClientRect();
|
|
347
379
|
const parentRect = parentElement.getBoundingClientRect();
|
|
348
|
-
return
|
|
380
|
+
return elementRect.top < parentRect.top + parentRect.height;
|
|
349
381
|
}
|
|
350
382
|
}
|
|
351
383
|
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, deps: [{ token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -417,7 +449,8 @@ class SkyInfiniteScrollComponent {
|
|
|
417
449
|
setListeners() {
|
|
418
450
|
if (this.enabled) {
|
|
419
451
|
// The user has scrolled to the infinite scroll element.
|
|
420
|
-
this.domAdapter
|
|
452
|
+
this.domAdapter
|
|
453
|
+
.scrollTo(this.elementRef)
|
|
421
454
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
422
455
|
.subscribe(() => {
|
|
423
456
|
if (!this.isWaiting && this.enabled) {
|
|
@@ -425,7 +458,8 @@ class SkyInfiniteScrollComponent {
|
|
|
425
458
|
}
|
|
426
459
|
});
|
|
427
460
|
// New items have been loaded into the parent element.
|
|
428
|
-
this.domAdapter
|
|
461
|
+
this.domAdapter
|
|
462
|
+
.parentChanges(this.elementRef)
|
|
429
463
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
430
464
|
.subscribe(() => {
|
|
431
465
|
if (!this.loading) {
|
|
@@ -440,9 +474,7 @@ class SkyInfiniteScrollComponent {
|
|
|
440
474
|
}
|
|
441
475
|
}
|
|
442
476
|
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyInfiniteScrollDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
443
|
-
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyInfiniteScrollComponent, selector: "sky-infinite-scroll", inputs: { enabled: "enabled", loading: "loading" }, outputs: { scrollEnd: "scrollEnd" }, providers: [
|
|
444
|
-
SkyInfiniteScrollDomAdapterService
|
|
445
|
-
], ngImport: i0, template: "<div *ngIf=\"enabled\"\n class=\"sky-infinite-scroll\"\n>\n <button *ngIf=\"!isWaiting && enabled\"\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"startInfiniteScrollLoad()\"\n >\n {{ 'skyux_infinite_scroll_load_more_button' | skyLibResources }}\n </button>\n <sky-wait\n [isWaiting]=\"isWaiting\"\n >\n </sky-wait>\n</div>\n", styles: [".sky-infinite-scroll{margin-top:20px;text-align:center;min-height:75px}\n"], components: [{ type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
477
|
+
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyInfiniteScrollComponent, selector: "sky-infinite-scroll", inputs: { enabled: "enabled", loading: "loading" }, outputs: { scrollEnd: "scrollEnd" }, providers: [SkyInfiniteScrollDomAdapterService], ngImport: i0, template: "<div *ngIf=\"enabled\" class=\"sky-infinite-scroll\">\n <button\n *ngIf=\"!isWaiting && enabled\"\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"startInfiniteScrollLoad()\"\n >\n {{ 'skyux_infinite_scroll_load_more_button' | skyLibResources }}\n </button>\n <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n</div>\n", styles: [".sky-infinite-scroll{margin-top:20px;text-align:center;min-height:75px}\n"], components: [{ type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
446
478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
|
|
447
479
|
type: Component,
|
|
448
480
|
args: [{
|
|
@@ -450,9 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
450
482
|
templateUrl: './infinite-scroll.component.html',
|
|
451
483
|
styleUrls: ['./infinite-scroll.component.scss'],
|
|
452
484
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
453
|
-
providers: [
|
|
454
|
-
SkyInfiniteScrollDomAdapterService
|
|
455
|
-
]
|
|
485
|
+
providers: [SkyInfiniteScrollDomAdapterService],
|
|
456
486
|
}]
|
|
457
487
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyInfiniteScrollDomAdapterService }]; }, propDecorators: { enabled: [{
|
|
458
488
|
type: Input
|
|
@@ -465,28 +495,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
465
495
|
class SkyInfiniteScrollModule {
|
|
466
496
|
}
|
|
467
497
|
SkyInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
468
|
-
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollModule, declarations: [SkyInfiniteScrollComponent], imports: [CommonModule,
|
|
469
|
-
|
|
470
|
-
SkyWaitModule], exports: [SkyInfiniteScrollComponent] });
|
|
471
|
-
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollModule, imports: [[
|
|
472
|
-
CommonModule,
|
|
473
|
-
SkyListsResourcesModule,
|
|
474
|
-
SkyWaitModule
|
|
475
|
-
]] });
|
|
498
|
+
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollModule, declarations: [SkyInfiniteScrollComponent], imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule], exports: [SkyInfiniteScrollComponent] });
|
|
499
|
+
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollModule, imports: [[CommonModule, SkyListsResourcesModule, SkyWaitModule]] });
|
|
476
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyInfiniteScrollModule, decorators: [{
|
|
477
501
|
type: NgModule,
|
|
478
502
|
args: [{
|
|
479
|
-
declarations: [
|
|
480
|
-
|
|
481
|
-
],
|
|
482
|
-
imports: [
|
|
483
|
-
CommonModule,
|
|
484
|
-
SkyListsResourcesModule,
|
|
485
|
-
SkyWaitModule
|
|
486
|
-
],
|
|
487
|
-
exports: [
|
|
488
|
-
SkyInfiniteScrollComponent
|
|
489
|
-
]
|
|
503
|
+
declarations: [SkyInfiniteScrollComponent],
|
|
504
|
+
imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule],
|
|
505
|
+
exports: [SkyInfiniteScrollComponent],
|
|
490
506
|
}]
|
|
491
507
|
}] });
|
|
492
508
|
|
|
@@ -542,10 +558,10 @@ class SkyPagingComponent {
|
|
|
542
558
|
this.setPage(this.currentPage - 1);
|
|
543
559
|
}
|
|
544
560
|
get isPreviousButtonDisabled() {
|
|
545
|
-
return
|
|
561
|
+
return this.currentPage === 1;
|
|
546
562
|
}
|
|
547
563
|
get isNextButtonDisabled() {
|
|
548
|
-
return
|
|
564
|
+
return this.currentPage === this.pageCount;
|
|
549
565
|
}
|
|
550
566
|
getDisplayedPageNumbers(pageCount, maxDisplayedPages, pageNumber) {
|
|
551
567
|
let pageIndex = pageNumber - 1;
|
|
@@ -584,19 +600,18 @@ class SkyPagingComponent {
|
|
|
584
600
|
this.pageCount = Math.ceil(this.itemCount / this.pageSize);
|
|
585
601
|
}
|
|
586
602
|
setDisplayedPages() {
|
|
587
|
-
this.displayedPages =
|
|
588
|
-
this.getDisplayedPageNumbers(this.pageCount, this.maxPages, this.currentPage);
|
|
603
|
+
this.displayedPages = this.getDisplayedPageNumbers(this.pageCount, this.maxPages, this.currentPage);
|
|
589
604
|
}
|
|
590
605
|
}
|
|
591
606
|
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
592
|
-
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyPagingComponent, selector: "sky-paging", inputs: { currentPage: "currentPage", itemCount: "itemCount", maxPages: "maxPages", pageSize: "pageSize", pagingLabel: "pagingLabel" }, outputs: { currentPageChange: "currentPageChange" }, usesOnChanges: true, ngImport: i0, template: "<nav
|
|
607
|
+
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyPagingComponent, selector: "sky-paging", inputs: { currentPage: "currentPage", itemCount: "itemCount", maxPages: "maxPages", pageSize: "pageSize", pagingLabel: "pagingLabel" }, outputs: { currentPageChange: "currentPageChange" }, usesOnChanges: true, ngImport: i0, template: "<nav\n *ngIf=\"pageCount > 1\"\n class=\"sky-paging\"\n [attr.aria-label]=\"pagingLabel || ('skyux_paging_label' | skyLibResources)\"\n>\n <ul>\n <li>\n <button\n class=\"\n sky-btn sky-btn-default sky-paging-btn sky-paging-btn-previous sky-box\n \"\n sky-cmp-id=\"previous\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_paging_previous' | skyLibResources\"\n [disabled]=\"isPreviousButtonDisabled\"\n (click)=\"previousPage()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-left\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </li>\n <li *ngFor=\"let pageNumber of displayedPages\" class=\"sky-list-paging-link\">\n <button\n class=\"sky-btn sky-btn-default sky-paging-btn sky-box\"\n type=\"button\"\n [attr.aria-current]=\"currentPage === pageNumber ? 'page' : null\"\n [attr.sky-cmp-id]=\"pageNumber\"\n [disabled]=\"currentPage === pageNumber\"\n [ngClass]=\"{ 'sky-paging-current': currentPage === pageNumber }\"\n (click)=\"setPage(pageNumber)\"\n >\n {{ pageNumber }}\n </button>\n </li>\n <li>\n <button\n class=\"\n sky-btn sky-btn-default sky-paging-btn sky-paging-btn-next sky-box\n \"\n sky-cmp-id=\"next\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_paging_next' | skyLibResources\"\n [disabled]=\"isNextButtonDisabled\"\n (click)=\"nextPage()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-right\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [":host{display:block}ul{margin:15px 0 0;display:inline-block;padding-left:0;border-radius:4px}li{display:inline}.sky-paging-btn{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-radius:0;background-color:#fff;color:inherit;float:left;margin-left:-1px;padding:4px 10px;text-decoration:none;line-height:1.428571429;font-size:15px;cursor:pointer}.sky-paging-btn.sky-paging-caret{transform:none}.sky-paging-btn.sky-paging-current,.sky-paging-btn.sky-paging-current:disabled,.sky-paging-btn.sky-paging-current[disabled]{background-color:#eeeeef;cursor:default;color:inherit;opacity:1}.sky-paging-btn:hover{background-color:#d4d4d6}.sky-paging-btn:disabled{color:#686c73;cursor:not-allowed;pointer-events:none}.sky-paging-btn.sky-paging-btn-previous,.sky-paging-btn.sky-paging-btn-next{padding-left:8.5px;padding-right:8.5px}:host-context(.sky-theme-modern) .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}:host-context(.sky-theme-modern) .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}:host-context(.sky-theme-modern) .sky-paging-btn:active,:host-context(.sky-theme-modern) .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}:host-context(.sky-theme-modern) .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-paging-current{background-color:#c1e8fb;border:solid 1px #1870B8;padding:2px 9px}.sky-theme-modern .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}.sky-theme-modern .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}.sky-theme-modern .sky-paging-btn:active,.sky-theme-modern .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}.sky-theme-modern .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}.sky-theme-modern .sky-paging-current{background-color:#c1e8fb;border:solid 1px #1870B8;padding:2px 9px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:active,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:focus{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-current{background-color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:active,.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:focus{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-paging-current{background-color:#1870b8}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
593
608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPagingComponent, decorators: [{
|
|
594
609
|
type: Component,
|
|
595
610
|
args: [{
|
|
596
611
|
selector: 'sky-paging',
|
|
597
612
|
templateUrl: './paging.component.html',
|
|
598
613
|
styleUrls: ['./paging.component.scss'],
|
|
599
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
614
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
600
615
|
}]
|
|
601
616
|
}], propDecorators: { currentPage: [{
|
|
602
617
|
type: Input
|
|
@@ -623,23 +638,19 @@ SkyPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
623
638
|
CommonModule,
|
|
624
639
|
SkyIconModule,
|
|
625
640
|
SkyListsResourcesModule,
|
|
626
|
-
SkyThemeModule
|
|
641
|
+
SkyThemeModule,
|
|
627
642
|
]] });
|
|
628
643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPagingModule, decorators: [{
|
|
629
644
|
type: NgModule,
|
|
630
645
|
args: [{
|
|
631
|
-
declarations: [
|
|
632
|
-
SkyPagingComponent
|
|
633
|
-
],
|
|
646
|
+
declarations: [SkyPagingComponent],
|
|
634
647
|
imports: [
|
|
635
648
|
CommonModule,
|
|
636
649
|
SkyIconModule,
|
|
637
650
|
SkyListsResourcesModule,
|
|
638
|
-
SkyThemeModule
|
|
651
|
+
SkyThemeModule,
|
|
639
652
|
],
|
|
640
|
-
exports: [
|
|
641
|
-
SkyPagingComponent
|
|
642
|
-
]
|
|
653
|
+
exports: [SkyPagingComponent],
|
|
643
654
|
}]
|
|
644
655
|
}] });
|
|
645
656
|
|
|
@@ -654,7 +665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
654
665
|
type: Component,
|
|
655
666
|
args: [{
|
|
656
667
|
selector: 'sky-repeater-item-content',
|
|
657
|
-
templateUrl: './repeater-item-content.component.html'
|
|
668
|
+
templateUrl: './repeater-item-content.component.html',
|
|
658
669
|
}]
|
|
659
670
|
}] });
|
|
660
671
|
|
|
@@ -672,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
672
683
|
type: Component,
|
|
673
684
|
args: [{
|
|
674
685
|
selector: 'sky-repeater-item-context-menu',
|
|
675
|
-
templateUrl: './repeater-item-context-menu.component.html'
|
|
686
|
+
templateUrl: './repeater-item-context-menu.component.html',
|
|
676
687
|
}]
|
|
677
688
|
}] });
|
|
678
689
|
|
|
@@ -697,7 +708,7 @@ class SkyRepeaterService {
|
|
|
697
708
|
if (this.enableActiveState) {
|
|
698
709
|
/* istanbul ignore else */
|
|
699
710
|
if (item) {
|
|
700
|
-
const index = this.items.findIndex(i => i === item);
|
|
711
|
+
const index = this.items.findIndex((i) => i === item);
|
|
701
712
|
this.activeItemIndexChange.next(index);
|
|
702
713
|
this.activeItemChange.next(item);
|
|
703
714
|
}
|
|
@@ -862,8 +873,7 @@ class SkyRepeaterItemComponent {
|
|
|
862
873
|
this._isSelected = false;
|
|
863
874
|
this.slideForExpanded(false);
|
|
864
875
|
// tslint:disable-next-line: deprecation
|
|
865
|
-
forkJoin(this.resourceService.getString('skyux_repeater_item_reorder_cancel'), this.resourceService.getString('skyux_repeater_item_reorder_finish'), this.resourceService.getString('skyux_repeater_item_reorder_instructions'), this.resourceService.getString('skyux_repeater_item_reorder_operation'), this.resourceService.getString('skyux_repeater_item_reorder_moved'))
|
|
866
|
-
.subscribe((translatedStrings) => {
|
|
876
|
+
forkJoin(this.resourceService.getString('skyux_repeater_item_reorder_cancel'), this.resourceService.getString('skyux_repeater_item_reorder_finish'), this.resourceService.getString('skyux_repeater_item_reorder_instructions'), this.resourceService.getString('skyux_repeater_item_reorder_operation'), this.resourceService.getString('skyux_repeater_item_reorder_moved')).subscribe((translatedStrings) => {
|
|
867
877
|
this.reorderCancelText = translatedStrings[0];
|
|
868
878
|
this.reorderFinishText = translatedStrings[1];
|
|
869
879
|
this.reorderStateDescription = translatedStrings[2];
|
|
@@ -1000,7 +1010,8 @@ class SkyRepeaterItemComponent {
|
|
|
1000
1010
|
if (this.keyboardReorderingEnabled) {
|
|
1001
1011
|
this.keyboardReorderingEnabled = false;
|
|
1002
1012
|
this.revertReorderSteps();
|
|
1003
|
-
this.reorderButtonLabel =
|
|
1013
|
+
this.reorderButtonLabel =
|
|
1014
|
+
this.reorderCancelText + ' ' + this.reorderInstructions;
|
|
1004
1015
|
this.adapterService.focusElement(event.target);
|
|
1005
1016
|
event.preventDefault();
|
|
1006
1017
|
event.stopPropagation();
|
|
@@ -1090,8 +1101,7 @@ class SkyRepeaterItemComponent {
|
|
|
1090
1101
|
this.reorderState = this.reorderStateDescription;
|
|
1091
1102
|
}
|
|
1092
1103
|
else {
|
|
1093
|
-
this.reorderState =
|
|
1094
|
-
`${this.reorderFinishText} ${this.reorderCurrentIndex + 1} ${this.reorderInstructions}`;
|
|
1104
|
+
this.reorderState = `${this.reorderFinishText} ${this.reorderCurrentIndex + 1} ${this.reorderInstructions}`;
|
|
1095
1105
|
}
|
|
1096
1106
|
}
|
|
1097
1107
|
revertReorderSteps() {
|
|
@@ -1109,7 +1119,8 @@ class SkyRepeaterItemComponent {
|
|
|
1109
1119
|
.subscribe(() => {
|
|
1110
1120
|
this.hasItemContent = this.repeaterItemContentComponents.length > 0;
|
|
1111
1121
|
/* istanbul ignore next */
|
|
1112
|
-
this.isCollapsible =
|
|
1122
|
+
this.isCollapsible =
|
|
1123
|
+
this.hasItemContent && this.repeaterService.expandMode !== 'none';
|
|
1113
1124
|
/* istanbul ignore else */
|
|
1114
1125
|
if (this.repeaterService.expandMode === 'single') {
|
|
1115
1126
|
this.repeaterService.onItemCollapseStateChange(this);
|
|
@@ -1118,7 +1129,7 @@ class SkyRepeaterItemComponent {
|
|
|
1118
1129
|
}
|
|
1119
1130
|
}
|
|
1120
1131
|
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i4.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1121
|
-
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { inlineFormConfig: "inlineFormConfig", inlineFormTemplate: "inlineFormTemplate", isExpanded: "isExpanded", isSelected: "isSelected", reorderable: "reorderable", selectable: "selectable", showInlineForm: "showInlineForm", tag: "tag" }, outputs: { collapse: "collapse", expand: "expand", inlineFormClose: "inlineFormClose", isSelectedChange: "isSelectedChange" }, host: { properties: { "class": "this.repeaterGroupClass" } }, queries: [{ propertyName: "contextMenu", first: true, predicate: SkyRepeaterItemContextMenuComponent, descendants: true, read: ElementRef }, { propertyName: "repeaterItemContentComponents", predicate: SkyRepeaterItemContentComponent }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "itemContentRef", first: true, predicate: ["itemContentRef"], descendants: true, read: ElementRef }, { propertyName: "itemHeaderRef", first: true, predicate: ["itemHeaderRef"], descendants: true, read: ElementRef }, { propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-repeater-item sky-padding-even-default\"\n role=\"option\"\n tabindex=\"0\"\n [ngClass]=\"{\n 'sky-repeater-item-active': isActive,\n 'sky-repeater-item-collapsible': isCollapsible,\n 'sky-repeater-item-selected': isSelected\n }\"\n (click)=\"onRepeaterItemClick($event)\"\n (keydown)=\"onItemKeyDown($event)\"\n #itemRef\n>\n <div #inlineDelete>\n <ng-content\n select=\"sky-inline-delete\"\n ></ng-content>\n </div>\n\n <ng-container *ngIf=\"inlineFormTemplate\">\n <sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showInlineForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n >\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n </sky-inline-form>\n </ng-container>\n\n <ng-container *ngIf=\"!inlineFormTemplate\">\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template\n #skyRepeaterItemLeft\n>\n <div\n class=\"sky-repeater-item-left\"\n >\n <ng-container *ngIf=\"reorderable\">\n <span\n aria-live=\"assertive\"\n class=\"sky-repeater-item-reorder-assistive-text\"\n [id]=\"contentId + '-reorder-state'\"\n >\n {{reorderState}}\n </span>\n <button\n class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"reorderButtonLabel\"\n (blur)=\"onReorderHandleBlur($event)\"\n (keydown)=\"onReorderHandleKeyDown($event)\"\n #grabHandle\n >\n <sky-icon\n icon=\"arrows-v\"\n ></sky-icon>\n </button>\n </ng-container>\n <sky-checkbox\n *ngIf=\"selectable\"\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [label]=\"'skyux_repeater_item_checkbox_label' | skyLibResources\"\n (change)=\"onCheckboxChange($event)\"\n >\n </sky-checkbox>\n <div\n class=\"sky-repeater-item-context-menu\"\n [hidden]=\"contextMenuEl.children.length === 0\"\n #contextMenuEl\n >\n <ng-content\n select=\"sky-repeater-item-context-menu\"\n ></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template\n #skyRepeaterItemRight\n>\n <div\n class=\"sky-repeater-item-right\"\n #itemHeaderRef\n >\n <div\n class=\"sky-repeater-item-header\"\n [hidden]=\"titleRef.children.length === 0\"\n (click)=\"headerClick()\"\n >\n <div\n class=\"sky-repeater-item-title sky-emphasized\"\n #titleRef\n >\n <ng-content\n select=\"sky-repeater-item-title\"\n ></ng-content>\n </div>\n <button *ngIf=\"reorderable\"\n class=\"sky-btn sky-btn-link sky-repeater-item-reorder-top\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_repeater_item_reorder_top_label' | skyLibResources\"\n (click)=\"moveToTop($event)\"\n >\n <sky-icon\n icon=\"arrow-circle-up\"\n ></sky-icon>\n {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n </button>\n <div *ngIf=\"isCollapsible\"\n class=\"sky-repeater-item-chevron\"\n >\n <sky-chevron\n [attr.aria-controls]=\"contentId\"\n [attr.aria-expanded]=\"isExpanded\"\n [direction]=\"isExpanded ? 'up' : 'down'\"\n (directionChange)=\"chevronDirectionChange($event)\"\n >\n </sky-chevron>\n </div>\n <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n <div *ngIf=\"!isCollapsible && !contextMenu\"\n class=\"sky-repeater-item-chevron-placeholder\"\n ></div>\n <!-- Used to ensure that the right side is the same height as the left.-->\n <div *ngIf=\"contextMenu\"\n class=\"sky-repeater-item-chevron-placeholder-with-context\"\n ></div>\n </div>\n <div\n class=\"sky-repeater-item-content\"\n [id]=\"contentId\"\n [@skyAnimationSlide]=\"slideDirection\"\n #itemContentRef\n >\n <ng-content\n select=\"sky-repeater-item-content\"\n ></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-reorder-assistive-text{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}sky-repeater-item .sky-repeater-item-grab-handle{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-moz-grab;padding:0;margin-right:10px}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], components: [{ type: i4$1.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
|
|
1132
|
+
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { inlineFormConfig: "inlineFormConfig", inlineFormTemplate: "inlineFormTemplate", isExpanded: "isExpanded", isSelected: "isSelected", reorderable: "reorderable", selectable: "selectable", showInlineForm: "showInlineForm", tag: "tag" }, outputs: { collapse: "collapse", expand: "expand", inlineFormClose: "inlineFormClose", isSelectedChange: "isSelectedChange" }, host: { properties: { "class": "this.repeaterGroupClass" } }, queries: [{ propertyName: "contextMenu", first: true, predicate: SkyRepeaterItemContextMenuComponent, descendants: true, read: ElementRef }, { propertyName: "repeaterItemContentComponents", predicate: SkyRepeaterItemContentComponent }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "itemContentRef", first: true, predicate: ["itemContentRef"], descendants: true, read: ElementRef }, { propertyName: "itemHeaderRef", first: true, predicate: ["itemHeaderRef"], descendants: true, read: ElementRef }, { propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-repeater-item sky-padding-even-default\"\n role=\"option\"\n tabindex=\"0\"\n [ngClass]=\"{\n 'sky-repeater-item-active': isActive,\n 'sky-repeater-item-collapsible': isCollapsible,\n 'sky-repeater-item-selected': isSelected\n }\"\n (click)=\"onRepeaterItemClick($event)\"\n (keydown)=\"onItemKeyDown($event)\"\n #itemRef\n>\n <div #inlineDelete>\n <ng-content select=\"sky-inline-delete\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"inlineFormTemplate\">\n <sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showInlineForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n >\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n </sky-inline-form>\n </ng-container>\n\n <ng-container *ngIf=\"!inlineFormTemplate\">\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n <div class=\"sky-repeater-item-left\">\n <ng-container *ngIf=\"reorderable\">\n <span\n aria-live=\"assertive\"\n class=\"sky-repeater-item-reorder-assistive-text\"\n [id]=\"contentId + '-reorder-state'\"\n >\n {{ reorderState }}\n </span>\n <button\n class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"reorderButtonLabel\"\n (blur)=\"onReorderHandleBlur($event)\"\n (keydown)=\"onReorderHandleKeyDown($event)\"\n #grabHandle\n >\n <sky-icon icon=\"arrows-v\"></sky-icon>\n </button>\n </ng-container>\n <sky-checkbox\n *ngIf=\"selectable\"\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [label]=\"'skyux_repeater_item_checkbox_label' | skyLibResources\"\n (change)=\"onCheckboxChange($event)\"\n >\n </sky-checkbox>\n <div\n class=\"sky-repeater-item-context-menu\"\n [hidden]=\"contextMenuEl.children.length === 0\"\n #contextMenuEl\n >\n <ng-content select=\"sky-repeater-item-context-menu\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n <div class=\"sky-repeater-item-right\" #itemHeaderRef>\n <div\n class=\"sky-repeater-item-header\"\n [hidden]=\"titleRef.children.length === 0\"\n (click)=\"headerClick()\"\n >\n <div class=\"sky-repeater-item-title sky-emphasized\" #titleRef>\n <ng-content select=\"sky-repeater-item-title\"></ng-content>\n </div>\n <button\n *ngIf=\"reorderable\"\n class=\"sky-btn sky-btn-link sky-repeater-item-reorder-top\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_repeater_item_reorder_top_label' | skyLibResources\n \"\n (click)=\"moveToTop($event)\"\n >\n <sky-icon icon=\"arrow-circle-up\"></sky-icon>\n {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n </button>\n <div *ngIf=\"isCollapsible\" class=\"sky-repeater-item-chevron\">\n <sky-chevron\n [attr.aria-controls]=\"contentId\"\n [attr.aria-expanded]=\"isExpanded\"\n [direction]=\"isExpanded ? 'up' : 'down'\"\n (directionChange)=\"chevronDirectionChange($event)\"\n >\n </sky-chevron>\n </div>\n <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n <div\n *ngIf=\"!isCollapsible && !contextMenu\"\n class=\"sky-repeater-item-chevron-placeholder\"\n ></div>\n <!-- Used to ensure that the right side is the same height as the left.-->\n <div\n *ngIf=\"contextMenu\"\n class=\"sky-repeater-item-chevron-placeholder-with-context\"\n ></div>\n </div>\n <div\n class=\"sky-repeater-item-content\"\n [id]=\"contentId\"\n [@skyAnimationSlide]=\"slideDirection\"\n #itemContentRef\n >\n <ng-content select=\"sky-repeater-item-content\"></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-reorder-assistive-text{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}sky-repeater-item .sky-repeater-item-grab-handle{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-moz-grab;padding:0;margin-right:10px}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], components: [{ type: i4$1.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
|
|
1122
1133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
|
|
1123
1134
|
type: Component,
|
|
1124
1135
|
args: [{
|
|
@@ -1126,7 +1137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1126
1137
|
styleUrls: ['./repeater-item.component.scss'],
|
|
1127
1138
|
templateUrl: './repeater-item.component.html',
|
|
1128
1139
|
animations: [skyAnimationSlide],
|
|
1129
|
-
encapsulation: ViewEncapsulation.None
|
|
1140
|
+
encapsulation: ViewEncapsulation.None,
|
|
1130
1141
|
}]
|
|
1131
1142
|
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i4.SkyLibResourcesService }]; }, propDecorators: { inlineFormConfig: [{
|
|
1132
1143
|
type: Input
|
|
@@ -1211,7 +1222,9 @@ class SkyRepeaterComponent {
|
|
|
1211
1222
|
.subscribe((item) => {
|
|
1212
1223
|
if (this.expandMode === 'single' && item.isExpanded) {
|
|
1213
1224
|
this.items.forEach((otherItem) => {
|
|
1214
|
-
if (otherItem !== item &&
|
|
1225
|
+
if (otherItem !== item &&
|
|
1226
|
+
otherItem.isExpanded &&
|
|
1227
|
+
otherItem.isCollapsible) {
|
|
1215
1228
|
otherItem.isExpanded = false;
|
|
1216
1229
|
}
|
|
1217
1230
|
});
|
|
@@ -1274,9 +1287,7 @@ class SkyRepeaterComponent {
|
|
|
1274
1287
|
});
|
|
1275
1288
|
// HACK: Not updating for expand mode in a timeout causes an error.
|
|
1276
1289
|
// https://github.com/angular/angular/issues/6005
|
|
1277
|
-
this.items.changes
|
|
1278
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1279
|
-
.subscribe(() => {
|
|
1290
|
+
this.items.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1280
1291
|
setTimeout(() => {
|
|
1281
1292
|
if (!!this.items.last) {
|
|
1282
1293
|
this.updateForExpandMode(this.items.last);
|
|
@@ -1289,7 +1300,7 @@ class SkyRepeaterComponent {
|
|
|
1289
1300
|
});
|
|
1290
1301
|
setTimeout(() => {
|
|
1291
1302
|
this.updateForExpandMode();
|
|
1292
|
-
this.items.forEach(item => {
|
|
1303
|
+
this.items.forEach((item) => {
|
|
1293
1304
|
item.reorderable = this.reorderable;
|
|
1294
1305
|
});
|
|
1295
1306
|
}, 0);
|
|
@@ -1297,13 +1308,14 @@ class SkyRepeaterComponent {
|
|
|
1297
1308
|
ngOnChanges(changes) {
|
|
1298
1309
|
if (changes['activeIndex']) {
|
|
1299
1310
|
this.repeaterService.enableActiveState = true;
|
|
1300
|
-
if (changes['activeIndex'].currentValue !==
|
|
1311
|
+
if (changes['activeIndex'].currentValue !==
|
|
1312
|
+
changes['activeIndex'].previousValue) {
|
|
1301
1313
|
this.repeaterService.activateItemByIndex(this.activeIndex);
|
|
1302
1314
|
}
|
|
1303
1315
|
}
|
|
1304
1316
|
if (changes.reorderable) {
|
|
1305
1317
|
if (this.items) {
|
|
1306
|
-
this.items.forEach(item => item.reorderable = this.reorderable);
|
|
1318
|
+
this.items.forEach((item) => (item.reorderable = this.reorderable));
|
|
1307
1319
|
}
|
|
1308
1320
|
this.changeDetector.markForCheck();
|
|
1309
1321
|
}
|
|
@@ -1340,8 +1352,8 @@ class SkyRepeaterComponent {
|
|
|
1340
1352
|
this.dragulaService.setOptions(this.dragulaGroupName, {
|
|
1341
1353
|
moves: (el, container, handle) => {
|
|
1342
1354
|
const target = el.querySelector('.sky-repeater-item-grab-handle');
|
|
1343
|
-
return
|
|
1344
|
-
}
|
|
1355
|
+
return this.reorderable && target && target.contains(handle);
|
|
1356
|
+
},
|
|
1345
1357
|
});
|
|
1346
1358
|
}
|
|
1347
1359
|
let draggedItemIndex;
|
|
@@ -1382,7 +1394,7 @@ class SkyRepeaterComponent {
|
|
|
1382
1394
|
}
|
|
1383
1395
|
}
|
|
1384
1396
|
emitTags() {
|
|
1385
|
-
const tags = this.repeaterService.items.map(item => item.tag);
|
|
1397
|
+
const tags = this.repeaterService.items.map((item) => item.tag);
|
|
1386
1398
|
this.orderChange.emit(tags);
|
|
1387
1399
|
}
|
|
1388
1400
|
everyItemHasTag() {
|
|
@@ -1391,13 +1403,13 @@ class SkyRepeaterComponent {
|
|
|
1391
1403
|
if (!this.items || this.items.length === 0) {
|
|
1392
1404
|
return false;
|
|
1393
1405
|
}
|
|
1394
|
-
return this.items.toArray().every(item => {
|
|
1406
|
+
return this.items.toArray().every((item) => {
|
|
1395
1407
|
return item.tag !== undefined;
|
|
1396
1408
|
});
|
|
1397
1409
|
}
|
|
1398
1410
|
}
|
|
1399
1411
|
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyRepeaterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRepeaterService }, { token: SkyRepeaterAdapterService }, { token: i3$1.DragulaService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1400
|
-
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyRepeaterComponent, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [SkyRepeaterService, SkyRepeaterAdapterService], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n role=\"listbox\"\n [attr.aria-label]=\"ariaLabel || (
|
|
1412
|
+
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyRepeaterComponent, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [SkyRepeaterService, SkyRepeaterAdapterService], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n role=\"listbox\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n [dragula]=\"dragulaGroupName\"\n >\n <ng-content></ng-content>\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"], directives: [{ type: i3$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1401
1413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
|
|
1402
1414
|
type: Component,
|
|
1403
1415
|
args: [{
|
|
@@ -1405,7 +1417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1405
1417
|
styleUrls: ['./repeater.component.scss'],
|
|
1406
1418
|
templateUrl: './repeater.component.html',
|
|
1407
1419
|
providers: [SkyRepeaterService, SkyRepeaterAdapterService],
|
|
1408
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1420
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1409
1421
|
}]
|
|
1410
1422
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyRepeaterService }, { type: SkyRepeaterAdapterService }, { type: i3$1.DragulaService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { activeIndex: [{
|
|
1411
1423
|
type: Input
|
|
@@ -1435,7 +1447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1435
1447
|
type: Component,
|
|
1436
1448
|
args: [{
|
|
1437
1449
|
selector: 'sky-repeater-item-title',
|
|
1438
|
-
templateUrl: './repeater-item-title.component.html'
|
|
1450
|
+
templateUrl: './repeater-item-title.component.html',
|
|
1439
1451
|
}]
|
|
1440
1452
|
}] });
|
|
1441
1453
|
|
|
@@ -1464,7 +1476,7 @@ SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
|
|
|
1464
1476
|
SkyCheckboxModule,
|
|
1465
1477
|
SkyIconModule,
|
|
1466
1478
|
SkyInlineFormModule,
|
|
1467
|
-
SkyListsResourcesModule
|
|
1479
|
+
SkyListsResourcesModule,
|
|
1468
1480
|
]] });
|
|
1469
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyRepeaterModule, decorators: [{
|
|
1470
1482
|
type: NgModule,
|
|
@@ -1474,7 +1486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1474
1486
|
SkyRepeaterItemComponent,
|
|
1475
1487
|
SkyRepeaterItemContentComponent,
|
|
1476
1488
|
SkyRepeaterItemContextMenuComponent,
|
|
1477
|
-
SkyRepeaterItemTitleComponent
|
|
1489
|
+
SkyRepeaterItemTitleComponent,
|
|
1478
1490
|
],
|
|
1479
1491
|
imports: [
|
|
1480
1492
|
CommonModule,
|
|
@@ -1483,15 +1495,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1483
1495
|
SkyCheckboxModule,
|
|
1484
1496
|
SkyIconModule,
|
|
1485
1497
|
SkyInlineFormModule,
|
|
1486
|
-
SkyListsResourcesModule
|
|
1498
|
+
SkyListsResourcesModule,
|
|
1487
1499
|
],
|
|
1488
1500
|
exports: [
|
|
1489
1501
|
SkyRepeaterComponent,
|
|
1490
1502
|
SkyRepeaterItemComponent,
|
|
1491
1503
|
SkyRepeaterItemContentComponent,
|
|
1492
1504
|
SkyRepeaterItemContextMenuComponent,
|
|
1493
|
-
SkyRepeaterItemTitleComponent
|
|
1494
|
-
]
|
|
1505
|
+
SkyRepeaterItemTitleComponent,
|
|
1506
|
+
],
|
|
1495
1507
|
}]
|
|
1496
1508
|
}] });
|
|
1497
1509
|
|
|
@@ -1536,9 +1548,10 @@ class SkySortItemComponent {
|
|
|
1536
1548
|
}
|
|
1537
1549
|
}
|
|
1538
1550
|
ngOnChanges(changes) {
|
|
1539
|
-
if (changes &&
|
|
1540
|
-
|
|
1541
|
-
|
|
1551
|
+
if (changes &&
|
|
1552
|
+
changes['active'] &&
|
|
1553
|
+
changes['active'].currentValue &&
|
|
1554
|
+
changes['active'].currentValue !== changes['active'].previousValue) {
|
|
1542
1555
|
this.sortService.selectItem(this.sortItemId);
|
|
1543
1556
|
}
|
|
1544
1557
|
}
|
|
@@ -1555,14 +1568,14 @@ class SkySortItemComponent {
|
|
|
1555
1568
|
}
|
|
1556
1569
|
}
|
|
1557
1570
|
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1558
|
-
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n
|
|
1571
|
+
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n>\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content></ng-content>\n </button>\n</div>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active,.sky-sort-item:hover{background-color:#eeeeef}.sky-sort-item.sky-dropdown-item-disabled{cursor:default}.sky-sort-item.sky-dropdown-item-disabled:hover{background-color:transparent}.sky-sort-item ::ng-deep>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:#686c73}.sky-sort-item ::ng-deep>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}:host-context(.sky-theme-modern) .sky-sort-item{margin:0 0 10px;border:none;border-radius:0;font-weight:400;transition:box-shadow .15s;padding:10px 20px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px #1870B8;outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px #1870B8;outline-offset:-2px}:host-context(.sky-theme-modern) .sky-sort-item button{padding:0;color:#686c73}:host-context(.sky-theme-modern) .sky-sort-item-selected{color:#212327;border-bottom:none;border-left:solid 3px #1870B8;padding-bottom:10px;padding-left:13px;padding-left:calc(20px - 3px);background-color:inherit}:host-context(.sky-theme-modern) .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern .sky-sort-item{margin:0 0 10px;border:none;border-radius:0;font-weight:400;transition:box-shadow .15s;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-sort-item:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:#212327;border-bottom:none;border-left:solid 3px #1870B8;padding-bottom:10px;padding-left:13px;padding-left:calc(20px - 3px);background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item button{color:#c0c2c5}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item-selected button{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1559
1572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1560
1573
|
type: Component,
|
|
1561
1574
|
args: [{
|
|
1562
1575
|
selector: 'sky-sort-item',
|
|
1563
1576
|
styleUrls: ['./sort-item.component.scss'],
|
|
1564
1577
|
templateUrl: './sort-item.component.html',
|
|
1565
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1578
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1566
1579
|
}]
|
|
1567
1580
|
}], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
1568
1581
|
type: Input
|
|
@@ -1573,13 +1586,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1573
1586
|
class SkySortMenuHeadingComponent {
|
|
1574
1587
|
}
|
|
1575
1588
|
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1576
|
-
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading", ngImport: i0, template: "<div\n class=\"sky-sort-menu-heading\"\n [skyThemeClass]
|
|
1589
|
+
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading", ngImport: i0, template: "<div\n class=\"sky-sort-menu-heading\"\n [skyThemeClass]=\"{\n 'sky-subsection-heading': 'default',\n 'sky-font-heading-4': 'modern'\n }\"\n>\n {{ 'skyux_sort_menu_heading' | skyLibResources }}\n</div>\n", styles: [".sky-sort-menu-heading{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;transition:background-color .15s;padding:3px 20px;text-align:left;width:100%}:host-context(.sky-theme-modern) .sky-sort-menu-heading{margin:10px 0 0;padding:10px 20px}.sky-theme-modern .sky-sort-menu-heading{margin:10px 0 0;padding:10px 20px}\n"], directives: [{ type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe } });
|
|
1577
1590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortMenuHeadingComponent, decorators: [{
|
|
1578
1591
|
type: Component,
|
|
1579
1592
|
args: [{
|
|
1580
1593
|
selector: 'sky-sort-menu-heading',
|
|
1581
1594
|
templateUrl: './sort-menu-heading.component.html',
|
|
1582
|
-
styleUrls: ['./sort-menu-heading.component.scss']
|
|
1595
|
+
styleUrls: ['./sort-menu-heading.component.scss'],
|
|
1583
1596
|
}]
|
|
1584
1597
|
}] });
|
|
1585
1598
|
|
|
@@ -1593,24 +1606,20 @@ class SkySortComponent {
|
|
|
1593
1606
|
}
|
|
1594
1607
|
dropdownClicked() {
|
|
1595
1608
|
this.dropdownController.next({
|
|
1596
|
-
type: SkyDropdownMessageType.Close
|
|
1609
|
+
type: SkyDropdownMessageType.Close,
|
|
1597
1610
|
});
|
|
1598
1611
|
}
|
|
1599
1612
|
}
|
|
1600
1613
|
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1601
|
-
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkySortComponent, selector: "sky-sort", inputs: { showButtonText: "showButtonText" }, providers: [
|
|
1602
|
-
SkySortService
|
|
1603
|
-
], ngImport: i0, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"'skyux_sort_button_label' | skyLibResources\"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\">\n <sky-dropdown-button>\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"sort\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"sort\"\n iconType=\"skyux\"\n ></sky-icon>\n <span\n *ngIf=\"showButtonText\"\n class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\">\n </div>\n <ng-content></ng-content>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host .sky-sort ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-sort ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}:host .sky-sort ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-sort ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], components: [{ type: i1$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i1$2.λ2, selector: "sky-dropdown-button" }, { type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i1$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }], directives: [{ type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1614
|
+
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkySortComponent, selector: "sky-sort", inputs: { showButtonText: "showButtonText" }, providers: [SkySortService], ngImport: i0, template: "<div class=\"sky-sort\">\n <sky-dropdown\n buttonType=\"select\"\n [label]=\"'skyux_sort_button_label' | skyLibResources\"\n [messageStream]=\"dropdownController\"\n [title]=\"'skyux_sort_button_label' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"sort\"></sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"sort\" iconType=\"skyux\"></sky-icon>\n <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n {{ 'skyux_sort_button_label' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu\n ariaRole=\"menu\"\n [ariaLabelledBy]=\"sortMenuHeading.id\"\n (click)=\"dropdownClicked()\"\n >\n <sky-sort-menu-heading\n skyId\n #sortMenuHeading=\"skyId\"\n ></sky-sort-menu-heading>\n <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n <ng-content></ng-content>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host .sky-sort ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-sort ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}:host .sky-sort ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-sort ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-sort ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], components: [{ type: i1$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i1$2.λ2, selector: "sky-dropdown-button" }, { type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i1$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }], directives: [{ type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1604
1615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1605
1616
|
type: Component,
|
|
1606
1617
|
args: [{
|
|
1607
1618
|
selector: 'sky-sort',
|
|
1608
1619
|
styleUrls: ['./sort.component.scss'],
|
|
1609
1620
|
templateUrl: './sort.component.html',
|
|
1610
|
-
providers: [
|
|
1611
|
-
|
|
1612
|
-
],
|
|
1613
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1621
|
+
providers: [SkySortService],
|
|
1622
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1614
1623
|
}]
|
|
1615
1624
|
}], propDecorators: { showButtonText: [{
|
|
1616
1625
|
type: Input
|
|
@@ -1626,15 +1635,14 @@ SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
1626
1635
|
SkyIconModule,
|
|
1627
1636
|
SkyIdModule,
|
|
1628
1637
|
SkyListsResourcesModule,
|
|
1629
|
-
SkyThemeModule], exports: [SkySortComponent,
|
|
1630
|
-
SkySortItemComponent] });
|
|
1638
|
+
SkyThemeModule], exports: [SkySortComponent, SkySortItemComponent] });
|
|
1631
1639
|
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortModule, imports: [[
|
|
1632
1640
|
CommonModule,
|
|
1633
1641
|
SkyDropdownModule,
|
|
1634
1642
|
SkyIconModule,
|
|
1635
1643
|
SkyIdModule,
|
|
1636
1644
|
SkyListsResourcesModule,
|
|
1637
|
-
SkyThemeModule
|
|
1645
|
+
SkyThemeModule,
|
|
1638
1646
|
]] });
|
|
1639
1647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySortModule, decorators: [{
|
|
1640
1648
|
type: NgModule,
|
|
@@ -1642,7 +1650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1642
1650
|
declarations: [
|
|
1643
1651
|
SkySortComponent,
|
|
1644
1652
|
SkySortItemComponent,
|
|
1645
|
-
SkySortMenuHeadingComponent
|
|
1653
|
+
SkySortMenuHeadingComponent,
|
|
1646
1654
|
],
|
|
1647
1655
|
imports: [
|
|
1648
1656
|
CommonModule,
|
|
@@ -1650,12 +1658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1650
1658
|
SkyIconModule,
|
|
1651
1659
|
SkyIdModule,
|
|
1652
1660
|
SkyListsResourcesModule,
|
|
1653
|
-
SkyThemeModule
|
|
1661
|
+
SkyThemeModule,
|
|
1654
1662
|
],
|
|
1655
|
-
exports: [
|
|
1656
|
-
SkySortComponent,
|
|
1657
|
-
SkySortItemComponent
|
|
1658
|
-
]
|
|
1663
|
+
exports: [SkySortComponent, SkySortItemComponent],
|
|
1659
1664
|
}]
|
|
1660
1665
|
}] });
|
|
1661
1666
|
|