@skyux/lists 5.0.1 → 5.0.5
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 +26 -39
- package/bundles/skyux-lists.umd.js +218 -215
- package/documentation.json +160 -155
- package/esm2015/modules/filter/filter-button.component.js +6 -6
- package/esm2015/modules/filter/filter-inline-item.component.js +5 -5
- package/esm2015/modules/filter/filter-inline.component.js +5 -5
- package/esm2015/modules/filter/filter-summary-item.component.js +6 -6
- package/esm2015/modules/filter/filter-summary.component.js +5 -5
- package/esm2015/modules/filter/filter.module.js +10 -10
- package/esm2015/modules/infinite-scroll/infinite-scroll-dom-adapter.service.js +11 -12
- package/esm2015/modules/infinite-scroll/infinite-scroll.component.js +10 -12
- package/esm2015/modules/infinite-scroll/infinite-scroll.module.js +8 -22
- package/esm2015/modules/paging/paging.component.js +9 -10
- package/esm2015/modules/paging/paging.module.js +9 -13
- package/esm2015/modules/repeater/repeater-adapter.service.js +4 -4
- package/esm2015/modules/repeater/repeater-item-content.component.js +5 -5
- package/esm2015/modules/repeater/repeater-item-context-menu.component.js +5 -5
- package/esm2015/modules/repeater/repeater-item-title.component.js +5 -5
- package/esm2015/modules/repeater/repeater-item.component.js +12 -12
- package/esm2015/modules/repeater/repeater.component.js +24 -26
- package/esm2015/modules/repeater/repeater.module.js +10 -10
- package/esm2015/modules/repeater/repeater.service.js +5 -5
- package/esm2015/modules/shared/sky-lists-resources.module.js +45 -12
- package/esm2015/modules/sort/sort-item.component.js +10 -9
- package/esm2015/modules/sort/sort-menu-heading.component.js +5 -5
- package/esm2015/modules/sort/sort.component.js +8 -12
- package/esm2015/modules/sort/sort.module.js +10 -14
- package/esm2015/modules/sort/sort.service.js +4 -4
- 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 +6 -8
- package/esm2015/testing/infinite-scroll/infinite-scroll-fixture.js +1 -1
- package/esm2015/testing/infinite-scroll/infinite-scroll-testing.module.js +6 -8
- package/esm2015/testing/paging/paging-fixture.js +2 -2
- package/esm2015/testing/paging/paging-testing.module.js +6 -8
- package/esm2015/testing/sort/sort-fixture.js +5 -6
- package/esm2015/testing/sort/sort-testing.module.js +7 -13
- package/fesm2015/skyux-lists-testing.js +27 -40
- package/fesm2015/skyux-lists-testing.js.map +1 -1
- package/fesm2015/skyux-lists.js +201 -198
- package/fesm2015/skyux-lists.js.map +1 -1
- package/package.json +12 -12
- package/bundles/skyux-lists-testing.umd.js.map +0 -1
- package/bundles/skyux-lists.umd.js.map +0 -1
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) {
|
|
@@ -41,22 +70,26 @@ class SkyListsResourcesProvider {
|
|
|
41
70
|
*/
|
|
42
71
|
class SkyListsResourcesModule {
|
|
43
72
|
}
|
|
44
|
-
SkyListsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
45
|
-
SkyListsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
46
|
-
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
73
|
+
SkyListsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyListsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
74
|
+
SkyListsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyListsResourcesModule, exports: [SkyI18nModule] });
|
|
75
|
+
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyListsResourcesModule, providers: [
|
|
76
|
+
{
|
|
47
77
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
48
78
|
useClass: SkyListsResourcesProvider,
|
|
49
|
-
multi: true
|
|
50
|
-
}
|
|
51
|
-
|
|
79
|
+
multi: true,
|
|
80
|
+
},
|
|
81
|
+
], imports: [SkyI18nModule] });
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
|
|
@@ -95,15 +128,15 @@ class SkyFilterButtonComponent {
|
|
|
95
128
|
this.filterButtonClick.emit(undefined);
|
|
96
129
|
}
|
|
97
130
|
}
|
|
98
|
-
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
99
|
-
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
131
|
+
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
+
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
|
@@ -126,14 +159,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
126
159
|
*/
|
|
127
160
|
class SkyFilterInlineComponent {
|
|
128
161
|
}
|
|
129
|
-
SkyFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
130
|
-
SkyFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
162
|
+
SkyFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
163
|
+
SkyFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyFilterInlineComponent, selector: "sky-filter-inline", ngImport: i0, template: "<div class=\"sky-filter-inline sky-padding-even-default\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline{background-color:#eeeeef;display:flex;align-items:center}\n"] });
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterInlineComponent, decorators: [{
|
|
132
165
|
type: Component,
|
|
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
|
|
|
@@ -142,14 +175,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
142
175
|
*/
|
|
143
176
|
class SkyFilterInlineItemComponent {
|
|
144
177
|
}
|
|
145
|
-
SkyFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
146
|
-
SkyFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
178
|
+
SkyFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterInlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
179
|
+
SkyFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyFilterInlineItemComponent, selector: "sky-filter-inline-item", ngImport: i0, template: "<div class=\"sky-filter-inline-item\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline-item{margin-right:10px}\n"] });
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterInlineItemComponent, decorators: [{
|
|
148
181
|
type: Component,
|
|
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
|
|
|
@@ -181,15 +214,15 @@ class SkyFilterSummaryItemComponent {
|
|
|
181
214
|
this.itemClick.emit();
|
|
182
215
|
}
|
|
183
216
|
}
|
|
184
|
-
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
185
|
-
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
217
|
+
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
218
|
+
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
|
@@ -204,22 +237,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
204
237
|
*/
|
|
205
238
|
class SkyFilterSummaryComponent {
|
|
206
239
|
}
|
|
207
|
-
SkyFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
208
|
-
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
240
|
+
SkyFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
241
|
+
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
|
|
219
252
|
class SkyFilterModule {
|
|
220
253
|
}
|
|
221
|
-
SkyFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
222
|
-
SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
254
|
+
SkyFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
255
|
+
SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterModule, declarations: [SkyFilterButtonComponent,
|
|
223
256
|
SkyFilterInlineComponent,
|
|
224
257
|
SkyFilterInlineItemComponent,
|
|
225
258
|
SkyFilterSummaryComponent,
|
|
@@ -232,14 +265,14 @@ SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
|
|
|
232
265
|
SkyFilterInlineItemComponent,
|
|
233
266
|
SkyFilterSummaryComponent,
|
|
234
267
|
SkyFilterSummaryItemComponent] });
|
|
235
|
-
SkyFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
268
|
+
SkyFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterModule, imports: [[
|
|
236
269
|
CommonModule,
|
|
237
270
|
SkyIconModule,
|
|
238
271
|
SkyListsResourcesModule,
|
|
239
272
|
SkyTokensModule,
|
|
240
|
-
SkyThemeModule
|
|
273
|
+
SkyThemeModule,
|
|
241
274
|
]] });
|
|
242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFilterModule, decorators: [{
|
|
243
276
|
type: NgModule,
|
|
244
277
|
args: [{
|
|
245
278
|
declarations: [
|
|
@@ -247,22 +280,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", 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,16 +372,17 @@ 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
|
-
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
352
|
-
SkyInfiniteScrollDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
383
|
+
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, deps: [{ token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
384
|
+
SkyInfiniteScrollDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollDomAdapterService });
|
|
385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, decorators: [{
|
|
354
386
|
type: Injectable
|
|
355
387
|
}], ctorParameters: function () { return [{ type: i1$1.SkyAppWindowRef }]; } });
|
|
356
388
|
|
|
@@ -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) {
|
|
@@ -439,20 +473,16 @@ class SkyInfiniteScrollComponent {
|
|
|
439
473
|
}
|
|
440
474
|
}
|
|
441
475
|
}
|
|
442
|
-
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
443
|
-
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
444
|
-
|
|
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 });
|
|
446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
|
|
476
|
+
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyInfiniteScrollDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
477
|
+
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
|
|
447
479
|
type: Component,
|
|
448
480
|
args: [{
|
|
449
481
|
selector: 'sky-infinite-scroll',
|
|
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
|
|
@@ -464,29 +494,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
464
494
|
|
|
465
495
|
class SkyInfiniteScrollModule {
|
|
466
496
|
}
|
|
467
|
-
SkyInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
468
|
-
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyInfiniteScrollModule, imports: [[
|
|
472
|
-
CommonModule,
|
|
473
|
-
SkyListsResourcesModule,
|
|
474
|
-
SkyWaitModule
|
|
475
|
-
]] });
|
|
476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyInfiniteScrollModule, decorators: [{
|
|
497
|
+
SkyInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
498
|
+
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollModule, declarations: [SkyInfiniteScrollComponent], imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule], exports: [SkyInfiniteScrollComponent] });
|
|
499
|
+
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyInfiniteScrollModule, imports: [[CommonModule, SkyListsResourcesModule, SkyWaitModule]] });
|
|
500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
-
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
592
|
-
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
593
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
606
|
+
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
607
|
+
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
|
@@ -614,32 +629,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
614
629
|
|
|
615
630
|
class SkyPagingModule {
|
|
616
631
|
}
|
|
617
|
-
SkyPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
618
|
-
SkyPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
632
|
+
SkyPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyPagingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
633
|
+
SkyPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyPagingModule, declarations: [SkyPagingComponent], imports: [CommonModule,
|
|
619
634
|
SkyIconModule,
|
|
620
635
|
SkyListsResourcesModule,
|
|
621
636
|
SkyThemeModule], exports: [SkyPagingComponent] });
|
|
622
|
-
SkyPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
637
|
+
SkyPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyPagingModule, imports: [[
|
|
623
638
|
CommonModule,
|
|
624
639
|
SkyIconModule,
|
|
625
640
|
SkyListsResourcesModule,
|
|
626
|
-
SkyThemeModule
|
|
641
|
+
SkyThemeModule,
|
|
627
642
|
]] });
|
|
628
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
643
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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
|
|
|
@@ -648,13 +659,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
648
659
|
*/
|
|
649
660
|
class SkyRepeaterItemContentComponent {
|
|
650
661
|
}
|
|
651
|
-
SkyRepeaterItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
652
|
-
SkyRepeaterItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
662
|
+
SkyRepeaterItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
663
|
+
SkyRepeaterItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyRepeaterItemContentComponent, selector: "sky-repeater-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemContentComponent, decorators: [{
|
|
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
|
|
|
@@ -666,13 +677,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
666
677
|
/* Code coverage having problems with no statements in classes */
|
|
667
678
|
class SkyRepeaterItemContextMenuComponent {
|
|
668
679
|
}
|
|
669
|
-
SkyRepeaterItemContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
670
|
-
SkyRepeaterItemContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
671
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
680
|
+
SkyRepeaterItemContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
681
|
+
SkyRepeaterItemContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyRepeaterItemContextMenuComponent, selector: "sky-repeater-item-context-menu", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
682
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, decorators: [{
|
|
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
|
}
|
|
@@ -739,9 +750,9 @@ class SkyRepeaterService {
|
|
|
739
750
|
this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
|
|
740
751
|
}
|
|
741
752
|
}
|
|
742
|
-
SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
743
|
-
SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
753
|
+
SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
754
|
+
SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterService });
|
|
755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterService, decorators: [{
|
|
745
756
|
type: Injectable
|
|
746
757
|
}] });
|
|
747
758
|
|
|
@@ -804,9 +815,9 @@ class SkyRepeaterAdapterService {
|
|
|
804
815
|
return Array.from(this.host.nativeElement.querySelectorAll(this.repeaterItemGroupSelector));
|
|
805
816
|
}
|
|
806
817
|
}
|
|
807
|
-
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
808
|
-
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
818
|
+
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
819
|
+
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterAdapterService });
|
|
820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
|
|
810
821
|
type: Injectable
|
|
811
822
|
}], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
|
|
812
823
|
|
|
@@ -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);
|
|
@@ -1117,16 +1128,16 @@ class SkyRepeaterItemComponent {
|
|
|
1117
1128
|
});
|
|
1118
1129
|
}
|
|
1119
1130
|
}
|
|
1120
|
-
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1121
|
-
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", 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}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:-webkit-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:1;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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1131
|
+
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i4.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1132
|
+
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
1133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
|
|
1123
1134
|
type: Component,
|
|
1124
1135
|
args: [{
|
|
1125
1136
|
selector: 'sky-repeater-item',
|
|
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
|
});
|
|
@@ -1233,6 +1246,7 @@ class SkyRepeaterComponent {
|
|
|
1233
1246
|
this.repeaterService.repeaterGroupId = uniqueId;
|
|
1234
1247
|
this.updateForExpandMode();
|
|
1235
1248
|
this.adapterService.setRepeaterHost(this.elementRef);
|
|
1249
|
+
this.initializeDragAndDrop();
|
|
1236
1250
|
}
|
|
1237
1251
|
/**
|
|
1238
1252
|
* Specifies a layout to determine which repeater items are expanded by default and whether
|
|
@@ -1273,9 +1287,7 @@ class SkyRepeaterComponent {
|
|
|
1273
1287
|
});
|
|
1274
1288
|
// HACK: Not updating for expand mode in a timeout causes an error.
|
|
1275
1289
|
// https://github.com/angular/angular/issues/6005
|
|
1276
|
-
this.items.changes
|
|
1277
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1278
|
-
.subscribe(() => {
|
|
1290
|
+
this.items.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1279
1291
|
setTimeout(() => {
|
|
1280
1292
|
if (!!this.items.last) {
|
|
1281
1293
|
this.updateForExpandMode(this.items.last);
|
|
@@ -1288,7 +1300,7 @@ class SkyRepeaterComponent {
|
|
|
1288
1300
|
});
|
|
1289
1301
|
setTimeout(() => {
|
|
1290
1302
|
this.updateForExpandMode();
|
|
1291
|
-
this.items.forEach(item => {
|
|
1303
|
+
this.items.forEach((item) => {
|
|
1292
1304
|
item.reorderable = this.reorderable;
|
|
1293
1305
|
});
|
|
1294
1306
|
}, 0);
|
|
@@ -1296,16 +1308,14 @@ class SkyRepeaterComponent {
|
|
|
1296
1308
|
ngOnChanges(changes) {
|
|
1297
1309
|
if (changes['activeIndex']) {
|
|
1298
1310
|
this.repeaterService.enableActiveState = true;
|
|
1299
|
-
if (changes['activeIndex'].currentValue !==
|
|
1311
|
+
if (changes['activeIndex'].currentValue !==
|
|
1312
|
+
changes['activeIndex'].previousValue) {
|
|
1300
1313
|
this.repeaterService.activateItemByIndex(this.activeIndex);
|
|
1301
1314
|
}
|
|
1302
1315
|
}
|
|
1303
1316
|
if (changes.reorderable) {
|
|
1304
1317
|
if (this.items) {
|
|
1305
|
-
this.items.forEach(item => item.reorderable = this.reorderable);
|
|
1306
|
-
}
|
|
1307
|
-
if (this.reorderable) {
|
|
1308
|
-
this.initializeDragAndDrop();
|
|
1318
|
+
this.items.forEach((item) => (item.reorderable = this.reorderable));
|
|
1309
1319
|
}
|
|
1310
1320
|
this.changeDetector.markForCheck();
|
|
1311
1321
|
}
|
|
@@ -1336,18 +1346,16 @@ class SkyRepeaterComponent {
|
|
|
1336
1346
|
}
|
|
1337
1347
|
}
|
|
1338
1348
|
initializeDragAndDrop() {
|
|
1349
|
+
/* Sanity check that we haven't already set up dragging abilities */
|
|
1350
|
+
/* istanbul ignore else */
|
|
1339
1351
|
if (!this.dragulaService.find(this.dragulaGroupName)) {
|
|
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
|
-
// Reset the current dragula subscriptions.
|
|
1348
|
-
this.dragulaUnsubscribe.next();
|
|
1349
|
-
this.dragulaUnsubscribe.complete();
|
|
1350
|
-
this.dragulaUnsubscribe = new Subject();
|
|
1351
1359
|
let draggedItemIndex;
|
|
1352
1360
|
this.dragulaService.drag
|
|
1353
1361
|
.pipe(takeUntil(this.dragulaUnsubscribe))
|
|
@@ -1379,12 +1387,14 @@ class SkyRepeaterComponent {
|
|
|
1379
1387
|
this.dragulaUnsubscribe.next();
|
|
1380
1388
|
this.dragulaUnsubscribe.complete();
|
|
1381
1389
|
this.dragulaUnsubscribe = undefined;
|
|
1390
|
+
/* Sanity check that we have set up dragging abilities */
|
|
1391
|
+
/* istanbul ignore else */
|
|
1382
1392
|
if (this.dragulaService.find(this.dragulaGroupName)) {
|
|
1383
1393
|
this.dragulaService.destroy(this.dragulaGroupName);
|
|
1384
1394
|
}
|
|
1385
1395
|
}
|
|
1386
1396
|
emitTags() {
|
|
1387
|
-
const tags = this.repeaterService.items.map(item => item.tag);
|
|
1397
|
+
const tags = this.repeaterService.items.map((item) => item.tag);
|
|
1388
1398
|
this.orderChange.emit(tags);
|
|
1389
1399
|
}
|
|
1390
1400
|
everyItemHasTag() {
|
|
@@ -1393,21 +1403,21 @@ class SkyRepeaterComponent {
|
|
|
1393
1403
|
if (!this.items || this.items.length === 0) {
|
|
1394
1404
|
return false;
|
|
1395
1405
|
}
|
|
1396
|
-
return this.items.toArray().every(item => {
|
|
1406
|
+
return this.items.toArray().every((item) => {
|
|
1397
1407
|
return item.tag !== undefined;
|
|
1398
1408
|
});
|
|
1399
1409
|
}
|
|
1400
1410
|
}
|
|
1401
|
-
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1402
|
-
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1411
|
+
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
1412
|
+
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
1413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
|
|
1404
1414
|
type: Component,
|
|
1405
1415
|
args: [{
|
|
1406
1416
|
selector: 'sky-repeater',
|
|
1407
1417
|
styleUrls: ['./repeater.component.scss'],
|
|
1408
1418
|
templateUrl: './repeater.component.html',
|
|
1409
1419
|
providers: [SkyRepeaterService, SkyRepeaterAdapterService],
|
|
1410
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1420
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1411
1421
|
}]
|
|
1412
1422
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyRepeaterService }, { type: SkyRepeaterAdapterService }, { type: i3$1.DragulaService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { activeIndex: [{
|
|
1413
1423
|
type: Input
|
|
@@ -1431,20 +1441,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1431
1441
|
*/
|
|
1432
1442
|
class SkyRepeaterItemTitleComponent {
|
|
1433
1443
|
}
|
|
1434
|
-
SkyRepeaterItemTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1435
|
-
SkyRepeaterItemTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1444
|
+
SkyRepeaterItemTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1445
|
+
SkyRepeaterItemTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyRepeaterItemTitleComponent, selector: "sky-repeater-item-title", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
1446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterItemTitleComponent, decorators: [{
|
|
1437
1447
|
type: Component,
|
|
1438
1448
|
args: [{
|
|
1439
1449
|
selector: 'sky-repeater-item-title',
|
|
1440
|
-
templateUrl: './repeater-item-title.component.html'
|
|
1450
|
+
templateUrl: './repeater-item-title.component.html',
|
|
1441
1451
|
}]
|
|
1442
1452
|
}] });
|
|
1443
1453
|
|
|
1444
1454
|
class SkyRepeaterModule {
|
|
1445
1455
|
}
|
|
1446
|
-
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1447
|
-
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1456
|
+
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1457
|
+
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterModule, declarations: [SkyRepeaterComponent,
|
|
1448
1458
|
SkyRepeaterItemComponent,
|
|
1449
1459
|
SkyRepeaterItemContentComponent,
|
|
1450
1460
|
SkyRepeaterItemContextMenuComponent,
|
|
@@ -1459,16 +1469,16 @@ SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
|
|
|
1459
1469
|
SkyRepeaterItemContentComponent,
|
|
1460
1470
|
SkyRepeaterItemContextMenuComponent,
|
|
1461
1471
|
SkyRepeaterItemTitleComponent] });
|
|
1462
|
-
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1472
|
+
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterModule, imports: [[
|
|
1463
1473
|
CommonModule,
|
|
1464
1474
|
DragulaModule,
|
|
1465
1475
|
SkyChevronModule,
|
|
1466
1476
|
SkyCheckboxModule,
|
|
1467
1477
|
SkyIconModule,
|
|
1468
1478
|
SkyInlineFormModule,
|
|
1469
|
-
SkyListsResourcesModule
|
|
1479
|
+
SkyListsResourcesModule,
|
|
1470
1480
|
]] });
|
|
1471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyRepeaterModule, decorators: [{
|
|
1472
1482
|
type: NgModule,
|
|
1473
1483
|
args: [{
|
|
1474
1484
|
declarations: [
|
|
@@ -1476,7 +1486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1476
1486
|
SkyRepeaterItemComponent,
|
|
1477
1487
|
SkyRepeaterItemContentComponent,
|
|
1478
1488
|
SkyRepeaterItemContextMenuComponent,
|
|
1479
|
-
SkyRepeaterItemTitleComponent
|
|
1489
|
+
SkyRepeaterItemTitleComponent,
|
|
1480
1490
|
],
|
|
1481
1491
|
imports: [
|
|
1482
1492
|
CommonModule,
|
|
@@ -1485,15 +1495,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1485
1495
|
SkyCheckboxModule,
|
|
1486
1496
|
SkyIconModule,
|
|
1487
1497
|
SkyInlineFormModule,
|
|
1488
|
-
SkyListsResourcesModule
|
|
1498
|
+
SkyListsResourcesModule,
|
|
1489
1499
|
],
|
|
1490
1500
|
exports: [
|
|
1491
1501
|
SkyRepeaterComponent,
|
|
1492
1502
|
SkyRepeaterItemComponent,
|
|
1493
1503
|
SkyRepeaterItemContentComponent,
|
|
1494
1504
|
SkyRepeaterItemContextMenuComponent,
|
|
1495
|
-
SkyRepeaterItemTitleComponent
|
|
1496
|
-
]
|
|
1505
|
+
SkyRepeaterItemTitleComponent,
|
|
1506
|
+
],
|
|
1497
1507
|
}]
|
|
1498
1508
|
}] });
|
|
1499
1509
|
|
|
@@ -1508,9 +1518,9 @@ class SkySortService {
|
|
|
1508
1518
|
this.selectedItem.next(sortItem);
|
|
1509
1519
|
}
|
|
1510
1520
|
}
|
|
1511
|
-
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1512
|
-
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1521
|
+
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1522
|
+
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortService });
|
|
1523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortService, decorators: [{
|
|
1514
1524
|
type: Injectable
|
|
1515
1525
|
}] });
|
|
1516
1526
|
|
|
@@ -1538,9 +1548,10 @@ class SkySortItemComponent {
|
|
|
1538
1548
|
}
|
|
1539
1549
|
}
|
|
1540
1550
|
ngOnChanges(changes) {
|
|
1541
|
-
if (changes &&
|
|
1542
|
-
|
|
1543
|
-
|
|
1551
|
+
if (changes &&
|
|
1552
|
+
changes['active'] &&
|
|
1553
|
+
changes['active'].currentValue &&
|
|
1554
|
+
changes['active'].currentValue !== changes['active'].previousValue) {
|
|
1544
1555
|
this.sortService.selectItem(this.sortItemId);
|
|
1545
1556
|
}
|
|
1546
1557
|
}
|
|
@@ -1556,15 +1567,15 @@ class SkySortItemComponent {
|
|
|
1556
1567
|
}
|
|
1557
1568
|
}
|
|
1558
1569
|
}
|
|
1559
|
-
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1560
|
-
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1570
|
+
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1571
|
+
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
1572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1562
1573
|
type: Component,
|
|
1563
1574
|
args: [{
|
|
1564
1575
|
selector: 'sky-sort-item',
|
|
1565
1576
|
styleUrls: ['./sort-item.component.scss'],
|
|
1566
1577
|
templateUrl: './sort-item.component.html',
|
|
1567
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1578
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1568
1579
|
}]
|
|
1569
1580
|
}], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
1570
1581
|
type: Input
|
|
@@ -1574,14 +1585,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1574
1585
|
|
|
1575
1586
|
class SkySortMenuHeadingComponent {
|
|
1576
1587
|
}
|
|
1577
|
-
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1578
|
-
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1588
|
+
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1589
|
+
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 } });
|
|
1590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortMenuHeadingComponent, decorators: [{
|
|
1580
1591
|
type: Component,
|
|
1581
1592
|
args: [{
|
|
1582
1593
|
selector: 'sky-sort-menu-heading',
|
|
1583
1594
|
templateUrl: './sort-menu-heading.component.html',
|
|
1584
|
-
styleUrls: ['./sort-menu-heading.component.scss']
|
|
1595
|
+
styleUrls: ['./sort-menu-heading.component.scss'],
|
|
1585
1596
|
}]
|
|
1586
1597
|
}] });
|
|
1587
1598
|
|
|
@@ -1595,24 +1606,20 @@ class SkySortComponent {
|
|
|
1595
1606
|
}
|
|
1596
1607
|
dropdownClicked() {
|
|
1597
1608
|
this.dropdownController.next({
|
|
1598
|
-
type: SkyDropdownMessageType.Close
|
|
1609
|
+
type: SkyDropdownMessageType.Close,
|
|
1599
1610
|
});
|
|
1600
1611
|
}
|
|
1601
1612
|
}
|
|
1602
|
-
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1603
|
-
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1604
|
-
|
|
1605
|
-
], 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 });
|
|
1606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1613
|
+
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1614
|
+
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
1615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1607
1616
|
type: Component,
|
|
1608
1617
|
args: [{
|
|
1609
1618
|
selector: 'sky-sort',
|
|
1610
1619
|
styleUrls: ['./sort.component.scss'],
|
|
1611
1620
|
templateUrl: './sort.component.html',
|
|
1612
|
-
providers: [
|
|
1613
|
-
|
|
1614
|
-
],
|
|
1615
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1621
|
+
providers: [SkySortService],
|
|
1622
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1616
1623
|
}]
|
|
1617
1624
|
}], propDecorators: { showButtonText: [{
|
|
1618
1625
|
type: Input
|
|
@@ -1620,31 +1627,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1620
1627
|
|
|
1621
1628
|
class SkySortModule {
|
|
1622
1629
|
}
|
|
1623
|
-
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1624
|
-
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1630
|
+
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1631
|
+
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortModule, declarations: [SkySortComponent,
|
|
1625
1632
|
SkySortItemComponent,
|
|
1626
1633
|
SkySortMenuHeadingComponent], imports: [CommonModule,
|
|
1627
1634
|
SkyDropdownModule,
|
|
1628
1635
|
SkyIconModule,
|
|
1629
1636
|
SkyIdModule,
|
|
1630
1637
|
SkyListsResourcesModule,
|
|
1631
|
-
SkyThemeModule], exports: [SkySortComponent,
|
|
1632
|
-
|
|
1633
|
-
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkySortModule, imports: [[
|
|
1638
|
+
SkyThemeModule], exports: [SkySortComponent, SkySortItemComponent] });
|
|
1639
|
+
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortModule, imports: [[
|
|
1634
1640
|
CommonModule,
|
|
1635
1641
|
SkyDropdownModule,
|
|
1636
1642
|
SkyIconModule,
|
|
1637
1643
|
SkyIdModule,
|
|
1638
1644
|
SkyListsResourcesModule,
|
|
1639
|
-
SkyThemeModule
|
|
1645
|
+
SkyThemeModule,
|
|
1640
1646
|
]] });
|
|
1641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySortModule, decorators: [{
|
|
1642
1648
|
type: NgModule,
|
|
1643
1649
|
args: [{
|
|
1644
1650
|
declarations: [
|
|
1645
1651
|
SkySortComponent,
|
|
1646
1652
|
SkySortItemComponent,
|
|
1647
|
-
SkySortMenuHeadingComponent
|
|
1653
|
+
SkySortMenuHeadingComponent,
|
|
1648
1654
|
],
|
|
1649
1655
|
imports: [
|
|
1650
1656
|
CommonModule,
|
|
@@ -1652,12 +1658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1652
1658
|
SkyIconModule,
|
|
1653
1659
|
SkyIdModule,
|
|
1654
1660
|
SkyListsResourcesModule,
|
|
1655
|
-
SkyThemeModule
|
|
1661
|
+
SkyThemeModule,
|
|
1656
1662
|
],
|
|
1657
|
-
exports: [
|
|
1658
|
-
SkySortComponent,
|
|
1659
|
-
SkySortItemComponent
|
|
1660
|
-
]
|
|
1663
|
+
exports: [SkySortComponent, SkySortItemComponent],
|
|
1661
1664
|
}]
|
|
1662
1665
|
}] });
|
|
1663
1666
|
|