@skyux/lists 5.7.2 → 6.0.0-beta.2
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/esm2020/index.mjs +22 -0
- package/esm2020/lib/modules/filter/filter-button.component.mjs +62 -0
- package/esm2020/lib/modules/filter/filter-inline-item.component.mjs +14 -0
- package/esm2020/lib/modules/filter/filter-inline.component.mjs +14 -0
- package/esm2020/lib/modules/filter/filter-summary-item.component.mjs +45 -0
- package/esm2020/lib/modules/filter/filter-summary.component.mjs +15 -0
- package/esm2020/lib/modules/filter/filter.module.mjs +61 -0
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll-dom-adapter.service.mjs +93 -0
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll.component.mjs +109 -0
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll.module.mjs +20 -0
- package/esm2020/lib/modules/paging/paging.component.mjs +122 -0
- package/esm2020/lib/modules/paging/paging.module.mjs +34 -0
- package/esm2020/lib/modules/repeater/repeater-adapter.service.mjs +69 -0
- package/esm2020/lib/modules/repeater/repeater-item-content.component.mjs +14 -0
- package/esm2020/lib/modules/repeater/repeater-item-context-menu.component.mjs +17 -0
- package/esm2020/lib/modules/repeater/repeater-item-title.component.mjs +14 -0
- package/esm2020/lib/modules/repeater/repeater-item.component.mjs +383 -0
- package/esm2020/lib/modules/repeater/repeater.component.mjs +256 -0
- package/esm2020/lib/modules/repeater/repeater.module.mjs +69 -0
- package/esm2020/lib/modules/repeater/repeater.service.mjs +72 -0
- package/esm2020/lib/modules/shared/sky-lists-resources.module.mjs +80 -0
- package/esm2020/lib/modules/sort/sort-item.component.mjs +60 -0
- package/esm2020/lib/modules/sort/sort-menu-heading.component.mjs +13 -0
- package/esm2020/lib/modules/sort/sort.component.mjs +35 -0
- package/esm2020/lib/modules/sort/sort.module.mjs +50 -0
- package/esm2020/lib/modules/sort/sort.service.mjs +20 -0
- package/esm2020/skyux-lists.mjs +5 -0
- package/esm2020/testing/filter/filter-fixture-button.mjs +46 -0
- package/esm2020/testing/filter/filter-fixture-summary.mjs +28 -0
- package/esm2020/testing/filter/filter-testing.module.mjs +15 -0
- package/esm2020/testing/filter/lists-filter-fixture-button.mjs +2 -0
- package/esm2020/testing/infinite-scroll/infinite-scroll-fixture.mjs +27 -0
- package/esm2020/testing/infinite-scroll/infinite-scroll-testing.module.mjs +15 -0
- package/esm2020/testing/paging/paging-fixture-button.mjs +2 -0
- package/esm2020/testing/paging/paging-fixture.mjs +93 -0
- package/esm2020/testing/paging/paging-testing.module.mjs +15 -0
- package/esm2020/testing/public-api.mjs +13 -0
- package/esm2020/testing/skyux-lists-testing.mjs +5 -0
- package/esm2020/testing/sort/sort-fixture-menu-item.mjs +2 -0
- package/esm2020/testing/sort/sort-fixture-menu.mjs +2 -0
- package/esm2020/testing/sort/sort-fixture.mjs +140 -0
- package/esm2020/testing/sort/sort-testing.module.mjs +17 -0
- package/fesm2015/{skyux-lists-testing.js → skyux-lists-testing.mjs} +17 -17
- package/fesm2015/skyux-lists-testing.mjs.map +1 -0
- package/fesm2015/skyux-lists.mjs +1615 -0
- package/fesm2015/skyux-lists.mjs.map +1 -0
- package/fesm2020/skyux-lists-testing.mjs +389 -0
- package/fesm2020/skyux-lists-testing.mjs.map +1 -0
- package/fesm2020/skyux-lists.mjs +1615 -0
- package/fesm2020/skyux-lists.mjs.map +1 -0
- package/package.json +43 -19
- package/testing/package.json +5 -5
- package/bundles/skyux-lists-testing.umd.js +0 -887
- package/bundles/skyux-lists.umd.js +0 -2149
- package/esm2015/index.js +0 -22
- package/esm2015/index.js.map +0 -1
- package/esm2015/lib/modules/filter/filter-button.component.js +0 -67
- package/esm2015/lib/modules/filter/filter-button.component.js.map +0 -1
- package/esm2015/lib/modules/filter/filter-inline-item.component.js +0 -18
- package/esm2015/lib/modules/filter/filter-inline-item.component.js.map +0 -1
- package/esm2015/lib/modules/filter/filter-inline.component.js +0 -18
- package/esm2015/lib/modules/filter/filter-inline.component.js.map +0 -1
- package/esm2015/lib/modules/filter/filter-summary-item.component.js +0 -50
- package/esm2015/lib/modules/filter/filter-summary-item.component.js.map +0 -1
- package/esm2015/lib/modules/filter/filter-summary.component.js +0 -20
- package/esm2015/lib/modules/filter/filter-summary.component.js.map +0 -1
- package/esm2015/lib/modules/filter/filter.module.js +0 -61
- package/esm2015/lib/modules/filter/filter.module.js.map +0 -1
- package/esm2015/lib/modules/infinite-scroll/infinite-scroll-dom-adapter.service.js +0 -93
- package/esm2015/lib/modules/infinite-scroll/infinite-scroll-dom-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/infinite-scroll/infinite-scroll.component.js +0 -115
- package/esm2015/lib/modules/infinite-scroll/infinite-scroll.component.js.map +0 -1
- package/esm2015/lib/modules/infinite-scroll/infinite-scroll.module.js +0 -20
- package/esm2015/lib/modules/infinite-scroll/infinite-scroll.module.js.map +0 -1
- package/esm2015/lib/modules/paging/paging.component.js +0 -127
- package/esm2015/lib/modules/paging/paging.component.js.map +0 -1
- package/esm2015/lib/modules/paging/paging.module.js +0 -34
- package/esm2015/lib/modules/paging/paging.module.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater-adapter.service.js +0 -69
- package/esm2015/lib/modules/repeater/repeater-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater-item-content.component.js +0 -17
- package/esm2015/lib/modules/repeater/repeater-item-content.component.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater-item-context-menu.component.js +0 -20
- package/esm2015/lib/modules/repeater/repeater-item-context-menu.component.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater-item-title.component.js +0 -17
- package/esm2015/lib/modules/repeater/repeater-item-title.component.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater-item.component.js +0 -389
- package/esm2015/lib/modules/repeater/repeater-item.component.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater.component.js +0 -262
- package/esm2015/lib/modules/repeater/repeater.component.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater.module.js +0 -69
- package/esm2015/lib/modules/repeater/repeater.module.js.map +0 -1
- package/esm2015/lib/modules/repeater/repeater.service.js +0 -72
- package/esm2015/lib/modules/repeater/repeater.service.js.map +0 -1
- package/esm2015/lib/modules/shared/sky-lists-resources.module.js +0 -80
- package/esm2015/lib/modules/shared/sky-lists-resources.module.js.map +0 -1
- package/esm2015/lib/modules/sort/sort-item.component.js +0 -65
- package/esm2015/lib/modules/sort/sort-item.component.js.map +0 -1
- package/esm2015/lib/modules/sort/sort-menu-heading.component.js +0 -17
- package/esm2015/lib/modules/sort/sort-menu-heading.component.js.map +0 -1
- package/esm2015/lib/modules/sort/sort.component.js +0 -41
- package/esm2015/lib/modules/sort/sort.component.js.map +0 -1
- package/esm2015/lib/modules/sort/sort.module.js +0 -50
- package/esm2015/lib/modules/sort/sort.module.js.map +0 -1
- package/esm2015/lib/modules/sort/sort.service.js +0 -20
- package/esm2015/lib/modules/sort/sort.service.js.map +0 -1
- package/esm2015/skyux-lists.js +0 -5
- package/esm2015/skyux-lists.js.map +0 -1
- package/esm2015/testing/filter/filter-fixture-button.js +0 -50
- package/esm2015/testing/filter/filter-fixture-button.js.map +0 -1
- package/esm2015/testing/filter/filter-fixture-summary.js +0 -31
- package/esm2015/testing/filter/filter-fixture-summary.js.map +0 -1
- package/esm2015/testing/filter/filter-testing.module.js +0 -15
- package/esm2015/testing/filter/filter-testing.module.js.map +0 -1
- package/esm2015/testing/filter/lists-filter-fixture-button.js +0 -2
- package/esm2015/testing/filter/lists-filter-fixture-button.js.map +0 -1
- package/esm2015/testing/infinite-scroll/infinite-scroll-fixture.js +0 -30
- package/esm2015/testing/infinite-scroll/infinite-scroll-fixture.js.map +0 -1
- package/esm2015/testing/infinite-scroll/infinite-scroll-testing.module.js +0 -15
- package/esm2015/testing/infinite-scroll/infinite-scroll-testing.module.js.map +0 -1
- package/esm2015/testing/paging/paging-fixture-button.js +0 -2
- package/esm2015/testing/paging/paging-fixture-button.js.map +0 -1
- package/esm2015/testing/paging/paging-fixture.js +0 -104
- package/esm2015/testing/paging/paging-fixture.js.map +0 -1
- package/esm2015/testing/paging/paging-testing.module.js +0 -15
- package/esm2015/testing/paging/paging-testing.module.js.map +0 -1
- package/esm2015/testing/public-api.js +0 -13
- package/esm2015/testing/public-api.js.map +0 -1
- package/esm2015/testing/skyux-lists-testing.js +0 -5
- package/esm2015/testing/skyux-lists-testing.js.map +0 -1
- package/esm2015/testing/sort/sort-fixture-menu-item.js +0 -2
- package/esm2015/testing/sort/sort-fixture-menu-item.js.map +0 -1
- package/esm2015/testing/sort/sort-fixture-menu.js +0 -2
- package/esm2015/testing/sort/sort-fixture-menu.js.map +0 -1
- package/esm2015/testing/sort/sort-fixture.js +0 -152
- package/esm2015/testing/sort/sort-fixture.js.map +0 -1
- package/esm2015/testing/sort/sort-testing.module.js +0 -17
- package/esm2015/testing/sort/sort-testing.module.js.map +0 -1
- package/fesm2015/skyux-lists-testing.js.map +0 -1
- package/fesm2015/skyux-lists.js +0 -1685
- package/fesm2015/skyux-lists.js.map +0 -1
|
@@ -0,0 +1,1615 @@
|
|
|
1
|
+
import * as i2 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { NgModule, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewEncapsulation, ContentChild, HostBinding, ViewChild, ContentChildren } from '@angular/core';
|
|
5
|
+
import * as i1 from '@skyux/indicators';
|
|
6
|
+
import { SkyIconModule, SkyTokensModule, SkyWaitModule, SkyChevronModule } from '@skyux/indicators';
|
|
7
|
+
import * as i3 from '@skyux/theme';
|
|
8
|
+
import { SkyThemeModule } from '@skyux/theme';
|
|
9
|
+
import * as i4 from '@skyux/i18n';
|
|
10
|
+
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
11
|
+
import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
|
|
12
|
+
import { takeUntil, filter, map } from 'rxjs/operators';
|
|
13
|
+
import * as i1$1 from '@skyux/core';
|
|
14
|
+
import { SkyIdModule } from '@skyux/core';
|
|
15
|
+
import * as i6 from '@skyux/forms';
|
|
16
|
+
import { SkyCheckboxModule } from '@skyux/forms';
|
|
17
|
+
import * as i4$1 from '@skyux/inline-form';
|
|
18
|
+
import { SkyInlineFormModule } from '@skyux/inline-form';
|
|
19
|
+
import * as i3$1 from 'ng2-dragula';
|
|
20
|
+
import { DragulaModule } from 'ng2-dragula';
|
|
21
|
+
import { skyAnimationSlide } from '@skyux/animations';
|
|
22
|
+
import * as i1$2 from '@skyux/popovers';
|
|
23
|
+
import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
27
|
+
* The contents of this file were automatically generated by
|
|
28
|
+
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-lists' schematic.
|
|
29
|
+
* To update this file, simply rerun the command.
|
|
30
|
+
*/
|
|
31
|
+
const RESOURCES = {
|
|
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_expand: { message: 'Expand or collapse {0}' },
|
|
42
|
+
skyux_repeater_item_expand_default: { message: 'Expand or collapse' },
|
|
43
|
+
skyux_repeater_item_checkbox_label: { message: 'Select {0}' },
|
|
44
|
+
skyux_repeater_item_checkbox_label_default: { message: 'Select row' },
|
|
45
|
+
skyux_repeater_item_reorder_cancel: {
|
|
46
|
+
message: 'Item reordering was canceled. The item was returned to its original position.',
|
|
47
|
+
},
|
|
48
|
+
skyux_repeater_item_reorder_finish: {
|
|
49
|
+
message: 'Dropped the item in position',
|
|
50
|
+
},
|
|
51
|
+
skyux_repeater_item_reorder_instructions: {
|
|
52
|
+
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.',
|
|
53
|
+
},
|
|
54
|
+
skyux_repeater_item_reorder_moved: {
|
|
55
|
+
message: 'Moved the item to position',
|
|
56
|
+
},
|
|
57
|
+
skyux_repeater_item_reorder_label_default: { message: 'Reorder' },
|
|
58
|
+
skyux_repeater_item_reorder_label: { message: 'Reorder {0}' },
|
|
59
|
+
skyux_repeater_item_reorder_operation: {
|
|
60
|
+
message: 'Press the spacebar or enter key to reorder.',
|
|
61
|
+
},
|
|
62
|
+
skyux_repeater_item_reorder_top: { message: 'Top' },
|
|
63
|
+
skyux_repeater_item_reorder_top_label: { message: 'Move {0} to top' },
|
|
64
|
+
skyux_repeater_item_reorder_top_label_default: { message: 'Move to top' },
|
|
65
|
+
skyux_sort_button_label: { message: 'Sort' },
|
|
66
|
+
skyux_sort_menu_heading: { message: 'Sort by' },
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
class SkyListsResourcesProvider {
|
|
70
|
+
getString(localeInfo, name) {
|
|
71
|
+
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Import into any component library module that needs to use resource strings.
|
|
76
|
+
*/
|
|
77
|
+
class SkyListsResourcesModule {
|
|
78
|
+
}
|
|
79
|
+
SkyListsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
80
|
+
SkyListsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListsResourcesModule, exports: [SkyI18nModule] });
|
|
81
|
+
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListsResourcesModule, providers: [
|
|
82
|
+
{
|
|
83
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
84
|
+
useClass: SkyListsResourcesProvider,
|
|
85
|
+
multi: true,
|
|
86
|
+
},
|
|
87
|
+
], imports: [SkyI18nModule] });
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListsResourcesModule, decorators: [{
|
|
89
|
+
type: NgModule,
|
|
90
|
+
args: [{
|
|
91
|
+
exports: [SkyI18nModule],
|
|
92
|
+
providers: [
|
|
93
|
+
{
|
|
94
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
95
|
+
useClass: SkyListsResourcesProvider,
|
|
96
|
+
multi: true,
|
|
97
|
+
},
|
|
98
|
+
],
|
|
99
|
+
}]
|
|
100
|
+
}] });
|
|
101
|
+
|
|
102
|
+
let nextId = 0;
|
|
103
|
+
class SkyFilterButtonComponent {
|
|
104
|
+
constructor() {
|
|
105
|
+
/**
|
|
106
|
+
* Indicates whether to highlight the filter button to indicate that filters were applied.
|
|
107
|
+
* We recommend setting this property to `true` when no indication of filtering is visible
|
|
108
|
+
* to users. For example, set it to `true` if you do not display the filter summary.
|
|
109
|
+
*/
|
|
110
|
+
this.active = false;
|
|
111
|
+
/**
|
|
112
|
+
* Indicates whether to disable the filter button.
|
|
113
|
+
*/
|
|
114
|
+
this.disabled = false;
|
|
115
|
+
/**
|
|
116
|
+
* Indicates whether to display a **Filter** label beside the icon on the filter button.
|
|
117
|
+
*/
|
|
118
|
+
this.showButtonText = false;
|
|
119
|
+
/**
|
|
120
|
+
* Fires when the filter button is selected.
|
|
121
|
+
*/
|
|
122
|
+
this.filterButtonClick = new EventEmitter();
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Specifies an ID for the filter button.
|
|
126
|
+
*/
|
|
127
|
+
get filterButtonId() {
|
|
128
|
+
return this._filterButtonId || `sky-filter-button-${++nextId}`;
|
|
129
|
+
}
|
|
130
|
+
set filterButtonId(value) {
|
|
131
|
+
this._filterButtonId = value;
|
|
132
|
+
}
|
|
133
|
+
filterButtonOnClick() {
|
|
134
|
+
this.filterButtonClick.emit(undefined);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
138
|
+
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterButtonComponent, decorators: [{
|
|
140
|
+
type: Component,
|
|
141
|
+
args: [{ selector: 'sky-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
142
|
+
}], propDecorators: { filterButtonId: [{
|
|
143
|
+
type: Input
|
|
144
|
+
}], ariaControls: [{
|
|
145
|
+
type: Input
|
|
146
|
+
}], ariaExpanded: [{
|
|
147
|
+
type: Input
|
|
148
|
+
}], active: [{
|
|
149
|
+
type: Input
|
|
150
|
+
}], disabled: [{
|
|
151
|
+
type: Input
|
|
152
|
+
}], showButtonText: [{
|
|
153
|
+
type: Input
|
|
154
|
+
}], filterButtonClick: [{
|
|
155
|
+
type: Output
|
|
156
|
+
}] } });
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Specifies an inline filter.
|
|
160
|
+
*/
|
|
161
|
+
class SkyFilterInlineItemComponent {
|
|
162
|
+
}
|
|
163
|
+
SkyFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterInlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
+
SkyFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"] });
|
|
165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterInlineItemComponent, decorators: [{
|
|
166
|
+
type: Component,
|
|
167
|
+
args: [{ selector: 'sky-filter-inline-item', template: "<div class=\"sky-filter-inline-item\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline-item{margin-right:10px}\n"] }]
|
|
168
|
+
}] });
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Specifies a wrapper for the inline filters.
|
|
172
|
+
*/
|
|
173
|
+
class SkyFilterInlineComponent {
|
|
174
|
+
}
|
|
175
|
+
SkyFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
+
SkyFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"] });
|
|
177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterInlineComponent, decorators: [{
|
|
178
|
+
type: Component,
|
|
179
|
+
args: [{ selector: 'sky-filter-inline', 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"] }]
|
|
180
|
+
}] });
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* Specifies a filter that was applied.
|
|
184
|
+
*/
|
|
185
|
+
class SkyFilterSummaryItemComponent {
|
|
186
|
+
constructor() {
|
|
187
|
+
/**
|
|
188
|
+
* Indicates whether the filter summary item has a close button.
|
|
189
|
+
*/
|
|
190
|
+
this.dismissible = true;
|
|
191
|
+
/**
|
|
192
|
+
* Fires when the summary item close button is selected.
|
|
193
|
+
*/
|
|
194
|
+
this.dismiss = new EventEmitter();
|
|
195
|
+
/**
|
|
196
|
+
* Fires when the summary item is selected.
|
|
197
|
+
*/
|
|
198
|
+
this.itemClick = new EventEmitter();
|
|
199
|
+
}
|
|
200
|
+
onItemDismiss() {
|
|
201
|
+
this.dismiss.emit();
|
|
202
|
+
}
|
|
203
|
+
onItemClick() {
|
|
204
|
+
this.itemClick.emit();
|
|
205
|
+
}
|
|
206
|
+
onItemKeypress() {
|
|
207
|
+
this.itemClick.emit();
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
211
|
+
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterSummaryItemComponent, decorators: [{
|
|
213
|
+
type: Component,
|
|
214
|
+
args: [{ selector: 'sky-filter-summary-item', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
215
|
+
}], propDecorators: { dismissible: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], dismiss: [{
|
|
218
|
+
type: Output
|
|
219
|
+
}], itemClick: [{
|
|
220
|
+
type: Output
|
|
221
|
+
}] } });
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Specifies a wrapper for the filters that were applied.
|
|
225
|
+
*/
|
|
226
|
+
class SkyFilterSummaryComponent {
|
|
227
|
+
}
|
|
228
|
+
SkyFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
+
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterSummaryComponent, decorators: [{
|
|
231
|
+
type: Component,
|
|
232
|
+
args: [{ selector: 'sky-filter-summary', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
233
|
+
}] });
|
|
234
|
+
|
|
235
|
+
class SkyFilterModule {
|
|
236
|
+
}
|
|
237
|
+
SkyFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
238
|
+
SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterModule, declarations: [SkyFilterButtonComponent,
|
|
239
|
+
SkyFilterInlineComponent,
|
|
240
|
+
SkyFilterInlineItemComponent,
|
|
241
|
+
SkyFilterSummaryComponent,
|
|
242
|
+
SkyFilterSummaryItemComponent], imports: [CommonModule,
|
|
243
|
+
SkyIconModule,
|
|
244
|
+
SkyListsResourcesModule,
|
|
245
|
+
SkyTokensModule,
|
|
246
|
+
SkyThemeModule], exports: [SkyFilterButtonComponent,
|
|
247
|
+
SkyFilterInlineComponent,
|
|
248
|
+
SkyFilterInlineItemComponent,
|
|
249
|
+
SkyFilterSummaryComponent,
|
|
250
|
+
SkyFilterSummaryItemComponent] });
|
|
251
|
+
SkyFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterModule, imports: [[
|
|
252
|
+
CommonModule,
|
|
253
|
+
SkyIconModule,
|
|
254
|
+
SkyListsResourcesModule,
|
|
255
|
+
SkyTokensModule,
|
|
256
|
+
SkyThemeModule,
|
|
257
|
+
]] });
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFilterModule, decorators: [{
|
|
259
|
+
type: NgModule,
|
|
260
|
+
args: [{
|
|
261
|
+
declarations: [
|
|
262
|
+
SkyFilterButtonComponent,
|
|
263
|
+
SkyFilterInlineComponent,
|
|
264
|
+
SkyFilterInlineItemComponent,
|
|
265
|
+
SkyFilterSummaryComponent,
|
|
266
|
+
SkyFilterSummaryItemComponent,
|
|
267
|
+
],
|
|
268
|
+
imports: [
|
|
269
|
+
CommonModule,
|
|
270
|
+
SkyIconModule,
|
|
271
|
+
SkyListsResourcesModule,
|
|
272
|
+
SkyTokensModule,
|
|
273
|
+
SkyThemeModule,
|
|
274
|
+
],
|
|
275
|
+
exports: [
|
|
276
|
+
SkyFilterButtonComponent,
|
|
277
|
+
SkyFilterInlineComponent,
|
|
278
|
+
SkyFilterInlineItemComponent,
|
|
279
|
+
SkyFilterSummaryComponent,
|
|
280
|
+
SkyFilterSummaryItemComponent,
|
|
281
|
+
],
|
|
282
|
+
}]
|
|
283
|
+
}] });
|
|
284
|
+
|
|
285
|
+
/**
|
|
286
|
+
* @internal
|
|
287
|
+
*/
|
|
288
|
+
class SkyInfiniteScrollDomAdapterService {
|
|
289
|
+
constructor(windowRef) {
|
|
290
|
+
this.windowRef = windowRef;
|
|
291
|
+
this.ngUnsubscribe = new Subject();
|
|
292
|
+
this._parentChanges = new EventEmitter();
|
|
293
|
+
}
|
|
294
|
+
ngOnDestroy() {
|
|
295
|
+
this._parentChanges.complete();
|
|
296
|
+
this.ngUnsubscribe.next();
|
|
297
|
+
this.ngUnsubscribe.complete();
|
|
298
|
+
}
|
|
299
|
+
/**
|
|
300
|
+
* This event is triggered when child nodes are added to the infinite
|
|
301
|
+
* scroll parent container. e.g., A repeating list of elements was added.
|
|
302
|
+
* @param elementRef The infinite scroll element reference.
|
|
303
|
+
*/
|
|
304
|
+
parentChanges(elementRef) {
|
|
305
|
+
this.createObserver(elementRef.nativeElement);
|
|
306
|
+
return this._parentChanges;
|
|
307
|
+
}
|
|
308
|
+
/**
|
|
309
|
+
* This event is triggered when the provided element reference
|
|
310
|
+
* is visible (or scrolled to) within its scrollable parent container.
|
|
311
|
+
* @param elementRef The infinite scroll element reference.
|
|
312
|
+
*/
|
|
313
|
+
scrollTo(elementRef) {
|
|
314
|
+
const parent = this.findScrollableParent(elementRef.nativeElement);
|
|
315
|
+
return fromEvent(parent, 'scroll').pipe(takeUntil(this.ngUnsubscribe), filter(() => {
|
|
316
|
+
return this.isElementScrolledInView(elementRef.nativeElement, parent);
|
|
317
|
+
}), map(() => undefined) // Change to void return type
|
|
318
|
+
);
|
|
319
|
+
}
|
|
320
|
+
createObserver(element) {
|
|
321
|
+
this.observer = new MutationObserver((mutations) => {
|
|
322
|
+
const hasUpdates = !!mutations.find((mutation) => {
|
|
323
|
+
return (!element.contains(mutation.target) && mutation.addedNodes.length > 0);
|
|
324
|
+
});
|
|
325
|
+
if (hasUpdates) {
|
|
326
|
+
this._parentChanges.emit();
|
|
327
|
+
}
|
|
328
|
+
});
|
|
329
|
+
const windowObj = this.windowRef.nativeWindow;
|
|
330
|
+
const parent = this.findScrollableParent(element);
|
|
331
|
+
const observedParent = parent === windowObj ? windowObj.document.body : parent;
|
|
332
|
+
this.observer.observe(observedParent, {
|
|
333
|
+
childList: true,
|
|
334
|
+
subtree: true,
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
findScrollableParent(element) {
|
|
338
|
+
const regex = /(auto|scroll)/;
|
|
339
|
+
const windowObj = this.windowRef.nativeWindow;
|
|
340
|
+
const bodyObj = windowObj.document.body;
|
|
341
|
+
let style = windowObj.getComputedStyle(element);
|
|
342
|
+
let parent = element;
|
|
343
|
+
do {
|
|
344
|
+
parent = parent.parentNode;
|
|
345
|
+
style = windowObj.getComputedStyle(parent);
|
|
346
|
+
} while (!regex.test(style.overflow) &&
|
|
347
|
+
!regex.test(style.overflowY) &&
|
|
348
|
+
parent.parentNode &&
|
|
349
|
+
parent !== bodyObj);
|
|
350
|
+
if (parent === bodyObj) {
|
|
351
|
+
return windowObj;
|
|
352
|
+
}
|
|
353
|
+
return parent;
|
|
354
|
+
}
|
|
355
|
+
isElementScrolledInView(element, parentElement) {
|
|
356
|
+
const windowObj = this.windowRef.nativeWindow;
|
|
357
|
+
if (parentElement === windowObj) {
|
|
358
|
+
return (parentElement.pageYOffset + parentElement.innerHeight >
|
|
359
|
+
element.offsetTop);
|
|
360
|
+
}
|
|
361
|
+
const elementRect = element.getBoundingClientRect();
|
|
362
|
+
const parentRect = parentElement.getBoundingClientRect();
|
|
363
|
+
return elementRect.top < parentRect.top + parentRect.height;
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, deps: [{ token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
367
|
+
SkyInfiniteScrollDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollDomAdapterService });
|
|
368
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, decorators: [{
|
|
369
|
+
type: Injectable
|
|
370
|
+
}], ctorParameters: function () { return [{ type: i1$1.SkyAppWindowRef }]; } });
|
|
371
|
+
|
|
372
|
+
class SkyInfiniteScrollComponent {
|
|
373
|
+
constructor(changeDetector, elementRef, domAdapter) {
|
|
374
|
+
this.changeDetector = changeDetector;
|
|
375
|
+
this.elementRef = elementRef;
|
|
376
|
+
this.domAdapter = domAdapter;
|
|
377
|
+
/**
|
|
378
|
+
* Fires when scrolling triggers the need to load more data or when users select the button
|
|
379
|
+
* to load more data. This event only fires when the `enabled` property is set to `true`
|
|
380
|
+
* and data is not already loading.
|
|
381
|
+
*/
|
|
382
|
+
this.scrollEnd = new EventEmitter();
|
|
383
|
+
this.isWaiting = false;
|
|
384
|
+
this.ngUnsubscribe = new Subject();
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* Indicates whether to make the infinite scroll component active when more data is available
|
|
388
|
+
* to load. By default, infinite scroll is inactive and does not call the load function.
|
|
389
|
+
* @default false
|
|
390
|
+
*/
|
|
391
|
+
get enabled() {
|
|
392
|
+
return this._enabled || false;
|
|
393
|
+
}
|
|
394
|
+
set enabled(value) {
|
|
395
|
+
if (this._enabled !== value) {
|
|
396
|
+
this._enabled = value;
|
|
397
|
+
this.setListeners();
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Indicates whether data is loading because of a `scrollEnd` event. Setting the property
|
|
402
|
+
* to `true` disables new `scrollEnd` events from firing until it changes to `false`. If this
|
|
403
|
+
* property is not specified, the infinite scroll component watches the DOM for changes
|
|
404
|
+
* and fires `scrollEnd` events when changes occur on its parent DOM element. Relying
|
|
405
|
+
* on this default behavior could fire an excessive number of `scrollEnd` events
|
|
406
|
+
* if the DOM changes are not related to loading data, so we strongly recommend using this
|
|
407
|
+
* property to explicitly set the infinite scroll's loading state.
|
|
408
|
+
* @required
|
|
409
|
+
*/
|
|
410
|
+
get loading() {
|
|
411
|
+
return this._loading;
|
|
412
|
+
}
|
|
413
|
+
set loading(value) {
|
|
414
|
+
this._loading = value;
|
|
415
|
+
if (value !== undefined) {
|
|
416
|
+
this.isWaiting = value;
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
ngOnDestroy() {
|
|
420
|
+
this.enabled = false;
|
|
421
|
+
this.ngUnsubscribe.next();
|
|
422
|
+
this.ngUnsubscribe.complete();
|
|
423
|
+
}
|
|
424
|
+
startInfiniteScrollLoad() {
|
|
425
|
+
this.notifyScrollEnd();
|
|
426
|
+
}
|
|
427
|
+
notifyScrollEnd() {
|
|
428
|
+
this.isWaiting = true;
|
|
429
|
+
this.scrollEnd.emit();
|
|
430
|
+
this.changeDetector.markForCheck();
|
|
431
|
+
}
|
|
432
|
+
setListeners() {
|
|
433
|
+
if (this.enabled) {
|
|
434
|
+
// The user has scrolled to the infinite scroll element.
|
|
435
|
+
this.domAdapter
|
|
436
|
+
.scrollTo(this.elementRef)
|
|
437
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
438
|
+
.subscribe(() => {
|
|
439
|
+
if (!this.isWaiting && this.enabled) {
|
|
440
|
+
this.notifyScrollEnd();
|
|
441
|
+
}
|
|
442
|
+
});
|
|
443
|
+
// New items have been loaded into the parent element.
|
|
444
|
+
this.domAdapter
|
|
445
|
+
.parentChanges(this.elementRef)
|
|
446
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
447
|
+
.subscribe(() => {
|
|
448
|
+
if (!this.loading) {
|
|
449
|
+
this.isWaiting = false;
|
|
450
|
+
this.changeDetector.markForCheck();
|
|
451
|
+
}
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
else {
|
|
455
|
+
this.ngUnsubscribe.next();
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyInfiniteScrollDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
460
|
+
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
|
|
462
|
+
type: Component,
|
|
463
|
+
args: [{ selector: 'sky-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyInfiniteScrollDomAdapterService], 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"] }]
|
|
464
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyInfiniteScrollDomAdapterService }]; }, propDecorators: { enabled: [{
|
|
465
|
+
type: Input
|
|
466
|
+
}], loading: [{
|
|
467
|
+
type: Input
|
|
468
|
+
}], scrollEnd: [{
|
|
469
|
+
type: Output
|
|
470
|
+
}] } });
|
|
471
|
+
|
|
472
|
+
class SkyInfiniteScrollModule {
|
|
473
|
+
}
|
|
474
|
+
SkyInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
475
|
+
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollModule, declarations: [SkyInfiniteScrollComponent], imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule], exports: [SkyInfiniteScrollComponent] });
|
|
476
|
+
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollModule, imports: [[CommonModule, SkyListsResourcesModule, SkyWaitModule]] });
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInfiniteScrollModule, decorators: [{
|
|
478
|
+
type: NgModule,
|
|
479
|
+
args: [{
|
|
480
|
+
declarations: [SkyInfiniteScrollComponent],
|
|
481
|
+
imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule],
|
|
482
|
+
exports: [SkyInfiniteScrollComponent],
|
|
483
|
+
}]
|
|
484
|
+
}] });
|
|
485
|
+
|
|
486
|
+
class SkyPagingComponent {
|
|
487
|
+
constructor() {
|
|
488
|
+
/**
|
|
489
|
+
* Specifies the page number of the current page. Page numbers start at 1 and increment.
|
|
490
|
+
*/
|
|
491
|
+
this.currentPage = 1;
|
|
492
|
+
/**
|
|
493
|
+
* Specifies the total number of items across all pages.
|
|
494
|
+
*/
|
|
495
|
+
this.itemCount = 0;
|
|
496
|
+
/**
|
|
497
|
+
* Specifies the maximum number of pages to display in the pagination control.
|
|
498
|
+
*/
|
|
499
|
+
this.maxPages = 5;
|
|
500
|
+
/**
|
|
501
|
+
* Specifies the number of items to display per page.
|
|
502
|
+
*/
|
|
503
|
+
this.pageSize = 10;
|
|
504
|
+
/**
|
|
505
|
+
* Fires when the current page changes and emits the new current page.
|
|
506
|
+
*/
|
|
507
|
+
this.currentPageChange = new EventEmitter();
|
|
508
|
+
this.displayedPages = [];
|
|
509
|
+
this.pageCount = 0;
|
|
510
|
+
}
|
|
511
|
+
ngOnChanges(changes) {
|
|
512
|
+
this.setPage(this.currentPage);
|
|
513
|
+
}
|
|
514
|
+
setPage(pageNumber) {
|
|
515
|
+
const previousPage = this.currentPage;
|
|
516
|
+
this.setPageCount();
|
|
517
|
+
if (pageNumber < 1 || this.pageCount < 1) {
|
|
518
|
+
this.currentPage = 1;
|
|
519
|
+
}
|
|
520
|
+
else if (pageNumber > this.pageCount) {
|
|
521
|
+
this.currentPage = this.pageCount;
|
|
522
|
+
}
|
|
523
|
+
else {
|
|
524
|
+
this.currentPage = pageNumber;
|
|
525
|
+
}
|
|
526
|
+
this.setDisplayedPages();
|
|
527
|
+
if (previousPage !== this.currentPage) {
|
|
528
|
+
this.currentPageChange.emit(this.currentPage);
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
nextPage() {
|
|
532
|
+
this.setPage(this.currentPage + 1);
|
|
533
|
+
}
|
|
534
|
+
previousPage() {
|
|
535
|
+
this.setPage(this.currentPage - 1);
|
|
536
|
+
}
|
|
537
|
+
get isPreviousButtonDisabled() {
|
|
538
|
+
return this.currentPage === 1;
|
|
539
|
+
}
|
|
540
|
+
get isNextButtonDisabled() {
|
|
541
|
+
return this.currentPage === this.pageCount;
|
|
542
|
+
}
|
|
543
|
+
getDisplayedPageNumbers(pageCount, maxDisplayedPages, pageNumber) {
|
|
544
|
+
const pageIndex = pageNumber - 1;
|
|
545
|
+
const pageBounds = Math.floor(maxDisplayedPages / 2);
|
|
546
|
+
let upperBound = pageIndex + pageBounds;
|
|
547
|
+
let lowerBound = pageIndex - pageBounds;
|
|
548
|
+
if (maxDisplayedPages % 2 !== 0) {
|
|
549
|
+
upperBound += 1;
|
|
550
|
+
}
|
|
551
|
+
// Wrap negative values to increase the upperbound
|
|
552
|
+
if (lowerBound < 0) {
|
|
553
|
+
upperBound -= lowerBound;
|
|
554
|
+
lowerBound = 0;
|
|
555
|
+
}
|
|
556
|
+
// Wrap overflow to decrease the lowerbound
|
|
557
|
+
if (upperBound > pageCount) {
|
|
558
|
+
lowerBound -= upperBound - pageCount;
|
|
559
|
+
upperBound = pageCount;
|
|
560
|
+
}
|
|
561
|
+
// If both are the same ignore everything else and just display it all
|
|
562
|
+
if (pageCount < maxDisplayedPages) {
|
|
563
|
+
lowerBound = 0;
|
|
564
|
+
upperBound = pageCount;
|
|
565
|
+
}
|
|
566
|
+
const displayedPageNumbers = [];
|
|
567
|
+
for (let i = lowerBound; i < upperBound; i++) {
|
|
568
|
+
displayedPageNumbers.push(i + 1);
|
|
569
|
+
}
|
|
570
|
+
return displayedPageNumbers;
|
|
571
|
+
}
|
|
572
|
+
setPageCount() {
|
|
573
|
+
if (this.itemCount === 0 || this.pageSize === 0) {
|
|
574
|
+
this.pageCount = 0;
|
|
575
|
+
return;
|
|
576
|
+
}
|
|
577
|
+
this.pageCount = Math.ceil(this.itemCount / this.pageSize);
|
|
578
|
+
}
|
|
579
|
+
setDisplayedPages() {
|
|
580
|
+
this.displayedPages = this.getDisplayedPageNumbers(this.pageCount, this.maxPages, this.currentPage);
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
584
|
+
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-previous sky-box\"\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=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-next sky-box\"\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 });
|
|
585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPagingComponent, decorators: [{
|
|
586
|
+
type: Component,
|
|
587
|
+
args: [{ selector: 'sky-paging', changeDetection: ChangeDetectionStrategy.OnPush, 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=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-previous sky-box\"\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=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-next sky-box\"\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"] }]
|
|
588
|
+
}], propDecorators: { currentPage: [{
|
|
589
|
+
type: Input
|
|
590
|
+
}], itemCount: [{
|
|
591
|
+
type: Input
|
|
592
|
+
}], maxPages: [{
|
|
593
|
+
type: Input
|
|
594
|
+
}], pageSize: [{
|
|
595
|
+
type: Input
|
|
596
|
+
}], pagingLabel: [{
|
|
597
|
+
type: Input
|
|
598
|
+
}], currentPageChange: [{
|
|
599
|
+
type: Output
|
|
600
|
+
}] } });
|
|
601
|
+
|
|
602
|
+
class SkyPagingModule {
|
|
603
|
+
}
|
|
604
|
+
SkyPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPagingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
605
|
+
SkyPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPagingModule, declarations: [SkyPagingComponent], imports: [CommonModule,
|
|
606
|
+
SkyIconModule,
|
|
607
|
+
SkyListsResourcesModule,
|
|
608
|
+
SkyThemeModule], exports: [SkyPagingComponent] });
|
|
609
|
+
SkyPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPagingModule, imports: [[
|
|
610
|
+
CommonModule,
|
|
611
|
+
SkyIconModule,
|
|
612
|
+
SkyListsResourcesModule,
|
|
613
|
+
SkyThemeModule,
|
|
614
|
+
]] });
|
|
615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPagingModule, decorators: [{
|
|
616
|
+
type: NgModule,
|
|
617
|
+
args: [{
|
|
618
|
+
declarations: [SkyPagingComponent],
|
|
619
|
+
imports: [
|
|
620
|
+
CommonModule,
|
|
621
|
+
SkyIconModule,
|
|
622
|
+
SkyListsResourcesModule,
|
|
623
|
+
SkyThemeModule,
|
|
624
|
+
],
|
|
625
|
+
exports: [SkyPagingComponent],
|
|
626
|
+
}]
|
|
627
|
+
}] });
|
|
628
|
+
|
|
629
|
+
/**
|
|
630
|
+
* Displays content text when the repeater is expanded.
|
|
631
|
+
*/
|
|
632
|
+
class SkyRepeaterItemContentComponent {
|
|
633
|
+
}
|
|
634
|
+
SkyRepeaterItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
635
|
+
SkyRepeaterItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyRepeaterItemContentComponent, selector: "sky-repeater-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemContentComponent, decorators: [{
|
|
637
|
+
type: Component,
|
|
638
|
+
args: [{ selector: 'sky-repeater-item-content', template: "<ng-content></ng-content>\n" }]
|
|
639
|
+
}] });
|
|
640
|
+
|
|
641
|
+
/**
|
|
642
|
+
* Wraps and styles a
|
|
643
|
+
* [`skyux-dropdown` component](https://developer.blackbaud.com/skyux-popovers/docs/dropdown).
|
|
644
|
+
*/
|
|
645
|
+
/* istanbul ignore next */
|
|
646
|
+
/* Code coverage having problems with no statements in classes */
|
|
647
|
+
class SkyRepeaterItemContextMenuComponent {
|
|
648
|
+
}
|
|
649
|
+
SkyRepeaterItemContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
+
SkyRepeaterItemContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyRepeaterItemContextMenuComponent, selector: "sky-repeater-item-context-menu", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, decorators: [{
|
|
652
|
+
type: Component,
|
|
653
|
+
args: [{ selector: 'sky-repeater-item-context-menu', template: "<ng-content></ng-content>\n" }]
|
|
654
|
+
}] });
|
|
655
|
+
|
|
656
|
+
/**
|
|
657
|
+
* Displays a header inside the repeater item.
|
|
658
|
+
*/
|
|
659
|
+
class SkyRepeaterItemTitleComponent {
|
|
660
|
+
}
|
|
661
|
+
SkyRepeaterItemTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
662
|
+
SkyRepeaterItemTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyRepeaterItemTitleComponent, selector: "sky-repeater-item-title", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemTitleComponent, decorators: [{
|
|
664
|
+
type: Component,
|
|
665
|
+
args: [{ selector: 'sky-repeater-item-title', template: "<ng-content></ng-content>\n" }]
|
|
666
|
+
}] });
|
|
667
|
+
|
|
668
|
+
/**
|
|
669
|
+
* @internal
|
|
670
|
+
*/
|
|
671
|
+
class SkyRepeaterService {
|
|
672
|
+
constructor() {
|
|
673
|
+
this.activeItemChange = new BehaviorSubject(undefined);
|
|
674
|
+
this.activeItemIndexChange = new BehaviorSubject(undefined);
|
|
675
|
+
this.enableActiveState = false;
|
|
676
|
+
this.itemCollapseStateChange = new EventEmitter();
|
|
677
|
+
this.items = [];
|
|
678
|
+
this.orderChange = new BehaviorSubject(undefined);
|
|
679
|
+
}
|
|
680
|
+
ngOnDestroy() {
|
|
681
|
+
this.activeItemChange.complete();
|
|
682
|
+
this.itemCollapseStateChange.complete();
|
|
683
|
+
this.orderChange.complete();
|
|
684
|
+
}
|
|
685
|
+
activateItem(item) {
|
|
686
|
+
if (this.enableActiveState) {
|
|
687
|
+
/* istanbul ignore else */
|
|
688
|
+
if (item) {
|
|
689
|
+
const index = this.items.findIndex((i) => i === item);
|
|
690
|
+
this.activeItemIndexChange.next(index);
|
|
691
|
+
this.activeItemChange.next(item);
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
activateItemByIndex(index) {
|
|
696
|
+
/* istanbul ignore else */
|
|
697
|
+
if (this.enableActiveState) {
|
|
698
|
+
if (index === undefined) {
|
|
699
|
+
this.activeItemChange.next(undefined);
|
|
700
|
+
}
|
|
701
|
+
else {
|
|
702
|
+
const activeItem = this.items[index];
|
|
703
|
+
if (activeItem) {
|
|
704
|
+
this.activeItemChange.next(activeItem);
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
registerItem(item) {
|
|
710
|
+
this.items.push(item);
|
|
711
|
+
}
|
|
712
|
+
unregisterItem(item) {
|
|
713
|
+
const indexOfDestroyedItem = this.items.indexOf(item);
|
|
714
|
+
if (indexOfDestroyedItem > -1) {
|
|
715
|
+
this.items.splice(indexOfDestroyedItem, 1);
|
|
716
|
+
}
|
|
717
|
+
}
|
|
718
|
+
onItemCollapseStateChange(item) {
|
|
719
|
+
this.itemCollapseStateChange.emit(item);
|
|
720
|
+
}
|
|
721
|
+
getItemIndex(item) {
|
|
722
|
+
return this.items.indexOf(item);
|
|
723
|
+
}
|
|
724
|
+
registerOrderChange() {
|
|
725
|
+
this.orderChange.next();
|
|
726
|
+
}
|
|
727
|
+
reorderItem(oldIndex, newIndex) {
|
|
728
|
+
this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
732
|
+
SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterService });
|
|
733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterService, decorators: [{
|
|
734
|
+
type: Injectable
|
|
735
|
+
}] });
|
|
736
|
+
|
|
737
|
+
/**
|
|
738
|
+
* @internal
|
|
739
|
+
*/
|
|
740
|
+
class SkyRepeaterAdapterService {
|
|
741
|
+
constructor(repeaterService) {
|
|
742
|
+
this.repeaterService = repeaterService;
|
|
743
|
+
}
|
|
744
|
+
get repeaterItemGroupSelector() {
|
|
745
|
+
return '.sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;
|
|
746
|
+
}
|
|
747
|
+
focusElement(element) {
|
|
748
|
+
if (element instanceof ElementRef) {
|
|
749
|
+
element.nativeElement.focus();
|
|
750
|
+
}
|
|
751
|
+
else {
|
|
752
|
+
element.focus();
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
setRepeaterHost(hostRef) {
|
|
756
|
+
this.host = hostRef;
|
|
757
|
+
}
|
|
758
|
+
getRepeaterItemIndex(element) {
|
|
759
|
+
return this.getRepeaterItemArray().indexOf(element);
|
|
760
|
+
}
|
|
761
|
+
moveItemUp(element, top = false, steps = 1) {
|
|
762
|
+
const index = this.getRepeaterItemIndex(element);
|
|
763
|
+
if (index === 0) {
|
|
764
|
+
return;
|
|
765
|
+
}
|
|
766
|
+
let newIndex = index - steps;
|
|
767
|
+
if (top || newIndex < 0) {
|
|
768
|
+
newIndex = 0;
|
|
769
|
+
}
|
|
770
|
+
return this.moveItem(element, index, newIndex);
|
|
771
|
+
}
|
|
772
|
+
moveItemDown(element, steps = 1) {
|
|
773
|
+
const itemArray = this.getRepeaterItemArray();
|
|
774
|
+
const index = this.getRepeaterItemIndex(element);
|
|
775
|
+
if (index === itemArray.length - steps) {
|
|
776
|
+
return;
|
|
777
|
+
}
|
|
778
|
+
const newIndex = index + steps;
|
|
779
|
+
return this.moveItem(element, index, newIndex);
|
|
780
|
+
}
|
|
781
|
+
moveItem(element, oldIndex, newIndex) {
|
|
782
|
+
const repeaterDiv = this.host.nativeElement.querySelector('.sky-repeater');
|
|
783
|
+
repeaterDiv.removeChild(element);
|
|
784
|
+
const nextSibling = repeaterDiv.querySelectorAll(this.repeaterItemGroupSelector)[newIndex];
|
|
785
|
+
repeaterDiv.insertBefore(element, nextSibling);
|
|
786
|
+
this.repeaterService.reorderItem(oldIndex, newIndex);
|
|
787
|
+
return newIndex;
|
|
788
|
+
}
|
|
789
|
+
/**
|
|
790
|
+
* Returns an array of the immediate repeater item descendants. Excludes nested repeater items.
|
|
791
|
+
*/
|
|
792
|
+
getRepeaterItemArray() {
|
|
793
|
+
return Array.from(this.host.nativeElement.querySelectorAll(this.repeaterItemGroupSelector));
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
797
|
+
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterAdapterService });
|
|
798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
|
|
799
|
+
type: Injectable
|
|
800
|
+
}], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
|
|
801
|
+
|
|
802
|
+
let nextContentId = 0;
|
|
803
|
+
/**
|
|
804
|
+
* Creates an individual repeater item.
|
|
805
|
+
*/
|
|
806
|
+
class SkyRepeaterItemComponent {
|
|
807
|
+
constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
|
|
808
|
+
this.repeaterService = repeaterService;
|
|
809
|
+
this.changeDetector = changeDetector;
|
|
810
|
+
this.adapterService = adapterService;
|
|
811
|
+
this.elementRef = elementRef;
|
|
812
|
+
this.resourceService = resourceService;
|
|
813
|
+
/**
|
|
814
|
+
* Indicates whether users can change the order of the repeater item.
|
|
815
|
+
* The repeater component's `reorderable` property must also be set to `true`.
|
|
816
|
+
*/
|
|
817
|
+
this.reorderable = false;
|
|
818
|
+
/**
|
|
819
|
+
* Indicates whether to display a checkbox in the left of the repeater item.
|
|
820
|
+
*/
|
|
821
|
+
this.selectable = false;
|
|
822
|
+
/**
|
|
823
|
+
* Indicates whether to display an inline form within the repeater.
|
|
824
|
+
* Users can toggle between displaying and hiding the inline form.
|
|
825
|
+
*/
|
|
826
|
+
this.showInlineForm = false;
|
|
827
|
+
/**
|
|
828
|
+
* Fires when users collapse the repeater item.
|
|
829
|
+
*/
|
|
830
|
+
this.collapse = new EventEmitter();
|
|
831
|
+
/**
|
|
832
|
+
* Fires when users expand the repeater item.
|
|
833
|
+
*/
|
|
834
|
+
this.expand = new EventEmitter();
|
|
835
|
+
/**
|
|
836
|
+
* Fires when the repeater includes an inline form and users close it. This event emits
|
|
837
|
+
* [a `SkyInlineFormCloseArgs` type](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformcloseargs-properties).
|
|
838
|
+
*/
|
|
839
|
+
this.inlineFormClose = new EventEmitter();
|
|
840
|
+
/**
|
|
841
|
+
* Fires when users select or clear the checkbox for the repeater item.
|
|
842
|
+
*/
|
|
843
|
+
this.isSelectedChange = new EventEmitter();
|
|
844
|
+
this.contentId = `sky-repeater-item-content-${++nextContentId}`;
|
|
845
|
+
this.hasItemContent = false;
|
|
846
|
+
this.isActive = false;
|
|
847
|
+
this.keyboardReorderingEnabled = false;
|
|
848
|
+
this.ngUnsubscribe = new Subject();
|
|
849
|
+
this._isCollapsible = true;
|
|
850
|
+
this._isExpanded = true;
|
|
851
|
+
this._isSelected = false;
|
|
852
|
+
this.slideForExpanded(false);
|
|
853
|
+
forkJoin([
|
|
854
|
+
this.resourceService.getString('skyux_repeater_item_reorder_cancel'),
|
|
855
|
+
this.resourceService.getString('skyux_repeater_item_reorder_finish'),
|
|
856
|
+
this.resourceService.getString('skyux_repeater_item_reorder_instructions'),
|
|
857
|
+
this.resourceService.getString('skyux_repeater_item_reorder_operation'),
|
|
858
|
+
this.resourceService.getString('skyux_repeater_item_reorder_moved'),
|
|
859
|
+
]).subscribe((translatedStrings) => {
|
|
860
|
+
this.reorderCancelText = translatedStrings[0];
|
|
861
|
+
this.reorderFinishText = translatedStrings[1];
|
|
862
|
+
this.reorderStateDescription = translatedStrings[2];
|
|
863
|
+
this.reorderInstructions = translatedStrings[3];
|
|
864
|
+
this.reorderMovedText = translatedStrings[4];
|
|
865
|
+
this.reorderButtonLabel = this.reorderInstructions;
|
|
866
|
+
});
|
|
867
|
+
}
|
|
868
|
+
/**
|
|
869
|
+
* Indicates whether the repeater item is expanded.
|
|
870
|
+
* @default true
|
|
871
|
+
*/
|
|
872
|
+
set isExpanded(value) {
|
|
873
|
+
this.updateForExpanded(value, true);
|
|
874
|
+
}
|
|
875
|
+
get isExpanded() {
|
|
876
|
+
return this._isExpanded;
|
|
877
|
+
}
|
|
878
|
+
/**
|
|
879
|
+
* Indicates whether the repeater item's checkbox is selected.
|
|
880
|
+
* When users select the repeater item, the specified property on your model is updated accordingly.
|
|
881
|
+
* @default false
|
|
882
|
+
*/
|
|
883
|
+
set isSelected(value) {
|
|
884
|
+
if (value !== this._isSelected) {
|
|
885
|
+
this._isSelected = value;
|
|
886
|
+
this.isSelectedChange.emit(this._isSelected);
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
get isSelected() {
|
|
890
|
+
return this._isSelected;
|
|
891
|
+
}
|
|
892
|
+
set isCollapsible(value) {
|
|
893
|
+
if (this.isCollapsible !== value) {
|
|
894
|
+
this._isCollapsible = value;
|
|
895
|
+
/*istanbul ignore else */
|
|
896
|
+
if (!value) {
|
|
897
|
+
this.updateForExpanded(true, false);
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
this.changeDetector.markForCheck();
|
|
901
|
+
}
|
|
902
|
+
get isCollapsible() {
|
|
903
|
+
return this._isCollapsible;
|
|
904
|
+
}
|
|
905
|
+
get repeaterGroupClass() {
|
|
906
|
+
return 'sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;
|
|
907
|
+
}
|
|
908
|
+
ngOnInit() {
|
|
909
|
+
this.repeaterService.registerItem(this);
|
|
910
|
+
this.repeaterService.activeItemChange
|
|
911
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
912
|
+
.subscribe((item) => {
|
|
913
|
+
const newIsActiveValue = this === item;
|
|
914
|
+
if (newIsActiveValue !== this.isActive) {
|
|
915
|
+
this.isActive = newIsActiveValue;
|
|
916
|
+
this.changeDetector.markForCheck();
|
|
917
|
+
}
|
|
918
|
+
});
|
|
919
|
+
}
|
|
920
|
+
ngAfterViewInit() {
|
|
921
|
+
this.hasItemContent = this.repeaterItemContentComponents.length > 0;
|
|
922
|
+
this.updateExpandOnContentChange();
|
|
923
|
+
}
|
|
924
|
+
ngOnDestroy() {
|
|
925
|
+
this.collapse.complete();
|
|
926
|
+
this.expand.complete();
|
|
927
|
+
this.inlineFormClose.complete();
|
|
928
|
+
this.isSelectedChange.complete();
|
|
929
|
+
this.ngUnsubscribe.next();
|
|
930
|
+
this.ngUnsubscribe.complete();
|
|
931
|
+
this.repeaterService.unregisterItem(this);
|
|
932
|
+
}
|
|
933
|
+
headerClick() {
|
|
934
|
+
if (this.isCollapsible) {
|
|
935
|
+
this.updateForExpanded(!this.isExpanded, true);
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
chevronDirectionChange(direction) {
|
|
939
|
+
this.updateForExpanded(direction === 'up', true);
|
|
940
|
+
}
|
|
941
|
+
onRepeaterItemClick(event) {
|
|
942
|
+
// Only activate item if clicking on the title, content, or parent item div.
|
|
943
|
+
// This will avoid accidental activations when clicking inside interactive elements like
|
|
944
|
+
// the expand/collapse chevron, dropdown, inline-delete, etc...
|
|
945
|
+
if (event.target === this.itemRef.nativeElement ||
|
|
946
|
+
this.itemContentRef.nativeElement.contains(event.target) ||
|
|
947
|
+
this.itemHeaderRef.nativeElement.contains(event.target)) {
|
|
948
|
+
this.repeaterService.activateItem(this);
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
updateForExpanded(value, animate) {
|
|
952
|
+
if (this.isCollapsible === false && value === false) {
|
|
953
|
+
console.warn(`Setting isExpanded to false when the repeater item is not collapsible
|
|
954
|
+
will have no effect.`);
|
|
955
|
+
}
|
|
956
|
+
else if (this._isExpanded !== value) {
|
|
957
|
+
this._isExpanded = value;
|
|
958
|
+
if (this._isExpanded) {
|
|
959
|
+
this.expand.emit();
|
|
960
|
+
}
|
|
961
|
+
else {
|
|
962
|
+
this.collapse.emit();
|
|
963
|
+
}
|
|
964
|
+
this.repeaterService.onItemCollapseStateChange(this);
|
|
965
|
+
this.slideForExpanded(animate);
|
|
966
|
+
this.changeDetector.markForCheck();
|
|
967
|
+
}
|
|
968
|
+
}
|
|
969
|
+
onCheckboxChange(value) {
|
|
970
|
+
this.isSelected = value.checked;
|
|
971
|
+
}
|
|
972
|
+
onInlineFormClose(inlineFormCloseArgs) {
|
|
973
|
+
this.inlineFormClose.emit(inlineFormCloseArgs);
|
|
974
|
+
}
|
|
975
|
+
moveToTop(event) {
|
|
976
|
+
event.stopPropagation();
|
|
977
|
+
this.adapterService.moveItemUp(this.elementRef.nativeElement, true);
|
|
978
|
+
this.adapterService.focusElement(event.target);
|
|
979
|
+
this.repeaterService.registerOrderChange();
|
|
980
|
+
}
|
|
981
|
+
onReorderHandleKeyDown(event) {
|
|
982
|
+
/*istanbul ignore else */
|
|
983
|
+
if (event.key) {
|
|
984
|
+
switch (event.key.toLowerCase()) {
|
|
985
|
+
case ' ':
|
|
986
|
+
case 'enter':
|
|
987
|
+
this.keyboardToggleReorder();
|
|
988
|
+
event.preventDefault();
|
|
989
|
+
event.stopPropagation();
|
|
990
|
+
break;
|
|
991
|
+
case 'escape':
|
|
992
|
+
/* istanbul ignore else */
|
|
993
|
+
if (this.keyboardReorderingEnabled) {
|
|
994
|
+
this.keyboardReorderingEnabled = false;
|
|
995
|
+
this.revertReorderSteps();
|
|
996
|
+
this.reorderButtonLabel =
|
|
997
|
+
this.reorderCancelText + ' ' + this.reorderInstructions;
|
|
998
|
+
this.adapterService.focusElement(event.target);
|
|
999
|
+
event.preventDefault();
|
|
1000
|
+
event.stopPropagation();
|
|
1001
|
+
}
|
|
1002
|
+
break;
|
|
1003
|
+
case 'arrowup':
|
|
1004
|
+
if (this.keyboardReorderingEnabled) {
|
|
1005
|
+
this.keyboardReorderUp();
|
|
1006
|
+
event.preventDefault();
|
|
1007
|
+
event.stopPropagation();
|
|
1008
|
+
this.repeaterService.registerOrderChange();
|
|
1009
|
+
}
|
|
1010
|
+
break;
|
|
1011
|
+
case 'arrowdown':
|
|
1012
|
+
/* istanbul ignore else */
|
|
1013
|
+
if (this.keyboardReorderingEnabled) {
|
|
1014
|
+
this.keyboardReorderDown();
|
|
1015
|
+
event.preventDefault();
|
|
1016
|
+
event.stopPropagation();
|
|
1017
|
+
this.repeaterService.registerOrderChange();
|
|
1018
|
+
}
|
|
1019
|
+
break;
|
|
1020
|
+
case 'arrowleft':
|
|
1021
|
+
case 'arrowright':
|
|
1022
|
+
/* istanbul ignore else */
|
|
1023
|
+
if (this.keyboardReorderingEnabled) {
|
|
1024
|
+
event.preventDefault();
|
|
1025
|
+
event.stopPropagation();
|
|
1026
|
+
}
|
|
1027
|
+
break;
|
|
1028
|
+
/* istanbul ignore next */
|
|
1029
|
+
default:
|
|
1030
|
+
break;
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
onReorderHandleBlur(event) {
|
|
1035
|
+
this.keyboardReorderingEnabled = false;
|
|
1036
|
+
this.revertReorderSteps();
|
|
1037
|
+
this.reorderButtonLabel = this.reorderInstructions;
|
|
1038
|
+
this.reorderState = undefined;
|
|
1039
|
+
}
|
|
1040
|
+
onItemKeyDown(event) {
|
|
1041
|
+
/*istanbul ignore else */
|
|
1042
|
+
if (event.key) {
|
|
1043
|
+
switch (event.key.toLowerCase()) {
|
|
1044
|
+
case ' ':
|
|
1045
|
+
case 'enter':
|
|
1046
|
+
/* istanbul ignore else */
|
|
1047
|
+
/* Sanity check */
|
|
1048
|
+
// Space/enter should never execute unless focused on the parent item element.
|
|
1049
|
+
if (event.target === this.itemRef.nativeElement) {
|
|
1050
|
+
if (this.selectable) {
|
|
1051
|
+
this.isSelected = !this.isSelected;
|
|
1052
|
+
}
|
|
1053
|
+
this.repeaterService.activateItem(this);
|
|
1054
|
+
event.preventDefault();
|
|
1055
|
+
}
|
|
1056
|
+
break;
|
|
1057
|
+
/* istanbul ignore next */
|
|
1058
|
+
default:
|
|
1059
|
+
break;
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
slideForExpanded(animate) {
|
|
1064
|
+
this.slideDirection = this.isExpanded ? 'down' : 'up';
|
|
1065
|
+
}
|
|
1066
|
+
keyboardReorderUp() {
|
|
1067
|
+
this.reorderCurrentIndex = this.adapterService.moveItemUp(this.elementRef.nativeElement);
|
|
1068
|
+
this.reorderSteps--;
|
|
1069
|
+
this.adapterService.focusElement(this.grabHandle);
|
|
1070
|
+
this.keyboardReorderingEnabled = true;
|
|
1071
|
+
this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
|
|
1072
|
+
}
|
|
1073
|
+
keyboardReorderDown() {
|
|
1074
|
+
this.reorderCurrentIndex = this.adapterService.moveItemDown(this.elementRef.nativeElement);
|
|
1075
|
+
this.reorderSteps++;
|
|
1076
|
+
this.adapterService.focusElement(this.grabHandle);
|
|
1077
|
+
this.keyboardReorderingEnabled = true;
|
|
1078
|
+
this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
|
|
1079
|
+
}
|
|
1080
|
+
keyboardToggleReorder() {
|
|
1081
|
+
this.keyboardReorderingEnabled = !this.keyboardReorderingEnabled;
|
|
1082
|
+
this.reorderSteps = 0;
|
|
1083
|
+
if (this.keyboardReorderingEnabled) {
|
|
1084
|
+
this.reorderState = this.reorderStateDescription;
|
|
1085
|
+
}
|
|
1086
|
+
else {
|
|
1087
|
+
this.reorderState = `${this.reorderFinishText} ${this.reorderCurrentIndex + 1} ${this.reorderInstructions}`;
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
1090
|
+
revertReorderSteps() {
|
|
1091
|
+
if (this.reorderSteps < 0) {
|
|
1092
|
+
this.adapterService.moveItemDown(this.elementRef.nativeElement, Math.abs(this.reorderSteps));
|
|
1093
|
+
}
|
|
1094
|
+
else if (this.reorderSteps > 0) {
|
|
1095
|
+
this.adapterService.moveItemUp(this.elementRef.nativeElement, false, this.reorderSteps);
|
|
1096
|
+
}
|
|
1097
|
+
this.repeaterService.registerOrderChange();
|
|
1098
|
+
}
|
|
1099
|
+
updateExpandOnContentChange() {
|
|
1100
|
+
this.repeaterItemContentComponents.changes
|
|
1101
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1102
|
+
.subscribe(() => {
|
|
1103
|
+
this.hasItemContent = this.repeaterItemContentComponents.length > 0;
|
|
1104
|
+
/* istanbul ignore next */
|
|
1105
|
+
this.isCollapsible =
|
|
1106
|
+
this.hasItemContent && this.repeaterService.expandMode !== 'none';
|
|
1107
|
+
/* istanbul ignore else */
|
|
1108
|
+
if (this.repeaterService.expandMode === 'single') {
|
|
1109
|
+
this.repeaterService.onItemCollapseStateChange(this);
|
|
1110
|
+
}
|
|
1111
|
+
});
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i4.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1115
|
+
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { itemName: "itemName", 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 [attr.aria-label]=\"itemName\"\n [attr.aria-selected]=\"selectable ? isSelected : null\"\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-screen-reader-only\"\n [id]=\"contentId + '-reorder-state'\"\n >\n {{ reorderState }}\n </span>\n <span\n class=\"sky-screen-reader-only\"\n [id]=\"contentId + '-reorder-instructions'\"\n >{{ reorderButtonLabel }}</span\n >\n <button\n class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n type=\"button\"\n [attr.aria-describedby]=\"contentId + '-reorder-instructions'\"\n [attr.aria-label]=\"\n itemName\n ? ('skyux_repeater_item_reorder_label' | skyLibResources: itemName)\n : ('skyux_repeater_item_reorder_label_default' | skyLibResources)\n \"\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]=\"\n itemName\n ? ('skyux_repeater_item_checkbox_label' | skyLibResources: itemName)\n : ('skyux_repeater_item_checkbox_label_default' | skyLibResources)\n \"\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 itemName\n ? ('skyux_repeater_item_reorder_top_label'\n | skyLibResources: itemName)\n : ('skyux_repeater_item_reorder_top_label_default'\n | 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 [ariaControls]=\"contentId\"\n [ariaLabel]=\"\n itemName\n ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n : ('skyux_repeater_item_expand_default' | skyLibResources)\n \"\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-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: ["ariaControls", "ariaLabel", "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 });
|
|
1116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
|
|
1117
|
+
type: Component,
|
|
1118
|
+
args: [{ selector: 'sky-repeater-item', animations: [skyAnimationSlide], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-repeater-item sky-padding-even-default\"\n role=\"option\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-selected]=\"selectable ? isSelected : null\"\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-screen-reader-only\"\n [id]=\"contentId + '-reorder-state'\"\n >\n {{ reorderState }}\n </span>\n <span\n class=\"sky-screen-reader-only\"\n [id]=\"contentId + '-reorder-instructions'\"\n >{{ reorderButtonLabel }}</span\n >\n <button\n class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n type=\"button\"\n [attr.aria-describedby]=\"contentId + '-reorder-instructions'\"\n [attr.aria-label]=\"\n itemName\n ? ('skyux_repeater_item_reorder_label' | skyLibResources: itemName)\n : ('skyux_repeater_item_reorder_label_default' | skyLibResources)\n \"\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]=\"\n itemName\n ? ('skyux_repeater_item_checkbox_label' | skyLibResources: itemName)\n : ('skyux_repeater_item_checkbox_label_default' | skyLibResources)\n \"\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 itemName\n ? ('skyux_repeater_item_reorder_top_label'\n | skyLibResources: itemName)\n : ('skyux_repeater_item_reorder_top_label_default'\n | 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 [ariaControls]=\"contentId\"\n [ariaLabel]=\"\n itemName\n ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n : ('skyux_repeater_item_expand_default' | skyLibResources)\n \"\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-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"] }]
|
|
1119
|
+
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i4.SkyLibResourcesService }]; }, propDecorators: { itemName: [{
|
|
1120
|
+
type: Input
|
|
1121
|
+
}], inlineFormConfig: [{
|
|
1122
|
+
type: Input
|
|
1123
|
+
}], inlineFormTemplate: [{
|
|
1124
|
+
type: Input
|
|
1125
|
+
}], isExpanded: [{
|
|
1126
|
+
type: Input
|
|
1127
|
+
}], isSelected: [{
|
|
1128
|
+
type: Input
|
|
1129
|
+
}], reorderable: [{
|
|
1130
|
+
type: Input
|
|
1131
|
+
}], selectable: [{
|
|
1132
|
+
type: Input
|
|
1133
|
+
}], showInlineForm: [{
|
|
1134
|
+
type: Input
|
|
1135
|
+
}], tag: [{
|
|
1136
|
+
type: Input
|
|
1137
|
+
}], collapse: [{
|
|
1138
|
+
type: Output
|
|
1139
|
+
}], expand: [{
|
|
1140
|
+
type: Output
|
|
1141
|
+
}], inlineFormClose: [{
|
|
1142
|
+
type: Output
|
|
1143
|
+
}], isSelectedChange: [{
|
|
1144
|
+
type: Output
|
|
1145
|
+
}], contextMenu: [{
|
|
1146
|
+
type: ContentChild,
|
|
1147
|
+
args: [SkyRepeaterItemContextMenuComponent, { read: ElementRef }]
|
|
1148
|
+
}], repeaterGroupClass: [{
|
|
1149
|
+
type: HostBinding,
|
|
1150
|
+
args: ['class']
|
|
1151
|
+
}], grabHandle: [{
|
|
1152
|
+
type: ViewChild,
|
|
1153
|
+
args: ['grabHandle', { read: ElementRef }]
|
|
1154
|
+
}], itemContentRef: [{
|
|
1155
|
+
type: ViewChild,
|
|
1156
|
+
args: ['itemContentRef', { read: ElementRef }]
|
|
1157
|
+
}], itemHeaderRef: [{
|
|
1158
|
+
type: ViewChild,
|
|
1159
|
+
args: ['itemHeaderRef', { read: ElementRef }]
|
|
1160
|
+
}], itemRef: [{
|
|
1161
|
+
type: ViewChild,
|
|
1162
|
+
args: ['itemRef', { read: ElementRef }]
|
|
1163
|
+
}], repeaterItemContentComponents: [{
|
|
1164
|
+
type: ContentChildren,
|
|
1165
|
+
args: [SkyRepeaterItemContentComponent]
|
|
1166
|
+
}] } });
|
|
1167
|
+
|
|
1168
|
+
let uniqueId = 0;
|
|
1169
|
+
/**
|
|
1170
|
+
* Creates a container to display repeater items.
|
|
1171
|
+
*/
|
|
1172
|
+
class SkyRepeaterComponent {
|
|
1173
|
+
constructor(changeDetector, repeaterService, adapterService, dragulaService, elementRef, renderer) {
|
|
1174
|
+
this.changeDetector = changeDetector;
|
|
1175
|
+
this.repeaterService = repeaterService;
|
|
1176
|
+
this.adapterService = adapterService;
|
|
1177
|
+
this.dragulaService = dragulaService;
|
|
1178
|
+
this.elementRef = elementRef;
|
|
1179
|
+
this.renderer = renderer;
|
|
1180
|
+
/**
|
|
1181
|
+
* Indicates whether users can change the order of items in the repeater list.
|
|
1182
|
+
* Each repeater item also has `reorderable` property to indicate whether
|
|
1183
|
+
* users can change its order.
|
|
1184
|
+
*/
|
|
1185
|
+
this.reorderable = false;
|
|
1186
|
+
/**
|
|
1187
|
+
* Fires when the active repeater item changes.
|
|
1188
|
+
*/
|
|
1189
|
+
this.activeIndexChange = new EventEmitter();
|
|
1190
|
+
/**
|
|
1191
|
+
* Fires when users change the order of repeater items.
|
|
1192
|
+
* This event emits an ordered array of the `tag` properties that the consumer provides for each repeater item.
|
|
1193
|
+
*/
|
|
1194
|
+
this.orderChange = new EventEmitter();
|
|
1195
|
+
this.dragulaUnsubscribe = new Subject();
|
|
1196
|
+
this.ngUnsubscribe = new Subject();
|
|
1197
|
+
this._expandMode = 'none';
|
|
1198
|
+
this.dragulaGroupName = `sky-repeater-dragula-${++uniqueId}`;
|
|
1199
|
+
this.repeaterService.itemCollapseStateChange
|
|
1200
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1201
|
+
.subscribe((item) => {
|
|
1202
|
+
if (this.expandMode === 'single' && item.isExpanded) {
|
|
1203
|
+
this.items.forEach((otherItem) => {
|
|
1204
|
+
if (otherItem !== item &&
|
|
1205
|
+
otherItem.isExpanded &&
|
|
1206
|
+
otherItem.isCollapsible) {
|
|
1207
|
+
otherItem.isExpanded = false;
|
|
1208
|
+
}
|
|
1209
|
+
});
|
|
1210
|
+
}
|
|
1211
|
+
});
|
|
1212
|
+
this.repeaterService.activeItemIndexChange
|
|
1213
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1214
|
+
.subscribe((index) => {
|
|
1215
|
+
if (index !== this.activeIndex) {
|
|
1216
|
+
this.activeIndex = index;
|
|
1217
|
+
this.activeIndexChange.emit(index);
|
|
1218
|
+
}
|
|
1219
|
+
});
|
|
1220
|
+
this.repeaterService.orderChange
|
|
1221
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1222
|
+
.subscribe(() => {
|
|
1223
|
+
this.emitTags();
|
|
1224
|
+
});
|
|
1225
|
+
this.repeaterService.repeaterGroupId = uniqueId;
|
|
1226
|
+
this.updateForExpandMode();
|
|
1227
|
+
this.adapterService.setRepeaterHost(this.elementRef);
|
|
1228
|
+
this.initializeDragAndDrop();
|
|
1229
|
+
}
|
|
1230
|
+
/**
|
|
1231
|
+
* Specifies a layout to determine which repeater items are expanded by default and whether
|
|
1232
|
+
* repeater items are expandable and collapsible. Collapsed items display titles only.
|
|
1233
|
+
* The valid options are `multiple`, `none`, and `single`.
|
|
1234
|
+
* - `multiple` loads repeater items in an expanded state unless `isExpanded` is set to
|
|
1235
|
+
* `false` for a repeater item. This layout allows users to expand and collapse
|
|
1236
|
+
* as many repeater items as necessary. It is best-suited to repeater items where body
|
|
1237
|
+
* content is important but users don't always need to see it.
|
|
1238
|
+
* - `none` loads all repeater items in an expanded state and does not allow users to
|
|
1239
|
+
* collapse them. This default layout provides the quickest access to the details in the
|
|
1240
|
+
* repeater items. It is best-suited to repeater items with concise content
|
|
1241
|
+
* that users need to view frequently.
|
|
1242
|
+
* - `single` loads one repeater item in an expanded state and collapses all others.
|
|
1243
|
+
* The expanded repeater item is the first one where `isExpanded` is set to `true`. This layout
|
|
1244
|
+
* allows users to expand one item at a time. It provides the most compact view and is
|
|
1245
|
+
* best-suited to repeater items where the most important information is in the titles
|
|
1246
|
+
* and users only occasionally need to view the body content.
|
|
1247
|
+
* @default "none"
|
|
1248
|
+
*/
|
|
1249
|
+
set expandMode(value) {
|
|
1250
|
+
this.repeaterService.expandMode = value;
|
|
1251
|
+
this._expandMode = value;
|
|
1252
|
+
this.updateForExpandMode();
|
|
1253
|
+
}
|
|
1254
|
+
get expandMode() {
|
|
1255
|
+
return this._expandMode || 'none';
|
|
1256
|
+
}
|
|
1257
|
+
ngAfterContentInit() {
|
|
1258
|
+
// If activeIndex has been set on init, call service to activate the appropriate item.
|
|
1259
|
+
setTimeout(() => {
|
|
1260
|
+
if (this.activeIndex || this.activeIndex === 0) {
|
|
1261
|
+
this.repeaterService.activateItemByIndex(this.activeIndex);
|
|
1262
|
+
}
|
|
1263
|
+
if (this.reorderable && !this.everyItemHasTag()) {
|
|
1264
|
+
console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
|
|
1265
|
+
}
|
|
1266
|
+
});
|
|
1267
|
+
// HACK: Not updating for expand mode in a timeout causes an error.
|
|
1268
|
+
// https://github.com/angular/angular/issues/6005
|
|
1269
|
+
this.items.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1270
|
+
setTimeout(() => {
|
|
1271
|
+
if (this.items.last) {
|
|
1272
|
+
this.updateForExpandMode(this.items.last);
|
|
1273
|
+
this.items.last.reorderable = this.reorderable;
|
|
1274
|
+
}
|
|
1275
|
+
if (this.activeIndex !== undefined) {
|
|
1276
|
+
this.repeaterService.activateItemByIndex(this.activeIndex);
|
|
1277
|
+
}
|
|
1278
|
+
});
|
|
1279
|
+
});
|
|
1280
|
+
setTimeout(() => {
|
|
1281
|
+
this.updateForExpandMode();
|
|
1282
|
+
this.items.forEach((item) => {
|
|
1283
|
+
item.reorderable = this.reorderable;
|
|
1284
|
+
});
|
|
1285
|
+
}, 0);
|
|
1286
|
+
}
|
|
1287
|
+
ngOnChanges(changes) {
|
|
1288
|
+
if (changes['activeIndex']) {
|
|
1289
|
+
this.repeaterService.enableActiveState = true;
|
|
1290
|
+
if (changes['activeIndex'].currentValue !==
|
|
1291
|
+
changes['activeIndex'].previousValue) {
|
|
1292
|
+
this.repeaterService.activateItemByIndex(this.activeIndex);
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1295
|
+
if (changes.reorderable) {
|
|
1296
|
+
if (this.items) {
|
|
1297
|
+
this.items.forEach((item) => (item.reorderable = this.reorderable));
|
|
1298
|
+
}
|
|
1299
|
+
this.changeDetector.markForCheck();
|
|
1300
|
+
}
|
|
1301
|
+
}
|
|
1302
|
+
ngOnDestroy() {
|
|
1303
|
+
this.ngUnsubscribe.next();
|
|
1304
|
+
this.ngUnsubscribe.complete();
|
|
1305
|
+
this.destroyDragAndDrop();
|
|
1306
|
+
}
|
|
1307
|
+
updateForExpandMode(itemAdded) {
|
|
1308
|
+
if (this.items) {
|
|
1309
|
+
let foundExpanded = false;
|
|
1310
|
+
const isCollapsible = this.expandMode !== 'none';
|
|
1311
|
+
const isSingle = this.expandMode === 'single';
|
|
1312
|
+
// Keep any newly-added expanded item expanded and collapse the rest.
|
|
1313
|
+
if (itemAdded && itemAdded.isExpanded) {
|
|
1314
|
+
foundExpanded = true;
|
|
1315
|
+
}
|
|
1316
|
+
this.items.forEach((item) => {
|
|
1317
|
+
item.isCollapsible = isCollapsible && !!item.hasItemContent;
|
|
1318
|
+
if (item !== itemAdded && isSingle && item.isExpanded) {
|
|
1319
|
+
if (foundExpanded) {
|
|
1320
|
+
item.updateForExpanded(false, false);
|
|
1321
|
+
}
|
|
1322
|
+
foundExpanded = true;
|
|
1323
|
+
}
|
|
1324
|
+
});
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
initializeDragAndDrop() {
|
|
1328
|
+
/* Sanity check that we haven't already set up dragging abilities */
|
|
1329
|
+
/* istanbul ignore else */
|
|
1330
|
+
if (!this.dragulaService.find(this.dragulaGroupName)) {
|
|
1331
|
+
this.dragulaService.setOptions(this.dragulaGroupName, {
|
|
1332
|
+
moves: (el, container, handle) => {
|
|
1333
|
+
const target = el.querySelector('.sky-repeater-item-grab-handle');
|
|
1334
|
+
return this.reorderable && target && target.contains(handle);
|
|
1335
|
+
},
|
|
1336
|
+
});
|
|
1337
|
+
}
|
|
1338
|
+
let draggedItemIndex;
|
|
1339
|
+
this.dragulaService.drag
|
|
1340
|
+
.pipe(takeUntil(this.dragulaUnsubscribe))
|
|
1341
|
+
.subscribe(([groupName, subject]) => {
|
|
1342
|
+
/* istanbul ignore else */
|
|
1343
|
+
if (groupName === this.dragulaGroupName) {
|
|
1344
|
+
this.renderer.addClass(subject, 'sky-repeater-item-dragging');
|
|
1345
|
+
draggedItemIndex = this.adapterService.getRepeaterItemIndex(subject);
|
|
1346
|
+
}
|
|
1347
|
+
});
|
|
1348
|
+
this.dragulaService.dragend
|
|
1349
|
+
.pipe(takeUntil(this.dragulaUnsubscribe))
|
|
1350
|
+
.subscribe(([groupName, subject]) => {
|
|
1351
|
+
/* istanbul ignore else */
|
|
1352
|
+
if (groupName === this.dragulaGroupName) {
|
|
1353
|
+
this.renderer.removeClass(subject, 'sky-repeater-item-dragging');
|
|
1354
|
+
const newItemIndex = this.adapterService.getRepeaterItemIndex(subject);
|
|
1355
|
+
/* sanity check */
|
|
1356
|
+
/* istanbul ignore else */
|
|
1357
|
+
if (draggedItemIndex >= 0) {
|
|
1358
|
+
this.repeaterService.reorderItem(draggedItemIndex, newItemIndex);
|
|
1359
|
+
draggedItemIndex = undefined;
|
|
1360
|
+
}
|
|
1361
|
+
this.emitTags();
|
|
1362
|
+
}
|
|
1363
|
+
});
|
|
1364
|
+
}
|
|
1365
|
+
destroyDragAndDrop() {
|
|
1366
|
+
this.dragulaUnsubscribe.next();
|
|
1367
|
+
this.dragulaUnsubscribe.complete();
|
|
1368
|
+
this.dragulaUnsubscribe = undefined;
|
|
1369
|
+
/* Sanity check that we have set up dragging abilities */
|
|
1370
|
+
/* istanbul ignore else */
|
|
1371
|
+
if (this.dragulaService.find(this.dragulaGroupName)) {
|
|
1372
|
+
this.dragulaService.destroy(this.dragulaGroupName);
|
|
1373
|
+
}
|
|
1374
|
+
}
|
|
1375
|
+
emitTags() {
|
|
1376
|
+
const tags = this.repeaterService.items.map((item) => item.tag);
|
|
1377
|
+
this.orderChange.emit(tags);
|
|
1378
|
+
}
|
|
1379
|
+
everyItemHasTag() {
|
|
1380
|
+
/* sanity check */
|
|
1381
|
+
/* istanbul ignore if */
|
|
1382
|
+
if (!this.items || this.items.length === 0) {
|
|
1383
|
+
return false;
|
|
1384
|
+
}
|
|
1385
|
+
return this.items.toArray().every((item) => {
|
|
1386
|
+
return item.tag !== undefined;
|
|
1387
|
+
});
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1390
|
+
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
1391
|
+
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
1392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
|
|
1393
|
+
type: Component,
|
|
1394
|
+
args: [{ selector: 'sky-repeater', providers: [SkyRepeaterService, SkyRepeaterAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
1395
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyRepeaterService }, { type: SkyRepeaterAdapterService }, { type: i3$1.DragulaService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { activeIndex: [{
|
|
1396
|
+
type: Input
|
|
1397
|
+
}], ariaLabel: [{
|
|
1398
|
+
type: Input
|
|
1399
|
+
}], reorderable: [{
|
|
1400
|
+
type: Input
|
|
1401
|
+
}], expandMode: [{
|
|
1402
|
+
type: Input
|
|
1403
|
+
}], activeIndexChange: [{
|
|
1404
|
+
type: Output
|
|
1405
|
+
}], orderChange: [{
|
|
1406
|
+
type: Output
|
|
1407
|
+
}], items: [{
|
|
1408
|
+
type: ContentChildren,
|
|
1409
|
+
args: [SkyRepeaterItemComponent]
|
|
1410
|
+
}] } });
|
|
1411
|
+
|
|
1412
|
+
class SkyRepeaterModule {
|
|
1413
|
+
}
|
|
1414
|
+
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1415
|
+
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterModule, declarations: [SkyRepeaterComponent,
|
|
1416
|
+
SkyRepeaterItemComponent,
|
|
1417
|
+
SkyRepeaterItemContentComponent,
|
|
1418
|
+
SkyRepeaterItemContextMenuComponent,
|
|
1419
|
+
SkyRepeaterItemTitleComponent], imports: [CommonModule,
|
|
1420
|
+
DragulaModule,
|
|
1421
|
+
SkyChevronModule,
|
|
1422
|
+
SkyCheckboxModule,
|
|
1423
|
+
SkyIconModule,
|
|
1424
|
+
SkyInlineFormModule,
|
|
1425
|
+
SkyListsResourcesModule], exports: [SkyRepeaterComponent,
|
|
1426
|
+
SkyRepeaterItemComponent,
|
|
1427
|
+
SkyRepeaterItemContentComponent,
|
|
1428
|
+
SkyRepeaterItemContextMenuComponent,
|
|
1429
|
+
SkyRepeaterItemTitleComponent] });
|
|
1430
|
+
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterModule, imports: [[
|
|
1431
|
+
CommonModule,
|
|
1432
|
+
DragulaModule,
|
|
1433
|
+
SkyChevronModule,
|
|
1434
|
+
SkyCheckboxModule,
|
|
1435
|
+
SkyIconModule,
|
|
1436
|
+
SkyInlineFormModule,
|
|
1437
|
+
SkyListsResourcesModule,
|
|
1438
|
+
]] });
|
|
1439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRepeaterModule, decorators: [{
|
|
1440
|
+
type: NgModule,
|
|
1441
|
+
args: [{
|
|
1442
|
+
declarations: [
|
|
1443
|
+
SkyRepeaterComponent,
|
|
1444
|
+
SkyRepeaterItemComponent,
|
|
1445
|
+
SkyRepeaterItemContentComponent,
|
|
1446
|
+
SkyRepeaterItemContextMenuComponent,
|
|
1447
|
+
SkyRepeaterItemTitleComponent,
|
|
1448
|
+
],
|
|
1449
|
+
imports: [
|
|
1450
|
+
CommonModule,
|
|
1451
|
+
DragulaModule,
|
|
1452
|
+
SkyChevronModule,
|
|
1453
|
+
SkyCheckboxModule,
|
|
1454
|
+
SkyIconModule,
|
|
1455
|
+
SkyInlineFormModule,
|
|
1456
|
+
SkyListsResourcesModule,
|
|
1457
|
+
],
|
|
1458
|
+
exports: [
|
|
1459
|
+
SkyRepeaterComponent,
|
|
1460
|
+
SkyRepeaterItemComponent,
|
|
1461
|
+
SkyRepeaterItemContentComponent,
|
|
1462
|
+
SkyRepeaterItemContextMenuComponent,
|
|
1463
|
+
SkyRepeaterItemTitleComponent,
|
|
1464
|
+
],
|
|
1465
|
+
}]
|
|
1466
|
+
}] });
|
|
1467
|
+
|
|
1468
|
+
/**
|
|
1469
|
+
* @internal
|
|
1470
|
+
*/
|
|
1471
|
+
class SkySortService {
|
|
1472
|
+
constructor() {
|
|
1473
|
+
this.selectedItem = new BehaviorSubject('');
|
|
1474
|
+
}
|
|
1475
|
+
selectItem(sortItem) {
|
|
1476
|
+
this.selectedItem.next(sortItem);
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1480
|
+
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortService });
|
|
1481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortService, decorators: [{
|
|
1482
|
+
type: Injectable
|
|
1483
|
+
}] });
|
|
1484
|
+
|
|
1485
|
+
const SORT_ITEM_ID_PREFIX = 'sky-sort-item-';
|
|
1486
|
+
let sortItemIdNumber = 0;
|
|
1487
|
+
class SkySortItemComponent {
|
|
1488
|
+
constructor(sortService, detector) {
|
|
1489
|
+
this.sortService = sortService;
|
|
1490
|
+
this.detector = detector;
|
|
1491
|
+
/**
|
|
1492
|
+
* Fires when a sort item is selected.
|
|
1493
|
+
*/
|
|
1494
|
+
this.itemSelect = new EventEmitter();
|
|
1495
|
+
this.isSelected = new BehaviorSubject(false);
|
|
1496
|
+
}
|
|
1497
|
+
ngOnInit() {
|
|
1498
|
+
sortItemIdNumber++;
|
|
1499
|
+
this.sortItemId = SORT_ITEM_ID_PREFIX + sortItemIdNumber.toString();
|
|
1500
|
+
this.subscription = this.sortService.selectedItem.subscribe((itemId) => {
|
|
1501
|
+
this.isSelected.next(itemId === this.sortItemId);
|
|
1502
|
+
this.detector.detectChanges();
|
|
1503
|
+
});
|
|
1504
|
+
if (this.active) {
|
|
1505
|
+
this.sortService.selectItem(this.sortItemId);
|
|
1506
|
+
}
|
|
1507
|
+
}
|
|
1508
|
+
ngOnChanges(changes) {
|
|
1509
|
+
if (changes &&
|
|
1510
|
+
changes['active'] &&
|
|
1511
|
+
changes['active'].currentValue &&
|
|
1512
|
+
changes['active'].currentValue !== changes['active'].previousValue) {
|
|
1513
|
+
this.sortService.selectItem(this.sortItemId);
|
|
1514
|
+
}
|
|
1515
|
+
}
|
|
1516
|
+
itemClicked() {
|
|
1517
|
+
this.sortService.selectItem(this.sortItemId);
|
|
1518
|
+
this.itemSelect.emit();
|
|
1519
|
+
}
|
|
1520
|
+
ngOnDestroy() {
|
|
1521
|
+
/* istanbul ignore else */
|
|
1522
|
+
/* sanity check */
|
|
1523
|
+
if (this.subscription) {
|
|
1524
|
+
this.subscription.unsubscribe();
|
|
1525
|
+
}
|
|
1526
|
+
}
|
|
1527
|
+
}
|
|
1528
|
+
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1529
|
+
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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:17px;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:17px;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 });
|
|
1530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1531
|
+
type: Component,
|
|
1532
|
+
args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, 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:17px;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:17px;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"] }]
|
|
1533
|
+
}], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
1534
|
+
type: Input
|
|
1535
|
+
}], itemSelect: [{
|
|
1536
|
+
type: Output
|
|
1537
|
+
}] } });
|
|
1538
|
+
|
|
1539
|
+
class SkySortMenuHeadingComponent {
|
|
1540
|
+
}
|
|
1541
|
+
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1542
|
+
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 } });
|
|
1543
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortMenuHeadingComponent, decorators: [{
|
|
1544
|
+
type: Component,
|
|
1545
|
+
args: [{ selector: 'sky-sort-menu-heading', 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"] }]
|
|
1546
|
+
}] });
|
|
1547
|
+
|
|
1548
|
+
class SkySortComponent {
|
|
1549
|
+
constructor() {
|
|
1550
|
+
/**
|
|
1551
|
+
* Indicates whether to display a "Sort" label beside the icon on the sort button.
|
|
1552
|
+
*/
|
|
1553
|
+
this.showButtonText = false;
|
|
1554
|
+
this.dropdownController = new Subject();
|
|
1555
|
+
}
|
|
1556
|
+
dropdownClicked() {
|
|
1557
|
+
this.dropdownController.next({
|
|
1558
|
+
type: SkyDropdownMessageType.Close,
|
|
1559
|
+
});
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1563
|
+
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 });
|
|
1564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1565
|
+
type: Component,
|
|
1566
|
+
args: [{ selector: 'sky-sort', providers: [SkySortService], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
1567
|
+
}], propDecorators: { showButtonText: [{
|
|
1568
|
+
type: Input
|
|
1569
|
+
}] } });
|
|
1570
|
+
|
|
1571
|
+
class SkySortModule {
|
|
1572
|
+
}
|
|
1573
|
+
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1574
|
+
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortModule, declarations: [SkySortComponent,
|
|
1575
|
+
SkySortItemComponent,
|
|
1576
|
+
SkySortMenuHeadingComponent], imports: [CommonModule,
|
|
1577
|
+
SkyDropdownModule,
|
|
1578
|
+
SkyIconModule,
|
|
1579
|
+
SkyIdModule,
|
|
1580
|
+
SkyListsResourcesModule,
|
|
1581
|
+
SkyThemeModule], exports: [SkySortComponent, SkySortItemComponent] });
|
|
1582
|
+
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortModule, imports: [[
|
|
1583
|
+
CommonModule,
|
|
1584
|
+
SkyDropdownModule,
|
|
1585
|
+
SkyIconModule,
|
|
1586
|
+
SkyIdModule,
|
|
1587
|
+
SkyListsResourcesModule,
|
|
1588
|
+
SkyThemeModule,
|
|
1589
|
+
]] });
|
|
1590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySortModule, decorators: [{
|
|
1591
|
+
type: NgModule,
|
|
1592
|
+
args: [{
|
|
1593
|
+
declarations: [
|
|
1594
|
+
SkySortComponent,
|
|
1595
|
+
SkySortItemComponent,
|
|
1596
|
+
SkySortMenuHeadingComponent,
|
|
1597
|
+
],
|
|
1598
|
+
imports: [
|
|
1599
|
+
CommonModule,
|
|
1600
|
+
SkyDropdownModule,
|
|
1601
|
+
SkyIconModule,
|
|
1602
|
+
SkyIdModule,
|
|
1603
|
+
SkyListsResourcesModule,
|
|
1604
|
+
SkyThemeModule,
|
|
1605
|
+
],
|
|
1606
|
+
exports: [SkySortComponent, SkySortItemComponent],
|
|
1607
|
+
}]
|
|
1608
|
+
}] });
|
|
1609
|
+
|
|
1610
|
+
/**
|
|
1611
|
+
* Generated bundle index. Do not edit.
|
|
1612
|
+
*/
|
|
1613
|
+
|
|
1614
|
+
export { SkyFilterModule, SkyInfiniteScrollModule, SkyPagingModule, SkyRepeaterModule, SkySortModule, SkyFilterButtonComponent as λ1, SkyRepeaterItemComponent as λ10, SkyRepeaterComponent as λ11, SkyRepeaterItemTitleComponent as λ12, SkySortItemComponent as λ13, SkySortComponent as λ14, SkyFilterInlineComponent as λ2, SkyFilterInlineItemComponent as λ3, SkyFilterSummaryItemComponent as λ4, SkyFilterSummaryComponent as λ5, SkyInfiniteScrollComponent as λ6, SkyPagingComponent as λ7, SkyRepeaterItemContentComponent as λ8, SkyRepeaterItemContextMenuComponent as λ9 };
|
|
1615
|
+
//# sourceMappingURL=skyux-lists.mjs.map
|