@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.
@@ -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
 
@@ -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
- function generateId() {
1355
- idIndex++;
1356
- // Include timestamp and an incrementing index to guarantee unique IDs both during the application
1357
- // lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
1358
- // elements with the same ID across sessions.
1359
- return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
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: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
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: 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 });
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: i3.Router, decorators: [{
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: { overlayContentRef: [{
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