@skyux/core 6.11.2 → 6.14.0

package/fesm2015/skyux-core.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, ElementRef } from '@angular/core';
+import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding } from '@angular/core';
 import { __classPrivateFieldSet, __classPrivateFieldGet, __awaiter } from 'tslib';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
 import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
-import * as i3 from '@angular/router';
+import * as i4 from '@angular/router';
 import { NavigationStart } from '@angular/router';
 import * as i1$1 from '@angular/platform-browser';
 
@@ -1174,9 +1174,13 @@ class SkyDynamicComponentService {
         options = options || {
             location: SkyDynamicComponentLocation.BodyBottom,
         };
+        const injector = Injector.create({
+            providers: options.providers || [],
+            parent: this.injector,
+        });
         const componentRef = this.componentFactoryResolver
             .resolveComponentFactory(componentType)
-            .create(this.injector);
+            .create(injector);
         this.applicationRef.attachView(componentRef.hostView);
         const el = this.getRootNode(componentRef);
         const bodyEl = this.windowRef.nativeWindow.document.body;
@@ -1345,26 +1349,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-var _SkyIdDirective__id;
 let idIndex = 0;
-function generateId() {
-    idIndex++;
-    // Include timestamp and an incrementing index to guarantee unique IDs both during the application
-    // lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
-    // elements with the same ID across sessions.
-    return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
-}
+/**
+ * Generates unique IDs to be used with HTML elements.
+ */
+class SkyIdService {
+    generateId() {
+        idIndex++;
+        // Include timestamp and an incrementing index to guarantee unique IDs both during the application
+        // lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
+        // elements with the same ID across sessions.
+        return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
+    }
+}
+SkyIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+var _SkyIdDirective__id;
 /**
  * Sets the element's `id` attribute to a unique ID. To reference this unique ID on other elements,
  * such as in a `label` element's `for` attribute, assign this directive to a template reference
  * variable, then use its `id` property.
  */
 class SkyIdDirective {
-    constructor(elRef, renderer) {
+    constructor(elRef, renderer, idSvc) {
         _SkyIdDirective__id.set(this, void 0);
         // Generate and apply the ID before the template is rendered
         // to avoid a changed-after-checked error.
-        const id = generateId();
+        const id = idSvc.generateId();
         renderer.setAttribute(elRef.nativeElement, 'id', id);
         __classPrivateFieldSet(this, _SkyIdDirective__id, id, "f");
     }
@@ -1373,7 +1391,7 @@ class SkyIdDirective {
     }
 }
 _SkyIdDirective__id = new WeakMap();
-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 });
+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 });
 SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIdDirective, decorators: [{
             type: Directive,
@@ -1381,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     selector: '[skyId]',
                     exportAs: 'skyId',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyIdService }]; } });
 
 class SkyIdModule {
 }
@@ -2088,6 +2106,7 @@ class SkyOverlayInstance {
         this.componentRef = componentRef;
         this._backdropClick = new Subject();
         this._closed = new Subject();
+        this.id = this.componentRef.instance.id;
         this.componentRef.instance.closed.subscribe(() => {
             this._closed.next();
             this._closed.complete();
@@ -2156,7 +2175,7 @@ let uniqueZIndex = 5000;
  * @internal
  */
 class SkyOverlayComponent {
-    constructor(changeDetector, resolver, injector, coreAdapter, context, router) {
+    constructor(changeDetector, resolver, injector, coreAdapter, context, idSvc, router) {
         this.changeDetector = changeDetector;
         this.resolver = resolver;
         this.injector = injector;
@@ -2170,6 +2189,7 @@ class SkyOverlayComponent {
         this.ngUnsubscribe = new Subject();
         this._backdropClick = new Subject();
         this._closed = new Subject();
+        this.id = idSvc.generateId();
     }
     get backdropClick() {
         return this._backdropClick.asObservable();
@@ -2249,16 +2269,19 @@ class SkyOverlayComponent {
         }
     }
 }
-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 });
-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 });
+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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
             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"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: i3.Router, decorators: [{
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { overlayContentRef: [{
+    }, propDecorators: { id: [{
+                type: HostBinding,
+                args: ['id']
+            }], overlayContentRef: [{
                 type: ViewChild,
                 args: ['overlayContentRef', {
                         read: ElementRef,
@@ -3418,5 +3441,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=skyux-core.mjs.map