@skyux/core 6.11.2 → 6.14.0
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 +870 -748
- package/esm2020/index.mjs +2 -1
- package/esm2020/lib/modules/dynamic-component/dynamic-component-options.mjs +1 -1
- package/esm2020/lib/modules/dynamic-component/dynamic-component.service.mjs +6 -2
- package/esm2020/lib/modules/id/id.directive.mjs +7 -13
- package/esm2020/lib/modules/id/id.service.mjs +24 -0
- package/esm2020/lib/modules/overlay/overlay-instance.mjs +2 -1
- package/esm2020/lib/modules/overlay/overlay.component.mjs +15 -9
- package/esm2020/testing/overlay/overlay-harness-filters.mjs +2 -0
- package/esm2020/testing/overlay/overlay-harness.mjs +39 -0
- package/esm2020/testing/public-api.mjs +3 -1
- package/esm2020/testing/shared/component-harness.mjs +13 -7
- package/esm2020/testing/shared/harness-filters.mjs +1 -1
- package/fesm2015/skyux-core-testing.mjs +58 -7
- package/fesm2015/skyux-core-testing.mjs.map +1 -1
- package/fesm2015/skyux-core.mjs +45 -22
- package/fesm2015/skyux-core.mjs.map +1 -1
- package/fesm2020/skyux-core-testing.mjs +49 -5
- package/fesm2020/skyux-core-testing.mjs.map +1 -1
- package/fesm2020/skyux-core.mjs +45 -22
- package/fesm2020/skyux-core.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/modules/dynamic-component/dynamic-component-options.d.ts +5 -0
- package/lib/modules/id/id.directive.d.ts +2 -1
- package/lib/modules/id/id.service.d.ts +9 -0
- package/lib/modules/overlay/overlay-instance.d.ts +1 -0
- package/lib/modules/overlay/overlay.component.d.ts +4 -2
- package/package.json +2 -2
- package/testing/overlay/overlay-harness-filters.d.ts +6 -0
- package/testing/overlay/overlay-harness.d.ts +29 -0
- package/testing/public-api.d.ts +2 -0
- package/testing/shared/component-harness.d.ts +4 -5
- package/testing/shared/harness-filters.d.ts +4 -1
package/fesm2015/skyux-core.mjs
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, ElementRef } from '@angular/core';
|
2
|
+
import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding } from '@angular/core';
|
3
3
|
import { __classPrivateFieldSet, __classPrivateFieldGet, __awaiter } from 'tslib';
|
4
|
-
import * as
|
4
|
+
import * as i5 from '@angular/common';
|
5
5
|
import { CommonModule } from '@angular/common';
|
6
6
|
import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
|
7
7
|
import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
|
8
8
|
import * as i1 from '@skyux/i18n';
|
9
9
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
|
10
|
-
import * as
|
10
|
+
import * as i4 from '@angular/router';
|
11
11
|
import { NavigationStart } from '@angular/router';
|
12
12
|
import * as i1$1 from '@angular/platform-browser';
|
13
13
|
|
@@ -1174,9 +1174,13 @@ class SkyDynamicComponentService {
|
|
1174
1174
|
options = options || {
|
1175
1175
|
location: SkyDynamicComponentLocation.BodyBottom,
|
1176
1176
|
};
|
1177
|
+
const injector = Injector.create({
|
1178
|
+
providers: options.providers || [],
|
1179
|
+
parent: this.injector,
|
1180
|
+
});
|
1177
1181
|
const componentRef = this.componentFactoryResolver
|
1178
1182
|
.resolveComponentFactory(componentType)
|
1179
|
-
.create(
|
1183
|
+
.create(injector);
|
1180
1184
|
this.applicationRef.attachView(componentRef.hostView);
|
1181
1185
|
const el = this.getRootNode(componentRef);
|
1182
1186
|
const bodyEl = this.windowRef.nativeWindow.document.body;
|
@@ -1345,26 +1349,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1345
1349
|
}]
|
1346
1350
|
}] });
|
1347
1351
|
|
1348
|
-
var _SkyIdDirective__id;
|
1349
1352
|
let idIndex = 0;
|
1350
|
-
|
1351
|
-
|
1352
|
-
|
1353
|
-
|
1354
|
-
|
1355
|
-
|
1356
|
-
|
1353
|
+
/**
|
1354
|
+
* Generates unique IDs to be used with HTML elements.
|
1355
|
+
*/
|
1356
|
+
class SkyIdService {
|
1357
|
+
generateId() {
|
1358
|
+
idIndex++;
|
1359
|
+
// Include timestamp and an incrementing index to guarantee unique IDs both during the application
|
1360
|
+
// lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
|
1361
|
+
// elements with the same ID across sessions.
|
1362
|
+
return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
|
1363
|
+
}
|
1364
|
+
}
|
1365
|
+
SkyIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
1366
|
+
SkyIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdService, providedIn: 'root' });
|
1367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdService, decorators: [{
|
1368
|
+
type: Injectable,
|
1369
|
+
args: [{
|
1370
|
+
providedIn: 'root',
|
1371
|
+
}]
|
1372
|
+
}] });
|
1373
|
+
|
1374
|
+
var _SkyIdDirective__id;
|
1357
1375
|
/**
|
1358
1376
|
* Sets the element's `id` attribute to a unique ID. To reference this unique ID on other elements,
|
1359
1377
|
* such as in a `label` element's `for` attribute, assign this directive to a template reference
|
1360
1378
|
* variable, then use its `id` property.
|
1361
1379
|
*/
|
1362
1380
|
class SkyIdDirective {
|
1363
|
-
constructor(elRef, renderer) {
|
1381
|
+
constructor(elRef, renderer, idSvc) {
|
1364
1382
|
_SkyIdDirective__id.set(this, void 0);
|
1365
1383
|
// Generate and apply the ID before the template is rendered
|
1366
1384
|
// to avoid a changed-after-checked error.
|
1367
|
-
const id = generateId();
|
1385
|
+
const id = idSvc.generateId();
|
1368
1386
|
renderer.setAttribute(elRef.nativeElement, 'id', id);
|
1369
1387
|
__classPrivateFieldSet(this, _SkyIdDirective__id, id, "f");
|
1370
1388
|
}
|
@@ -1373,7 +1391,7 @@ class SkyIdDirective {
|
|
1373
1391
|
}
|
1374
1392
|
}
|
1375
1393
|
_SkyIdDirective__id = new WeakMap();
|
1376
|
-
SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
1394
|
+
SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyIdService }], target: i0.ɵɵFactoryTarget.Directive });
|
1377
1395
|
SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
|
1378
1396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdDirective, decorators: [{
|
1379
1397
|
type: Directive,
|
@@ -1381,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1381
1399
|
selector: '[skyId]',
|
1382
1400
|
exportAs: 'skyId',
|
1383
1401
|
}]
|
1384
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
|
1402
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyIdService }]; } });
|
1385
1403
|
|
1386
1404
|
class SkyIdModule {
|
1387
1405
|
}
|
@@ -2088,6 +2106,7 @@ class SkyOverlayInstance {
|
|
2088
2106
|
this.componentRef = componentRef;
|
2089
2107
|
this._backdropClick = new Subject();
|
2090
2108
|
this._closed = new Subject();
|
2109
|
+
this.id = this.componentRef.instance.id;
|
2091
2110
|
this.componentRef.instance.closed.subscribe(() => {
|
2092
2111
|
this._closed.next();
|
2093
2112
|
this._closed.complete();
|
@@ -2156,7 +2175,7 @@ let uniqueZIndex = 5000;
|
|
2156
2175
|
* @internal
|
2157
2176
|
*/
|
2158
2177
|
class SkyOverlayComponent {
|
2159
|
-
constructor(changeDetector, resolver, injector, coreAdapter, context, router) {
|
2178
|
+
constructor(changeDetector, resolver, injector, coreAdapter, context, idSvc, router) {
|
2160
2179
|
this.changeDetector = changeDetector;
|
2161
2180
|
this.resolver = resolver;
|
2162
2181
|
this.injector = injector;
|
@@ -2170,6 +2189,7 @@ class SkyOverlayComponent {
|
|
2170
2189
|
this.ngUnsubscribe = new Subject();
|
2171
2190
|
this._backdropClick = new Subject();
|
2172
2191
|
this._closed = new Subject();
|
2192
|
+
this.id = idSvc.generateId();
|
2173
2193
|
}
|
2174
2194
|
get backdropClick() {
|
2175
2195
|
return this._backdropClick.asObservable();
|
@@ -2249,16 +2269,19 @@ class SkyOverlayComponent {
|
|
2249
2269
|
}
|
2250
2270
|
}
|
2251
2271
|
}
|
2252
|
-
SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token:
|
2253
|
-
SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n [class]=\"wrapperClass\"\n [style.zIndex]=\"zIndex\"\n [ngClass]=\"{\n 'enable-pointer-events-pass-through': enablePointerEvents,\n 'sky-overlay': true\n }\"\n #overlayRef\n>\n <div class=\"sky-overlay-content\" #overlayContentRef>\n <ng-template #target> </ng-template>\n </div>\n <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], directives: [{ type:
|
2272
|
+
SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
2273
|
+
SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n [class]=\"wrapperClass\"\n [style.zIndex]=\"zIndex\"\n [ngClass]=\"{\n 'enable-pointer-events-pass-through': enablePointerEvents,\n 'sky-overlay': true\n }\"\n #overlayRef\n>\n <div class=\"sky-overlay-content\" #overlayContentRef>\n <ng-template #target> </ng-template>\n </div>\n <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
2254
2274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyOverlayComponent, decorators: [{
|
2255
2275
|
type: Component,
|
2256
2276
|
args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"wrapperClass\"\n [style.zIndex]=\"zIndex\"\n [ngClass]=\"{\n 'enable-pointer-events-pass-through': enablePointerEvents,\n 'sky-overlay': true\n }\"\n #overlayRef\n>\n <div class=\"sky-overlay-content\" #overlayContentRef>\n <ng-template #target> </ng-template>\n </div>\n <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
|
2257
2277
|
}], ctorParameters: function () {
|
2258
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type:
|
2278
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
|
2259
2279
|
type: Optional
|
2260
2280
|
}] }];
|
2261
|
-
}, propDecorators: {
|
2281
|
+
}, propDecorators: { id: [{
|
2282
|
+
type: HostBinding,
|
2283
|
+
args: ['id']
|
2284
|
+
}], overlayContentRef: [{
|
2262
2285
|
type: ViewChild,
|
2263
2286
|
args: ['overlayContentRef', {
|
2264
2287
|
read: ElementRef,
|
@@ -3418,5 +3441,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
3418
3441
|
* Generated bundle index. Do not edit.
|
3419
3442
|
*/
|
3420
3443
|
|
3421
|
-
export { MutationObserverService, NumericOptions, SKY_LOG_LEVEL, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
|
3444
|
+
export { MutationObserverService, NumericOptions, SKY_LOG_LEVEL, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
|
3422
3445
|
//# sourceMappingURL=skyux-core.mjs.map
|