@skyux/lists 7.0.0-beta.0 → 7.0.0-beta.10
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 +727 -448
- package/esm2020/index.mjs +2 -1
- package/esm2020/lib/modules/filter/filter-button.component.mjs +17 -5
- package/esm2020/lib/modules/filter/filter-summary-item.component.mjs +15 -6
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll-dom-adapter.service.mjs +52 -60
- package/esm2020/lib/modules/infinite-scroll/infinite-scroll.component.mjs +51 -44
- package/esm2020/lib/modules/paging/paging.component.mjs +41 -40
- package/esm2020/lib/modules/repeater/repeater-adapter.service.mjs +32 -27
- package/esm2020/lib/modules/repeater/repeater-expand-mode-type.mjs +2 -0
- package/esm2020/lib/modules/repeater/repeater-item.component.mjs +168 -147
- package/esm2020/lib/modules/repeater/repeater.component.mjs +167 -173
- package/esm2020/lib/modules/repeater/repeater.service.mjs +15 -4
- package/esm2020/lib/modules/sort/sort-item.component.mjs +26 -16
- package/esm2020/lib/modules/sort/sort.component.mjs +1 -1
- package/esm2020/lib/modules/sort/sort.service.mjs +1 -1
- package/esm2020/testing/filter/filter-fixture-button.mjs +21 -15
- package/esm2020/testing/filter/filter-fixture-summary.mjs +11 -6
- package/esm2020/testing/filter/lists-filter-fixture-button.mjs +1 -1
- package/esm2020/testing/paging/paging-fixture.mjs +2 -2
- package/esm2020/testing/repeater/repeater-item-harness.mjs +17 -8
- package/esm2020/testing/sort/sort-fixture-menu-item.mjs +1 -1
- package/esm2020/testing/sort/sort-fixture.mjs +53 -47
- package/fesm2015/skyux-lists-testing.mjs +85 -58
- package/fesm2015/skyux-lists-testing.mjs.map +1 -1
- package/fesm2015/skyux-lists.mjs +581 -520
- package/fesm2015/skyux-lists.mjs.map +1 -1
- package/fesm2020/skyux-lists-testing.mjs +96 -73
- package/fesm2020/skyux-lists-testing.mjs.map +1 -1
- package/fesm2020/skyux-lists.mjs +573 -520
- package/fesm2020/skyux-lists.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/modules/filter/filter-button.component.d.ts +9 -8
- package/lib/modules/filter/filter-summary-item.component.d.ts +3 -1
- package/lib/modules/infinite-scroll/infinite-scroll-dom-adapter.service.d.ts +3 -9
- package/lib/modules/infinite-scroll/infinite-scroll.component.d.ts +3 -10
- package/lib/modules/paging/paging.component.d.ts +2 -4
- package/lib/modules/repeater/repeater-adapter.service.d.ts +4 -11
- package/lib/modules/repeater/repeater-expand-mode-type.d.ts +1 -0
- package/lib/modules/repeater/repeater-item.component.d.ts +24 -46
- package/lib/modules/repeater/repeater.component.d.ts +8 -21
- package/lib/modules/repeater/repeater.service.d.ts +7 -5
- package/lib/modules/sort/sort-item.component.d.ts +2 -5
- package/lib/modules/sort/sort.component.d.ts +1 -1
- package/package.json +10 -10
- package/testing/filter/filter-fixture-button.d.ts +1 -2
- package/testing/filter/filter-fixture-summary.d.ts +1 -2
- package/testing/filter/lists-filter-fixture-button.d.ts +2 -2
- package/testing/repeater/repeater-item-harness.d.ts +5 -1
- package/testing/sort/sort-fixture-menu-item.d.ts +1 -1
- package/testing/sort/sort-fixture.d.ts +4 -14
package/fesm2020/skyux-lists.mjs
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
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,
|
|
4
|
+
import { NgModule, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewEncapsulation, ContentChild, HostBinding, ViewChild, ContentChildren, HostListener } 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
9
|
import * as i4 from '@skyux/i18n';
|
|
10
10
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
11
|
+
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
11
12
|
import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
|
|
12
13
|
import { takeUntil, filter, map } from 'rxjs/operators';
|
|
13
14
|
import * as i1$1 from '@skyux/core';
|
|
@@ -102,9 +103,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
102
103
|
}]
|
|
103
104
|
}] });
|
|
104
105
|
|
|
106
|
+
var _SkyFilterButtonComponent_defaultButtonId, _SkyFilterButtonComponent_filterButtonIdOrDefault;
|
|
105
107
|
let nextId = 0;
|
|
106
108
|
class SkyFilterButtonComponent {
|
|
107
109
|
constructor() {
|
|
110
|
+
/**
|
|
111
|
+
* Indicates whether the filtering options are exposed.
|
|
112
|
+
* To support [accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure),
|
|
113
|
+
* this property is necessary when using inline filters.
|
|
114
|
+
*/
|
|
115
|
+
this.ariaExpanded = false;
|
|
108
116
|
/**
|
|
109
117
|
* Indicates whether to highlight the filter button to indicate that filters were applied.
|
|
110
118
|
* We recommend setting this property to `true` when no indication of filtering is visible
|
|
@@ -123,26 +131,30 @@ class SkyFilterButtonComponent {
|
|
|
123
131
|
* Fires when the filter button is selected.
|
|
124
132
|
*/
|
|
125
133
|
this.filterButtonClick = new EventEmitter();
|
|
134
|
+
_SkyFilterButtonComponent_defaultButtonId.set(this, void 0);
|
|
135
|
+
_SkyFilterButtonComponent_filterButtonIdOrDefault.set(this, void 0);
|
|
136
|
+
__classPrivateFieldSet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, __classPrivateFieldSet(this, _SkyFilterButtonComponent_defaultButtonId, `sky-filter-button-${++nextId}`, "f"), "f");
|
|
126
137
|
}
|
|
127
138
|
/**
|
|
128
139
|
* Specifies an ID for the filter button.
|
|
129
140
|
*/
|
|
130
141
|
get filterButtonId() {
|
|
131
|
-
return this
|
|
142
|
+
return __classPrivateFieldGet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, "f");
|
|
132
143
|
}
|
|
133
144
|
set filterButtonId(value) {
|
|
134
|
-
this
|
|
145
|
+
__classPrivateFieldSet(this, _SkyFilterButtonComponent_filterButtonIdOrDefault, value || __classPrivateFieldGet(this, _SkyFilterButtonComponent_defaultButtonId, "f"), "f");
|
|
135
146
|
}
|
|
136
147
|
filterButtonOnClick() {
|
|
137
|
-
this.filterButtonClick.emit(
|
|
148
|
+
this.filterButtonClick.emit();
|
|
138
149
|
}
|
|
139
150
|
}
|
|
151
|
+
_SkyFilterButtonComponent_defaultButtonId = new WeakMap(), _SkyFilterButtonComponent_filterButtonIdOrDefault = new WeakMap();
|
|
140
152
|
SkyFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
141
153
|
SkyFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyFilterButtonComponent, selector: "sky-filter-button", inputs: { filterButtonId: "filterButtonId", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", active: "active", disabled: "disabled", showButtonText: "showButtonText" }, outputs: { filterButtonClick: "filterButtonClick" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default sky-filter-btn\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"'skyux_filter_button_title' | skyLibResources\"\n [attr.title]=\"'skyux_filter_button_title' | skyLibResources\"\n [disabled]=\"disabled\"\n [id]=\"filterButtonId\"\n [ngClass]=\"{\n 'sky-filter-btn-active': active\n }\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-theme-modern': 'modern'\n }\"\n (click)=\"filterButtonOnClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\" size=\"lg\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"filter\" iconType=\"skyux\"></sky-icon>\n <span *ngIf=\"showButtonText\" class=\"sky-filter-btn-text\">\n {{ 'skyux_filter_button_title' | skyLibResources }}\n </span>\n</button>\n", styles: [".sky-filter-btn-active,.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#212327}.sky-theme-modern.sky-filter-btn-active,.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:focus{color:initial;border:none;box-shadow:inset 0 0 0 1px #0974a1;background-color:#c1e8fb;color:#212327;padding:9px 21px}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:focus:hover{border:none;box-shadow:inset 0 0 0 1px #0974a1;text-decoration:none}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:hover,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{color:#212327}.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #0974a1;background-image:none}.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active[disabled],.sky-theme-modern.sky-filter-btn-active[disabled]:hover,.sky-theme-modern.sky-filter-btn-active[disabled]:focus,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active[disabled]:active,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover[disabled],.sky-theme-modern.sky-filter-btn-active:hover[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:active,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus[disabled],.sky-theme-modern.sky-filter-btn-active:focus[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:active,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern.sky-filter-btn-active:focus,.sky-theme-modern.sky-filter-btn-active:hover:focus,.sky-theme-modern.sky-filter-btn-active:focus:focus{outline:none}.sky-theme-modern.sky-filter-btn-active:focus:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #0974a1,0 1px 8px #0000004d}:host .sky-filter-btn-text{display:none}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn-text,:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-filter-btn-text{display:inline}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], 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: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
142
154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFilterButtonComponent, decorators: [{
|
|
143
155
|
type: Component,
|
|
144
156
|
args: [{ selector: 'sky-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"sky-btn sky-btn-default sky-filter-btn\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"'skyux_filter_button_title' | skyLibResources\"\n [attr.title]=\"'skyux_filter_button_title' | skyLibResources\"\n [disabled]=\"disabled\"\n [id]=\"filterButtonId\"\n [ngClass]=\"{\n 'sky-filter-btn-active': active\n }\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-theme-modern': 'modern'\n }\"\n (click)=\"filterButtonOnClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\" size=\"lg\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"filter\" iconType=\"skyux\"></sky-icon>\n <span *ngIf=\"showButtonText\" class=\"sky-filter-btn-text\">\n {{ 'skyux_filter_button_title' | skyLibResources }}\n </span>\n</button>\n", styles: [".sky-filter-btn-active,.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#212327}.sky-theme-modern.sky-filter-btn-active,.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:focus{color:initial;border:none;box-shadow:inset 0 0 0 1px #0974a1;background-color:#c1e8fb;color:#212327;padding:9px 21px}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:focus:hover{border:none;box-shadow:inset 0 0 0 1px #0974a1;text-decoration:none}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:hover,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{color:#212327}.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #0974a1;background-image:none}.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active[disabled],.sky-theme-modern.sky-filter-btn-active[disabled]:hover,.sky-theme-modern.sky-filter-btn-active[disabled]:focus,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active[disabled]:active,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover[disabled],.sky-theme-modern.sky-filter-btn-active:hover[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:active,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus[disabled],.sky-theme-modern.sky-filter-btn-active:focus[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:active,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:hover,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus.sky-btn-focus,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus:active,fieldset[disabled] .sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern.sky-filter-btn-active:focus,.sky-theme-modern.sky-filter-btn-active:hover:focus,.sky-theme-modern.sky-filter-btn-active:focus:focus{outline:none}.sky-theme-modern.sky-filter-btn-active:focus:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #0974a1,0 1px 8px #0000004d}:host .sky-filter-btn-text{display:none}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn-text,:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-filter-btn-text{display:inline}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}\n"] }]
|
|
145
|
-
}], propDecorators: { filterButtonId: [{
|
|
157
|
+
}], ctorParameters: function () { return []; }, propDecorators: { filterButtonId: [{
|
|
146
158
|
type: Input
|
|
147
159
|
}], ariaControls: [{
|
|
148
160
|
type: Input
|
|
@@ -182,15 +194,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
182
194
|
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"] }]
|
|
183
195
|
}] });
|
|
184
196
|
|
|
197
|
+
var _SkyFilterSummaryItemComponent__dismissible;
|
|
185
198
|
/**
|
|
186
199
|
* Specifies a filter that was applied.
|
|
187
200
|
*/
|
|
188
201
|
class SkyFilterSummaryItemComponent {
|
|
189
202
|
constructor() {
|
|
190
|
-
/**
|
|
191
|
-
* Indicates whether the filter summary item has a close button.
|
|
192
|
-
*/
|
|
193
|
-
this.dismissible = true;
|
|
194
203
|
/**
|
|
195
204
|
* Fires when the summary item close button is selected.
|
|
196
205
|
*/
|
|
@@ -199,6 +208,16 @@ class SkyFilterSummaryItemComponent {
|
|
|
199
208
|
* Fires when the summary item is selected.
|
|
200
209
|
*/
|
|
201
210
|
this.itemClick = new EventEmitter();
|
|
211
|
+
_SkyFilterSummaryItemComponent__dismissible.set(this, true);
|
|
212
|
+
}
|
|
213
|
+
/**
|
|
214
|
+
* Indicates whether the filter summary item has a close button.
|
|
215
|
+
*/
|
|
216
|
+
get dismissible() {
|
|
217
|
+
return __classPrivateFieldGet(this, _SkyFilterSummaryItemComponent__dismissible, "f");
|
|
218
|
+
}
|
|
219
|
+
set dismissible(value) {
|
|
220
|
+
__classPrivateFieldSet(this, _SkyFilterSummaryItemComponent__dismissible, value !== false, "f");
|
|
202
221
|
}
|
|
203
222
|
onItemDismiss() {
|
|
204
223
|
this.dismiss.emit();
|
|
@@ -210,8 +229,9 @@ class SkyFilterSummaryItemComponent {
|
|
|
210
229
|
this.itemClick.emit();
|
|
211
230
|
}
|
|
212
231
|
}
|
|
232
|
+
_SkyFilterSummaryItemComponent__dismissible = new WeakMap();
|
|
213
233
|
SkyFilterSummaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFilterSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
214
|
-
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], outputs: ["dismiss", "tokenFocus"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
234
|
+
SkyFilterSummaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
215
235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFilterSummaryItemComponent, decorators: [{
|
|
216
236
|
type: Component,
|
|
217
237
|
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"] }]
|
|
@@ -283,19 +303,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
283
303
|
}]
|
|
284
304
|
}] });
|
|
285
305
|
|
|
306
|
+
var _SkyInfiniteScrollDomAdapterService_instances, _SkyInfiniteScrollDomAdapterService_ngUnsubscribe, _SkyInfiniteScrollDomAdapterService_observer, _SkyInfiniteScrollDomAdapterService_parentChanges, _SkyInfiniteScrollDomAdapterService_parentChangesObs, _SkyInfiniteScrollDomAdapterService_scrollableHostSvc, _SkyInfiniteScrollDomAdapterService_windowRef, _SkyInfiniteScrollDomAdapterService_createObserver, _SkyInfiniteScrollDomAdapterService_isElementScrolledInView;
|
|
286
307
|
/**
|
|
287
308
|
* @internal
|
|
288
309
|
*/
|
|
289
310
|
class SkyInfiniteScrollDomAdapterService {
|
|
290
|
-
constructor(windowRef) {
|
|
291
|
-
this
|
|
292
|
-
this
|
|
293
|
-
this
|
|
311
|
+
constructor(scrollableHostSvc, windowRef) {
|
|
312
|
+
_SkyInfiniteScrollDomAdapterService_instances.add(this);
|
|
313
|
+
_SkyInfiniteScrollDomAdapterService_ngUnsubscribe.set(this, new Subject());
|
|
314
|
+
_SkyInfiniteScrollDomAdapterService_observer.set(this, void 0);
|
|
315
|
+
_SkyInfiniteScrollDomAdapterService_parentChanges.set(this, void 0);
|
|
316
|
+
_SkyInfiniteScrollDomAdapterService_parentChangesObs.set(this, void 0);
|
|
317
|
+
_SkyInfiniteScrollDomAdapterService_scrollableHostSvc.set(this, void 0);
|
|
318
|
+
_SkyInfiniteScrollDomAdapterService_windowRef.set(this, void 0);
|
|
319
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollDomAdapterService_scrollableHostSvc, scrollableHostSvc, "f");
|
|
320
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollDomAdapterService_windowRef, windowRef, "f");
|
|
321
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollDomAdapterService_parentChanges, new Subject(), "f");
|
|
322
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollDomAdapterService_parentChangesObs, __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_parentChanges, "f").asObservable(), "f");
|
|
294
323
|
}
|
|
295
324
|
ngOnDestroy() {
|
|
296
|
-
this.
|
|
297
|
-
this.
|
|
298
|
-
this.
|
|
325
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_parentChanges, "f").complete();
|
|
326
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_ngUnsubscribe, "f").next();
|
|
327
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_ngUnsubscribe, "f").complete();
|
|
299
328
|
}
|
|
300
329
|
/**
|
|
301
330
|
* This event is triggered when child nodes are added to the infinite
|
|
@@ -303,8 +332,8 @@ class SkyInfiniteScrollDomAdapterService {
|
|
|
303
332
|
* @param elementRef The infinite scroll element reference.
|
|
304
333
|
*/
|
|
305
334
|
parentChanges(elementRef) {
|
|
306
|
-
this.
|
|
307
|
-
return this
|
|
335
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_instances, "m", _SkyInfiniteScrollDomAdapterService_createObserver).call(this, elementRef);
|
|
336
|
+
return __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_parentChangesObs, "f");
|
|
308
337
|
}
|
|
309
338
|
/**
|
|
310
339
|
* This event is triggered when the provided element reference
|
|
@@ -312,69 +341,50 @@ class SkyInfiniteScrollDomAdapterService {
|
|
|
312
341
|
* @param elementRef The infinite scroll element reference.
|
|
313
342
|
*/
|
|
314
343
|
scrollTo(elementRef) {
|
|
315
|
-
const parent = this.
|
|
316
|
-
return fromEvent(parent, 'scroll').pipe(takeUntil(this
|
|
317
|
-
return this.
|
|
344
|
+
const parent = __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_scrollableHostSvc, "f").getScrollableHost(elementRef);
|
|
345
|
+
return fromEvent(parent, 'scroll').pipe(takeUntil(__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_ngUnsubscribe, "f")), filter(() => {
|
|
346
|
+
return __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_instances, "m", _SkyInfiniteScrollDomAdapterService_isElementScrolledInView).call(this, elementRef.nativeElement, parent);
|
|
318
347
|
}), map(() => undefined) // Change to void return type
|
|
319
348
|
);
|
|
320
349
|
}
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
this._parentChanges.emit();
|
|
328
|
-
}
|
|
329
|
-
});
|
|
330
|
-
const windowObj = this.windowRef.nativeWindow;
|
|
331
|
-
const parent = this.findScrollableParent(element);
|
|
332
|
-
const observedParent = parent === windowObj ? windowObj.document.body : parent;
|
|
333
|
-
this.observer.observe(observedParent, {
|
|
334
|
-
childList: true,
|
|
335
|
-
subtree: true,
|
|
350
|
+
}
|
|
351
|
+
_SkyInfiniteScrollDomAdapterService_ngUnsubscribe = new WeakMap(), _SkyInfiniteScrollDomAdapterService_observer = new WeakMap(), _SkyInfiniteScrollDomAdapterService_parentChanges = new WeakMap(), _SkyInfiniteScrollDomAdapterService_parentChangesObs = new WeakMap(), _SkyInfiniteScrollDomAdapterService_scrollableHostSvc = new WeakMap(), _SkyInfiniteScrollDomAdapterService_windowRef = new WeakMap(), _SkyInfiniteScrollDomAdapterService_instances = new WeakSet(), _SkyInfiniteScrollDomAdapterService_createObserver = function _SkyInfiniteScrollDomAdapterService_createObserver(elementRef) {
|
|
352
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollDomAdapterService_observer, new MutationObserver((mutations) => {
|
|
353
|
+
const hasUpdates = !!mutations.find((mutation) => {
|
|
354
|
+
return (!elementRef.nativeElement.contains(mutation.target) &&
|
|
355
|
+
mutation.addedNodes.length > 0);
|
|
336
356
|
});
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
const regex = /(auto|scroll)/;
|
|
340
|
-
const windowObj = this.windowRef.nativeWindow;
|
|
341
|
-
const bodyObj = windowObj.document.body;
|
|
342
|
-
let style = windowObj.getComputedStyle(element);
|
|
343
|
-
let parent = element;
|
|
344
|
-
do {
|
|
345
|
-
parent = parent.parentNode;
|
|
346
|
-
style = windowObj.getComputedStyle(parent);
|
|
347
|
-
} while (!regex.test(style.overflow) &&
|
|
348
|
-
!regex.test(style.overflowY) &&
|
|
349
|
-
parent.parentNode &&
|
|
350
|
-
parent !== bodyObj);
|
|
351
|
-
if (parent === bodyObj) {
|
|
352
|
-
return windowObj;
|
|
353
|
-
}
|
|
354
|
-
return parent;
|
|
355
|
-
}
|
|
356
|
-
isElementScrolledInView(element, parentElement) {
|
|
357
|
-
const windowObj = this.windowRef.nativeWindow;
|
|
358
|
-
if (parentElement === windowObj) {
|
|
359
|
-
return (parentElement.pageYOffset + parentElement.innerHeight >
|
|
360
|
-
element.offsetTop);
|
|
357
|
+
if (hasUpdates) {
|
|
358
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_parentChanges, "f").next();
|
|
361
359
|
}
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
360
|
+
}), "f");
|
|
361
|
+
const windowObj = __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_windowRef, "f").nativeWindow;
|
|
362
|
+
const parent = __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_scrollableHostSvc, "f").getScrollableHost(elementRef);
|
|
363
|
+
const observedParent = parent === windowObj ? windowObj.document.body : parent;
|
|
364
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_observer, "f").observe(observedParent, {
|
|
365
|
+
childList: true,
|
|
366
|
+
subtree: true,
|
|
367
|
+
});
|
|
368
|
+
}, _SkyInfiniteScrollDomAdapterService_isElementScrolledInView = function _SkyInfiniteScrollDomAdapterService_isElementScrolledInView(element, parentElement) {
|
|
369
|
+
const windowObj = __classPrivateFieldGet(this, _SkyInfiniteScrollDomAdapterService_windowRef, "f").nativeWindow;
|
|
370
|
+
if (parentElement === windowObj) {
|
|
371
|
+
return (parentElement.pageYOffset + parentElement.innerHeight >
|
|
372
|
+
element.offsetTop);
|
|
373
|
+
}
|
|
374
|
+
const elementRect = element.getBoundingClientRect();
|
|
375
|
+
const parentRect = parentElement.getBoundingClientRect();
|
|
376
|
+
return elementRect.top < parentRect.top + parentRect.height;
|
|
377
|
+
};
|
|
378
|
+
SkyInfiniteScrollDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, deps: [{ token: i1$1.SkyScrollableHostService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
368
379
|
SkyInfiniteScrollDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInfiniteScrollDomAdapterService });
|
|
369
380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, decorators: [{
|
|
370
381
|
type: Injectable
|
|
371
|
-
}], ctorParameters: function () { return [{ type: i1$1.SkyAppWindowRef }]; } });
|
|
382
|
+
}], ctorParameters: function () { return [{ type: i1$1.SkyScrollableHostService }, { type: i1$1.SkyAppWindowRef }]; } });
|
|
372
383
|
|
|
384
|
+
var _SkyInfiniteScrollComponent_instances, _SkyInfiniteScrollComponent_changeDetector, _SkyInfiniteScrollComponent_domAdapter, _SkyInfiniteScrollComponent_elementRef, _SkyInfiniteScrollComponent_ngUnsubscribe, _SkyInfiniteScrollComponent__enabled, _SkyInfiniteScrollComponent__loading, _SkyInfiniteScrollComponent_notifyScrollEnd, _SkyInfiniteScrollComponent_setListeners;
|
|
373
385
|
class SkyInfiniteScrollComponent {
|
|
374
386
|
constructor(changeDetector, elementRef, domAdapter) {
|
|
375
|
-
this
|
|
376
|
-
this.elementRef = elementRef;
|
|
377
|
-
this.domAdapter = domAdapter;
|
|
387
|
+
_SkyInfiniteScrollComponent_instances.add(this);
|
|
378
388
|
/**
|
|
379
389
|
* Fires when scrolling triggers the need to load more data or when users select the button
|
|
380
390
|
* to load more data. This event only fires when the `enabled` property is set to `true`
|
|
@@ -382,7 +392,15 @@ class SkyInfiniteScrollComponent {
|
|
|
382
392
|
*/
|
|
383
393
|
this.scrollEnd = new EventEmitter();
|
|
384
394
|
this.isWaiting = false;
|
|
385
|
-
this
|
|
395
|
+
_SkyInfiniteScrollComponent_changeDetector.set(this, void 0);
|
|
396
|
+
_SkyInfiniteScrollComponent_domAdapter.set(this, void 0);
|
|
397
|
+
_SkyInfiniteScrollComponent_elementRef.set(this, void 0);
|
|
398
|
+
_SkyInfiniteScrollComponent_ngUnsubscribe.set(this, new Subject());
|
|
399
|
+
_SkyInfiniteScrollComponent__enabled.set(this, false);
|
|
400
|
+
_SkyInfiniteScrollComponent__loading.set(this, void 0);
|
|
401
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_changeDetector, changeDetector, "f");
|
|
402
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_elementRef, elementRef, "f");
|
|
403
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent_domAdapter, domAdapter, "f");
|
|
386
404
|
}
|
|
387
405
|
/**
|
|
388
406
|
* Indicates whether to make the infinite scroll component active when more data is available
|
|
@@ -390,12 +408,12 @@ class SkyInfiniteScrollComponent {
|
|
|
390
408
|
* @default false
|
|
391
409
|
*/
|
|
392
410
|
get enabled() {
|
|
393
|
-
return this
|
|
411
|
+
return __classPrivateFieldGet(this, _SkyInfiniteScrollComponent__enabled, "f");
|
|
394
412
|
}
|
|
395
413
|
set enabled(value) {
|
|
396
|
-
if (this
|
|
397
|
-
this
|
|
398
|
-
this.
|
|
414
|
+
if (__classPrivateFieldGet(this, _SkyInfiniteScrollComponent__enabled, "f") !== value) {
|
|
415
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent__enabled, value, "f");
|
|
416
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_instances, "m", _SkyInfiniteScrollComponent_setListeners).call(this);
|
|
399
417
|
}
|
|
400
418
|
}
|
|
401
419
|
/**
|
|
@@ -409,54 +427,53 @@ class SkyInfiniteScrollComponent {
|
|
|
409
427
|
* @required
|
|
410
428
|
*/
|
|
411
429
|
get loading() {
|
|
412
|
-
return this
|
|
430
|
+
return __classPrivateFieldGet(this, _SkyInfiniteScrollComponent__loading, "f");
|
|
413
431
|
}
|
|
414
432
|
set loading(value) {
|
|
415
|
-
this
|
|
433
|
+
__classPrivateFieldSet(this, _SkyInfiniteScrollComponent__loading, value, "f");
|
|
416
434
|
if (value !== undefined) {
|
|
417
435
|
this.isWaiting = value;
|
|
418
436
|
}
|
|
419
437
|
}
|
|
420
438
|
ngOnDestroy() {
|
|
421
439
|
this.enabled = false;
|
|
422
|
-
this.
|
|
423
|
-
this.
|
|
440
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f").next();
|
|
441
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f").complete();
|
|
424
442
|
}
|
|
425
443
|
startInfiniteScrollLoad() {
|
|
426
|
-
this.
|
|
427
|
-
}
|
|
428
|
-
notifyScrollEnd() {
|
|
429
|
-
this.isWaiting = true;
|
|
430
|
-
this.scrollEnd.emit();
|
|
431
|
-
this.changeDetector.markForCheck();
|
|
432
|
-
}
|
|
433
|
-
setListeners() {
|
|
434
|
-
if (this.enabled) {
|
|
435
|
-
// The user has scrolled to the infinite scroll element.
|
|
436
|
-
this.domAdapter
|
|
437
|
-
.scrollTo(this.elementRef)
|
|
438
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
439
|
-
.subscribe(() => {
|
|
440
|
-
if (!this.isWaiting && this.enabled) {
|
|
441
|
-
this.notifyScrollEnd();
|
|
442
|
-
}
|
|
443
|
-
});
|
|
444
|
-
// New items have been loaded into the parent element.
|
|
445
|
-
this.domAdapter
|
|
446
|
-
.parentChanges(this.elementRef)
|
|
447
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
448
|
-
.subscribe(() => {
|
|
449
|
-
if (!this.loading) {
|
|
450
|
-
this.isWaiting = false;
|
|
451
|
-
this.changeDetector.markForCheck();
|
|
452
|
-
}
|
|
453
|
-
});
|
|
454
|
-
}
|
|
455
|
-
else {
|
|
456
|
-
this.ngUnsubscribe.next();
|
|
457
|
-
}
|
|
444
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_instances, "m", _SkyInfiniteScrollComponent_notifyScrollEnd).call(this);
|
|
458
445
|
}
|
|
459
446
|
}
|
|
447
|
+
_SkyInfiniteScrollComponent_changeDetector = new WeakMap(), _SkyInfiniteScrollComponent_domAdapter = new WeakMap(), _SkyInfiniteScrollComponent_elementRef = new WeakMap(), _SkyInfiniteScrollComponent_ngUnsubscribe = new WeakMap(), _SkyInfiniteScrollComponent__enabled = new WeakMap(), _SkyInfiniteScrollComponent__loading = new WeakMap(), _SkyInfiniteScrollComponent_instances = new WeakSet(), _SkyInfiniteScrollComponent_notifyScrollEnd = function _SkyInfiniteScrollComponent_notifyScrollEnd() {
|
|
448
|
+
this.isWaiting = true;
|
|
449
|
+
this.scrollEnd.emit();
|
|
450
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_changeDetector, "f").markForCheck();
|
|
451
|
+
}, _SkyInfiniteScrollComponent_setListeners = function _SkyInfiniteScrollComponent_setListeners() {
|
|
452
|
+
if (this.enabled) {
|
|
453
|
+
// The user has scrolled to the infinite scroll element.
|
|
454
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_domAdapter, "f")
|
|
455
|
+
.scrollTo(__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_elementRef, "f"))
|
|
456
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f")))
|
|
457
|
+
.subscribe(() => {
|
|
458
|
+
if (!this.isWaiting && this.enabled) {
|
|
459
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_instances, "m", _SkyInfiniteScrollComponent_notifyScrollEnd).call(this);
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
// New items have been loaded into the parent element.
|
|
463
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_domAdapter, "f")
|
|
464
|
+
.parentChanges(__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_elementRef, "f"))
|
|
465
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f")))
|
|
466
|
+
.subscribe(() => {
|
|
467
|
+
if (!this.loading) {
|
|
468
|
+
this.isWaiting = false;
|
|
469
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_changeDetector, "f").markForCheck();
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
}
|
|
473
|
+
else {
|
|
474
|
+
__classPrivateFieldGet(this, _SkyInfiniteScrollComponent_ngUnsubscribe, "f").next();
|
|
475
|
+
}
|
|
476
|
+
};
|
|
460
477
|
SkyInfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInfiniteScrollComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyInfiniteScrollDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
461
478
|
SkyInfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
462
479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
|
|
@@ -484,8 +501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
484
501
|
}]
|
|
485
502
|
}] });
|
|
486
503
|
|
|
504
|
+
var _SkyPagingComponent_instances, _SkyPagingComponent_getDisplayedPageNumbers, _SkyPagingComponent_setPageCount, _SkyPagingComponent_setDisplayedPages;
|
|
487
505
|
class SkyPagingComponent {
|
|
488
506
|
constructor() {
|
|
507
|
+
_SkyPagingComponent_instances.add(this);
|
|
489
508
|
/**
|
|
490
509
|
* Specifies the page number of the current page. Page numbers start at 1 and increment.
|
|
491
510
|
*/
|
|
@@ -514,7 +533,7 @@ class SkyPagingComponent {
|
|
|
514
533
|
}
|
|
515
534
|
setPage(pageNumber) {
|
|
516
535
|
const previousPage = this.currentPage;
|
|
517
|
-
this.
|
|
536
|
+
__classPrivateFieldGet(this, _SkyPagingComponent_instances, "m", _SkyPagingComponent_setPageCount).call(this);
|
|
518
537
|
if (pageNumber < 1 || this.pageCount < 1) {
|
|
519
538
|
this.currentPage = 1;
|
|
520
539
|
}
|
|
@@ -524,7 +543,7 @@ class SkyPagingComponent {
|
|
|
524
543
|
else {
|
|
525
544
|
this.currentPage = pageNumber;
|
|
526
545
|
}
|
|
527
|
-
this.
|
|
546
|
+
__classPrivateFieldGet(this, _SkyPagingComponent_instances, "m", _SkyPagingComponent_setDisplayedPages).call(this);
|
|
528
547
|
if (previousPage !== this.currentPage) {
|
|
529
548
|
this.currentPageChange.emit(this.currentPage);
|
|
530
549
|
}
|
|
@@ -541,46 +560,44 @@ class SkyPagingComponent {
|
|
|
541
560
|
get isNextButtonDisabled() {
|
|
542
561
|
return this.currentPage === this.pageCount;
|
|
543
562
|
}
|
|
544
|
-
getDisplayedPageNumbers(pageCount, maxDisplayedPages, pageNumber) {
|
|
545
|
-
const pageIndex = pageNumber - 1;
|
|
546
|
-
const pageBounds = Math.floor(maxDisplayedPages / 2);
|
|
547
|
-
let upperBound = pageIndex + pageBounds;
|
|
548
|
-
let lowerBound = pageIndex - pageBounds;
|
|
549
|
-
if (maxDisplayedPages % 2 !== 0) {
|
|
550
|
-
upperBound += 1;
|
|
551
|
-
}
|
|
552
|
-
// Wrap negative values to increase the upperbound
|
|
553
|
-
if (lowerBound < 0) {
|
|
554
|
-
upperBound -= lowerBound;
|
|
555
|
-
lowerBound = 0;
|
|
556
|
-
}
|
|
557
|
-
// Wrap overflow to decrease the lowerbound
|
|
558
|
-
if (upperBound > pageCount) {
|
|
559
|
-
lowerBound -= upperBound - pageCount;
|
|
560
|
-
upperBound = pageCount;
|
|
561
|
-
}
|
|
562
|
-
// If both are the same ignore everything else and just display it all
|
|
563
|
-
if (pageCount < maxDisplayedPages) {
|
|
564
|
-
lowerBound = 0;
|
|
565
|
-
upperBound = pageCount;
|
|
566
|
-
}
|
|
567
|
-
const displayedPageNumbers = [];
|
|
568
|
-
for (let i = lowerBound; i < upperBound; i++) {
|
|
569
|
-
displayedPageNumbers.push(i + 1);
|
|
570
|
-
}
|
|
571
|
-
return displayedPageNumbers;
|
|
572
|
-
}
|
|
573
|
-
setPageCount() {
|
|
574
|
-
if (this.itemCount === 0 || this.pageSize === 0) {
|
|
575
|
-
this.pageCount = 0;
|
|
576
|
-
return;
|
|
577
|
-
}
|
|
578
|
-
this.pageCount = Math.ceil(this.itemCount / this.pageSize);
|
|
579
|
-
}
|
|
580
|
-
setDisplayedPages() {
|
|
581
|
-
this.displayedPages = this.getDisplayedPageNumbers(this.pageCount, this.maxPages, this.currentPage);
|
|
582
|
-
}
|
|
583
563
|
}
|
|
564
|
+
_SkyPagingComponent_instances = new WeakSet(), _SkyPagingComponent_getDisplayedPageNumbers = function _SkyPagingComponent_getDisplayedPageNumbers(pageCount, maxDisplayedPages, pageNumber) {
|
|
565
|
+
const pageIndex = pageNumber - 1;
|
|
566
|
+
const pageBounds = Math.floor(maxDisplayedPages / 2);
|
|
567
|
+
let upperBound = pageIndex + pageBounds;
|
|
568
|
+
let lowerBound = pageIndex - pageBounds;
|
|
569
|
+
if (maxDisplayedPages % 2 !== 0) {
|
|
570
|
+
upperBound += 1;
|
|
571
|
+
}
|
|
572
|
+
// Wrap negative values to increase the upperbound
|
|
573
|
+
if (lowerBound < 0) {
|
|
574
|
+
upperBound -= lowerBound;
|
|
575
|
+
lowerBound = 0;
|
|
576
|
+
}
|
|
577
|
+
// Wrap overflow to decrease the lowerbound
|
|
578
|
+
if (upperBound > pageCount) {
|
|
579
|
+
lowerBound -= upperBound - pageCount;
|
|
580
|
+
upperBound = pageCount;
|
|
581
|
+
}
|
|
582
|
+
// If both are the same ignore everything else and just display it all
|
|
583
|
+
if (pageCount < maxDisplayedPages) {
|
|
584
|
+
lowerBound = 0;
|
|
585
|
+
upperBound = pageCount;
|
|
586
|
+
}
|
|
587
|
+
const displayedPageNumbers = [];
|
|
588
|
+
for (let i = lowerBound; i < upperBound; i++) {
|
|
589
|
+
displayedPageNumbers.push(i + 1);
|
|
590
|
+
}
|
|
591
|
+
return displayedPageNumbers;
|
|
592
|
+
}, _SkyPagingComponent_setPageCount = function _SkyPagingComponent_setPageCount() {
|
|
593
|
+
if (this.itemCount === 0 || this.pageSize === 0) {
|
|
594
|
+
this.pageCount = 0;
|
|
595
|
+
return;
|
|
596
|
+
}
|
|
597
|
+
this.pageCount = Math.ceil(this.itemCount / this.pageSize);
|
|
598
|
+
}, _SkyPagingComponent_setDisplayedPages = function _SkyPagingComponent_setDisplayedPages() {
|
|
599
|
+
this.displayedPages = __classPrivateFieldGet(this, _SkyPagingComponent_instances, "m", _SkyPagingComponent_getDisplayedPageNumbers).call(this, this.pageCount, this.maxPages, this.currentPage);
|
|
600
|
+
};
|
|
584
601
|
SkyPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
585
602
|
SkyPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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:#c1e8fb;border:solid 1px #1870B8;padding:2px 9px}.sky-theme-modern .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}.sky-theme-modern .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}.sky-theme-modern .sky-paging-btn:active,.sky-theme-modern .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}.sky-theme-modern .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}.sky-theme-modern .sky-paging-current{background-color:#c1e8fb;border:solid 1px #1870B8;padding:2px 9px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:active,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:focus{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-current{background-color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:active,.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:focus{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-paging-current{background-color:#1870b8}\n"], 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: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
586
603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPagingComponent, decorators: [{
|
|
@@ -664,6 +681,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
664
681
|
args: [{ selector: 'sky-repeater-item-title', template: "<ng-content></ng-content>\n" }]
|
|
665
682
|
}] });
|
|
666
683
|
|
|
684
|
+
var _SkyRepeaterService__expandMode;
|
|
685
|
+
let uniqueId = 0;
|
|
686
|
+
const DEFAULT_EXPAND_MODE = 'none';
|
|
667
687
|
/**
|
|
668
688
|
* @internal
|
|
669
689
|
*/
|
|
@@ -680,6 +700,15 @@ class SkyRepeaterService {
|
|
|
680
700
|
title: undefined,
|
|
681
701
|
});
|
|
682
702
|
this.orderChange = new BehaviorSubject(undefined);
|
|
703
|
+
this.repeaterGroupId = ++uniqueId;
|
|
704
|
+
_SkyRepeaterService__expandMode.set(this, DEFAULT_EXPAND_MODE);
|
|
705
|
+
}
|
|
706
|
+
// TODO: Remove 'string' as a valid type in a breaking change.
|
|
707
|
+
get expandMode() {
|
|
708
|
+
return __classPrivateFieldGet(this, _SkyRepeaterService__expandMode, "f");
|
|
709
|
+
}
|
|
710
|
+
set expandMode(value) {
|
|
711
|
+
__classPrivateFieldSet(this, _SkyRepeaterService__expandMode, value ?? DEFAULT_EXPAND_MODE, "f");
|
|
683
712
|
}
|
|
684
713
|
ngOnDestroy() {
|
|
685
714
|
this.activeItemChange.complete();
|
|
@@ -722,9 +751,6 @@ class SkyRepeaterService {
|
|
|
722
751
|
onItemCollapseStateChange(item) {
|
|
723
752
|
this.itemCollapseStateChange.emit(item);
|
|
724
753
|
}
|
|
725
|
-
getItemIndex(item) {
|
|
726
|
-
return this.items.indexOf(item);
|
|
727
|
-
}
|
|
728
754
|
registerOrderChange() {
|
|
729
755
|
this.orderChange.next();
|
|
730
756
|
}
|
|
@@ -732,35 +758,39 @@ class SkyRepeaterService {
|
|
|
732
758
|
this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
|
|
733
759
|
}
|
|
734
760
|
}
|
|
761
|
+
_SkyRepeaterService__expandMode = new WeakMap();
|
|
735
762
|
SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
736
763
|
SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterService });
|
|
737
764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterService, decorators: [{
|
|
738
765
|
type: Injectable
|
|
739
766
|
}] });
|
|
740
767
|
|
|
768
|
+
var _SkyRepeaterAdapterService_instances, _SkyRepeaterAdapterService_repeaterItemGroupSelector_get, _SkyRepeaterAdapterService_host, _SkyRepeaterAdapterService_repeaterService, _SkyRepeaterAdapterService_moveItem, _SkyRepeaterAdapterService_getRepeaterItemArray;
|
|
741
769
|
/**
|
|
742
770
|
* @internal
|
|
743
771
|
*/
|
|
744
772
|
class SkyRepeaterAdapterService {
|
|
745
773
|
constructor(repeaterService) {
|
|
746
|
-
this
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
774
|
+
_SkyRepeaterAdapterService_instances.add(this);
|
|
775
|
+
_SkyRepeaterAdapterService_host.set(this, void 0);
|
|
776
|
+
_SkyRepeaterAdapterService_repeaterService.set(this, void 0);
|
|
777
|
+
__classPrivateFieldSet(this, _SkyRepeaterAdapterService_repeaterService, repeaterService, "f");
|
|
750
778
|
}
|
|
751
779
|
focusElement(element) {
|
|
752
|
-
if (element
|
|
753
|
-
element
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
780
|
+
if (element) {
|
|
781
|
+
if (element instanceof ElementRef) {
|
|
782
|
+
element.nativeElement.focus();
|
|
783
|
+
}
|
|
784
|
+
else {
|
|
785
|
+
element.focus();
|
|
786
|
+
}
|
|
757
787
|
}
|
|
758
788
|
}
|
|
759
789
|
setRepeaterHost(hostRef) {
|
|
760
|
-
this
|
|
790
|
+
__classPrivateFieldSet(this, _SkyRepeaterAdapterService_host, hostRef, "f");
|
|
761
791
|
}
|
|
762
792
|
getRepeaterItemIndex(element) {
|
|
763
|
-
return this.
|
|
793
|
+
return __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_getRepeaterItemArray).call(this).indexOf(element);
|
|
764
794
|
}
|
|
765
795
|
moveItemUp(element, top = false, steps = 1) {
|
|
766
796
|
const index = this.getRepeaterItemIndex(element);
|
|
@@ -771,49 +801,47 @@ class SkyRepeaterAdapterService {
|
|
|
771
801
|
if (top || newIndex < 0) {
|
|
772
802
|
newIndex = 0;
|
|
773
803
|
}
|
|
774
|
-
return this.
|
|
804
|
+
return __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_moveItem).call(this, element, index, newIndex);
|
|
775
805
|
}
|
|
776
806
|
moveItemDown(element, steps = 1) {
|
|
777
|
-
const itemArray = this.
|
|
807
|
+
const itemArray = __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_getRepeaterItemArray).call(this);
|
|
778
808
|
const index = this.getRepeaterItemIndex(element);
|
|
779
809
|
if (index === itemArray.length - steps) {
|
|
780
810
|
return;
|
|
781
811
|
}
|
|
782
812
|
const newIndex = index + steps;
|
|
783
|
-
return this.
|
|
813
|
+
return __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_moveItem).call(this, element, index, newIndex);
|
|
784
814
|
}
|
|
785
|
-
|
|
786
|
-
|
|
815
|
+
}
|
|
816
|
+
_SkyRepeaterAdapterService_host = new WeakMap(), _SkyRepeaterAdapterService_repeaterService = new WeakMap(), _SkyRepeaterAdapterService_instances = new WeakSet(), _SkyRepeaterAdapterService_repeaterItemGroupSelector_get = function _SkyRepeaterAdapterService_repeaterItemGroupSelector_get() {
|
|
817
|
+
return '.sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterAdapterService_repeaterService, "f").repeaterGroupId;
|
|
818
|
+
}, _SkyRepeaterAdapterService_moveItem = function _SkyRepeaterAdapterService_moveItem(element, oldIndex, newIndex) {
|
|
819
|
+
/* istanbul ignore else */
|
|
820
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f")) {
|
|
821
|
+
const repeaterDiv = __classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f").nativeElement.querySelector('.sky-repeater');
|
|
787
822
|
repeaterDiv.removeChild(element);
|
|
788
|
-
const nextSibling = repeaterDiv.querySelectorAll(this
|
|
823
|
+
const nextSibling = repeaterDiv.querySelectorAll(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "a", _SkyRepeaterAdapterService_repeaterItemGroupSelector_get))[newIndex];
|
|
789
824
|
repeaterDiv.insertBefore(element, nextSibling);
|
|
790
|
-
this.
|
|
791
|
-
return newIndex;
|
|
792
|
-
}
|
|
793
|
-
/**
|
|
794
|
-
* Returns an array of the immediate repeater item descendants. Excludes nested repeater items.
|
|
795
|
-
*/
|
|
796
|
-
getRepeaterItemArray() {
|
|
797
|
-
return Array.from(this.host.nativeElement.querySelectorAll(this.repeaterItemGroupSelector));
|
|
825
|
+
__classPrivateFieldGet(this, _SkyRepeaterAdapterService_repeaterService, "f").reorderItem(oldIndex, newIndex);
|
|
798
826
|
}
|
|
799
|
-
|
|
827
|
+
return newIndex;
|
|
828
|
+
}, _SkyRepeaterAdapterService_getRepeaterItemArray = function _SkyRepeaterAdapterService_getRepeaterItemArray() {
|
|
829
|
+
return Array.from(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f")?.nativeElement.querySelectorAll(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "a", _SkyRepeaterAdapterService_repeaterItemGroupSelector_get)));
|
|
830
|
+
};
|
|
800
831
|
SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
801
832
|
SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterAdapterService });
|
|
802
833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
|
|
803
834
|
type: Injectable
|
|
804
835
|
}], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
|
|
805
836
|
|
|
837
|
+
var _SkyRepeaterItemComponent_instances, _SkyRepeaterItemComponent_adapterService, _SkyRepeaterItemComponent_changeDetector, _SkyRepeaterItemComponent_elementRef, _SkyRepeaterItemComponent_isExpanded, _SkyRepeaterItemComponent_keyboardReorderingEnabled, _SkyRepeaterItemComponent_ngUnsubscribe, _SkyRepeaterItemComponent_reorderCancelText, _SkyRepeaterItemComponent_reorderCurrentIndex, _SkyRepeaterItemComponent_reorderFinishText, _SkyRepeaterItemComponent_reorderInstructions, _SkyRepeaterItemComponent_reorderMovedText, _SkyRepeaterItemComponent_reorderStateDescription, _SkyRepeaterItemComponent_reorderSteps, _SkyRepeaterItemComponent_repeaterService, _SkyRepeaterItemComponent_resourceService, _SkyRepeaterItemComponent__isCollapsible, _SkyRepeaterItemComponent__isDisabled, _SkyRepeaterItemComponent__isSelected, _SkyRepeaterItemComponent_slideForExpanded, _SkyRepeaterItemComponent_keyboardReorderUp, _SkyRepeaterItemComponent_keyboardReorderDown, _SkyRepeaterItemComponent_keyboardToggleReorder, _SkyRepeaterItemComponent_revertReorderSteps, _SkyRepeaterItemComponent_updateExpandOnContentChange;
|
|
806
838
|
let nextContentId = 0;
|
|
807
839
|
/**
|
|
808
840
|
* Creates an individual repeater item.
|
|
809
841
|
*/
|
|
810
842
|
class SkyRepeaterItemComponent {
|
|
811
843
|
constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
|
|
812
|
-
this
|
|
813
|
-
this.changeDetector = changeDetector;
|
|
814
|
-
this.adapterService = adapterService;
|
|
815
|
-
this.elementRef = elementRef;
|
|
816
|
-
this.resourceService = resourceService;
|
|
844
|
+
_SkyRepeaterItemComponent_instances.add(this);
|
|
817
845
|
/**
|
|
818
846
|
* Indicates whether users can change the order of the repeater item.
|
|
819
847
|
* The repeater component's `reorderable` property must also be set to `true`.
|
|
@@ -845,31 +873,51 @@ class SkyRepeaterItemComponent {
|
|
|
845
873
|
* Fires when users select or clear the checkbox for the repeater item.
|
|
846
874
|
*/
|
|
847
875
|
this.isSelectedChange = new EventEmitter();
|
|
848
|
-
this.contentId = `sky-repeater-item-content-${++nextContentId}`;
|
|
849
876
|
this.hasItemContent = false;
|
|
850
877
|
this.isActive = false;
|
|
851
|
-
this.
|
|
852
|
-
this
|
|
853
|
-
this
|
|
854
|
-
this
|
|
855
|
-
this
|
|
856
|
-
this
|
|
857
|
-
|
|
878
|
+
this.reorderButtonLabel = '';
|
|
879
|
+
_SkyRepeaterItemComponent_adapterService.set(this, void 0);
|
|
880
|
+
_SkyRepeaterItemComponent_changeDetector.set(this, void 0);
|
|
881
|
+
_SkyRepeaterItemComponent_elementRef.set(this, void 0);
|
|
882
|
+
_SkyRepeaterItemComponent_isExpanded.set(this, true);
|
|
883
|
+
_SkyRepeaterItemComponent_keyboardReorderingEnabled.set(this, false);
|
|
884
|
+
_SkyRepeaterItemComponent_ngUnsubscribe.set(this, new Subject());
|
|
885
|
+
_SkyRepeaterItemComponent_reorderCancelText.set(this, '');
|
|
886
|
+
_SkyRepeaterItemComponent_reorderCurrentIndex.set(this, -1);
|
|
887
|
+
_SkyRepeaterItemComponent_reorderFinishText.set(this, '');
|
|
888
|
+
_SkyRepeaterItemComponent_reorderInstructions.set(this, '');
|
|
889
|
+
_SkyRepeaterItemComponent_reorderMovedText.set(this, '');
|
|
890
|
+
_SkyRepeaterItemComponent_reorderStateDescription.set(this, '');
|
|
891
|
+
_SkyRepeaterItemComponent_reorderSteps.set(this, 0);
|
|
892
|
+
_SkyRepeaterItemComponent_repeaterService.set(this, void 0);
|
|
893
|
+
_SkyRepeaterItemComponent_resourceService.set(this, void 0);
|
|
894
|
+
_SkyRepeaterItemComponent__isCollapsible.set(this, true);
|
|
895
|
+
_SkyRepeaterItemComponent__isDisabled.set(this, false);
|
|
896
|
+
_SkyRepeaterItemComponent__isSelected.set(this, void 0);
|
|
897
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_repeaterService, repeaterService, "f");
|
|
898
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_changeDetector, changeDetector, "f");
|
|
899
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_adapterService, adapterService, "f");
|
|
900
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_elementRef, elementRef, "f");
|
|
901
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_resourceService, resourceService, "f");
|
|
902
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
|
|
858
903
|
forkJoin([
|
|
859
|
-
this.
|
|
860
|
-
this.
|
|
861
|
-
this.
|
|
862
|
-
this.
|
|
863
|
-
this.
|
|
864
|
-
])
|
|
865
|
-
this
|
|
866
|
-
|
|
867
|
-
this
|
|
868
|
-
this
|
|
869
|
-
this
|
|
870
|
-
this
|
|
904
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_cancel'),
|
|
905
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_finish'),
|
|
906
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_instructions'),
|
|
907
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_operation'),
|
|
908
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_moved'),
|
|
909
|
+
])
|
|
910
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f")))
|
|
911
|
+
.subscribe(([reorderCancelText, reorderFinishText, reorderInstructionsText, reorderOperationText, reorderMovedText,]) => {
|
|
912
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCancelText, reorderCancelText, "f");
|
|
913
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderFinishText, reorderFinishText, "f");
|
|
914
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderStateDescription, reorderInstructionsText, "f");
|
|
915
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderInstructions, reorderOperationText, "f");
|
|
916
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderMovedText, reorderMovedText, "f");
|
|
917
|
+
this.reorderButtonLabel = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f");
|
|
871
918
|
});
|
|
872
|
-
this.
|
|
919
|
+
this.contentId = `sky-repeater-item-content-${++nextContentId}`;
|
|
920
|
+
this.itemRole$ = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").itemRole.asObservable();
|
|
873
921
|
}
|
|
874
922
|
/**
|
|
875
923
|
* Make the first, non-disabled item tab-focusable.
|
|
@@ -877,7 +925,7 @@ class SkyRepeaterItemComponent {
|
|
|
877
925
|
* - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
|
|
878
926
|
*/
|
|
879
927
|
get tabindex() {
|
|
880
|
-
return this.
|
|
928
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled)[0] ===
|
|
881
929
|
this
|
|
882
930
|
? 0
|
|
883
931
|
: -1;
|
|
@@ -886,35 +934,35 @@ class SkyRepeaterItemComponent {
|
|
|
886
934
|
* Whether to exclude an item when cycling through.
|
|
887
935
|
*/
|
|
888
936
|
set disabled(value) {
|
|
889
|
-
if (this
|
|
937
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f") !== value) {
|
|
890
938
|
if (value) {
|
|
891
939
|
this.isSelected = false;
|
|
892
|
-
this
|
|
940
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, true, "f");
|
|
893
941
|
}
|
|
894
942
|
else {
|
|
895
|
-
this
|
|
943
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, false, "f");
|
|
896
944
|
}
|
|
897
945
|
if (this.isActive) {
|
|
898
|
-
this.
|
|
946
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItemByIndex(undefined);
|
|
899
947
|
}
|
|
900
|
-
if (this.
|
|
901
|
-
this.
|
|
948
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
|
|
949
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.ownerDocument.activeElement.blur();
|
|
902
950
|
}
|
|
903
|
-
this.
|
|
951
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
904
952
|
}
|
|
905
953
|
}
|
|
906
954
|
get disabled() {
|
|
907
|
-
return this
|
|
955
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f");
|
|
908
956
|
}
|
|
909
957
|
/**
|
|
910
958
|
* Indicates whether the repeater item is expanded.
|
|
911
959
|
* @default true
|
|
912
960
|
*/
|
|
913
961
|
set isExpanded(value) {
|
|
914
|
-
this.updateForExpanded(value
|
|
962
|
+
this.updateForExpanded(value !== false);
|
|
915
963
|
}
|
|
916
964
|
get isExpanded() {
|
|
917
|
-
return this
|
|
965
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f");
|
|
918
966
|
}
|
|
919
967
|
/**
|
|
920
968
|
* Indicates whether the repeater item's checkbox is selected.
|
|
@@ -922,54 +970,54 @@ class SkyRepeaterItemComponent {
|
|
|
922
970
|
* @default false
|
|
923
971
|
*/
|
|
924
972
|
set isSelected(value) {
|
|
925
|
-
if (!this.disabled && value !== this
|
|
926
|
-
this
|
|
927
|
-
this.isSelectedChange.emit(this
|
|
973
|
+
if (!this.disabled && value !== __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f")) {
|
|
974
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isSelected, value, "f");
|
|
975
|
+
this.isSelectedChange.emit(__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f"));
|
|
928
976
|
}
|
|
929
977
|
}
|
|
930
978
|
get isSelected() {
|
|
931
|
-
return this
|
|
979
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f");
|
|
932
980
|
}
|
|
933
981
|
set isCollapsible(value) {
|
|
934
982
|
if (this.isCollapsible !== value) {
|
|
935
|
-
this
|
|
983
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent__isCollapsible, value !== false, "f");
|
|
936
984
|
/*istanbul ignore else */
|
|
937
|
-
if (!
|
|
938
|
-
this.updateForExpanded(true
|
|
985
|
+
if (!__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f")) {
|
|
986
|
+
this.updateForExpanded(true);
|
|
939
987
|
}
|
|
940
988
|
}
|
|
941
|
-
this.
|
|
989
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
942
990
|
}
|
|
943
991
|
get isCollapsible() {
|
|
944
|
-
return this
|
|
992
|
+
return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f");
|
|
945
993
|
}
|
|
946
994
|
get repeaterGroupClass() {
|
|
947
|
-
return 'sky-repeater-item-group-' + this.
|
|
995
|
+
return 'sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").repeaterGroupId;
|
|
948
996
|
}
|
|
949
997
|
ngOnInit() {
|
|
950
|
-
this.
|
|
951
|
-
this.
|
|
952
|
-
.pipe(takeUntil(this
|
|
998
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerItem(this);
|
|
999
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activeItemChange
|
|
1000
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f")))
|
|
953
1001
|
.subscribe((item) => {
|
|
954
1002
|
const newIsActiveValue = this === item;
|
|
955
1003
|
if (newIsActiveValue !== this.isActive) {
|
|
956
1004
|
this.isActive = newIsActiveValue;
|
|
957
|
-
this.
|
|
1005
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
958
1006
|
}
|
|
959
1007
|
});
|
|
960
1008
|
}
|
|
961
1009
|
ngAfterViewInit() {
|
|
962
|
-
this.hasItemContent = this.repeaterItemContentComponents
|
|
963
|
-
this.
|
|
1010
|
+
this.hasItemContent = !!this.repeaterItemContentComponents?.length;
|
|
1011
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_updateExpandOnContentChange).call(this);
|
|
964
1012
|
}
|
|
965
1013
|
ngOnDestroy() {
|
|
966
1014
|
this.collapse.complete();
|
|
967
1015
|
this.expand.complete();
|
|
968
1016
|
this.inlineFormClose.complete();
|
|
969
1017
|
this.isSelectedChange.complete();
|
|
970
|
-
this.
|
|
971
|
-
this.
|
|
972
|
-
this.
|
|
1018
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f").next();
|
|
1019
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f").complete();
|
|
1020
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").unregisterItem(this);
|
|
973
1021
|
}
|
|
974
1022
|
onKeydown($event) {
|
|
975
1023
|
if ([' ', 'Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'].includes($event.key)) {
|
|
@@ -989,7 +1037,7 @@ class SkyRepeaterItemComponent {
|
|
|
989
1037
|
}
|
|
990
1038
|
/* istanbul ignore else */
|
|
991
1039
|
if (['Home', 'End'].includes($event.key)) {
|
|
992
|
-
const items = this.
|
|
1040
|
+
const items = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled);
|
|
993
1041
|
if ($event.key === 'Home') {
|
|
994
1042
|
activateItem = items.shift();
|
|
995
1043
|
}
|
|
@@ -999,7 +1047,7 @@ class SkyRepeaterItemComponent {
|
|
|
999
1047
|
}
|
|
1000
1048
|
/* istanbul ignore else */
|
|
1001
1049
|
if (['ArrowUp', 'ArrowDown'].includes($event.key)) {
|
|
1002
|
-
const currentIndex = this.
|
|
1050
|
+
const currentIndex = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.findIndex((item) => item === this);
|
|
1003
1051
|
let sliceFrom;
|
|
1004
1052
|
let sliceTo;
|
|
1005
1053
|
if ($event.key === 'ArrowUp') {
|
|
@@ -1010,7 +1058,7 @@ class SkyRepeaterItemComponent {
|
|
|
1010
1058
|
sliceFrom = currentIndex + 1;
|
|
1011
1059
|
sliceTo = undefined;
|
|
1012
1060
|
}
|
|
1013
|
-
const items = this.
|
|
1061
|
+
const items = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items
|
|
1014
1062
|
.slice(sliceFrom, sliceTo)
|
|
1015
1063
|
.filter((item) => !item.disabled);
|
|
1016
1064
|
activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
|
|
@@ -1024,7 +1072,7 @@ class SkyRepeaterItemComponent {
|
|
|
1024
1072
|
sliceFrom = currentIndex + 1;
|
|
1025
1073
|
sliceTo = undefined;
|
|
1026
1074
|
}
|
|
1027
|
-
const items = this.
|
|
1075
|
+
const items = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items
|
|
1028
1076
|
.slice(sliceFrom, sliceTo)
|
|
1029
1077
|
.filter((item) => !item.disabled);
|
|
1030
1078
|
activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
|
|
@@ -1032,47 +1080,47 @@ class SkyRepeaterItemComponent {
|
|
|
1032
1080
|
}
|
|
1033
1081
|
/* istanbul ignore else */
|
|
1034
1082
|
if (activateItem && !activateItem.isActive) {
|
|
1035
|
-
this.
|
|
1036
|
-
if (!activateItem.
|
|
1037
|
-
activateItem.
|
|
1083
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItem(activateItem);
|
|
1084
|
+
if (!__classPrivateFieldGet(activateItem, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
|
|
1085
|
+
activateItem.itemRef?.nativeElement.focus();
|
|
1038
1086
|
}
|
|
1039
1087
|
}
|
|
1040
1088
|
}
|
|
1041
1089
|
}
|
|
1042
1090
|
headerClick() {
|
|
1043
1091
|
if (this.isCollapsible) {
|
|
1044
|
-
this.updateForExpanded(!this.isExpanded
|
|
1092
|
+
this.updateForExpanded(!this.isExpanded);
|
|
1045
1093
|
}
|
|
1046
1094
|
}
|
|
1047
1095
|
chevronDirectionChange(direction) {
|
|
1048
|
-
this.updateForExpanded(direction === 'up'
|
|
1096
|
+
this.updateForExpanded(direction === 'up');
|
|
1049
1097
|
}
|
|
1050
1098
|
onRepeaterItemClick(event) {
|
|
1051
1099
|
// Only activate item if clicking on the title, content, or parent item div.
|
|
1052
1100
|
// This will avoid accidental activations when clicking inside interactive elements like
|
|
1053
1101
|
// the expand/collapse chevron, dropdown, inline-delete, etc...
|
|
1054
|
-
if (event.target === this.itemRef
|
|
1055
|
-
this.itemContentRef
|
|
1056
|
-
this.itemHeaderRef
|
|
1057
|
-
this.
|
|
1102
|
+
if (event.target === this.itemRef?.nativeElement ||
|
|
1103
|
+
this.itemContentRef?.nativeElement.contains(event.target) ||
|
|
1104
|
+
this.itemHeaderRef?.nativeElement.contains(event.target)) {
|
|
1105
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItem(this);
|
|
1058
1106
|
}
|
|
1059
1107
|
}
|
|
1060
|
-
updateForExpanded(value
|
|
1108
|
+
updateForExpanded(value) {
|
|
1061
1109
|
if (this.isCollapsible === false && value === false) {
|
|
1062
1110
|
console.warn(`Setting isExpanded to false when the repeater item is not collapsible
|
|
1063
1111
|
will have no effect.`);
|
|
1064
1112
|
}
|
|
1065
|
-
else if (this
|
|
1066
|
-
this
|
|
1067
|
-
if (this
|
|
1113
|
+
else if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f") !== value) {
|
|
1114
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_isExpanded, value, "f");
|
|
1115
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f")) {
|
|
1068
1116
|
this.expand.emit();
|
|
1069
1117
|
}
|
|
1070
1118
|
else {
|
|
1071
1119
|
this.collapse.emit();
|
|
1072
1120
|
}
|
|
1073
|
-
this.
|
|
1074
|
-
this.
|
|
1075
|
-
this.
|
|
1121
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").onItemCollapseStateChange(this);
|
|
1122
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
|
|
1123
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
|
|
1076
1124
|
}
|
|
1077
1125
|
}
|
|
1078
1126
|
onCheckboxChange(value) {
|
|
@@ -1083,9 +1131,9 @@ class SkyRepeaterItemComponent {
|
|
|
1083
1131
|
}
|
|
1084
1132
|
moveToTop(event) {
|
|
1085
1133
|
event.stopPropagation();
|
|
1086
|
-
this.
|
|
1087
|
-
this.
|
|
1088
|
-
this.
|
|
1134
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemUp(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement, true);
|
|
1135
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(event.target);
|
|
1136
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
|
|
1089
1137
|
}
|
|
1090
1138
|
onReorderHandleKeyDown(event) {
|
|
1091
1139
|
/*istanbul ignore else */
|
|
@@ -1093,43 +1141,43 @@ class SkyRepeaterItemComponent {
|
|
|
1093
1141
|
switch (event.key.toLowerCase()) {
|
|
1094
1142
|
case ' ':
|
|
1095
1143
|
case 'enter':
|
|
1096
|
-
this.
|
|
1144
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_keyboardToggleReorder).call(this);
|
|
1097
1145
|
event.preventDefault();
|
|
1098
1146
|
event.stopPropagation();
|
|
1099
1147
|
break;
|
|
1100
1148
|
case 'escape':
|
|
1101
1149
|
/* istanbul ignore else */
|
|
1102
|
-
if (this
|
|
1103
|
-
this
|
|
1104
|
-
this.
|
|
1150
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
|
|
1151
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, false, "f");
|
|
1152
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_revertReorderSteps).call(this);
|
|
1105
1153
|
this.reorderButtonLabel =
|
|
1106
|
-
this
|
|
1107
|
-
this.
|
|
1154
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCancelText, "f") + ' ' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f");
|
|
1155
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(event.target);
|
|
1108
1156
|
event.preventDefault();
|
|
1109
1157
|
event.stopPropagation();
|
|
1110
1158
|
}
|
|
1111
1159
|
break;
|
|
1112
1160
|
case 'arrowup':
|
|
1113
|
-
if (this
|
|
1114
|
-
this.
|
|
1161
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
|
|
1162
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_keyboardReorderUp).call(this);
|
|
1115
1163
|
event.preventDefault();
|
|
1116
1164
|
event.stopPropagation();
|
|
1117
|
-
this.
|
|
1165
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
|
|
1118
1166
|
}
|
|
1119
1167
|
break;
|
|
1120
1168
|
case 'arrowdown':
|
|
1121
1169
|
/* istanbul ignore else */
|
|
1122
|
-
if (this
|
|
1123
|
-
this.
|
|
1170
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
|
|
1171
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_keyboardReorderDown).call(this);
|
|
1124
1172
|
event.preventDefault();
|
|
1125
1173
|
event.stopPropagation();
|
|
1126
|
-
this.
|
|
1174
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
|
|
1127
1175
|
}
|
|
1128
1176
|
break;
|
|
1129
1177
|
case 'arrowleft':
|
|
1130
1178
|
case 'arrowright':
|
|
1131
1179
|
/* istanbul ignore else */
|
|
1132
|
-
if (this
|
|
1180
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
|
|
1133
1181
|
event.preventDefault();
|
|
1134
1182
|
event.stopPropagation();
|
|
1135
1183
|
}
|
|
@@ -1141,70 +1189,73 @@ class SkyRepeaterItemComponent {
|
|
|
1141
1189
|
}
|
|
1142
1190
|
}
|
|
1143
1191
|
onReorderHandleBlur(event) {
|
|
1144
|
-
this
|
|
1145
|
-
this.
|
|
1146
|
-
this.reorderButtonLabel = this
|
|
1192
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, false, "f");
|
|
1193
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_revertReorderSteps).call(this);
|
|
1194
|
+
this.reorderButtonLabel = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f");
|
|
1147
1195
|
this.reorderState = undefined;
|
|
1148
1196
|
}
|
|
1149
|
-
slideForExpanded(animate) {
|
|
1150
|
-
this.slideDirection = this.isExpanded ? 'down' : 'up';
|
|
1151
|
-
}
|
|
1152
|
-
keyboardReorderUp() {
|
|
1153
|
-
this.reorderCurrentIndex = this.adapterService.moveItemUp(this.elementRef.nativeElement);
|
|
1154
|
-
this.reorderSteps--;
|
|
1155
|
-
this.adapterService.focusElement(this.grabHandle);
|
|
1156
|
-
this.keyboardReorderingEnabled = true;
|
|
1157
|
-
this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
|
|
1158
|
-
}
|
|
1159
|
-
keyboardReorderDown() {
|
|
1160
|
-
this.reorderCurrentIndex = this.adapterService.moveItemDown(this.elementRef.nativeElement);
|
|
1161
|
-
this.reorderSteps++;
|
|
1162
|
-
this.adapterService.focusElement(this.grabHandle);
|
|
1163
|
-
this.keyboardReorderingEnabled = true;
|
|
1164
|
-
this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
|
|
1165
|
-
}
|
|
1166
|
-
keyboardToggleReorder() {
|
|
1167
|
-
this.keyboardReorderingEnabled = !this.keyboardReorderingEnabled;
|
|
1168
|
-
this.reorderSteps = 0;
|
|
1169
|
-
if (this.keyboardReorderingEnabled) {
|
|
1170
|
-
this.reorderState = this.reorderStateDescription;
|
|
1171
|
-
}
|
|
1172
|
-
else {
|
|
1173
|
-
this.reorderState = `${this.reorderFinishText} ${this.reorderCurrentIndex + 1} ${this.reorderInstructions}`;
|
|
1174
|
-
}
|
|
1175
|
-
}
|
|
1176
|
-
revertReorderSteps() {
|
|
1177
|
-
if (this.reorderSteps < 0) {
|
|
1178
|
-
this.adapterService.moveItemDown(this.elementRef.nativeElement, Math.abs(this.reorderSteps));
|
|
1179
|
-
}
|
|
1180
|
-
else if (this.reorderSteps > 0) {
|
|
1181
|
-
this.adapterService.moveItemUp(this.elementRef.nativeElement, false, this.reorderSteps);
|
|
1182
|
-
}
|
|
1183
|
-
this.repeaterService.registerOrderChange();
|
|
1184
|
-
}
|
|
1185
|
-
updateExpandOnContentChange() {
|
|
1186
|
-
this.repeaterItemContentComponents.changes
|
|
1187
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1188
|
-
.subscribe(() => {
|
|
1189
|
-
this.hasItemContent = this.repeaterItemContentComponents.length > 0;
|
|
1190
|
-
/* istanbul ignore next */
|
|
1191
|
-
this.isCollapsible =
|
|
1192
|
-
this.hasItemContent && this.repeaterService.expandMode !== 'none';
|
|
1193
|
-
/* istanbul ignore else */
|
|
1194
|
-
if (this.repeaterService.expandMode === 'single') {
|
|
1195
|
-
this.repeaterService.onItemCollapseStateChange(this);
|
|
1196
|
-
}
|
|
1197
|
-
});
|
|
1198
|
-
}
|
|
1199
1197
|
}
|
|
1198
|
+
_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() {
|
|
1199
|
+
this.slideDirection = this.isExpanded ? 'down' : 'up';
|
|
1200
|
+
}, _SkyRepeaterItemComponent_keyboardReorderUp = function _SkyRepeaterItemComponent_keyboardReorderUp() {
|
|
1201
|
+
var _a;
|
|
1202
|
+
const newIndex = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemUp(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement);
|
|
1203
|
+
if (newIndex !== undefined) {
|
|
1204
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, newIndex, "f");
|
|
1205
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderSteps, (_a = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f"), _a--, _a), "f");
|
|
1206
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(this.grabHandle);
|
|
1207
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, true, "f");
|
|
1208
|
+
this.reorderButtonLabel = `${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderMovedText, "f")} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, "f") + 1}`;
|
|
1209
|
+
}
|
|
1210
|
+
}, _SkyRepeaterItemComponent_keyboardReorderDown = function _SkyRepeaterItemComponent_keyboardReorderDown() {
|
|
1211
|
+
var _a;
|
|
1212
|
+
const newIndex = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemDown(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement);
|
|
1213
|
+
if (newIndex) {
|
|
1214
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, newIndex, "f");
|
|
1215
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderSteps, (_a = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f"), _a++, _a), "f");
|
|
1216
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(this.grabHandle);
|
|
1217
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, true, "f");
|
|
1218
|
+
this.reorderButtonLabel = `${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderMovedText, "f")} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, "f") + 1}`;
|
|
1219
|
+
}
|
|
1220
|
+
}, _SkyRepeaterItemComponent_keyboardToggleReorder = function _SkyRepeaterItemComponent_keyboardToggleReorder() {
|
|
1221
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, !__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f"), "f");
|
|
1222
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderSteps, 0, "f");
|
|
1223
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
|
|
1224
|
+
this.reorderState = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderStateDescription, "f");
|
|
1225
|
+
}
|
|
1226
|
+
else {
|
|
1227
|
+
// TODO: Needs improvement to be localizable
|
|
1228
|
+
this.reorderState = `${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderFinishText, "f")} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, "f") + 1} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f")}`;
|
|
1229
|
+
__classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, -1, "f");
|
|
1230
|
+
}
|
|
1231
|
+
}, _SkyRepeaterItemComponent_revertReorderSteps = function _SkyRepeaterItemComponent_revertReorderSteps() {
|
|
1232
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f") < 0) {
|
|
1233
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemDown(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement, Math.abs(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f")));
|
|
1234
|
+
}
|
|
1235
|
+
else if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f") > 0) {
|
|
1236
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemUp(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement, false, __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f"));
|
|
1237
|
+
}
|
|
1238
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
|
|
1239
|
+
}, _SkyRepeaterItemComponent_updateExpandOnContentChange = function _SkyRepeaterItemComponent_updateExpandOnContentChange() {
|
|
1240
|
+
this.repeaterItemContentComponents?.changes
|
|
1241
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f")))
|
|
1242
|
+
.subscribe(() => {
|
|
1243
|
+
this.hasItemContent = !!this.repeaterItemContentComponents?.length;
|
|
1244
|
+
/* istanbul ignore next */
|
|
1245
|
+
this.isCollapsible =
|
|
1246
|
+
this.hasItemContent && __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").expandMode !== 'none';
|
|
1247
|
+
/* istanbul ignore else */
|
|
1248
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").expandMode === 'single') {
|
|
1249
|
+
__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").onItemCollapseStateChange(this);
|
|
1250
|
+
}
|
|
1251
|
+
});
|
|
1252
|
+
};
|
|
1200
1253
|
SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i4.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1201
|
-
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: { "tabindex": "this.tabindex", "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]=\"showInlineForm ? 'form' : (itemRole$ | async).item\"\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 class=\"sky-repeater-item-left\">\n <ng-container *ngIf=\"reorderable\">\n <span\n aria-live=\"assertive\"\n class=\"sky-screen-reader-only\"\n [id]=\"contentId + '-reorder-state'\"\n >\n {{ reorderState }}\n </span>\n <span\n class=\"sky-screen-reader-only\"\n [id]=\"contentId + '-reorder-instructions'\"\n >{{ reorderButtonLabel }}</span\n >\n <button\n class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n type=\"button\"\n [attr.aria-describedby]=\"contentId + '-reorder-instructions'\"\n [attr.aria-label]=\"\n itemName\n ? ('skyux_repeater_item_reorder_label' | skyLibResources: itemName)\n : ('skyux_repeater_item_reorder_label_default' | skyLibResources)\n \"\n (blur)=\"onReorderHandleBlur($event)\"\n (keydown)=\"onReorderHandleKeyDown($event)\"\n #grabHandle\n >\n <sky-icon icon=\"arrows-v\"></sky-icon>\n </button>\n </ng-container>\n <sky-checkbox\n *ngIf=\"selectable\"\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [label]=\"\n itemName\n ? ('skyux_repeater_item_checkbox_label' | skyLibResources: itemName)\n : ('skyux_repeater_item_checkbox_label_default' | skyLibResources)\n \"\n (change)=\"onCheckboxChange($event)\"\n >\n </sky-checkbox>\n <div\n class=\"sky-repeater-item-context-menu\"\n [hidden]=\"contextMenuEl.children.length === 0\"\n #contextMenuEl\n >\n <ng-content select=\"sky-repeater-item-context-menu\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n <div class=\"sky-repeater-item-right\" #itemHeaderRef>\n <div\n class=\"sky-repeater-item-header\"\n [hidden]=\"titleRef.children.length === 0\"\n (click)=\"headerClick()\"\n >\n <div\n class=\"sky-repeater-item-title sky-emphasized\"\n #titleRef\n [attr.role]=\"(itemRole$ | async).title\"\n >\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-right:10px}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], 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", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { 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 });
|
|
1254
|
+
SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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-right:10px}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], 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", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { 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 });
|
|
1202
1255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
|
|
1203
1256
|
type: Component,
|
|
1204
|
-
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]=\"
|
|
1205
|
-
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i4.SkyLibResourcesService }]; }, propDecorators: {
|
|
1206
|
-
type: HostBinding
|
|
1207
|
-
}], disabled: [{
|
|
1257
|
+
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-right:10px}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"] }]
|
|
1258
|
+
}], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i4.SkyLibResourcesService }]; }, propDecorators: { disabled: [{
|
|
1208
1259
|
type: Input
|
|
1209
1260
|
}], itemName: [{
|
|
1210
1261
|
type: Input
|
|
@@ -1258,18 +1309,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1258
1309
|
args: ['keydown', ['$event']]
|
|
1259
1310
|
}] } });
|
|
1260
1311
|
|
|
1261
|
-
|
|
1312
|
+
var _SkyRepeaterComponent_instances, _SkyRepeaterComponent_adapterService, _SkyRepeaterComponent_changeDetector, _SkyRepeaterComponent_dragulaService, _SkyRepeaterComponent_elementRef, _SkyRepeaterComponent_renderer, _SkyRepeaterComponent_repeaterService, _SkyRepeaterComponent_ngUnsubscribe, _SkyRepeaterComponent_updateForExpandMode, _SkyRepeaterComponent_initializeDragAndDrop, _SkyRepeaterComponent_destroyDragAndDrop, _SkyRepeaterComponent_emitTags, _SkyRepeaterComponent_everyItemHasTag, _SkyRepeaterComponent_updateRole;
|
|
1262
1313
|
/**
|
|
1263
1314
|
* Creates a container to display repeater items.
|
|
1264
1315
|
*/
|
|
1265
1316
|
class SkyRepeaterComponent {
|
|
1266
1317
|
constructor(changeDetector, repeaterService, adapterService, dragulaService, elementRef, renderer) {
|
|
1267
|
-
this
|
|
1268
|
-
this.repeaterService = repeaterService;
|
|
1269
|
-
this.adapterService = adapterService;
|
|
1270
|
-
this.dragulaService = dragulaService;
|
|
1271
|
-
this.elementRef = elementRef;
|
|
1272
|
-
this.renderer = renderer;
|
|
1318
|
+
_SkyRepeaterComponent_instances.add(this);
|
|
1273
1319
|
/**
|
|
1274
1320
|
* Indicates whether users can change the order of items in the repeater list.
|
|
1275
1321
|
* Each repeater item also has `reorderable` property to indicate whether
|
|
@@ -1285,15 +1331,25 @@ class SkyRepeaterComponent {
|
|
|
1285
1331
|
* This event emits an ordered array of the `tag` properties that the consumer provides for each repeater item.
|
|
1286
1332
|
*/
|
|
1287
1333
|
this.orderChange = new EventEmitter();
|
|
1288
|
-
this
|
|
1289
|
-
this
|
|
1290
|
-
this
|
|
1291
|
-
this
|
|
1292
|
-
this
|
|
1293
|
-
|
|
1334
|
+
_SkyRepeaterComponent_adapterService.set(this, void 0);
|
|
1335
|
+
_SkyRepeaterComponent_changeDetector.set(this, void 0);
|
|
1336
|
+
_SkyRepeaterComponent_dragulaService.set(this, void 0);
|
|
1337
|
+
_SkyRepeaterComponent_elementRef.set(this, void 0);
|
|
1338
|
+
_SkyRepeaterComponent_renderer.set(this, void 0);
|
|
1339
|
+
_SkyRepeaterComponent_repeaterService.set(this, void 0);
|
|
1340
|
+
_SkyRepeaterComponent_ngUnsubscribe.set(this, new Subject());
|
|
1341
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_changeDetector, changeDetector, "f");
|
|
1342
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_repeaterService, repeaterService, "f");
|
|
1343
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_adapterService, adapterService, "f");
|
|
1344
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_dragulaService, dragulaService, "f");
|
|
1345
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_elementRef, elementRef, "f");
|
|
1346
|
+
__classPrivateFieldSet(this, _SkyRepeaterComponent_renderer, renderer, "f");
|
|
1347
|
+
this.dragulaGroupName = `sky-repeater-dragula-${__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").repeaterGroupId}`;
|
|
1348
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").itemCollapseStateChange
|
|
1349
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
1294
1350
|
.subscribe((item) => {
|
|
1295
1351
|
if (this.expandMode === 'single' && item.isExpanded) {
|
|
1296
|
-
this.items
|
|
1352
|
+
this.items?.forEach((otherItem) => {
|
|
1297
1353
|
if (otherItem !== item &&
|
|
1298
1354
|
otherItem.isExpanded &&
|
|
1299
1355
|
otherItem.isCollapsible) {
|
|
@@ -1302,23 +1358,22 @@ class SkyRepeaterComponent {
|
|
|
1302
1358
|
});
|
|
1303
1359
|
}
|
|
1304
1360
|
});
|
|
1305
|
-
this.
|
|
1306
|
-
.pipe(takeUntil(this
|
|
1361
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activeItemIndexChange
|
|
1362
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
1307
1363
|
.subscribe((index) => {
|
|
1308
1364
|
if (index !== this.activeIndex) {
|
|
1309
1365
|
this.activeIndex = index;
|
|
1310
1366
|
this.activeIndexChange.emit(index);
|
|
1311
1367
|
}
|
|
1312
1368
|
});
|
|
1313
|
-
this.
|
|
1314
|
-
.pipe(takeUntil(this
|
|
1369
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").orderChange
|
|
1370
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
1315
1371
|
.subscribe(() => {
|
|
1316
|
-
this.
|
|
1372
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_emitTags).call(this);
|
|
1317
1373
|
});
|
|
1318
|
-
this
|
|
1319
|
-
this.
|
|
1320
|
-
this.
|
|
1321
|
-
this.initializeDragAndDrop();
|
|
1374
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1375
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").setRepeaterHost(__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f"));
|
|
1376
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_initializeDragAndDrop).call(this);
|
|
1322
1377
|
}
|
|
1323
1378
|
/**
|
|
1324
1379
|
* Specifies a layout to determine which repeater items are expanded by default and whether
|
|
@@ -1339,210 +1394,199 @@ class SkyRepeaterComponent {
|
|
|
1339
1394
|
* and users only occasionally need to view the body content.
|
|
1340
1395
|
* @default "none"
|
|
1341
1396
|
*/
|
|
1397
|
+
// TODO: Remove 'string' as a valid type in a breaking change.
|
|
1342
1398
|
set expandMode(value) {
|
|
1343
|
-
this.
|
|
1344
|
-
this
|
|
1345
|
-
this.updateForExpandMode();
|
|
1399
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode = value;
|
|
1400
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1346
1401
|
}
|
|
1347
1402
|
get expandMode() {
|
|
1348
|
-
return this
|
|
1403
|
+
return __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode;
|
|
1349
1404
|
}
|
|
1350
1405
|
ngAfterContentInit() {
|
|
1351
1406
|
// If activeIndex has been set on init, call service to activate the appropriate item.
|
|
1352
1407
|
setTimeout(() => {
|
|
1353
1408
|
if (this.activeIndex || this.activeIndex === 0) {
|
|
1354
|
-
this.
|
|
1409
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1355
1410
|
}
|
|
1356
|
-
if (this.reorderable && !this.
|
|
1411
|
+
if (this.reorderable && !__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_everyItemHasTag).call(this)) {
|
|
1357
1412
|
console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
|
|
1358
1413
|
}
|
|
1359
1414
|
});
|
|
1360
1415
|
// HACK: Not updating for expand mode in a timeout causes an error.
|
|
1361
1416
|
// https://github.com/angular/angular/issues/6005
|
|
1362
|
-
this.items
|
|
1417
|
+
this.items?.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
|
1363
1418
|
setTimeout(() => {
|
|
1364
|
-
if (this.items
|
|
1365
|
-
this.
|
|
1419
|
+
if (this.items?.last) {
|
|
1420
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this, this.items.last);
|
|
1366
1421
|
this.items.last.reorderable = this.reorderable;
|
|
1367
1422
|
}
|
|
1368
1423
|
if (this.activeIndex !== undefined) {
|
|
1369
|
-
this.
|
|
1424
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1370
1425
|
}
|
|
1371
|
-
this.
|
|
1426
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1372
1427
|
});
|
|
1373
1428
|
});
|
|
1374
1429
|
setTimeout(() => {
|
|
1375
|
-
this.
|
|
1376
|
-
this.items
|
|
1430
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
|
|
1431
|
+
this.items?.forEach((item) => {
|
|
1377
1432
|
item.reorderable = this.reorderable;
|
|
1378
1433
|
});
|
|
1379
|
-
this.
|
|
1434
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1380
1435
|
}, 0);
|
|
1381
1436
|
}
|
|
1382
1437
|
ngOnChanges(changes) {
|
|
1383
1438
|
if (changes['activeIndex']) {
|
|
1384
|
-
this.
|
|
1439
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").enableActiveState = true;
|
|
1385
1440
|
if (changes['activeIndex'].currentValue !==
|
|
1386
1441
|
changes['activeIndex'].previousValue) {
|
|
1387
|
-
this.
|
|
1442
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
|
|
1388
1443
|
}
|
|
1389
1444
|
}
|
|
1390
1445
|
if (changes.reorderable) {
|
|
1391
1446
|
if (this.items) {
|
|
1392
1447
|
this.items.forEach((item) => (item.reorderable = this.reorderable));
|
|
1393
1448
|
}
|
|
1394
|
-
this.
|
|
1395
|
-
this.
|
|
1449
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1450
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
|
|
1396
1451
|
}
|
|
1397
1452
|
}
|
|
1398
1453
|
ngOnDestroy() {
|
|
1399
|
-
this.
|
|
1400
|
-
this.
|
|
1401
|
-
this.
|
|
1454
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f").next();
|
|
1455
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f").complete();
|
|
1456
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyDragAndDrop).call(this);
|
|
1402
1457
|
}
|
|
1403
1458
|
ngOnInit() {
|
|
1404
|
-
this.
|
|
1459
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1405
1460
|
}
|
|
1406
1461
|
onCdkObserveContent() {
|
|
1407
|
-
this.
|
|
1408
|
-
}
|
|
1409
|
-
updateForExpandMode(itemAdded) {
|
|
1410
|
-
if (this.items) {
|
|
1411
|
-
let foundExpanded = false;
|
|
1412
|
-
const isCollapsible = this.expandMode !== 'none';
|
|
1413
|
-
const isSingle = this.expandMode === 'single';
|
|
1414
|
-
// Keep any newly-added expanded item expanded and collapse the rest.
|
|
1415
|
-
if (itemAdded && itemAdded.isExpanded) {
|
|
1416
|
-
foundExpanded = true;
|
|
1417
|
-
}
|
|
1418
|
-
this.items.forEach((item) => {
|
|
1419
|
-
item.isCollapsible = isCollapsible && !!item.hasItemContent;
|
|
1420
|
-
if (item !== itemAdded && isSingle && item.isExpanded) {
|
|
1421
|
-
if (foundExpanded) {
|
|
1422
|
-
item.updateForExpanded(false, false);
|
|
1423
|
-
}
|
|
1424
|
-
foundExpanded = true;
|
|
1425
|
-
}
|
|
1426
|
-
});
|
|
1427
|
-
this.updateRole();
|
|
1428
|
-
}
|
|
1462
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1429
1463
|
}
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
});
|
|
1464
|
+
}
|
|
1465
|
+
_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_ngUnsubscribe = new WeakMap(), _SkyRepeaterComponent_instances = new WeakSet(), _SkyRepeaterComponent_updateForExpandMode = function _SkyRepeaterComponent_updateForExpandMode(itemAdded) {
|
|
1466
|
+
if (this.items) {
|
|
1467
|
+
let foundExpanded = false;
|
|
1468
|
+
const isCollapsible = this.expandMode !== 'none';
|
|
1469
|
+
const isSingle = this.expandMode === 'single';
|
|
1470
|
+
// Keep any newly-added expanded item expanded and collapse the rest.
|
|
1471
|
+
if (itemAdded && itemAdded.isExpanded) {
|
|
1472
|
+
foundExpanded = true;
|
|
1440
1473
|
}
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
/* istanbul ignore else */
|
|
1447
|
-
if (args.name === this.dragulaGroupName) {
|
|
1448
|
-
this.renderer.addClass(args.el, 'sky-repeater-item-dragging');
|
|
1449
|
-
draggedItemIndex = this.adapterService.getRepeaterItemIndex(args.el);
|
|
1450
|
-
}
|
|
1451
|
-
});
|
|
1452
|
-
this.dragulaService
|
|
1453
|
-
.dragend(this.dragulaGroupName)
|
|
1454
|
-
.pipe(takeUntil(this.dragulaUnsubscribe))
|
|
1455
|
-
.subscribe((args) => {
|
|
1456
|
-
/* istanbul ignore else */
|
|
1457
|
-
if (args.name === this.dragulaGroupName) {
|
|
1458
|
-
this.renderer.removeClass(args.el, 'sky-repeater-item-dragging');
|
|
1459
|
-
const newItemIndex = this.adapterService.getRepeaterItemIndex(args.el);
|
|
1460
|
-
/* sanity check */
|
|
1461
|
-
/* istanbul ignore else */
|
|
1462
|
-
if (draggedItemIndex >= 0) {
|
|
1463
|
-
this.repeaterService.reorderItem(draggedItemIndex, newItemIndex);
|
|
1464
|
-
draggedItemIndex = undefined;
|
|
1474
|
+
this.items.forEach((item) => {
|
|
1475
|
+
item.isCollapsible = isCollapsible && !!item.hasItemContent;
|
|
1476
|
+
if (item !== itemAdded && isSingle && item.isExpanded) {
|
|
1477
|
+
if (foundExpanded) {
|
|
1478
|
+
item.updateForExpanded(false);
|
|
1465
1479
|
}
|
|
1466
|
-
|
|
1480
|
+
foundExpanded = true;
|
|
1467
1481
|
}
|
|
1468
1482
|
});
|
|
1483
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
|
|
1484
|
+
}
|
|
1485
|
+
}, _SkyRepeaterComponent_initializeDragAndDrop = function _SkyRepeaterComponent_initializeDragAndDrop() {
|
|
1486
|
+
/* Sanity check that we haven't already set up dragging abilities */
|
|
1487
|
+
/* istanbul ignore else */
|
|
1488
|
+
if (!__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
|
|
1489
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").createGroup(this.dragulaGroupName, {
|
|
1490
|
+
moves: (el, container, handle) => {
|
|
1491
|
+
const target = el?.querySelector('.sky-repeater-item-grab-handle');
|
|
1492
|
+
return !!this.reorderable && !!target && target.contains(handle);
|
|
1493
|
+
},
|
|
1494
|
+
});
|
|
1469
1495
|
}
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
this.
|
|
1473
|
-
this
|
|
1474
|
-
|
|
1496
|
+
let draggedItemIndex = -1;
|
|
1497
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f")
|
|
1498
|
+
.drag(this.dragulaGroupName)
|
|
1499
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
1500
|
+
.subscribe((args) => {
|
|
1475
1501
|
/* istanbul ignore else */
|
|
1476
|
-
if (
|
|
1477
|
-
this.
|
|
1502
|
+
if (args.name === this.dragulaGroupName) {
|
|
1503
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").addClass(args.el, 'sky-repeater-item-dragging');
|
|
1504
|
+
draggedItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
|
|
1478
1505
|
}
|
|
1479
|
-
}
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1506
|
+
});
|
|
1507
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f")
|
|
1508
|
+
.dragend(this.dragulaGroupName)
|
|
1509
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
|
|
1510
|
+
.subscribe((args) => {
|
|
1511
|
+
/* istanbul ignore else */
|
|
1512
|
+
if (args.name === this.dragulaGroupName) {
|
|
1513
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").removeClass(args.el, 'sky-repeater-item-dragging');
|
|
1514
|
+
const newItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
|
|
1515
|
+
/* sanity check */
|
|
1516
|
+
/* istanbul ignore else */
|
|
1517
|
+
if (draggedItemIndex >= 0) {
|
|
1518
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").reorderItem(draggedItemIndex, newItemIndex);
|
|
1519
|
+
draggedItemIndex = -1;
|
|
1520
|
+
}
|
|
1521
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_emitTags).call(this);
|
|
1489
1522
|
}
|
|
1490
|
-
|
|
1491
|
-
|
|
1523
|
+
});
|
|
1524
|
+
}, _SkyRepeaterComponent_destroyDragAndDrop = function _SkyRepeaterComponent_destroyDragAndDrop() {
|
|
1525
|
+
/* Sanity check that we have set up dragging abilities */
|
|
1526
|
+
/* istanbul ignore else */
|
|
1527
|
+
if (__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
|
|
1528
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").destroy(this.dragulaGroupName);
|
|
1529
|
+
}
|
|
1530
|
+
}, _SkyRepeaterComponent_emitTags = function _SkyRepeaterComponent_emitTags() {
|
|
1531
|
+
const tags = __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").items.map((item) => item.tag);
|
|
1532
|
+
this.orderChange.emit(tags);
|
|
1533
|
+
}, _SkyRepeaterComponent_everyItemHasTag = function _SkyRepeaterComponent_everyItemHasTag() {
|
|
1534
|
+
/* sanity check */
|
|
1535
|
+
/* istanbul ignore if */
|
|
1536
|
+
if (!this.items || this.items.length === 0) {
|
|
1537
|
+
return false;
|
|
1538
|
+
}
|
|
1539
|
+
return this.items.toArray().every((item) => {
|
|
1540
|
+
return item.tag !== undefined;
|
|
1541
|
+
});
|
|
1542
|
+
}, _SkyRepeaterComponent_updateRole = function _SkyRepeaterComponent_updateRole() {
|
|
1543
|
+
// Determine a role using a hierarchy based on https://www.w3.org/TR/wai-aria-practices-1.1/
|
|
1544
|
+
// 1. If there are one or more interactions in the repeater item projected content, use grid.
|
|
1545
|
+
// 2. If there are selectable repeater items and no other interactions, use listbox.
|
|
1546
|
+
// 3. If there are no interactions, use list.
|
|
1547
|
+
// Default to list role.
|
|
1548
|
+
let autoRole = 'list';
|
|
1549
|
+
const roleMap = {
|
|
1550
|
+
list: { item: 'listitem', title: undefined, content: undefined },
|
|
1551
|
+
listbox: { item: 'option', title: undefined, content: undefined },
|
|
1552
|
+
grid: { item: 'row', title: 'rowheader', content: 'gridcell' },
|
|
1553
|
+
};
|
|
1554
|
+
// Based on https://html.spec.whatwg.org/multipage/dom.html#interactive-content
|
|
1555
|
+
const interactionSelector = [
|
|
1556
|
+
'a[href]',
|
|
1557
|
+
'audio[controls]',
|
|
1558
|
+
'button',
|
|
1559
|
+
'details',
|
|
1560
|
+
'embed',
|
|
1561
|
+
'iframe',
|
|
1562
|
+
'img[usemap]',
|
|
1563
|
+
'input:not([type="hidden"])',
|
|
1564
|
+
'label',
|
|
1565
|
+
'select',
|
|
1566
|
+
'textarea',
|
|
1567
|
+
'video[controls]',
|
|
1568
|
+
'[contenteditable]',
|
|
1569
|
+
'.sky-repeater[role="grid"]',
|
|
1570
|
+
]
|
|
1571
|
+
.map((selector) => `sky-repeater-item-title ${selector}:not([hidden]), sky-repeater-item-content ${selector}:not([hidden])`)
|
|
1572
|
+
.concat([`skyux-dropdown`])
|
|
1573
|
+
.join(', ');
|
|
1574
|
+
const hasInteraction = this.reorderable ||
|
|
1575
|
+
this.items?.some((item) => item.isCollapsible) ||
|
|
1576
|
+
this.items?.some((item) => !!item.selectable) ||
|
|
1577
|
+
!!__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f").nativeElement.querySelector(interactionSelector);
|
|
1578
|
+
if (hasInteraction) {
|
|
1579
|
+
// If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
|
|
1580
|
+
autoRole = 'grid';
|
|
1581
|
+
}
|
|
1582
|
+
if (this.role !== autoRole) {
|
|
1583
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").itemRole.next({
|
|
1584
|
+
...roleMap[autoRole],
|
|
1492
1585
|
});
|
|
1586
|
+
this.role = `${autoRole}`;
|
|
1587
|
+
__classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
|
|
1493
1588
|
}
|
|
1494
|
-
|
|
1495
|
-
// Determine a role using a hierarchy based on https://www.w3.org/TR/wai-aria-practices-1.1/
|
|
1496
|
-
// 1. If there are one or more interactions in the repeater item projected content, use grid.
|
|
1497
|
-
// 2. If there are selectable repeater items and no other interactions, use listbox.
|
|
1498
|
-
// 3. If there are no interactions, use list.
|
|
1499
|
-
// Default to list role.
|
|
1500
|
-
let autoRole = 'list';
|
|
1501
|
-
const roleMap = {
|
|
1502
|
-
list: { item: 'listitem', title: undefined, content: undefined },
|
|
1503
|
-
listbox: { item: 'option', title: undefined, content: undefined },
|
|
1504
|
-
grid: { item: 'row', title: 'rowheader', content: 'gridcell' },
|
|
1505
|
-
};
|
|
1506
|
-
// Based on https://html.spec.whatwg.org/multipage/dom.html#interactive-content
|
|
1507
|
-
const interactionSelector = [
|
|
1508
|
-
'a[href]',
|
|
1509
|
-
'audio[controls]',
|
|
1510
|
-
'button',
|
|
1511
|
-
'details',
|
|
1512
|
-
'embed',
|
|
1513
|
-
'iframe',
|
|
1514
|
-
'img[usemap]',
|
|
1515
|
-
'input:not([type="hidden"])',
|
|
1516
|
-
'label',
|
|
1517
|
-
'select',
|
|
1518
|
-
'textarea',
|
|
1519
|
-
'video[controls]',
|
|
1520
|
-
'[contenteditable]',
|
|
1521
|
-
'.sky-repeater[role="grid"]',
|
|
1522
|
-
]
|
|
1523
|
-
.map((selector) => `sky-repeater-item-title ${selector}:not([hidden]), sky-repeater-item-content ${selector}:not([hidden])`)
|
|
1524
|
-
.concat([`skyux-dropdown`])
|
|
1525
|
-
.join(', ');
|
|
1526
|
-
const hasInteraction = this.reorderable ||
|
|
1527
|
-
this.items?.some((item) => item.isCollapsible) ||
|
|
1528
|
-
!!this.elementRef.nativeElement.querySelector(interactionSelector);
|
|
1529
|
-
if (hasInteraction) {
|
|
1530
|
-
// If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
|
|
1531
|
-
autoRole = 'grid';
|
|
1532
|
-
}
|
|
1533
|
-
else if (this.items?.some((item) => item.selectable)) {
|
|
1534
|
-
// If the only interaction is select https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
|
|
1535
|
-
autoRole = 'listbox';
|
|
1536
|
-
}
|
|
1537
|
-
if (this.role !== autoRole) {
|
|
1538
|
-
this.repeaterService.itemRole.next({
|
|
1539
|
-
...roleMap[autoRole],
|
|
1540
|
-
});
|
|
1541
|
-
this.role = `${autoRole}`;
|
|
1542
|
-
this.changeDetector.markForCheck();
|
|
1543
|
-
}
|
|
1544
|
-
}
|
|
1545
|
-
}
|
|
1589
|
+
};
|
|
1546
1590
|
SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRepeaterService }, { token: SkyRepeaterAdapterService }, { token: i3$1.DragulaService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1547
1591
|
SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyRepeaterComponent, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [SkyRepeaterService, SkyRepeaterAdapterService], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [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: i3$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "directive", type: i4$1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1548
1592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
|
|
@@ -1640,49 +1684,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1640
1684
|
type: Injectable
|
|
1641
1685
|
}] });
|
|
1642
1686
|
|
|
1687
|
+
var _SkySortItemComponent_subscription, _SkySortItemComponent_sortItemId, _SkySortItemComponent_sortService, _SkySortItemComponent_detector;
|
|
1643
1688
|
const SORT_ITEM_ID_PREFIX = 'sky-sort-item-';
|
|
1644
1689
|
let sortItemIdNumber = 0;
|
|
1645
1690
|
class SkySortItemComponent {
|
|
1646
1691
|
constructor(sortService, detector) {
|
|
1647
|
-
this.sortService = sortService;
|
|
1648
|
-
this.detector = detector;
|
|
1649
1692
|
/**
|
|
1650
1693
|
* Fires when a sort item is selected.
|
|
1651
1694
|
*/
|
|
1652
|
-
this.itemSelect = new EventEmitter();
|
|
1695
|
+
this.itemSelect = new EventEmitter(); // TODO: Change to `EventEmitter<void>` in a breaking change.
|
|
1653
1696
|
this.isSelected = new BehaviorSubject(false);
|
|
1697
|
+
_SkySortItemComponent_subscription.set(this, void 0);
|
|
1698
|
+
_SkySortItemComponent_sortItemId.set(this, void 0);
|
|
1699
|
+
_SkySortItemComponent_sortService.set(this, void 0);
|
|
1700
|
+
_SkySortItemComponent_detector.set(this, void 0);
|
|
1701
|
+
__classPrivateFieldSet(this, _SkySortItemComponent_sortService, sortService, "f");
|
|
1702
|
+
__classPrivateFieldSet(this, _SkySortItemComponent_detector, detector, "f");
|
|
1654
1703
|
}
|
|
1655
1704
|
ngOnInit() {
|
|
1656
1705
|
sortItemIdNumber++;
|
|
1657
|
-
this
|
|
1658
|
-
this
|
|
1659
|
-
this.isSelected.next(itemId === this
|
|
1660
|
-
this.
|
|
1661
|
-
});
|
|
1706
|
+
__classPrivateFieldSet(this, _SkySortItemComponent_sortItemId, SORT_ITEM_ID_PREFIX + sortItemIdNumber.toString(), "f");
|
|
1707
|
+
__classPrivateFieldSet(this, _SkySortItemComponent_subscription, __classPrivateFieldGet(this, _SkySortItemComponent_sortService, "f").selectedItem.subscribe((itemId) => {
|
|
1708
|
+
this.isSelected.next(itemId === __classPrivateFieldGet(this, _SkySortItemComponent_sortItemId, "f"));
|
|
1709
|
+
__classPrivateFieldGet(this, _SkySortItemComponent_detector, "f").detectChanges();
|
|
1710
|
+
}), "f");
|
|
1662
1711
|
if (this.active) {
|
|
1663
|
-
this.
|
|
1712
|
+
__classPrivateFieldGet(this, _SkySortItemComponent_sortService, "f").selectItem(__classPrivateFieldGet(this, _SkySortItemComponent_sortItemId, "f"));
|
|
1664
1713
|
}
|
|
1665
1714
|
}
|
|
1666
1715
|
ngOnChanges(changes) {
|
|
1667
|
-
if (
|
|
1716
|
+
if (__classPrivateFieldGet(this, _SkySortItemComponent_sortItemId, "f") &&
|
|
1717
|
+
changes &&
|
|
1668
1718
|
changes['active'] &&
|
|
1669
1719
|
changes['active'].currentValue &&
|
|
1670
1720
|
changes['active'].currentValue !== changes['active'].previousValue) {
|
|
1671
|
-
this.
|
|
1721
|
+
__classPrivateFieldGet(this, _SkySortItemComponent_sortService, "f").selectItem(__classPrivateFieldGet(this, _SkySortItemComponent_sortItemId, "f"));
|
|
1672
1722
|
}
|
|
1673
1723
|
}
|
|
1674
1724
|
itemClicked() {
|
|
1675
|
-
|
|
1676
|
-
|
|
1725
|
+
if (__classPrivateFieldGet(this, _SkySortItemComponent_sortItemId, "f")) {
|
|
1726
|
+
__classPrivateFieldGet(this, _SkySortItemComponent_sortService, "f").selectItem(__classPrivateFieldGet(this, _SkySortItemComponent_sortItemId, "f"));
|
|
1727
|
+
this.itemSelect.emit();
|
|
1728
|
+
}
|
|
1677
1729
|
}
|
|
1678
1730
|
ngOnDestroy() {
|
|
1679
1731
|
/* istanbul ignore else */
|
|
1680
1732
|
/* sanity check */
|
|
1681
|
-
if (this
|
|
1682
|
-
this.
|
|
1733
|
+
if (__classPrivateFieldGet(this, _SkySortItemComponent_subscription, "f")) {
|
|
1734
|
+
__classPrivateFieldGet(this, _SkySortItemComponent_subscription, "f").unsubscribe();
|
|
1683
1735
|
}
|
|
1684
1736
|
}
|
|
1685
1737
|
}
|
|
1738
|
+
_SkySortItemComponent_subscription = new WeakMap(), _SkySortItemComponent_sortItemId = new WeakMap(), _SkySortItemComponent_sortService = new WeakMap(), _SkySortItemComponent_detector = new WeakMap();
|
|
1686
1739
|
SkySortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1687
1740
|
SkySortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sky-sort-item\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"isSelected | async\"\n [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n>\n <button\n type=\"button\"\n [ngClass]=\"{ 'sky-emphasized': (isSelected | async) }\"\n (click)=\"itemClicked()\"\n >\n <ng-content></ng-content>\n </button>\n</div>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active,.sky-sort-item:hover{background-color:#eeeeef}.sky-sort-item.sky-dropdown-item-disabled{cursor:default}.sky-sort-item.sky-dropdown-item-disabled:hover{background-color:transparent}.sky-sort-item ::ng-deep>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:#686c73}.sky-sort-item ::ng-deep>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}:host-context(.sky-theme-modern) .sky-sort-item{margin:0 0 10px;border:none;border-radius:0;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;padding:10px 20px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus:not(:active){color:var(--sky-text-color-default);outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{border-bottom:solid 3px #00b4f1;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:#686c73;font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px #1870B8;outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px #1870B8;outline-offset:-2px}:host-context(.sky-theme-modern) .sky-sort-item button{padding:0;color:#686c73}:host-context(.sky-theme-modern) .sky-sort-item-selected{color:#212327;border-bottom:none;border-left:solid 3px #1870B8;padding-bottom:10px;padding-left:17px;background-color:inherit}:host-context(.sky-theme-modern) .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern .sky-sort-item{margin:0 0 10px;border:none;border-radius:0;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus:not(:active){color:var(--sky-text-color-default);outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{border-bottom:solid 3px #00b4f1;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:#686c73;font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:#212327;border-bottom:none;border-left:solid 3px #1870B8;padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item button{color:#c0c2c5}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item-selected button{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1688
1741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySortItemComponent, decorators: [{
|