@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.
Files changed (33) hide show
  1. package/documentation.json +870 -748
  2. package/esm2020/index.mjs +2 -1
  3. package/esm2020/lib/modules/dynamic-component/dynamic-component-options.mjs +1 -1
  4. package/esm2020/lib/modules/dynamic-component/dynamic-component.service.mjs +6 -2
  5. package/esm2020/lib/modules/id/id.directive.mjs +7 -13
  6. package/esm2020/lib/modules/id/id.service.mjs +24 -0
  7. package/esm2020/lib/modules/overlay/overlay-instance.mjs +2 -1
  8. package/esm2020/lib/modules/overlay/overlay.component.mjs +15 -9
  9. package/esm2020/testing/overlay/overlay-harness-filters.mjs +2 -0
  10. package/esm2020/testing/overlay/overlay-harness.mjs +39 -0
  11. package/esm2020/testing/public-api.mjs +3 -1
  12. package/esm2020/testing/shared/component-harness.mjs +13 -7
  13. package/esm2020/testing/shared/harness-filters.mjs +1 -1
  14. package/fesm2015/skyux-core-testing.mjs +58 -7
  15. package/fesm2015/skyux-core-testing.mjs.map +1 -1
  16. package/fesm2015/skyux-core.mjs +45 -22
  17. package/fesm2015/skyux-core.mjs.map +1 -1
  18. package/fesm2020/skyux-core-testing.mjs +49 -5
  19. package/fesm2020/skyux-core-testing.mjs.map +1 -1
  20. package/fesm2020/skyux-core.mjs +45 -22
  21. package/fesm2020/skyux-core.mjs.map +1 -1
  22. package/index.d.ts +1 -0
  23. package/lib/modules/dynamic-component/dynamic-component-options.d.ts +5 -0
  24. package/lib/modules/id/id.directive.d.ts +2 -1
  25. package/lib/modules/id/id.service.d.ts +9 -0
  26. package/lib/modules/overlay/overlay-instance.d.ts +1 -0
  27. package/lib/modules/overlay/overlay.component.d.ts +4 -2
  28. package/package.json +2 -2
  29. package/testing/overlay/overlay-harness-filters.d.ts +6 -0
  30. package/testing/overlay/overlay-harness.d.ts +29 -0
  31. package/testing/public-api.d.ts +2 -0
  32. package/testing/shared/component-harness.d.ts +4 -5
  33. package/testing/shared/harness-filters.d.ts +4 -1
@@ -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 i4 from '@angular/common';
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 i3 from '@angular/router';
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(this.injector);
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
- function generateId() {
1351
- idIndex++;
1352
- // Include timestamp and an incrementing index to guarantee unique IDs both during the application
1353
- // lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
1354
- // elements with the same ID across sessions.
1355
- return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
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: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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: i3.Router, decorators: [{
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: { overlayContentRef: [{
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