@skyux/core 6.12.0 → 6.13.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 +835 -742
- package/esm2020/index.mjs +2 -1
- 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 +40 -21
- 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 +40 -21
- package/fesm2020/skyux-core.mjs.map +1 -1
- package/index.d.ts +1 -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 +0 -3
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
|
|
@@ -1349,26 +1349,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1349
1349
|
}]
|
1350
1350
|
}] });
|
1351
1351
|
|
1352
|
-
var _SkyIdDirective__id;
|
1353
1352
|
let idIndex = 0;
|
1354
|
-
|
1355
|
-
|
1356
|
-
|
1357
|
-
|
1358
|
-
|
1359
|
-
|
1360
|
-
|
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;
|
1361
1375
|
/**
|
1362
1376
|
* Sets the element's `id` attribute to a unique ID. To reference this unique ID on other elements,
|
1363
1377
|
* such as in a `label` element's `for` attribute, assign this directive to a template reference
|
1364
1378
|
* variable, then use its `id` property.
|
1365
1379
|
*/
|
1366
1380
|
class SkyIdDirective {
|
1367
|
-
constructor(elRef, renderer) {
|
1381
|
+
constructor(elRef, renderer, idSvc) {
|
1368
1382
|
_SkyIdDirective__id.set(this, void 0);
|
1369
1383
|
// Generate and apply the ID before the template is rendered
|
1370
1384
|
// to avoid a changed-after-checked error.
|
1371
|
-
const id = generateId();
|
1385
|
+
const id = idSvc.generateId();
|
1372
1386
|
renderer.setAttribute(elRef.nativeElement, 'id', id);
|
1373
1387
|
__classPrivateFieldSet(this, _SkyIdDirective__id, id, "f");
|
1374
1388
|
}
|
@@ -1377,7 +1391,7 @@ class SkyIdDirective {
|
|
1377
1391
|
}
|
1378
1392
|
}
|
1379
1393
|
_SkyIdDirective__id = new WeakMap();
|
1380
|
-
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 });
|
1381
1395
|
SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
|
1382
1396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdDirective, decorators: [{
|
1383
1397
|
type: Directive,
|
@@ -1385,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
1385
1399
|
selector: '[skyId]',
|
1386
1400
|
exportAs: 'skyId',
|
1387
1401
|
}]
|
1388
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
|
1402
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyIdService }]; } });
|
1389
1403
|
|
1390
1404
|
class SkyIdModule {
|
1391
1405
|
}
|
@@ -2092,6 +2106,7 @@ class SkyOverlayInstance {
|
|
2092
2106
|
this.componentRef = componentRef;
|
2093
2107
|
this._backdropClick = new Subject();
|
2094
2108
|
this._closed = new Subject();
|
2109
|
+
this.id = this.componentRef.instance.id;
|
2095
2110
|
this.componentRef.instance.closed.subscribe(() => {
|
2096
2111
|
this._closed.next();
|
2097
2112
|
this._closed.complete();
|
@@ -2160,7 +2175,7 @@ let uniqueZIndex = 5000;
|
|
2160
2175
|
* @internal
|
2161
2176
|
*/
|
2162
2177
|
class SkyOverlayComponent {
|
2163
|
-
constructor(changeDetector, resolver, injector, coreAdapter, context, router) {
|
2178
|
+
constructor(changeDetector, resolver, injector, coreAdapter, context, idSvc, router) {
|
2164
2179
|
this.changeDetector = changeDetector;
|
2165
2180
|
this.resolver = resolver;
|
2166
2181
|
this.injector = injector;
|
@@ -2174,6 +2189,7 @@ class SkyOverlayComponent {
|
|
2174
2189
|
this.ngUnsubscribe = new Subject();
|
2175
2190
|
this._backdropClick = new Subject();
|
2176
2191
|
this._closed = new Subject();
|
2192
|
+
this.id = idSvc.generateId();
|
2177
2193
|
}
|
2178
2194
|
get backdropClick() {
|
2179
2195
|
return this._backdropClick.asObservable();
|
@@ -2253,16 +2269,19 @@ class SkyOverlayComponent {
|
|
2253
2269
|
}
|
2254
2270
|
}
|
2255
2271
|
}
|
2256
|
-
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:
|
2257
|
-
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 });
|
2258
2274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyOverlayComponent, decorators: [{
|
2259
2275
|
type: Component,
|
2260
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"] }]
|
2261
2277
|
}], ctorParameters: function () {
|
2262
|
-
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: [{
|
2263
2279
|
type: Optional
|
2264
2280
|
}] }];
|
2265
|
-
}, propDecorators: {
|
2281
|
+
}, propDecorators: { id: [{
|
2282
|
+
type: HostBinding,
|
2283
|
+
args: ['id']
|
2284
|
+
}], overlayContentRef: [{
|
2266
2285
|
type: ViewChild,
|
2267
2286
|
args: ['overlayContentRef', {
|
2268
2287
|
read: ElementRef,
|
@@ -3422,5 +3441,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
3422
3441
|
* Generated bundle index. Do not edit.
|
3423
3442
|
*/
|
3424
3443
|
|
3425
|
-
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 };
|
3426
3445
|
//# sourceMappingURL=skyux-core.mjs.map
|