@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/fesm2020/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
|
|
|
@@ -829,9 +832,9 @@ _SkyRepeaterAdapterService_host = new WeakMap(), _SkyRepeaterAdapterService_repe
|
|
|
829
832
|
}, _SkyRepeaterAdapterService_getRepeaterItemArray = function _SkyRepeaterAdapterService_getRepeaterItemArray() {
|
|
830
833
|
return Array.from(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f")?.nativeElement.querySelectorAll(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "a", _SkyRepeaterAdapterService_repeaterItemGroupSelector_get)));
|
|
831
834
|
};
|
|
832
|
-
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
833
|
-
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
835
|
+
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
836
|
+
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAdapterService });
|
|
837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
|
|
835
838
|
type: Injectable
|
|
836
839
|
}], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
|
|
837
840
|
|
|
@@ -841,6 +844,81 @@ let nextContentId = 0;
|
|
|
841
844
|
* Creates an individual repeater item.
|
|
842
845
|
*/
|
|
843
846
|
class SkyRepeaterItemComponent {
|
|
847
|
+
/**
|
|
848
|
+
* Make the first, non-disabled item tab-focusable.
|
|
849
|
+
* - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
|
|
850
|
+
* - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
|
|
851
|
+
*/
|
|
852
|
+
get tabindex() {
|
|
853
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled)[0] ===
|
|
854
|
+
this
|
|
855
|
+
? 0
|
|
856
|
+
: -1;
|
|
857
|
+
}
|
|
858
|
+
/**
|
|
859
|
+
* Whether to exclude an item when cycling through.
|
|
860
|
+
*/
|
|
861
|
+
set disabled(value) {
|
|
862
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f") !== value) {
|
|
863
|
+
if (value) {
|
|
864
|
+
this.isSelected = false;
|
|
865
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, true, "f");
|
|
866
|
+
}
|
|
867
|
+
else {
|
|
868
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, false, "f");
|
|
869
|
+
}
|
|
870
|
+
if (this.isActive) {
|
|
871
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItemByIndex(undefined);
|
|
872
|
+
}
|
|
873
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
|
|
874
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.ownerDocument.activeElement.blur();
|
|
875
|
+
}
|
|
876
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
877
|
+
}
|
|
878
|
+
}
|
|
879
|
+
get disabled() {
|
|
880
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f");
|
|
881
|
+
}
|
|
882
|
+
/**
|
|
883
|
+
* Whether the repeater item is expanded.
|
|
884
|
+
* @default true
|
|
885
|
+
*/
|
|
886
|
+
set isExpanded(value) {
|
|
887
|
+
this.updateForExpanded(value !== false, true);
|
|
888
|
+
}
|
|
889
|
+
get isExpanded() {
|
|
890
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f");
|
|
891
|
+
}
|
|
892
|
+
/**
|
|
893
|
+
* Whether the repeater item's checkbox is selected.
|
|
894
|
+
* When users select the repeater item, the specified property on your model is updated accordingly.
|
|
895
|
+
* @default false
|
|
896
|
+
*/
|
|
897
|
+
set isSelected(value) {
|
|
898
|
+
if (!this.disabled && value !== __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f")) {
|
|
899
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isSelected, value, "f");
|
|
900
|
+
this.isSelectedChange.emit(__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f"));
|
|
901
|
+
}
|
|
902
|
+
}
|
|
903
|
+
get isSelected() {
|
|
904
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f");
|
|
905
|
+
}
|
|
906
|
+
set isCollapsible(value) {
|
|
907
|
+
if (this.isCollapsible !== value) {
|
|
908
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isCollapsible, value !== false, "f");
|
|
909
|
+
/*istanbul ignore else */
|
|
910
|
+
if (!__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f")) {
|
|
911
|
+
this.updateForExpanded(true, true);
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
915
|
+
}
|
|
916
|
+
get isCollapsible() {
|
|
917
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f");
|
|
918
|
+
}
|
|
919
|
+
get repeaterGroupClass() {
|
|
920
|
+
return 'sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").repeaterGroupId;
|
|
921
|
+
}
|
|
844
922
|
constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
|
|
845
923
|
_SkyRepeaterItemComponent_instances.add(this);
|
|
846
924
|
/**
|
|
@@ -877,6 +955,7 @@ class SkyRepeaterItemComponent {
|
|
|
877
955
|
this.hasItemContent = false;
|
|
878
956
|
this.isActive = false;
|
|
879
957
|
this.reorderButtonLabel = '';
|
|
958
|
+
this.animationDisabled = false;
|
|
880
959
|
_SkyRepeaterItemComponent_adapterService.set(this, void 0);
|
|
881
960
|
_SkyRepeaterItemComponent_changeDetector.set(this, void 0);
|
|
882
961
|
_SkyRepeaterItemComponent_elementRef.set(this, void 0);
|
|
@@ -900,7 +979,7 @@ class SkyRepeaterItemComponent {
|
|
|
900
979
|
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_adapterService, adapterService, "f");
|
|
901
980
|
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_elementRef, elementRef, "f");
|
|
902
981
|
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_resourceService, resourceService, "f");
|
|
903
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
|
|
982
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this, false);
|
|
904
983
|
forkJoin([
|
|
905
984
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_cancel'),
|
|
906
985
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_finish'),
|
|
@@ -920,81 +999,6 @@ class SkyRepeaterItemComponent {
|
|
|
920
999
|
this.contentId = `sky-repeater-item-content-${++nextContentId}`;
|
|
921
1000
|
this.itemRole$ = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").itemRole.asObservable();
|
|
922
1001
|
}
|
|
923
|
-
/**
|
|
924
|
-
* Make the first, non-disabled item tab-focusable.
|
|
925
|
-
* - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
|
|
926
|
-
* - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
|
|
927
|
-
*/
|
|
928
|
-
get tabindex() {
|
|
929
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled)[0] ===
|
|
930
|
-
this
|
|
931
|
-
? 0
|
|
932
|
-
: -1;
|
|
933
|
-
}
|
|
934
|
-
/**
|
|
935
|
-
* Whether to exclude an item when cycling through.
|
|
936
|
-
*/
|
|
937
|
-
set disabled(value) {
|
|
938
|
-
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f") !== value) {
|
|
939
|
-
if (value) {
|
|
940
|
-
this.isSelected = false;
|
|
941
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, true, "f");
|
|
942
|
-
}
|
|
943
|
-
else {
|
|
944
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, false, "f");
|
|
945
|
-
}
|
|
946
|
-
if (this.isActive) {
|
|
947
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItemByIndex(undefined);
|
|
948
|
-
}
|
|
949
|
-
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
|
|
950
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.ownerDocument.activeElement.blur();
|
|
951
|
-
}
|
|
952
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
953
|
-
}
|
|
954
|
-
}
|
|
955
|
-
get disabled() {
|
|
956
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f");
|
|
957
|
-
}
|
|
958
|
-
/**
|
|
959
|
-
* Whether the repeater item is expanded.
|
|
960
|
-
* @default true
|
|
961
|
-
*/
|
|
962
|
-
set isExpanded(value) {
|
|
963
|
-
this.updateForExpanded(value !== false);
|
|
964
|
-
}
|
|
965
|
-
get isExpanded() {
|
|
966
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f");
|
|
967
|
-
}
|
|
968
|
-
/**
|
|
969
|
-
* Whether the repeater item's checkbox is selected.
|
|
970
|
-
* When users select the repeater item, the specified property on your model is updated accordingly.
|
|
971
|
-
* @default false
|
|
972
|
-
*/
|
|
973
|
-
set isSelected(value) {
|
|
974
|
-
if (!this.disabled && value !== __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f")) {
|
|
975
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isSelected, value, "f");
|
|
976
|
-
this.isSelectedChange.emit(__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f"));
|
|
977
|
-
}
|
|
978
|
-
}
|
|
979
|
-
get isSelected() {
|
|
980
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f");
|
|
981
|
-
}
|
|
982
|
-
set isCollapsible(value) {
|
|
983
|
-
if (this.isCollapsible !== value) {
|
|
984
|
-
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isCollapsible, value !== false, "f");
|
|
985
|
-
/*istanbul ignore else */
|
|
986
|
-
if (!__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f")) {
|
|
987
|
-
this.updateForExpanded(true);
|
|
988
|
-
}
|
|
989
|
-
}
|
|
990
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
991
|
-
}
|
|
992
|
-
get isCollapsible() {
|
|
993
|
-
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f");
|
|
994
|
-
}
|
|
995
|
-
get repeaterGroupClass() {
|
|
996
|
-
return 'sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").repeaterGroupId;
|
|
997
|
-
}
|
|
998
1002
|
ngOnInit() {
|
|
999
1003
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerItem(this);
|
|
1000
1004
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activeItemChange
|
|
@@ -1090,11 +1094,11 @@ class SkyRepeaterItemComponent {
|
|
|
1090
1094
|
}
|
|
1091
1095
|
headerClick() {
|
|
1092
1096
|
if (this.isCollapsible) {
|
|
1093
|
-
this.updateForExpanded(!this.isExpanded);
|
|
1097
|
+
this.updateForExpanded(!this.isExpanded, true);
|
|
1094
1098
|
}
|
|
1095
1099
|
}
|
|
1096
1100
|
chevronDirectionChange(direction) {
|
|
1097
|
-
this.updateForExpanded(direction === 'up');
|
|
1101
|
+
this.updateForExpanded(direction === 'up', true);
|
|
1098
1102
|
}
|
|
1099
1103
|
onRepeaterItemClick(event) {
|
|
1100
1104
|
// Only activate item if clicking on the title, content, or parent item div.
|
|
@@ -1106,7 +1110,7 @@ class SkyRepeaterItemComponent {
|
|
|
1106
1110
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItem(this);
|
|
1107
1111
|
}
|
|
1108
1112
|
}
|
|
1109
|
-
updateForExpanded(value) {
|
|
1113
|
+
updateForExpanded(value, animate) {
|
|
1110
1114
|
if (this.isCollapsible === false && value === false) {
|
|
1111
1115
|
console.warn(`Setting isExpanded to false when the repeater item is not collapsible
|
|
1112
1116
|
will have no effect.`);
|
|
@@ -1120,7 +1124,7 @@ class SkyRepeaterItemComponent {
|
|
|
1120
1124
|
this.collapse.emit();
|
|
1121
1125
|
}
|
|
1122
1126
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").onItemCollapseStateChange(this);
|
|
1123
|
-
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
|
|
1127
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this, animate);
|
|
1124
1128
|
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
1125
1129
|
}
|
|
1126
1130
|
}
|
|
@@ -1196,7 +1200,8 @@ class SkyRepeaterItemComponent {
|
|
|
1196
1200
|
this.reorderState = undefined;
|
|
1197
1201
|
}
|
|
1198
1202
|
}
|
|
1199
|
-
_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() {
|
|
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(animate) {
|
|
1204
|
+
this.animationDisabled = !animate;
|
|
1200
1205
|
this.slideDirection = this.isExpanded ? 'down' : 'up';
|
|
1201
1206
|
}, _SkyRepeaterItemComponent_keyboardReorderUp = function _SkyRepeaterItemComponent_keyboardReorderUp() {
|
|
1202
1207
|
var _a;
|
|
@@ -1251,12 +1256,12 @@ _SkyRepeaterItemComponent_adapterService = new WeakMap(), _SkyRepeaterItemCompon
|
|
|
1251
1256
|
}
|
|
1252
1257
|
});
|
|
1253
1258
|
};
|
|
1254
|
-
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1255
|
-
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 });
|
|
1256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1259
|
+
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 });
|
|
1260
|
+
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 });
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
|
|
1257
1262
|
type: Component,
|
|
1258
|
-
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"] }]
|
|
1259
|
-
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type:
|
|
1263
|
+
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"] }]
|
|
1264
|
+
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i3$1.SkyLibResourcesService }]; }, propDecorators: { disabled: [{
|
|
1260
1265
|
type: Input
|
|
1261
1266
|
}], itemName: [{
|
|
1262
1267
|
type: Input
|
|
@@ -1310,12 +1315,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1310
1315
|
args: ['keydown', ['$event']]
|
|
1311
1316
|
}] } });
|
|
1312
1317
|
|
|
1313
|
-
|
|
1318
|
+
/**
|
|
1319
|
+
* @internal
|
|
1320
|
+
*/
|
|
1321
|
+
class SkyRepeaterAutoScrollService {
|
|
1322
|
+
autoScroll(elements, options) {
|
|
1323
|
+
return autoScroll(elements, options);
|
|
1324
|
+
}
|
|
1325
|
+
}
|
|
1326
|
+
SkyRepeaterAutoScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAutoScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1327
|
+
SkyRepeaterAutoScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAutoScrollService });
|
|
1328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterAutoScrollService, decorators: [{
|
|
1329
|
+
type: Injectable
|
|
1330
|
+
}] });
|
|
1331
|
+
|
|
1332
|
+
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;
|
|
1314
1333
|
/**
|
|
1315
1334
|
* Creates a container to display repeater items.
|
|
1316
1335
|
*/
|
|
1317
1336
|
class SkyRepeaterComponent {
|
|
1318
|
-
|
|
1337
|
+
/**
|
|
1338
|
+
* The layout that determines which repeater items are expanded by default and whether
|
|
1339
|
+
* repeater items are expandable and collapsible. Collapsed items display titles only.
|
|
1340
|
+
* The valid options are `multiple`, `none`, and `single`.
|
|
1341
|
+
* - `multiple` loads repeater items in an expanded state unless `isExpanded` is set to
|
|
1342
|
+
* `false` for a repeater item. This layout allows users to expand and collapse
|
|
1343
|
+
* as many repeater items as necessary. It is best-suited to repeater items where body
|
|
1344
|
+
* content is important but users don't always need to see it.
|
|
1345
|
+
* - `none` loads all repeater items in an expanded state and does not allow users to
|
|
1346
|
+
* collapse them. This default layout provides the quickest access to the details in the
|
|
1347
|
+
* repeater items. It is best-suited to repeater items with concise content
|
|
1348
|
+
* that users need to view frequently.
|
|
1349
|
+
* - `single` loads one repeater item in an expanded state and collapses all others.
|
|
1350
|
+
* The expanded repeater item is the first one where `isExpanded` is set to `true`. This layout
|
|
1351
|
+
* allows users to expand one item at a time. It provides the most compact view and is
|
|
1352
|
+
* best-suited to repeater items where the most important information is in the titles
|
|
1353
|
+
* and users only occasionally need to view the body content.
|
|
1354
|
+
* @default "none"
|
|
1355
|
+
*/
|
|
1356
|
+
set expandMode(value) {
|
|
1357
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode = value;
|
|
1358
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1359
|
+
}
|
|
1360
|
+
get expandMode() {
|
|
1361
|
+
return __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode;
|
|
1362
|
+
}
|
|
1363
|
+
constructor() {
|
|
1319
1364
|
_SkyRepeaterComponent_instances.add(this);
|
|
1320
1365
|
/**
|
|
1321
1366
|
* Whether users can change the order of items in the repeater list.
|
|
@@ -1332,19 +1377,18 @@ class SkyRepeaterComponent {
|
|
|
1332
1377
|
* This event emits an ordered array of the `tag` properties that the consumer provides for each repeater item.
|
|
1333
1378
|
*/
|
|
1334
1379
|
this.orderChange = new EventEmitter();
|
|
1335
|
-
|
|
1336
|
-
_SkyRepeaterComponent_changeDetector.set(this, void 0);
|
|
1337
|
-
_SkyRepeaterComponent_dragulaService.set(this, void 0);
|
|
1338
|
-
_SkyRepeaterComponent_elementRef.set(this, void 0);
|
|
1339
|
-
_SkyRepeaterComponent_renderer.set(this, void 0);
|
|
1340
|
-
_SkyRepeaterComponent_repeaterService.set(this, void 0);
|
|
1380
|
+
_SkyRepeaterComponent_autoScroller.set(this, void 0);
|
|
1341
1381
|
_SkyRepeaterComponent_ngUnsubscribe.set(this, new Subject());
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1382
|
+
_SkyRepeaterComponent_itemNameWarned.set(this, false);
|
|
1383
|
+
_SkyRepeaterComponent_adapterService.set(this, inject(SkyRepeaterAdapterService));
|
|
1384
|
+
_SkyRepeaterComponent_changeDetector.set(this, inject(ChangeDetectorRef));
|
|
1385
|
+
_SkyRepeaterComponent_dragulaService.set(this, inject(DragulaService));
|
|
1386
|
+
_SkyRepeaterComponent_elementRef.set(this, inject(ElementRef));
|
|
1387
|
+
_SkyRepeaterComponent_renderer.set(this, inject(Renderer2));
|
|
1388
|
+
_SkyRepeaterComponent_repeaterService.set(this, inject(SkyRepeaterService));
|
|
1389
|
+
_SkyRepeaterComponent_autoScrollSvc.set(this, inject(SkyRepeaterAutoScrollService));
|
|
1390
|
+
_SkyRepeaterComponent_scrollableHostSvc.set(this, inject(SkyScrollableHostService));
|
|
1391
|
+
_SkyRepeaterComponent_logSvc.set(this, inject(SkyLogService));
|
|
1348
1392
|
this.dragulaGroupName = `sky-repeater-dragula-${__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").repeaterGroupId}`;
|
|
1349
1393
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").itemCollapseStateChange
|
|
1350
1394
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
@@ -1376,55 +1420,28 @@ class SkyRepeaterComponent {
|
|
|
1376
1420
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").setRepeaterHost(__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f"));
|
|
1377
1421
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_initializeDragAndDrop).call(this);
|
|
1378
1422
|
}
|
|
1379
|
-
/**
|
|
1380
|
-
* The layout that determines which repeater items are expanded by default and whether
|
|
1381
|
-
* repeater items are expandable and collapsible. Collapsed items display titles only.
|
|
1382
|
-
* The valid options are `multiple`, `none`, and `single`.
|
|
1383
|
-
* - `multiple` loads repeater items in an expanded state unless `isExpanded` is set to
|
|
1384
|
-
* `false` for a repeater item. This layout allows users to expand and collapse
|
|
1385
|
-
* as many repeater items as necessary. It is best-suited to repeater items where body
|
|
1386
|
-
* content is important but users don't always need to see it.
|
|
1387
|
-
* - `none` loads all repeater items in an expanded state and does not allow users to
|
|
1388
|
-
* collapse them. This default layout provides the quickest access to the details in the
|
|
1389
|
-
* repeater items. It is best-suited to repeater items with concise content
|
|
1390
|
-
* that users need to view frequently.
|
|
1391
|
-
* - `single` loads one repeater item in an expanded state and collapses all others.
|
|
1392
|
-
* The expanded repeater item is the first one where `isExpanded` is set to `true`. This layout
|
|
1393
|
-
* allows users to expand one item at a time. It provides the most compact view and is
|
|
1394
|
-
* best-suited to repeater items where the most important information is in the titles
|
|
1395
|
-
* and users only occasionally need to view the body content.
|
|
1396
|
-
* @default "none"
|
|
1397
|
-
*/
|
|
1398
|
-
// TODO: Remove 'string' as a valid type in a breaking change.
|
|
1399
|
-
set expandMode(value) {
|
|
1400
|
-
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode = value;
|
|
1401
|
-
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1402
|
-
}
|
|
1403
|
-
get expandMode() {
|
|
1404
|
-
return __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode;
|
|
1405
|
-
}
|
|
1406
1423
|
ngAfterContentInit() {
|
|
1407
1424
|
// If activeIndex has been set on init, call service to activate the appropriate item.
|
|
1408
1425
|
setTimeout(() => {
|
|
1409
1426
|
if (this.activeIndex || this.activeIndex === 0) {
|
|
1410
1427
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1411
1428
|
}
|
|
1412
|
-
|
|
1413
|
-
console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
|
|
1414
|
-
}
|
|
1429
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_validateTags).call(this);
|
|
1415
1430
|
});
|
|
1416
1431
|
// HACK: Not updating for expand mode in a timeout causes an error.
|
|
1417
1432
|
// https://github.com/angular/angular/issues/6005
|
|
1418
1433
|
this.items?.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
|
1419
1434
|
setTimeout(() => {
|
|
1420
|
-
if (this.items?.
|
|
1435
|
+
if (this.items?.length) {
|
|
1421
1436
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this, this.items.last);
|
|
1422
|
-
this
|
|
1437
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateReorderability).call(this);
|
|
1438
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").items = this.items.toArray();
|
|
1423
1439
|
}
|
|
1424
1440
|
if (this.activeIndex !== undefined) {
|
|
1425
1441
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1426
1442
|
}
|
|
1427
1443
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1444
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_validateTags).call(this);
|
|
1428
1445
|
});
|
|
1429
1446
|
});
|
|
1430
1447
|
setTimeout(() => {
|
|
@@ -1435,6 +1452,15 @@ class SkyRepeaterComponent {
|
|
|
1435
1452
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1436
1453
|
}, 0);
|
|
1437
1454
|
}
|
|
1455
|
+
ngAfterViewChecked() {
|
|
1456
|
+
if (!__classPrivateFieldGet(this, _SkyRepeaterComponent_itemNameWarned, "f") && this.items?.some((item) => !item.itemName)) {
|
|
1457
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_logSvc, "f")?.deprecated('SkyRepeaterItemComponent without `itemName`', {
|
|
1458
|
+
deprecationMajorVersion: 8,
|
|
1459
|
+
replacementRecommendation: 'Always specify an `itemName` property.',
|
|
1460
|
+
});
|
|
1461
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_itemNameWarned, true, "f");
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1438
1464
|
ngOnChanges(changes) {
|
|
1439
1465
|
if (changes['activeIndex']) {
|
|
1440
1466
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").enableActiveState = true;
|
|
@@ -1445,7 +1471,7 @@ class SkyRepeaterComponent {
|
|
|
1445
1471
|
}
|
|
1446
1472
|
if (changes.reorderable) {
|
|
1447
1473
|
if (this.items) {
|
|
1448
|
-
this
|
|
1474
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateReorderability).call(this);
|
|
1449
1475
|
}
|
|
1450
1476
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1451
1477
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
|
|
@@ -1463,7 +1489,7 @@ class SkyRepeaterComponent {
|
|
|
1463
1489
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1464
1490
|
}
|
|
1465
1491
|
}
|
|
1466
|
-
_SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_changeDetector = new WeakMap(), _SkyRepeaterComponent_dragulaService = new WeakMap(), _SkyRepeaterComponent_elementRef = new WeakMap(), _SkyRepeaterComponent_renderer = new WeakMap(), _SkyRepeaterComponent_repeaterService = new WeakMap(),
|
|
1492
|
+
_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) {
|
|
1467
1493
|
if (this.items) {
|
|
1468
1494
|
let foundExpanded = false;
|
|
1469
1495
|
const isCollapsible = this.expandMode !== 'none';
|
|
@@ -1472,15 +1498,18 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1472
1498
|
if (itemAdded && itemAdded.isExpanded) {
|
|
1473
1499
|
foundExpanded = true;
|
|
1474
1500
|
}
|
|
1475
|
-
this.items
|
|
1501
|
+
for (const item of this.items) {
|
|
1476
1502
|
item.isCollapsible = isCollapsible && !!item.hasItemContent;
|
|
1503
|
+
// Collapse any items that aren't the item that was just added.
|
|
1477
1504
|
if (item !== itemAdded && isSingle && item.isExpanded) {
|
|
1478
1505
|
if (foundExpanded) {
|
|
1479
|
-
item
|
|
1506
|
+
// If this item is being collapsed because a new item was
|
|
1507
|
+
// added, animate it.
|
|
1508
|
+
item.updateForExpanded(false, !!itemAdded);
|
|
1480
1509
|
}
|
|
1481
1510
|
foundExpanded = true;
|
|
1482
1511
|
}
|
|
1483
|
-
}
|
|
1512
|
+
}
|
|
1484
1513
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1485
1514
|
}
|
|
1486
1515
|
}, _SkyRepeaterComponent_initializeDragAndDrop = function _SkyRepeaterComponent_initializeDragAndDrop() {
|
|
@@ -1488,9 +1517,9 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1488
1517
|
/* istanbul ignore else */
|
|
1489
1518
|
if (!__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
|
|
1490
1519
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").createGroup(this.dragulaGroupName, {
|
|
1491
|
-
moves: (el,
|
|
1520
|
+
moves: (el, _container, handle) => {
|
|
1492
1521
|
const target = el?.querySelector('.sky-repeater-item-grab-handle');
|
|
1493
|
-
return !!this.reorderable &&
|
|
1522
|
+
return !!(this.reorderable && target?.contains(handle));
|
|
1494
1523
|
},
|
|
1495
1524
|
});
|
|
1496
1525
|
}
|
|
@@ -1501,6 +1530,13 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1501
1530
|
.subscribe((args) => {
|
|
1502
1531
|
/* istanbul ignore else */
|
|
1503
1532
|
if (args.name === this.dragulaGroupName) {
|
|
1533
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyAutoScroll).call(this);
|
|
1534
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_autoScroller, __classPrivateFieldGet(this, _SkyRepeaterComponent_autoScrollSvc, "f").autoScroll([__classPrivateFieldGet(this, _SkyRepeaterComponent_scrollableHostSvc, "f").getScrollableHost(__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f"))], {
|
|
1535
|
+
margin: 20,
|
|
1536
|
+
maxSpeed: 10,
|
|
1537
|
+
scrollWhenOutside: true,
|
|
1538
|
+
autoScroll: () => true,
|
|
1539
|
+
}), "f");
|
|
1504
1540
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").addClass(args.el, 'sky-repeater-item-dragging');
|
|
1505
1541
|
draggedItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
|
|
1506
1542
|
}
|
|
@@ -1511,6 +1547,7 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1511
1547
|
.subscribe((args) => {
|
|
1512
1548
|
/* istanbul ignore else */
|
|
1513
1549
|
if (args.name === this.dragulaGroupName) {
|
|
1550
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyAutoScroll).call(this);
|
|
1514
1551
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").removeClass(args.el, 'sky-repeater-item-dragging');
|
|
1515
1552
|
const newItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
|
|
1516
1553
|
/* sanity check */
|
|
@@ -1528,6 +1565,12 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1528
1565
|
if (__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
|
|
1529
1566
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").destroy(this.dragulaGroupName);
|
|
1530
1567
|
}
|
|
1568
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyAutoScroll).call(this);
|
|
1569
|
+
}, _SkyRepeaterComponent_destroyAutoScroll = function _SkyRepeaterComponent_destroyAutoScroll() {
|
|
1570
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterComponent_autoScroller, "f")) {
|
|
1571
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_autoScroller, "f").destroy();
|
|
1572
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_autoScroller, undefined, "f");
|
|
1573
|
+
}
|
|
1531
1574
|
}, _SkyRepeaterComponent_emitTags = function _SkyRepeaterComponent_emitTags() {
|
|
1532
1575
|
const tags = __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").items.map((item) => item.tag);
|
|
1533
1576
|
this.orderChange.emit(tags);
|
|
@@ -1587,13 +1630,31 @@ _SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_chan
|
|
|
1587
1630
|
this.role = `${autoRole}`;
|
|
1588
1631
|
__classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
|
|
1589
1632
|
}
|
|
1633
|
+
}, _SkyRepeaterComponent_updateReorderability = function _SkyRepeaterComponent_updateReorderability() {
|
|
1634
|
+
if (this.items) {
|
|
1635
|
+
for (const item of this.items) {
|
|
1636
|
+
item.reorderable = this.reorderable;
|
|
1637
|
+
}
|
|
1638
|
+
}
|
|
1639
|
+
}, _SkyRepeaterComponent_validateTags = function _SkyRepeaterComponent_validateTags() {
|
|
1640
|
+
if (this.reorderable && !__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_everyItemHasTag).call(this)) {
|
|
1641
|
+
console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
|
|
1642
|
+
}
|
|
1590
1643
|
};
|
|
1591
|
-
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1592
|
-
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1593
|
-
|
|
1644
|
+
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1645
|
+
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: [
|
|
1646
|
+
SkyRepeaterService,
|
|
1647
|
+
SkyRepeaterAdapterService,
|
|
1648
|
+
SkyRepeaterAutoScrollService,
|
|
1649
|
+
], 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 });
|
|
1650
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
|
|
1594
1651
|
type: Component,
|
|
1595
|
-
args: [{ selector: 'sky-repeater', providers: [
|
|
1596
|
-
|
|
1652
|
+
args: [{ selector: 'sky-repeater', providers: [
|
|
1653
|
+
SkyRepeaterService,
|
|
1654
|
+
SkyRepeaterAdapterService,
|
|
1655
|
+
SkyRepeaterAutoScrollService,
|
|
1656
|
+
], 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"] }]
|
|
1657
|
+
}], ctorParameters: function () { return []; }, propDecorators: { activeIndex: [{
|
|
1597
1658
|
type: Input
|
|
1598
1659
|
}], ariaLabel: [{
|
|
1599
1660
|
type: Input
|
|
@@ -1612,8 +1673,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1612
1673
|
|
|
1613
1674
|
class SkyRepeaterModule {
|
|
1614
1675
|
}
|
|
1615
|
-
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1616
|
-
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
1676
|
+
SkyRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1677
|
+
SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, declarations: [SkyRepeaterComponent,
|
|
1617
1678
|
SkyRepeaterItemComponent,
|
|
1618
1679
|
SkyRepeaterItemContentComponent,
|
|
1619
1680
|
SkyRepeaterItemContextMenuComponent,
|
|
@@ -1629,7 +1690,7 @@ SkyRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
|
|
|
1629
1690
|
SkyRepeaterItemContentComponent,
|
|
1630
1691
|
SkyRepeaterItemContextMenuComponent,
|
|
1631
1692
|
SkyRepeaterItemTitleComponent] });
|
|
1632
|
-
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
1693
|
+
SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, providers: [DragulaService], imports: [CommonModule,
|
|
1633
1694
|
DragulaModule,
|
|
1634
1695
|
ObserversModule,
|
|
1635
1696
|
SkyChevronModule,
|
|
@@ -1637,7 +1698,7 @@ SkyRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
|
|
|
1637
1698
|
SkyIconModule,
|
|
1638
1699
|
SkyInlineFormModule,
|
|
1639
1700
|
SkyListsResourcesModule] });
|
|
1640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRepeaterModule, decorators: [{
|
|
1641
1702
|
type: NgModule,
|
|
1642
1703
|
args: [{
|
|
1643
1704
|
declarations: [
|
|
@@ -1679,9 +1740,9 @@ class SkySortService {
|
|
|
1679
1740
|
this.selectedItem.next(sortItem);
|
|
1680
1741
|
}
|
|
1681
1742
|
}
|
|
1682
|
-
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1683
|
-
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
1684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1743
|
+
SkySortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1744
|
+
SkySortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortService });
|
|
1745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortService, decorators: [{
|
|
1685
1746
|
type: Injectable
|
|
1686
1747
|
}] });
|
|
1687
1748
|
|
|
@@ -1737,11 +1798,11 @@ class SkySortItemComponent {
|
|
|
1737
1798
|
}
|
|
1738
1799
|
}
|
|
1739
1800
|
_SkySortItemComponent_subscription = new WeakMap(), _SkySortItemComponent_sortItemId = new WeakMap(), _SkySortItemComponent_sortService = new WeakMap(), _SkySortItemComponent_detector = new WeakMap();
|
|
1740
|
-
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1741
|
-
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1801
|
+
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 });
|
|
1802
|
+
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 });
|
|
1803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortItemComponent, decorators: [{
|
|
1743
1804
|
type: Component,
|
|
1744
|
-
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"] }]
|
|
1805
|
+
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"] }]
|
|
1745
1806
|
}], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
|
|
1746
1807
|
type: Input
|
|
1747
1808
|
}], itemSelect: [{
|
|
@@ -1750,9 +1811,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1750
1811
|
|
|
1751
1812
|
class SkySortMenuHeadingComponent {
|
|
1752
1813
|
}
|
|
1753
|
-
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1754
|
-
SkySortMenuHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1755
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1814
|
+
SkySortMenuHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1815
|
+
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" }] });
|
|
1816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortMenuHeadingComponent, decorators: [{
|
|
1756
1817
|
type: Component,
|
|
1757
1818
|
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"] }]
|
|
1758
1819
|
}] });
|
|
@@ -1771,9 +1832,9 @@ class SkySortComponent {
|
|
|
1771
1832
|
});
|
|
1772
1833
|
}
|
|
1773
1834
|
}
|
|
1774
|
-
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1775
|
-
SkySortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1835
|
+
SkySortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1836
|
+
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 });
|
|
1837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortComponent, decorators: [{
|
|
1777
1838
|
type: Component,
|
|
1778
1839
|
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"] }]
|
|
1779
1840
|
}], propDecorators: { showButtonText: [{
|
|
@@ -1782,8 +1843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1782
1843
|
|
|
1783
1844
|
class SkySortModule {
|
|
1784
1845
|
}
|
|
1785
|
-
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1786
|
-
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
1846
|
+
SkySortModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1847
|
+
SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, declarations: [SkySortComponent,
|
|
1787
1848
|
SkySortItemComponent,
|
|
1788
1849
|
SkySortMenuHeadingComponent], imports: [CommonModule,
|
|
1789
1850
|
SkyDropdownModule,
|
|
@@ -1791,13 +1852,13 @@ SkySortModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
1791
1852
|
SkyIdModule,
|
|
1792
1853
|
SkyListsResourcesModule,
|
|
1793
1854
|
SkyThemeModule], exports: [SkySortComponent, SkySortItemComponent] });
|
|
1794
|
-
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
1855
|
+
SkySortModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, imports: [CommonModule,
|
|
1795
1856
|
SkyDropdownModule,
|
|
1796
1857
|
SkyIconModule,
|
|
1797
1858
|
SkyIdModule,
|
|
1798
1859
|
SkyListsResourcesModule,
|
|
1799
1860
|
SkyThemeModule] });
|
|
1800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkySortModule, decorators: [{
|
|
1801
1862
|
type: NgModule,
|
|
1802
1863
|
args: [{
|
|
1803
1864
|
declarations: [
|