@skyux/lists 8.0.0-alpha.2 → 8.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +1921 -453
- package/esm2020/lib/modules/filter/filter-button.component.mjs +13 -13
- package/esm2020/lib/modules/filter/filter-inline-item.component.mjs +3 -3
- package/esm2020/lib/modules/filter/filter-inline.component.mjs +3 -3
- package/esm2020/lib/modules/filter/filter-summary-item.component.mjs +3 -3
- package/esm2020/lib/modules/filter/filter-summary.component.mjs +3 -3
- package/esm2020/lib/modules/filter/filter.module.mjs +4 -4
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll-dom-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll.component.mjs +23 -23
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll.module.mjs +4 -4
- package/esm2020/lib/modules/paging/paging.component.mjs +4 -4
- package/esm2020/lib/modules/paging/paging.module.mjs +4 -4
- package/esm2020/lib/modules/repeater/repeater-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/repeater/repeater-auto-scroll-options.mjs +2 -0
- package/esm2020/lib/modules/repeater/repeater-auto-scroll.service.mjs +17 -0
- package/esm2020/lib/modules/repeater/repeater-auto-scroller.mjs +2 -0
- package/esm2020/lib/modules/repeater/repeater-item-content.component.mjs +3 -3
- package/esm2020/lib/modules/repeater/repeater-item-context-menu.component.mjs +3 -3
- package/esm2020/lib/modules/repeater/repeater-item-title.component.mjs +3 -3
- package/esm2020/lib/modules/repeater/repeater-item.component.mjs +88 -86
- package/esm2020/lib/modules/repeater/repeater.component.mjs +109 -65
- package/esm2020/lib/modules/repeater/repeater.module.mjs +4 -4
- package/esm2020/lib/modules/repeater/repeater.service.mjs +4 -4
- package/esm2020/lib/modules/shared/sky-lists-resources.module.mjs +9 -7
- package/esm2020/lib/modules/sort/sort-item.component.mjs +5 -5
- package/esm2020/lib/modules/sort/sort-menu-heading.component.mjs +3 -3
- package/esm2020/lib/modules/sort/sort.component.mjs +3 -3
- package/esm2020/lib/modules/sort/sort.module.mjs +4 -4
- package/esm2020/lib/modules/sort/sort.service.mjs +3 -3
- package/esm2020/testing/filter/filter-testing.module.mjs +4 -4
- package/esm2020/testing/infinite-scroll/infinite-scroll-testing.module.mjs +4 -4
- package/esm2020/testing/paging/paging-fixture.mjs +9 -9
- package/esm2020/testing/paging/paging-testing.module.mjs +4 -4
- package/esm2020/testing/repeater/repeater-harness.mjs +1 -2
- package/esm2020/testing/repeater/repeater-item-harness.mjs +84 -4
- package/esm2020/testing/sort/sort-fixture.mjs +8 -8
- package/esm2020/testing/sort/sort-testing.module.mjs +4 -4
- package/fesm2015/skyux-lists-testing.mjs +133 -35
- package/fesm2015/skyux-lists-testing.mjs.map +1 -1
- package/fesm2015/skyux-lists.mjs +321 -259
- package/fesm2015/skyux-lists.mjs.map +1 -1
- package/fesm2020/skyux-lists-testing.mjs +114 -35
- package/fesm2020/skyux-lists-testing.mjs.map +1 -1
- package/fesm2020/skyux-lists.mjs +320 -259
- package/fesm2020/skyux-lists.mjs.map +1 -1
- package/lib/modules/repeater/repeater-auto-scroll-options.d.ts +9 -0
- package/lib/modules/repeater/repeater-auto-scroll.service.d.ts +11 -0
- package/lib/modules/repeater/repeater-auto-scroller.d.ts +6 -0
- package/lib/modules/repeater/repeater-expand-mode-type.d.ts +1 -1
- package/lib/modules/repeater/repeater-item-roles.type.d.ts +1 -1
- package/lib/modules/repeater/repeater-item.component.d.ts +2 -1
- package/lib/modules/repeater/repeater-role.type.d.ts +1 -1
- package/lib/modules/repeater/repeater.component.d.ts +6 -8
- package/lib/modules/repeater/repeater.service.d.ts +2 -2
- package/package.json +18 -16
- package/testing/filter/lists-filter-fixture-button.d.ts +1 -1
- package/testing/repeater/repeater-harness.d.ts +0 -1
- package/testing/repeater/repeater-item-harness.d.ts +37 -2
package/fesm2015/skyux-lists.mjs
CHANGED
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewEncapsulation, ContentChild, HostBinding, ViewChild, ContentChildren, HostListener } from '@angular/core';
|
|
4
|
+
import { NgModule, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewEncapsulation, ContentChild, HostBinding, ViewChild, ContentChildren, HostListener, inject, ChangeDetectorRef, Renderer2 } from '@angular/core';
|
|
5
5
|
import * as i2 from '@skyux/indicators';
|
|
6
6
|
import { SkyIconModule, SkyTokensModule, SkyWaitModule, SkyChevronModule } from '@skyux/indicators';
|
|
7
7
|
import * as i3 from '@skyux/theme';
|
|
8
8
|
import { SkyThemeModule } from '@skyux/theme';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3$1 from '@skyux/i18n';
|
|
10
10
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
11
|
-
import {
|
|
11
|
+
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
12
12
|
import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
|
|
13
13
|
import { takeUntil, filter, map } from 'rxjs/operators';
|
|
14
14
|
import * as i1$1 from '@skyux/core';
|
|
15
|
-
import { SkyIdModule } from '@skyux/core';
|
|
16
|
-
import * as
|
|
15
|
+
import { SkyScrollableHostService, SkyLogService, SkyIdModule } from '@skyux/core';
|
|
16
|
+
import * as i2$1 from '@angular/cdk/observers';
|
|
17
17
|
import { ObserversModule } from '@angular/cdk/observers';
|
|
18
18
|
import * as i6 from '@skyux/forms';
|
|
19
19
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
20
20
|
import * as i7 from '@skyux/inline-form';
|
|
21
21
|
import { SkyInlineFormModule } from '@skyux/inline-form';
|
|
22
|
-
import * as
|
|
23
|
-
import {
|
|
22
|
+
import * as i1$2 from 'ng2-dragula';
|
|
23
|
+
import { DragulaService, DragulaModule } from 'ng2-dragula';
|
|
24
24
|
import { skyAnimationSlide } from '@skyux/animations';
|
|
25
|
-
import
|
|
25
|
+
import autoScroll from 'dom-autoscroller';
|
|
26
|
+
import * as i2$2 from '@skyux/popovers';
|
|
26
27
|
import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
|
|
27
28
|
|
|
28
29
|
/**
|
|
@@ -42,8 +43,10 @@ const RESOURCES = {
|
|
|
42
43
|
skyux_paging_page_link_aria_label: { message: 'Page {0}' },
|
|
43
44
|
skyux_paging_previous: { message: 'Previous' },
|
|
44
45
|
skyux_repeater_label: { message: 'List of items' },
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
skyux_repeater_item_collapse: { message: 'Collapse {0}' },
|
|
47
|
+
skyux_repeater_item_collapse_default: { message: 'Collapse' },
|
|
48
|
+
skyux_repeater_item_expand: { message: 'Expand {0}' },
|
|
49
|
+
skyux_repeater_item_expand_default: { message: 'Expand' },
|
|
47
50
|
skyux_repeater_item_checkbox_label: { message: 'Select {0}' },
|
|
48
51
|
skyux_repeater_item_checkbox_label_default: { message: 'Select row' },
|
|
49
52
|
skyux_repeater_item_reorder_cancel: {
|
|
@@ -80,16 +83,16 @@ class SkyListsResourcesProvider {
|
|
|
80
83
|
*/
|
|
81
84
|
class SkyListsResourcesModule {
|
|
82
85
|
}
|
|
83
|
-
SkyListsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
84
|
-
SkyListsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
85
|
-
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
86
|
+
SkyListsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyListsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
87
|
+
SkyListsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyListsResourcesModule, exports: [SkyI18nModule] });
|
|
88
|
+
SkyListsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyListsResourcesModule, providers: [
|
|
86
89
|
{
|
|
87
90
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
88
91
|
useClass: SkyListsResourcesProvider,
|
|
89
92
|
multi: true,
|
|
90
93
|
},
|
|
91
94
|
], imports: [SkyI18nModule] });
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyListsResourcesModule, decorators: [{
|
|
93
96
|
type: NgModule,
|
|
94
97
|
args: [{
|
|
95
98
|
exports: [SkyI18nModule],
|
|
@@ -106,6 +109,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
106
109
|
var _SkyFilterButtonComponent_defaultButtonId, _SkyFilterButtonComponent_filterButtonIdOrDefault;
|
|
107
110
|
let nextId = 0;
|
|
108
111
|
class SkyFilterButtonComponent {
|
|
112
|
+
/**
|
|
113
|
+
* The ID for the filter button.
|
|
114
|
+
*/
|
|
115
|
+
get filterButtonId() {
|
|
116
|
+
return __classPrivateFieldGet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, "f");
|
|
117
|
+
}
|
|
118
|
+
set filterButtonId(value) {
|
|
119
|
+
__classPrivateFieldSet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, value || __classPrivateFieldGet(this, _SkyFilterButtonComponent_defaultButtonId, "f"), "f");
|
|
120
|
+
}
|
|
109
121
|
constructor() {
|
|
110
122
|
/**
|
|
111
123
|
* Whether the filtering options are exposed.
|
|
@@ -136,23 +148,14 @@ class SkyFilterButtonComponent {
|
|
|
136
148
|
_SkyFilterButtonComponent_filterButtonIdOrDefault.set(this, void 0);
|
|
137
149
|
__classPrivateFieldSet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, __classPrivateFieldSet(this, _SkyFilterButtonComponent_defaultButtonId, `sky-filter-button-${++nextId}`, "f"), "f");
|
|
138
150
|
}
|
|
139
|
-
/**
|
|
140
|
-
* The ID for the filter button.
|
|
141
|
-
*/
|
|
142
|
-
get filterButtonId() {
|
|
143
|
-
return __classPrivateFieldGet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, "f");
|
|
144
|
-
}
|
|
145
|
-
set filterButtonId(value) {
|
|
146
|
-
__classPrivateFieldSet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, value || __classPrivateFieldGet(this, _SkyFilterButtonComponent_defaultButtonId, "f"), "f");
|
|
147
|
-
}
|
|
148
151
|
filterButtonOnClick() {
|
|
149
152
|
this.filterButtonClick.emit();
|
|
150
153
|
}
|
|
151
154
|
}
|
|
152
155
|
_SkyFilterButtonComponent_defaultButtonId = new WeakMap(), _SkyFilterButtonComponent_filterButtonIdOrDefault = new WeakMap();
|
|
153
|
-
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
154
|
-
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
156
|
+
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
157
|
+
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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-visible,.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-visible,.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,.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-visible,.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-visible,.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,.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-visible,.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-visible,.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{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-visible,.sky-theme-modern.sky-filter-btn-active:hover:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus:focus-visible{outline:none}.sky-theme-modern.sky-filter-btn-active:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus-visible: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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterButtonComponent, decorators: [{
|
|
156
159
|
type: Component,
|
|
157
160
|
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-visible,.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-visible,.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,.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-visible,.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-visible,.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,.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-visible,.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-visible,.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{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-visible,.sky-theme-modern.sky-filter-btn-active:hover:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus:focus-visible{outline:none}.sky-theme-modern.sky-filter-btn-active:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus-visible: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"] }]
|
|
158
161
|
}], ctorParameters: function () { return []; }, propDecorators: { filterButtonId: [{
|
|
@@ -176,9 +179,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
176
179
|
*/
|
|
177
180
|
class SkyFilterInlineItemComponent {
|
|
178
181
|
}
|
|
179
|
-
SkyFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
180
|
-
SkyFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
182
|
+
SkyFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterInlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
+
SkyFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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"] });
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterInlineItemComponent, decorators: [{
|
|
182
185
|
type: Component,
|
|
183
186
|
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"] }]
|
|
184
187
|
}] });
|
|
@@ -188,9 +191,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
188
191
|
*/
|
|
189
192
|
class SkyFilterInlineComponent {
|
|
190
193
|
}
|
|
191
|
-
SkyFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
192
|
-
SkyFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
194
|
+
SkyFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
+
SkyFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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"] });
|
|
196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterInlineComponent, decorators: [{
|
|
194
197
|
type: Component,
|
|
195
198
|
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"] }]
|
|
196
199
|
}] });
|
|
@@ -231,9 +234,9 @@ class SkyFilterSummaryItemComponent {
|
|
|
231
234
|
}
|
|
232
235
|
}
|
|
233
236
|
_SkyFilterSummaryItemComponent__dismissible = new WeakMap();
|
|
234
|
-
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
235
|
-
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
237
|
+
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
238
|
+
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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"], dependencies: [{ kind: "component", type: i2.λ12, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable", "role"], outputs: ["dismiss", "tokenFocus"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterSummaryItemComponent, decorators: [{
|
|
237
240
|
type: Component,
|
|
238
241
|
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"] }]
|
|
239
242
|
}], propDecorators: { dismissible: [{
|
|
@@ -249,17 +252,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
249
252
|
*/
|
|
250
253
|
class SkyFilterSummaryComponent {
|
|
251
254
|
}
|
|
252
|
-
SkyFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
253
|
-
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
255
|
+
SkyFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
+
SkyFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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"], dependencies: [{ kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterSummaryComponent, decorators: [{
|
|
255
258
|
type: Component,
|
|
256
259
|
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"] }]
|
|
257
260
|
}] });
|
|
258
261
|
|
|
259
262
|
class SkyFilterModule {
|
|
260
263
|
}
|
|
261
|
-
SkyFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
262
|
-
SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
264
|
+
SkyFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
265
|
+
SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterModule, declarations: [SkyFilterButtonComponent,
|
|
263
266
|
SkyFilterInlineComponent,
|
|
264
267
|
SkyFilterInlineItemComponent,
|
|
265
268
|
SkyFilterSummaryComponent,
|
|
@@ -272,12 +275,12 @@ SkyFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
272
275
|
SkyFilterInlineItemComponent,
|
|
273
276
|
SkyFilterSummaryComponent,
|
|
274
277
|
SkyFilterSummaryItemComponent] });
|
|
275
|
-
SkyFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
278
|
+
SkyFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterModule, imports: [CommonModule,
|
|
276
279
|
SkyIconModule,
|
|
277
280
|
SkyListsResourcesModule,
|
|
278
281
|
SkyTokensModule,
|
|
279
282
|
SkyThemeModule] });
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFilterModule, decorators: [{
|
|
281
284
|
type: NgModule,
|
|
282
285
|
args: [{
|
|
283
286
|
declarations: [
|
|
@@ -376,33 +379,14 @@ _SkyInfiniteScrollDomAdapterService_ngUnsubscribe = new WeakMap(), _SkyInfiniteS
|
|
|
376
379
|
const parentRect = parentElement.getBoundingClientRect();
|
|
377
380
|
return elementRect.top < parentRect.top + parentRect.height;
|
|
378
381
|
};
|
|
379
|
-
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
380
|
-
SkyInfiniteScrollDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
382
|
+
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, deps: [{ token: i1$1.SkyScrollableHostService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
383
|
+
SkyInfiniteScrollDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollDomAdapterService });
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, decorators: [{
|
|
382
385
|
type: Injectable
|
|
383
386
|
}], ctorParameters: function () { return [{ type: i1$1.SkyScrollableHostService }, { type: i1$1.SkyAppWindowRef }]; } });
|
|
384
387
|
|
|
385
388
|
var _SkyInfiniteScrollComponent_instances, _SkyInfiniteScrollComponent_changeDetector, _SkyInfiniteScrollComponent_domAdapter, _SkyInfiniteScrollComponent_elementRef, _SkyInfiniteScrollComponent_ngUnsubscribe, _SkyInfiniteScrollComponent__enabled, _SkyInfiniteScrollComponent__loading, _SkyInfiniteScrollComponent_notifyScrollEnd, _SkyInfiniteScrollComponent_setListeners;
|
|
386
389
|
class SkyInfiniteScrollComponent {
|
|
387
|
-
constructor(changeDetector, elementRef, domAdapter) {
|
|
388
|
-
_SkyInfiniteScrollComponent_instances.add(this);
|
|
389
|
-
/**
|
|
390
|
-
* Fires when scrolling triggers the need to load more data or when users select the button
|
|
391
|
-
* to load more data. This event only fires when the `enabled` property is set to `true`
|
|
392
|
-
* and data is not already loading.
|
|
393
|
-
*/
|
|
394
|
-
this.scrollEnd = new EventEmitter();
|
|
395
|
-
this.isWaiting = false;
|
|
396
|
-
_SkyInfiniteScrollComponent_changeDetector.set(this, void 0);
|
|
397
|
-
_SkyInfiniteScrollComponent_domAdapter.set(this, void 0);
|
|
398
|
-
_SkyInfiniteScrollComponent_elementRef.set(this, void 0);
|
|
399
|
-
_SkyInfiniteScrollComponent_ngUnsubscribe.set(this, new Subject());
|
|
400
|
-
_SkyInfiniteScrollComponent__enabled.set(this, false);
|
|
401
|
-
_SkyInfiniteScrollComponent__loading.set(this, void 0);
|
|
402
|
-
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_changeDetector, changeDetector, "f");
|
|
403
|
-
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_elementRef, elementRef, "f");
|
|
404
|
-
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_domAdapter, domAdapter, "f");
|
|
405
|
-
}
|
|
406
390
|
/**
|
|
407
391
|
* Whether to make the infinite scroll component active when more data is available
|
|
408
392
|
* to load. By default, infinite scroll is inactive and does not call the load function.
|
|
@@ -436,6 +420,25 @@ class SkyInfiniteScrollComponent {
|
|
|
436
420
|
this.isWaiting = value;
|
|
437
421
|
}
|
|
438
422
|
}
|
|
423
|
+
constructor(changeDetector, elementRef, domAdapter) {
|
|
424
|
+
_SkyInfiniteScrollComponent_instances.add(this);
|
|
425
|
+
/**
|
|
426
|
+
* Fires when scrolling triggers the need to load more data or when users select the button
|
|
427
|
+
* to load more data. This event only fires when the `enabled` property is set to `true`
|
|
428
|
+
* and data is not already loading.
|
|
429
|
+
*/
|
|
430
|
+
this.scrollEnd = new EventEmitter();
|
|
431
|
+
this.isWaiting = false;
|
|
432
|
+
_SkyInfiniteScrollComponent_changeDetector.set(this, void 0);
|
|
433
|
+
_SkyInfiniteScrollComponent_domAdapter.set(this, void 0);
|
|
434
|
+
_SkyInfiniteScrollComponent_elementRef.set(this, void 0);
|
|
435
|
+
_SkyInfiniteScrollComponent_ngUnsubscribe.set(this, new Subject());
|
|
436
|
+
_SkyInfiniteScrollComponent__enabled.set(this, false);
|
|
437
|
+
_SkyInfiniteScrollComponent__loading.set(this, void 0);
|
|
438
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_changeDetector, changeDetector, "f");
|
|
439
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_elementRef, elementRef, "f");
|
|
440
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_domAdapter, domAdapter, "f");
|
|
441
|
+
}
|
|
439
442
|
ngOnDestroy() {
|
|
440
443
|
this.enabled = false;
|
|
441
444
|
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f").next();
|
|
@@ -475,9 +478,9 @@ _SkyInfiniteScrollComponent_changeDetector = new WeakMap(), _SkyInfiniteScrollCo
|
|
|
475
478
|
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f").next();
|
|
476
479
|
}
|
|
477
480
|
};
|
|
478
|
-
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
479
|
-
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
481
|
+
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyInfiniteScrollDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
482
|
+
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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 sky-infinite-scroll-load-more-button\"\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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
|
|
481
484
|
type: Component,
|
|
482
485
|
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 sky-infinite-scroll-load-more-button\"\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"] }]
|
|
483
486
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyInfiniteScrollDomAdapterService }]; }, propDecorators: { enabled: [{
|
|
@@ -490,10 +493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
490
493
|
|
|
491
494
|
class SkyInfiniteScrollModule {
|
|
492
495
|
}
|
|
493
|
-
SkyInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
494
|
-
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
495
|
-
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
496
|
+
SkyInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
497
|
+
SkyInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollModule, declarations: [SkyInfiniteScrollComponent], imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule], exports: [SkyInfiniteScrollComponent] });
|
|
498
|
+
SkyInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollModule, imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule] });
|
|
499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyInfiniteScrollModule, decorators: [{
|
|
497
500
|
type: NgModule,
|
|
498
501
|
args: [{
|
|
499
502
|
declarations: [SkyInfiniteScrollComponent],
|
|
@@ -599,11 +602,11 @@ _SkyPagingComponent_instances = new WeakSet(), _SkyPagingComponent_getDisplayedP
|
|
|
599
602
|
}, _SkyPagingComponent_setDisplayedPages = function _SkyPagingComponent_setDisplayedPages() {
|
|
600
603
|
this.displayedPages = __classPrivateFieldGet(this, _SkyPagingComponent_instances, "m", _SkyPagingComponent_getDisplayedPageNumbers).call(this, this.pageCount, this.maxPages, this.currentPage);
|
|
601
604
|
};
|
|
602
|
-
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
603
|
-
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
605
|
+
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
606
|
+
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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 [attr.aria-label]=\"\n 'skyux_paging_page_link_aria_label' | skyLibResources : pageNumber\n \"\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:var(--sky-background-color-item-selected);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:var(--sky-background-color-item-selected);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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPagingComponent, decorators: [{
|
|
605
608
|
type: Component,
|
|
606
|
-
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 [attr.aria-label]=\"\n 'skyux_paging_page_link_aria_label' | skyLibResources : pageNumber\n \"\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
|
|
609
|
+
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 [attr.aria-label]=\"\n 'skyux_paging_page_link_aria_label' | skyLibResources : pageNumber\n \"\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:var(--sky-background-color-item-selected);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:var(--sky-background-color-item-selected);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"] }]
|
|
607
610
|
}], propDecorators: { currentPage: [{
|
|
608
611
|
type: Input
|
|
609
612
|
}], itemCount: [{
|
|
@@ -620,16 +623,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
620
623
|
|
|
621
624
|
class SkyPagingModule {
|
|
622
625
|
}
|
|
623
|
-
SkyPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
624
|
-
SkyPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
626
|
+
SkyPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPagingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
627
|
+
SkyPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyPagingModule, declarations: [SkyPagingComponent], imports: [CommonModule,
|
|
625
628
|
SkyIconModule,
|
|
626
629
|
SkyListsResourcesModule,
|
|
627
630
|
SkyThemeModule], exports: [SkyPagingComponent] });
|
|
628
|
-
SkyPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
631
|
+
SkyPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPagingModule, imports: [CommonModule,
|
|
629
632
|
SkyIconModule,
|
|
630
633
|
SkyListsResourcesModule,
|
|
631
634
|
SkyThemeModule] });
|
|
632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPagingModule, decorators: [{
|
|
633
636
|
type: NgModule,
|
|
634
637
|
args: [{
|
|
635
638
|
declarations: [SkyPagingComponent],
|
|
@@ -648,9 +651,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
648
651
|
*/
|
|
649
652
|
class SkyRepeaterItemContentComponent {
|
|
650
653
|
}
|
|
651
|
-
SkyRepeaterItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
652
|
-
SkyRepeaterItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
654
|
+
SkyRepeaterItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
655
|
+
SkyRepeaterItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyRepeaterItemContentComponent, selector: "sky-repeater-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemContentComponent, decorators: [{
|
|
654
657
|
type: Component,
|
|
655
658
|
args: [{ selector: 'sky-repeater-item-content', template: "<ng-content></ng-content>\n" }]
|
|
656
659
|
}] });
|
|
@@ -663,9 +666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
663
666
|
/* Code coverage having problems with no statements in classes */
|
|
664
667
|
class SkyRepeaterItemContextMenuComponent {
|
|
665
668
|
}
|
|
666
|
-
SkyRepeaterItemContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
667
|
-
SkyRepeaterItemContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
669
|
+
SkyRepeaterItemContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
670
|
+
SkyRepeaterItemContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyRepeaterItemContextMenuComponent, selector: "sky-repeater-item-context-menu", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, decorators: [{
|
|
669
672
|
type: Component,
|
|
670
673
|
args: [{ selector: 'sky-repeater-item-context-menu', template: "<ng-content></ng-content>\n" }]
|
|
671
674
|
}] });
|
|
@@ -675,9 +678,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
675
678
|
*/
|
|
676
679
|
class SkyRepeaterItemTitleComponent {
|
|
677
680
|
}
|
|
678
|
-
SkyRepeaterItemTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
679
|
-
SkyRepeaterItemTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
681
|
+
SkyRepeaterItemTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
682
|
+
SkyRepeaterItemTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyRepeaterItemTitleComponent, selector: "sky-repeater-item-title", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemTitleComponent, decorators: [{
|
|
681
684
|
type: Component,
|
|
682
685
|
args: [{ selector: 'sky-repeater-item-title', template: "<ng-content></ng-content>\n" }]
|
|
683
686
|
}] });
|
|
@@ -760,9 +763,9 @@ class SkyRepeaterService {
|
|
|
760
763
|
}
|
|
761
764
|
}
|
|
762
765
|
_SkyRepeaterService__expandMode = new WeakMap();
|
|
763
|
-
SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
764
|
-
SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
766
|
+
SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
767
|
+
SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterService });
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterService, decorators: [{
|
|
766
769
|
type: Injectable
|
|
767
770
|
}] });
|
|
768
771
|
|
|
@@ -830,9 +833,9 @@ _SkyRepeaterAdapterService_host = new WeakMap(), _SkyRepeaterAdapterService_repe
|
|
|
830
833
|
var _a;
|
|
831
834
|
return Array.from((_a = __classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f")) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelectorAll(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "a", _SkyRepeaterAdapterService_repeaterItemGroupSelector_get)));
|
|
832
835
|
};
|
|
833
|
-
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
834
|
-
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
836
|
+
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
837
|
+
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAdapterService });
|
|
838
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
|
|
836
839
|
type: Injectable
|
|
837
840
|
}], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
|
|
838
841
|
|
|
@@ -842,6 +845,81 @@ let nextContentId = 0;
|
|
|
842
845
|
* Creates an individual repeater item.
|
|
843
846
|
*/
|
|
844
847
|
class SkyRepeaterItemComponent {
|
|
848
|
+
/**
|
|
849
|
+
* Make the first, non-disabled item tab-focusable.
|
|
850
|
+
* - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
|
|
851
|
+
* - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
|
|
852
|
+
*/
|
|
853
|
+
get tabindex() {
|
|
854
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled)[0] ===
|
|
855
|
+
this
|
|
856
|
+
? 0
|
|
857
|
+
: -1;
|
|
858
|
+
}
|
|
859
|
+
/**
|
|
860
|
+
* Whether to exclude an item when cycling through.
|
|
861
|
+
*/
|
|
862
|
+
set disabled(value) {
|
|
863
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f") !== value) {
|
|
864
|
+
if (value) {
|
|
865
|
+
this.isSelected = false;
|
|
866
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, true, "f");
|
|
867
|
+
}
|
|
868
|
+
else {
|
|
869
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, false, "f");
|
|
870
|
+
}
|
|
871
|
+
if (this.isActive) {
|
|
872
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItemByIndex(undefined);
|
|
873
|
+
}
|
|
874
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
|
|
875
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.ownerDocument.activeElement.blur();
|
|
876
|
+
}
|
|
877
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
878
|
+
}
|
|
879
|
+
}
|
|
880
|
+
get disabled() {
|
|
881
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f");
|
|
882
|
+
}
|
|
883
|
+
/**
|
|
884
|
+
* Whether the repeater item is expanded.
|
|
885
|
+
* @default true
|
|
886
|
+
*/
|
|
887
|
+
set isExpanded(value) {
|
|
888
|
+
this.updateForExpanded(value !== false, true);
|
|
889
|
+
}
|
|
890
|
+
get isExpanded() {
|
|
891
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f");
|
|
892
|
+
}
|
|
893
|
+
/**
|
|
894
|
+
* Whether the repeater item's checkbox is selected.
|
|
895
|
+
* When users select the repeater item, the specified property on your model is updated accordingly.
|
|
896
|
+
* @default false
|
|
897
|
+
*/
|
|
898
|
+
set isSelected(value) {
|
|
899
|
+
if (!this.disabled && value !== __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f")) {
|
|
900
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isSelected, value, "f");
|
|
901
|
+
this.isSelectedChange.emit(__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f"));
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
get isSelected() {
|
|
905
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f");
|
|
906
|
+
}
|
|
907
|
+
set isCollapsible(value) {
|
|
908
|
+
if (this.isCollapsible !== value) {
|
|
909
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isCollapsible, value !== false, "f");
|
|
910
|
+
/*istanbul ignore else */
|
|
911
|
+
if (!__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f")) {
|
|
912
|
+
this.updateForExpanded(true, true);
|
|
913
|
+
}
|
|
914
|
+
}
|
|
915
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
916
|
+
}
|
|
917
|
+
get isCollapsible() {
|
|
918
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f");
|
|
919
|
+
}
|
|
920
|
+
get repeaterGroupClass() {
|
|
921
|
+
return 'sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").repeaterGroupId;
|
|
922
|
+
}
|
|
845
923
|
constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
|
|
846
924
|
_SkyRepeaterItemComponent_instances.add(this);
|
|
847
925
|
/**
|
|
@@ -878,6 +956,7 @@ class SkyRepeaterItemComponent {
|
|
|
878
956
|
this.hasItemContent = false;
|
|
879
957
|
this.isActive = false;
|
|
880
958
|
this.reorderButtonLabel = '';
|
|
959
|
+
this.animationDisabled = false;
|
|
881
960
|
_SkyRepeaterItemComponent_adapterService.set(this, void 0);
|
|
882
961
|
_SkyRepeaterItemComponent_changeDetector.set(this, void 0);
|
|
883
962
|
_SkyRepeaterItemComponent_elementRef.set(this, void 0);
|
|
@@ -901,7 +980,7 @@ class SkyRepeaterItemComponent {
|
|
|
901
980
|
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_adapterService, adapterService, "f");
|
|
902
981
|
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_elementRef, elementRef, "f");
|
|
903
982
|
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_resourceService, resourceService, "f");
|
|
904
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
|
|
983
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this, false);
|
|
905
984
|
forkJoin([
|
|
906
985
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_cancel'),
|
|
907
986
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_finish'),
|
|
@@ -921,81 +1000,6 @@ class SkyRepeaterItemComponent {
|
|
|
921
1000
|
this.contentId = `sky-repeater-item-content-${++nextContentId}`;
|
|
922
1001
|
this.itemRole$ = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").itemRole.asObservable();
|
|
923
1002
|
}
|
|
924
|
-
/**
|
|
925
|
-
* Make the first, non-disabled item tab-focusable.
|
|
926
|
-
* - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
|
|
927
|
-
* - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
|
|
928
|
-
*/
|
|
929
|
-
get tabindex() {
|
|
930
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled)[0] ===
|
|
931
|
-
this
|
|
932
|
-
? 0
|
|
933
|
-
: -1;
|
|
934
|
-
}
|
|
935
|
-
/**
|
|
936
|
-
* Whether to exclude an item when cycling through.
|
|
937
|
-
*/
|
|
938
|
-
set disabled(value) {
|
|
939
|
-
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f") !== value) {
|
|
940
|
-
if (value) {
|
|
941
|
-
this.isSelected = false;
|
|
942
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, true, "f");
|
|
943
|
-
}
|
|
944
|
-
else {
|
|
945
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, false, "f");
|
|
946
|
-
}
|
|
947
|
-
if (this.isActive) {
|
|
948
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItemByIndex(undefined);
|
|
949
|
-
}
|
|
950
|
-
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
|
|
951
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.ownerDocument.activeElement.blur();
|
|
952
|
-
}
|
|
953
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
954
|
-
}
|
|
955
|
-
}
|
|
956
|
-
get disabled() {
|
|
957
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f");
|
|
958
|
-
}
|
|
959
|
-
/**
|
|
960
|
-
* Whether the repeater item is expanded.
|
|
961
|
-
* @default true
|
|
962
|
-
*/
|
|
963
|
-
set isExpanded(value) {
|
|
964
|
-
this.updateForExpanded(value !== false);
|
|
965
|
-
}
|
|
966
|
-
get isExpanded() {
|
|
967
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f");
|
|
968
|
-
}
|
|
969
|
-
/**
|
|
970
|
-
* Whether the repeater item's checkbox is selected.
|
|
971
|
-
* When users select the repeater item, the specified property on your model is updated accordingly.
|
|
972
|
-
* @default false
|
|
973
|
-
*/
|
|
974
|
-
set isSelected(value) {
|
|
975
|
-
if (!this.disabled && value !== __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f")) {
|
|
976
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isSelected, value, "f");
|
|
977
|
-
this.isSelectedChange.emit(__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f"));
|
|
978
|
-
}
|
|
979
|
-
}
|
|
980
|
-
get isSelected() {
|
|
981
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f");
|
|
982
|
-
}
|
|
983
|
-
set isCollapsible(value) {
|
|
984
|
-
if (this.isCollapsible !== value) {
|
|
985
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isCollapsible, value !== false, "f");
|
|
986
|
-
/*istanbul ignore else */
|
|
987
|
-
if (!__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f")) {
|
|
988
|
-
this.updateForExpanded(true);
|
|
989
|
-
}
|
|
990
|
-
}
|
|
991
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
992
|
-
}
|
|
993
|
-
get isCollapsible() {
|
|
994
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f");
|
|
995
|
-
}
|
|
996
|
-
get repeaterGroupClass() {
|
|
997
|
-
return 'sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").repeaterGroupId;
|
|
998
|
-
}
|
|
999
1003
|
ngOnInit() {
|
|
1000
1004
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerItem(this);
|
|
1001
1005
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activeItemChange
|
|
@@ -1093,11 +1097,11 @@ class SkyRepeaterItemComponent {
|
|
|
1093
1097
|
}
|
|
1094
1098
|
headerClick() {
|
|
1095
1099
|
if (this.isCollapsible) {
|
|
1096
|
-
this.updateForExpanded(!this.isExpanded);
|
|
1100
|
+
this.updateForExpanded(!this.isExpanded, true);
|
|
1097
1101
|
}
|
|
1098
1102
|
}
|
|
1099
1103
|
chevronDirectionChange(direction) {
|
|
1100
|
-
this.updateForExpanded(direction === 'up');
|
|
1104
|
+
this.updateForExpanded(direction === 'up', true);
|
|
1101
1105
|
}
|
|
1102
1106
|
onRepeaterItemClick(event) {
|
|
1103
1107
|
var _b, _c, _d;
|
|
@@ -1110,7 +1114,7 @@ class SkyRepeaterItemComponent {
|
|
|
1110
1114
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItem(this);
|
|
1111
1115
|
}
|
|
1112
1116
|
}
|
|
1113
|
-
updateForExpanded(value) {
|
|
1117
|
+
updateForExpanded(value, animate) {
|
|
1114
1118
|
if (this.isCollapsible === false && value === false) {
|
|
1115
1119
|
console.warn(`Setting isExpanded to false when the repeater item is not collapsible
|
|
1116
1120
|
will have no effect.`);
|
|
@@ -1124,7 +1128,7 @@ class SkyRepeaterItemComponent {
|
|
|
1124
1128
|
this.collapse.emit();
|
|
1125
1129
|
}
|
|
1126
1130
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").onItemCollapseStateChange(this);
|
|
1127
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
|
|
1131
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this, animate);
|
|
1128
1132
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
1129
1133
|
}
|
|
1130
1134
|
}
|
|
@@ -1200,7 +1204,8 @@ class SkyRepeaterItemComponent {
|
|
|
1200
1204
|
this.reorderState = undefined;
|
|
1201
1205
|
}
|
|
1202
1206
|
}
|
|
1203
|
-
_SkyRepeaterItemComponent_adapterService = new WeakMap(), _SkyRepeaterItemComponent_changeDetector = new WeakMap(), _SkyRepeaterItemComponent_elementRef = new WeakMap(), _SkyRepeaterItemComponent_isExpanded = new WeakMap(), _SkyRepeaterItemComponent_keyboardReorderingEnabled = new WeakMap(), _SkyRepeaterItemComponent_ngUnsubscribe = new WeakMap(), _SkyRepeaterItemComponent_reorderCancelText = new WeakMap(), _SkyRepeaterItemComponent_reorderCurrentIndex = new WeakMap(), _SkyRepeaterItemComponent_reorderFinishText = new WeakMap(), _SkyRepeaterItemComponent_reorderInstructions = new WeakMap(), _SkyRepeaterItemComponent_reorderMovedText = new WeakMap(), _SkyRepeaterItemComponent_reorderStateDescription = new WeakMap(), _SkyRepeaterItemComponent_reorderSteps = new WeakMap(), _SkyRepeaterItemComponent_repeaterService = new WeakMap(), _SkyRepeaterItemComponent_resourceService = new WeakMap(), _SkyRepeaterItemComponent__isCollapsible = new WeakMap(), _SkyRepeaterItemComponent__isDisabled = new WeakMap(), _SkyRepeaterItemComponent__isSelected = new WeakMap(), _SkyRepeaterItemComponent_instances = new WeakSet(), _SkyRepeaterItemComponent_slideForExpanded = function _SkyRepeaterItemComponent_slideForExpanded() {
|
|
1207
|
+
_SkyRepeaterItemComponent_adapterService = new WeakMap(), _SkyRepeaterItemComponent_changeDetector = new WeakMap(), _SkyRepeaterItemComponent_elementRef = new WeakMap(), _SkyRepeaterItemComponent_isExpanded = new WeakMap(), _SkyRepeaterItemComponent_keyboardReorderingEnabled = new WeakMap(), _SkyRepeaterItemComponent_ngUnsubscribe = new WeakMap(), _SkyRepeaterItemComponent_reorderCancelText = new WeakMap(), _SkyRepeaterItemComponent_reorderCurrentIndex = new WeakMap(), _SkyRepeaterItemComponent_reorderFinishText = new WeakMap(), _SkyRepeaterItemComponent_reorderInstructions = new WeakMap(), _SkyRepeaterItemComponent_reorderMovedText = new WeakMap(), _SkyRepeaterItemComponent_reorderStateDescription = new WeakMap(), _SkyRepeaterItemComponent_reorderSteps = new WeakMap(), _SkyRepeaterItemComponent_repeaterService = new WeakMap(), _SkyRepeaterItemComponent_resourceService = new WeakMap(), _SkyRepeaterItemComponent__isCollapsible = new WeakMap(), _SkyRepeaterItemComponent__isDisabled = new WeakMap(), _SkyRepeaterItemComponent__isSelected = new WeakMap(), _SkyRepeaterItemComponent_instances = new WeakSet(), _SkyRepeaterItemComponent_slideForExpanded = function _SkyRepeaterItemComponent_slideForExpanded(animate) {
|
|
1208
|
+
this.animationDisabled = !animate;
|
|
1204
1209
|
this.slideDirection = this.isExpanded ? 'down' : 'up';
|
|
1205
1210
|
}, _SkyRepeaterItemComponent_keyboardReorderUp = function _SkyRepeaterItemComponent_keyboardReorderUp() {
|
|
1206
1211
|
var _a;
|
|
@@ -1255,12 +1260,12 @@ _SkyRepeaterItemComponent_adapterService = new WeakMap(), _SkyRepeaterItemCompon
|
|
|
1255
1260
|
}
|
|
1256
1261
|
});
|
|
1257
1262
|
};
|
|
1258
|
-
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1259
|
-
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { disabled: "disabled", 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: { listeners: { "keydown": "onKeydown($event)" }, 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 [attr.aria-label]=\"itemName\"\n [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n [attr.role]=\"(itemRole$ | async)?.item\"\n [attr.tabIndex]=\"tabindex\"\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 #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\n [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n class=\"sky-repeater-item-left\"\n >\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 [attr.role]=\"(itemRole$ | async)?.title\"\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 [attr.role]=\"(itemRole$ | async)?.content\"\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:5px 10px 5px 0}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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
|
|
1260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1263
|
+
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i3$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1264
|
+
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { disabled: "disabled", 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: { listeners: { "keydown": "onKeydown($event)" }, 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 [attr.aria-label]=\"itemName\"\n [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n [attr.role]=\"(itemRole$ | async)?.item\"\n [attr.tabIndex]=\"tabindex\"\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 #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\n [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n class=\"sky-repeater-item-left\"\n >\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 [attr.role]=\"(itemRole$ | async)?.title\"\n [hidden]=\"titleRef.children.length === 0\"\n (click)=\"headerClick()\"\n >\n <div class=\"sky-repeater-item-title sky-font-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 ? isExpanded\n ? ('skyux_repeater_item_expand' | skyLibResources : itemName)\n : ('skyux_repeater_item_collapse' | skyLibResources : itemName)\n : isExpanded\n ? ('skyux_repeater_item_expand_default' | skyLibResources)\n : ('skyux_repeater_item_collapse_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 [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n #itemContentRef\n [attr.role]=\"(itemRole$ | async)?.content\"\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:5px 10px 5px 0}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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
|
|
1265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
|
|
1261
1266
|
type: Component,
|
|
1262
|
-
args: [{ selector: 'sky-repeater-item', animations: [skyAnimationSlide], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-repeater-item sky-padding-even-default\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n [attr.role]=\"(itemRole$ | async)?.item\"\n [attr.tabIndex]=\"tabindex\"\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 #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\n [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n class=\"sky-repeater-item-left\"\n >\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 [attr.role]=\"(itemRole$ | async)?.title\"\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 [attr.role]=\"(itemRole$ | async)?.content\"\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:5px 10px 5px 0}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"] }]
|
|
1263
|
-
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type:
|
|
1267
|
+
args: [{ selector: 'sky-repeater-item', animations: [skyAnimationSlide], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-repeater-item sky-padding-even-default\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n [attr.role]=\"(itemRole$ | async)?.item\"\n [attr.tabIndex]=\"tabindex\"\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 #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\n [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n class=\"sky-repeater-item-left\"\n >\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 [attr.role]=\"(itemRole$ | async)?.title\"\n [hidden]=\"titleRef.children.length === 0\"\n (click)=\"headerClick()\"\n >\n <div class=\"sky-repeater-item-title sky-font-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 ? isExpanded\n ? ('skyux_repeater_item_expand' | skyLibResources : itemName)\n : ('skyux_repeater_item_collapse' | skyLibResources : itemName)\n : isExpanded\n ? ('skyux_repeater_item_expand_default' | skyLibResources)\n : ('skyux_repeater_item_collapse_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 [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n #itemContentRef\n [attr.role]=\"(itemRole$ | async)?.content\"\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:5px 10px 5px 0}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"] }]
|
|
1268
|
+
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i3$1.SkyLibResourcesService }]; }, propDecorators: { disabled: [{
|
|
1264
1269
|
type: Input
|
|
1265
1270
|
}], itemName: [{
|
|
1266
1271
|
type: Input
|
|
@@ -1314,12 +1319,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1314
1319
|
args: ['keydown', ['$event']]
|
|
1315
1320
|
}] } });
|
|
1316
1321
|
|
|
1317
|
-
|
|
1322
|
+
/**
|
|
1323
|
+
* @internal
|
|
1324
|
+
*/
|
|
1325
|
+
class SkyRepeaterAutoScrollService {
|
|
1326
|
+
autoScroll(elements, options) {
|
|
1327
|
+
return autoScroll(elements, options);
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
SkyRepeaterAutoScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAutoScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1331
|
+
SkyRepeaterAutoScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAutoScrollService });
|
|
1332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAutoScrollService, decorators: [{
|
|
1333
|
+
type: Injectable
|
|
1334
|
+
}] });
|
|
1335
|
+
|
|
1336
|
+
var _SkyRepeaterComponent_instances, _SkyRepeaterComponent_autoScroller, _SkyRepeaterComponent_ngUnsubscribe, _SkyRepeaterComponent_itemNameWarned, _SkyRepeaterComponent_adapterService, _SkyRepeaterComponent_changeDetector, _SkyRepeaterComponent_dragulaService, _SkyRepeaterComponent_elementRef, _SkyRepeaterComponent_renderer, _SkyRepeaterComponent_repeaterService, _SkyRepeaterComponent_autoScrollSvc, _SkyRepeaterComponent_scrollableHostSvc, _SkyRepeaterComponent_logSvc, _SkyRepeaterComponent_updateForExpandMode, _SkyRepeaterComponent_initializeDragAndDrop, _SkyRepeaterComponent_destroyDragAndDrop, _SkyRepeaterComponent_destroyAutoScroll, _SkyRepeaterComponent_emitTags, _SkyRepeaterComponent_everyItemHasTag, _SkyRepeaterComponent_updateRole, _SkyRepeaterComponent_updateReorderability, _SkyRepeaterComponent_validateTags;
|
|
1318
1337
|
/**
|
|
1319
1338
|
* Creates a container to display repeater items.
|
|
1320
1339
|
*/
|
|
1321
1340
|
class SkyRepeaterComponent {
|
|
1322
|
-
|
|
1341
|
+
/**
|
|
1342
|
+
* The layout that determines which repeater items are expanded by default and whether
|
|
1343
|
+
* repeater items are expandable and collapsible. Collapsed items display titles only.
|
|
1344
|
+
* The valid options are `multiple`, `none`, and `single`.
|
|
1345
|
+
* - `multiple` loads repeater items in an expanded state unless `isExpanded` is set to
|
|
1346
|
+
* `false` for a repeater item. This layout allows users to expand and collapse
|
|
1347
|
+
* as many repeater items as necessary. It is best-suited to repeater items where body
|
|
1348
|
+
* content is important but users don't always need to see it.
|
|
1349
|
+
* - `none` loads all repeater items in an expanded state and does not allow users to
|
|
1350
|
+
* collapse them. This default layout provides the quickest access to the details in the
|
|
1351
|
+
* repeater items. It is best-suited to repeater items with concise content
|
|
1352
|
+
* that users need to view frequently.
|
|
1353
|
+
* - `single` loads one repeater item in an expanded state and collapses all others.
|
|
1354
|
+
* The expanded repeater item is the first one where `isExpanded` is set to `true`. This layout
|
|
1355
|
+
* allows users to expand one item at a time. It provides the most compact view and is
|
|
1356
|
+
* best-suited to repeater items where the most important information is in the titles
|
|
1357
|
+
* and users only occasionally need to view the body content.
|
|
1358
|
+
* @default "none"
|
|
1359
|
+
*/
|
|
1360
|
+
set expandMode(value) {
|
|
1361
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode = value;
|
|
1362
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1363
|
+
}
|
|
1364
|
+
get expandMode() {
|
|
1365
|
+
return __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode;
|
|
1366
|
+
}
|
|
1367
|
+
constructor() {
|
|
1323
1368
|
_SkyRepeaterComponent_instances.add(this);
|
|
1324
1369
|
/**
|
|
1325
1370
|
* Whether users can change the order of items in the repeater list.
|
|
@@ -1336,19 +1381,18 @@ class SkyRepeaterComponent {
|
|
|
1336
1381
|
* This event emits an ordered array of the `tag` properties that the consumer provides for each repeater item.
|
|
1337
1382
|
*/
|
|
1338
1383
|
this.orderChange = new EventEmitter();
|
|
1339
|
-
|
|
1340
|
-
_SkyRepeaterComponent_changeDetector.set(this, void 0);
|
|
1341
|
-
_SkyRepeaterComponent_dragulaService.set(this, void 0);
|
|
1342
|
-
_SkyRepeaterComponent_elementRef.set(this, void 0);
|
|
1343
|
-
_SkyRepeaterComponent_renderer.set(this, void 0);
|
|
1344
|
-
_SkyRepeaterComponent_repeaterService.set(this, void 0);
|
|
1384
|
+
_SkyRepeaterComponent_autoScroller.set(this, void 0);
|
|
1345
1385
|
_SkyRepeaterComponent_ngUnsubscribe.set(this, new Subject());
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1386
|
+
_SkyRepeaterComponent_itemNameWarned.set(this, false);
|
|
1387
|
+
_SkyRepeaterComponent_adapterService.set(this, inject(SkyRepeaterAdapterService));
|
|
1388
|
+
_SkyRepeaterComponent_changeDetector.set(this, inject(ChangeDetectorRef));
|
|
1389
|
+
_SkyRepeaterComponent_dragulaService.set(this, inject(DragulaService));
|
|
1390
|
+
_SkyRepeaterComponent_elementRef.set(this, inject(ElementRef));
|
|
1391
|
+
_SkyRepeaterComponent_renderer.set(this, inject(Renderer2));
|
|
1392
|
+
_SkyRepeaterComponent_repeaterService.set(this, inject(SkyRepeaterService));
|
|
1393
|
+
_SkyRepeaterComponent_autoScrollSvc.set(this, inject(SkyRepeaterAutoScrollService));
|
|
1394
|
+
_SkyRepeaterComponent_scrollableHostSvc.set(this, inject(SkyScrollableHostService));
|
|
1395
|
+
_SkyRepeaterComponent_logSvc.set(this, inject(SkyLogService));
|
|
1352
1396
|
this.dragulaGroupName = `sky-repeater-dragula-${__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").repeaterGroupId}`;
|
|
1353
1397
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").itemCollapseStateChange
|
|
1354
1398
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
@@ -1381,33 +1425,6 @@ class SkyRepeaterComponent {
|
|
|
1381
1425
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").setRepeaterHost(__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f"));
|
|
1382
1426
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_initializeDragAndDrop).call(this);
|
|
1383
1427
|
}
|
|
1384
|
-
/**
|
|
1385
|
-
* The layout that determines which repeater items are expanded by default and whether
|
|
1386
|
-
* repeater items are expandable and collapsible. Collapsed items display titles only.
|
|
1387
|
-
* The valid options are `multiple`, `none`, and `single`.
|
|
1388
|
-
* - `multiple` loads repeater items in an expanded state unless `isExpanded` is set to
|
|
1389
|
-
* `false` for a repeater item. This layout allows users to expand and collapse
|
|
1390
|
-
* as many repeater items as necessary. It is best-suited to repeater items where body
|
|
1391
|
-
* content is important but users don't always need to see it.
|
|
1392
|
-
* - `none` loads all repeater items in an expanded state and does not allow users to
|
|
1393
|
-
* collapse them. This default layout provides the quickest access to the details in the
|
|
1394
|
-
* repeater items. It is best-suited to repeater items with concise content
|
|
1395
|
-
* that users need to view frequently.
|
|
1396
|
-
* - `single` loads one repeater item in an expanded state and collapses all others.
|
|
1397
|
-
* The expanded repeater item is the first one where `isExpanded` is set to `true`. This layout
|
|
1398
|
-
* allows users to expand one item at a time. It provides the most compact view and is
|
|
1399
|
-
* best-suited to repeater items where the most important information is in the titles
|
|
1400
|
-
* and users only occasionally need to view the body content.
|
|
1401
|
-
* @default "none"
|
|
1402
|
-
*/
|
|
1403
|
-
// TODO: Remove 'string' as a valid type in a breaking change.
|
|
1404
|
-
set expandMode(value) {
|
|
1405
|
-
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode = value;
|
|
1406
|
-
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1407
|
-
}
|
|
1408
|
-
get expandMode() {
|
|
1409
|
-
return __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode;
|
|
1410
|
-
}
|
|
1411
1428
|
ngAfterContentInit() {
|
|
1412
1429
|
var _a;
|
|
1413
1430
|
// If activeIndex has been set on init, call service to activate the appropriate item.
|
|
@@ -1415,23 +1432,23 @@ class SkyRepeaterComponent {
|
|
|
1415
1432
|
if (this.activeIndex || this.activeIndex === 0) {
|
|
1416
1433
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1417
1434
|
}
|
|
1418
|
-
|
|
1419
|
-
console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
|
|
1420
|
-
}
|
|
1435
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_validateTags).call(this);
|
|
1421
1436
|
});
|
|
1422
1437
|
// HACK: Not updating for expand mode in a timeout causes an error.
|
|
1423
1438
|
// https://github.com/angular/angular/issues/6005
|
|
1424
1439
|
(_a = this.items) === null || _a === void 0 ? void 0 : _a.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
|
1425
1440
|
setTimeout(() => {
|
|
1426
1441
|
var _a;
|
|
1427
|
-
if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.
|
|
1442
|
+
if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) {
|
|
1428
1443
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this, this.items.last);
|
|
1429
|
-
this
|
|
1444
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateReorderability).call(this);
|
|
1445
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").items = this.items.toArray();
|
|
1430
1446
|
}
|
|
1431
1447
|
if (this.activeIndex !== undefined) {
|
|
1432
1448
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1433
1449
|
}
|
|
1434
1450
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1451
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_validateTags).call(this);
|
|
1435
1452
|
});
|
|
1436
1453
|
});
|
|
1437
1454
|
setTimeout(() => {
|
|
@@ -1443,6 +1460,16 @@ class SkyRepeaterComponent {
|
|
|
1443
1460
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1444
1461
|
}, 0);
|
|
1445
1462
|
}
|
|
1463
|
+
ngAfterViewChecked() {
|
|
1464
|
+
var _a, _b;
|
|
1465
|
+
if (!__classPrivateFieldGet(this, _SkyRepeaterComponent_itemNameWarned, "f") && ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some((item) => !item.itemName))) {
|
|
1466
|
+
(_b = __classPrivateFieldGet(this, _SkyRepeaterComponent_logSvc, "f")) === null || _b === void 0 ? void 0 : _b.deprecated('SkyRepeaterItemComponent without `itemName`', {
|
|
1467
|
+
deprecationMajorVersion: 8,
|
|
1468
|
+
replacementRecommendation: 'Always specify an `itemName` property.',
|
|
1469
|
+
});
|
|
1470
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_itemNameWarned, true, "f");
|
|
1471
|
+
}
|
|
1472
|
+
}
|
|
1446
1473
|
ngOnChanges(changes) {
|
|
1447
1474
|
if (changes['activeIndex']) {
|
|
1448
1475
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").enableActiveState = true;
|
|
@@ -1453,7 +1480,7 @@ class SkyRepeaterComponent {
|
|
|
1453
1480
|
}
|
|
1454
1481
|
if (changes.reorderable) {
|
|
1455
1482
|
if (this.items) {
|
|
1456
|
-
this
|
|
1483
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateReorderability).call(this);
|
|
1457
1484
|
}
|
|
1458
1485
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1459
1486
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
|
|
@@ -1471,7 +1498,7 @@ class SkyRepeaterComponent {
|
|
|
1471
1498
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1472
1499
|
}
|
|
1473
1500
|
}
|
|
1474
|
-
_SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_changeDetector = new WeakMap(), _SkyRepeaterComponent_dragulaService = new WeakMap(), _SkyRepeaterComponent_elementRef = new WeakMap(), _SkyRepeaterComponent_renderer = new WeakMap(), _SkyRepeaterComponent_repeaterService = new WeakMap(),
|
|
1501
|
+
_SkyRepeaterComponent_autoScroller = new WeakMap(), _SkyRepeaterComponent_ngUnsubscribe = new WeakMap(), _SkyRepeaterComponent_itemNameWarned = new WeakMap(), _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_changeDetector = new WeakMap(), _SkyRepeaterComponent_dragulaService = new WeakMap(), _SkyRepeaterComponent_elementRef = new WeakMap(), _SkyRepeaterComponent_renderer = new WeakMap(), _SkyRepeaterComponent_repeaterService = new WeakMap(), _SkyRepeaterComponent_autoScrollSvc = new WeakMap(), _SkyRepeaterComponent_scrollableHostSvc = new WeakMap(), _SkyRepeaterComponent_logSvc = new WeakMap(), _SkyRepeaterComponent_instances = new WeakSet(), _SkyRepeaterComponent_updateForExpandMode = function _SkyRepeaterComponent_updateForExpandMode(itemAdded) {
|
|
1475
1502
|
if (this.items) {
|
|
1476
1503
|
let foundExpanded = false;
|
|
1477
1504
|
const isCollapsible = this.expandMode !== 'none';
|
|
@@ -1480,15 +1507,18 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1480
1507
|
if (itemAdded && itemAdded.isExpanded) {
|
|
1481
1508
|
foundExpanded = true;
|
|
1482
1509
|
}
|
|
1483
|
-
this.items
|
|
1510
|
+
for (const item of this.items) {
|
|
1484
1511
|
item.isCollapsible = isCollapsible && !!item.hasItemContent;
|
|
1512
|
+
// Collapse any items that aren't the item that was just added.
|
|
1485
1513
|
if (item !== itemAdded && isSingle && item.isExpanded) {
|
|
1486
1514
|
if (foundExpanded) {
|
|
1487
|
-
item
|
|
1515
|
+
// If this item is being collapsed because a new item was
|
|
1516
|
+
// added, animate it.
|
|
1517
|
+
item.updateForExpanded(false, !!itemAdded);
|
|
1488
1518
|
}
|
|
1489
1519
|
foundExpanded = true;
|
|
1490
1520
|
}
|
|
1491
|
-
}
|
|
1521
|
+
}
|
|
1492
1522
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1493
1523
|
}
|
|
1494
1524
|
}, _SkyRepeaterComponent_initializeDragAndDrop = function _SkyRepeaterComponent_initializeDragAndDrop() {
|
|
@@ -1496,9 +1526,9 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1496
1526
|
/* istanbul ignore else */
|
|
1497
1527
|
if (!__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
|
|
1498
1528
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").createGroup(this.dragulaGroupName, {
|
|
1499
|
-
moves: (el,
|
|
1529
|
+
moves: (el, _container, handle) => {
|
|
1500
1530
|
const target = el === null || el === void 0 ? void 0 : el.querySelector('.sky-repeater-item-grab-handle');
|
|
1501
|
-
return !!this.reorderable &&
|
|
1531
|
+
return !!(this.reorderable && (target === null || target === void 0 ? void 0 : target.contains(handle)));
|
|
1502
1532
|
},
|
|
1503
1533
|
});
|
|
1504
1534
|
}
|
|
@@ -1509,6 +1539,13 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1509
1539
|
.subscribe((args) => {
|
|
1510
1540
|
/* istanbul ignore else */
|
|
1511
1541
|
if (args.name === this.dragulaGroupName) {
|
|
1542
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyAutoScroll).call(this);
|
|
1543
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_autoScroller, __classPrivateFieldGet(this, _SkyRepeaterComponent_autoScrollSvc, "f").autoScroll([__classPrivateFieldGet(this, _SkyRepeaterComponent_scrollableHostSvc, "f").getScrollableHost(__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f"))], {
|
|
1544
|
+
margin: 20,
|
|
1545
|
+
maxSpeed: 10,
|
|
1546
|
+
scrollWhenOutside: true,
|
|
1547
|
+
autoScroll: () => true,
|
|
1548
|
+
}), "f");
|
|
1512
1549
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").addClass(args.el, 'sky-repeater-item-dragging');
|
|
1513
1550
|
draggedItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
|
|
1514
1551
|
}
|
|
@@ -1519,6 +1556,7 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1519
1556
|
.subscribe((args) => {
|
|
1520
1557
|
/* istanbul ignore else */
|
|
1521
1558
|
if (args.name === this.dragulaGroupName) {
|
|
1559
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyAutoScroll).call(this);
|
|
1522
1560
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").removeClass(args.el, 'sky-repeater-item-dragging');
|
|
1523
1561
|
const newItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
|
|
1524
1562
|
/* sanity check */
|
|
@@ -1536,6 +1574,12 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1536
1574
|
if (__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
|
|
1537
1575
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").destroy(this.dragulaGroupName);
|
|
1538
1576
|
}
|
|
1577
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyAutoScroll).call(this);
|
|
1578
|
+
}, _SkyRepeaterComponent_destroyAutoScroll = function _SkyRepeaterComponent_destroyAutoScroll() {
|
|
1579
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterComponent_autoScroller, "f")) {
|
|
1580
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_autoScroller, "f").destroy();
|
|
1581
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_autoScroller, undefined, "f");
|
|
1582
|
+
}
|
|
1539
1583
|
}, _SkyRepeaterComponent_emitTags = function _SkyRepeaterComponent_emitTags() {
|
|
1540
1584
|
const tags = __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").items.map((item) => item.tag);
|
|
1541
1585
|
this.orderChange.emit(tags);
|
|
@@ -1594,13 +1638,31 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1594
1638
|
this.role = `${autoRole}`;
|
|
1595
1639
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
|
|
1596
1640
|
}
|
|
1641
|
+
}, _SkyRepeaterComponent_updateReorderability = function _SkyRepeaterComponent_updateReorderability() {
|
|
1642
|
+
if (this.items) {
|
|
1643
|
+
for (const item of this.items) {
|
|
1644
|
+
item.reorderable = this.reorderable;
|
|
1645
|
+
}
|
|
1646
|
+
}
|
|
1647
|
+
}, _SkyRepeaterComponent_validateTags = function _SkyRepeaterComponent_validateTags() {
|
|
1648
|
+
if (this.reorderable && !__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_everyItemHasTag).call(this)) {
|
|
1649
|
+
console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
|
|
1650
|
+
}
|
|
1597
1651
|
};
|
|
1598
|
-
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1599
|
-
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1600
|
-
|
|
1652
|
+
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1653
|
+
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyRepeaterComponent, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [
|
|
1654
|
+
SkyRepeaterService,
|
|
1655
|
+
SkyRepeaterAdapterService,
|
|
1656
|
+
SkyRepeaterAutoScrollService,
|
|
1657
|
+
], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n [dragula]=\"dragulaGroupName\"\n (cdkObserveContent)=\"onCdkObserveContent()\"\n >\n <ng-content></ng-content>\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "directive", type: i2$1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
|
|
1601
1659
|
type: Component,
|
|
1602
|
-
args: [{ selector: 'sky-repeater', providers: [
|
|
1603
|
-
|
|
1660
|
+
args: [{ selector: 'sky-repeater', providers: [
|
|
1661
|
+
SkyRepeaterService,
|
|
1662
|
+
SkyRepeaterAdapterService,
|
|
1663
|
+
SkyRepeaterAutoScrollService,
|
|
1664
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n [dragula]=\"dragulaGroupName\"\n (cdkObserveContent)=\"onCdkObserveContent()\"\n >\n <ng-content></ng-content>\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"] }]
|
|
1665
|
+
}], ctorParameters: function () { return []; }, propDecorators: { activeIndex: [{
|
|
1604
1666
|
type: Input
|
|
1605
1667
|
}], ariaLabel: [{
|
|
1606
1668
|
type: Input
|
|
@@ -1619,8 +1681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1619
1681
|
|
|
1620
1682
|
class SkyRepeaterModule {
|
|
1621
1683
|
}
|
|
1622
|
-
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1623
|
-
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
1684
|
+
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1685
|
+
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, declarations: [SkyRepeaterComponent,
|
|
1624
1686
|
SkyRepeaterItemComponent,
|
|
1625
1687
|
SkyRepeaterItemContentComponent,
|
|
1626
1688
|
SkyRepeaterItemContextMenuComponent,
|
|
@@ -1636,7 +1698,7 @@ SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
|
|
|
1636
1698
|
SkyRepeaterItemContentComponent,
|
|
1637
1699
|
SkyRepeaterItemContextMenuComponent,
|
|
1638
1700
|
SkyRepeaterItemTitleComponent] });
|
|
1639
|
-
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
1701
|
+
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, providers: [DragulaService], imports: [CommonModule,
|
|
1640
1702
|
DragulaModule,
|
|
1641
1703
|
ObserversModule,
|
|
1642
1704
|
SkyChevronModule,
|
|
@@ -1644,7 +1706,7 @@ SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
|
|
|
1644
1706
|
SkyIconModule,
|
|
1645
1707
|
SkyInlineFormModule,
|
|
1646
1708
|
SkyListsResourcesModule] });
|
|
1647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, decorators: [{
|
|
1648
1710
|
type: NgModule,
|
|
1649
1711
|
args: [{
|
|
1650
1712
|
declarations: [
|
|
@@ -1686,9 +1748,9 @@ class SkySortService {
|
|
|
1686
1748
|
this.selectedItem.next(sortItem);
|
|
1687
1749
|
}
|
|
1688
1750
|
}
|
|
1689
|
-
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1690
|
-
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
1691
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1751
|
+
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1752
|
+
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortService });
|
|
1753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortService, decorators: [{
|
|
1692
1754
|
type: Injectable
|
|
1693
1755
|
}] });
|
|
1694
1756
|
|
|
@@ -1744,11 +1806,11 @@ class SkySortItemComponent {
|
|
|
1744
1806
|
}
|
|
1745
1807
|
}
|
|
1746
1808
|
_SkySortItemComponent_subscription = new WeakMap(), _SkySortItemComponent_sortItemId = new WeakMap(), _SkySortItemComponent_sortService = new WeakMap(), _SkySortItemComponent_detector = new WeakMap();
|
|
1747
|
-
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1748
|
-
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1809
|
+
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1810
|
+
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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-font-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:var(--sky-background-color-neutral-light)}.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:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}.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;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);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:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);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;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1750
1812
|
type: Component,
|
|
1751
|
-
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:var(--sky-background-color-neutral-light)}.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:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}.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;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);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:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);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;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);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"] }]
|
|
1813
|
+
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-font-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:var(--sky-background-color-neutral-light)}.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:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}.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;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);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:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);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;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);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"] }]
|
|
1752
1814
|
}], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
1753
1815
|
type: Input
|
|
1754
1816
|
}], itemSelect: [{
|
|
@@ -1757,9 +1819,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1757
1819
|
|
|
1758
1820
|
class SkySortMenuHeadingComponent {
|
|
1759
1821
|
}
|
|
1760
|
-
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1761
|
-
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1822
|
+
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1823
|
+
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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:0;padding:10px 20px}.sky-theme-modern .sky-sort-menu-heading{margin:0;padding:10px 20px}\n"], dependencies: [{ kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
|
|
1824
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortMenuHeadingComponent, decorators: [{
|
|
1763
1825
|
type: Component,
|
|
1764
1826
|
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:0;padding:10px 20px}.sky-theme-modern .sky-sort-menu-heading{margin:0;padding:10px 20px}\n"] }]
|
|
1765
1827
|
}] });
|
|
@@ -1778,9 +1840,9 @@ class SkySortComponent {
|
|
|
1778
1840
|
});
|
|
1779
1841
|
}
|
|
1780
1842
|
}
|
|
1781
|
-
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1782
|
-
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1843
|
+
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1844
|
+
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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-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}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}: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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1784
1846
|
type: Component,
|
|
1785
1847
|
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-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}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}: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}\n"] }]
|
|
1786
1848
|
}], propDecorators: { showButtonText: [{
|
|
@@ -1789,8 +1851,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1789
1851
|
|
|
1790
1852
|
class SkySortModule {
|
|
1791
1853
|
}
|
|
1792
|
-
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1793
|
-
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
1854
|
+
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1855
|
+
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, declarations: [SkySortComponent,
|
|
1794
1856
|
SkySortItemComponent,
|
|
1795
1857
|
SkySortMenuHeadingComponent], imports: [CommonModule,
|
|
1796
1858
|
SkyDropdownModule,
|
|
@@ -1798,13 +1860,13 @@ SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
1798
1860
|
SkyIdModule,
|
|
1799
1861
|
SkyListsResourcesModule,
|
|
1800
1862
|
SkyThemeModule], exports: [SkySortComponent, SkySortItemComponent] });
|
|
1801
|
-
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
1863
|
+
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, imports: [CommonModule,
|
|
1802
1864
|
SkyDropdownModule,
|
|
1803
1865
|
SkyIconModule,
|
|
1804
1866
|
SkyIdModule,
|
|
1805
1867
|
SkyListsResourcesModule,
|
|
1806
1868
|
SkyThemeModule] });
|
|
1807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, decorators: [{
|
|
1808
1870
|
type: NgModule,
|
|
1809
1871
|
args: [{
|
|
1810
1872
|
declarations: [
|