@skyux/core 8.0.0-alpha.14 → 8.0.0-alpha.16

package/fesm2020/skyux-core.mjs

@@ -375,7 +375,7 @@ function isOffsetPartiallyVisibleWithinParent(parent, offset, bufferOffset) {
         parentOffset.left >= offset.right);
 }
 
-var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_resizeListener, _SkyAffixer_scrollListeners, _SkyAffixer__config, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addScrollListeners, _SkyAffixer_addResizeListener, _SkyAffixer_removeResizeListener, _SkyAffixer_removeScrollListeners;
+var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_resizeListener, _SkyAffixer_scrollListeners, _SkyAffixer__config, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getRect, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addScrollListeners, _SkyAffixer_addResizeListener, _SkyAffixer_removeResizeListener, _SkyAffixer_removeScrollListeners;
 const DEFAULT_AFFIX_CONFIG = {
     autoFitContext: SkyAffixAutoFitContext.OverflowParent,
     enableAutoFit: false,
@@ -497,9 +497,19 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     let isAffixedElementFullyVisible = false;
     let offset;
     let placement = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).placement;
+    const autoFitOverflowOffset = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset || {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+    };
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).position === 'absolute') {
+        autoFitOverflowOffset.top =
+            (autoFitOverflowOffset.top || 0) + window.scrollY;
+    }
     do {
         offset = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, placement);
-        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
+        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, autoFitOverflowOffset);
         if (!__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit) {
             break;
         }
@@ -525,12 +535,27 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     }
     // No suitable placement was found, so revert to preferred placement.
     return __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).placement);
+}, _SkyAffixer_getRect = function _SkyAffixer_getRect(baseElement) {
+    const baseDomRect = baseElement.getBoundingClientRect();
+    const baseRect = {
+        top: baseDomRect.top,
+        bottom: baseDomRect.bottom,
+        left: baseDomRect.left,
+        right: baseDomRect.right,
+        width: baseDomRect.width,
+        height: baseDomRect.height,
+    };
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).position === 'absolute') {
+        baseRect.top += window.scrollY;
+        baseRect.bottom = baseRect.top + baseDomRect.height;
+    }
+    return baseRect;
 }, _SkyAffixer_getPreferredOffset = function _SkyAffixer_getPreferredOffset(placement) {
     if (!__classPrivateFieldGet(this, _SkyAffixer_baseElement, "f")) {
         return { top: 0, left: 0, bottom: 0, right: 0 };
     }
-    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").getBoundingClientRect();
-    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f").getBoundingClientRect();
+    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f"));
     const horizontalAlignment = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).horizontalAlignment;
     const verticalAlignment = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).verticalAlignment;
     const enableAutoFit = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit;
@@ -610,8 +635,8 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
 }, _SkyAffixer_adjustOffsetToOverflowParent = function _SkyAffixer_adjustOffsetToOverflowParent(offset, placement, baseElement) {
     const parent = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getAutoFitContextParent).call(this);
     const parentOffset = getElementOffset(parent, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
-    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").getBoundingClientRect();
-    const baseRect = baseElement.getBoundingClientRect();
+    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, baseElement);
     // A pixel value representing the leeway between the edge of the overflow parent and the edge
     // of the base element before it disappears from view.
     // If the visible portion of the base element is less than this pixel value, the auto-fit
@@ -793,6 +818,7 @@ class SkyAffixDirective {
             changes.affixHorizontalAlignment ||
             changes.affixIsSticky ||
             changes.affixPlacement ||
+            changes.affixPosition ||
             changes.affixVerticalAlignment) {
             __classPrivateFieldGet(this, _SkyAffixDirective_instances, "m", _SkyAffixDirective_updateAlignment).call(this);
         }
@@ -819,12 +845,13 @@ _SkyAffixDirective_affixer = new WeakMap(), _SkyAffixDirective_affixService = ne
             horizontalAlignment: this.affixHorizontalAlignment,
             isSticky: this.affixIsSticky,
             placement: this.affixPlacement,
+            position: this.affixPosition,
             verticalAlignment: this.affixVerticalAlignment,
         });
     }
 };
 SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 });
+SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixPosition: "affixPosition", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixDirective, decorators: [{
             type: Directive,
             args: [{
@@ -844,6 +871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 type: Input
             }], affixPlacement: [{
                 type: Input
+            }], affixPosition: [{
+                type: Input
             }], affixVerticalAlignment: [{
                 type: Input
             }], affixOffsetChange: [{
@@ -2262,6 +2291,7 @@ class SkyOverlayContext {
 }
 
 var _SkyOverlayComponent_instances, _SkyOverlayComponent_backdropClick, _SkyOverlayComponent_backdropClickObs, _SkyOverlayComponent_changeDetector, _SkyOverlayComponent_closed, _SkyOverlayComponent_closedObs, _SkyOverlayComponent_context, _SkyOverlayComponent_coreAdapter, _SkyOverlayComponent_injector, _SkyOverlayComponent_ngUnsubscribe, _SkyOverlayComponent_router, _SkyOverlayComponent_routerSubscription, _SkyOverlayComponent_applyConfig, _SkyOverlayComponent_addBackdropClickListener, _SkyOverlayComponent_addRouteListener, _SkyOverlayComponent_removeRouteListener;
+const POSITION_DEFAULT = 'fixed';
 /**
  * Omnibar is 1000.
  * See: https://github.com/blackbaud/auth-client/blob/master/src/omnibar/omnibar.ts#L139
@@ -2293,6 +2323,7 @@ class SkyOverlayComponent {
         this.showBackdrop = false;
         this.zIndex = `${++uniqueZIndex}`;
         this.clipPath$ = new ReplaySubject(1);
+        this.position = POSITION_DEFAULT;
         _SkyOverlayComponent_backdropClick.set(this, void 0);
         _SkyOverlayComponent_backdropClickObs.set(this, void 0);
         _SkyOverlayComponent_changeDetector.set(this, void 0);
@@ -2375,6 +2406,7 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     this.wrapperClass = config.wrapperClass || '';
     this.showBackdrop = !!config.showBackdrop;
     this.enablePointerEvents = !!config.enablePointerEvents;
+    this.position = config.position || POSITION_DEFAULT;
     __classPrivateFieldGet(this, _SkyOverlayComponent_changeDetector, "f").markForCheck();
 }, _SkyOverlayComponent_addBackdropClickListener = function _SkyOverlayComponent_addBackdropClickListener() {
     fromEvent(window.document, 'click')
@@ -2409,10 +2441,10 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     }
 };
 SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\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;inset: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);inset: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"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", 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]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\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{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.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);inset: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"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\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;inset: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);inset: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"] }]
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\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{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.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);inset: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.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { id: [{