Socket
Socket
Sign inDemoInstall

@ncstate/sat-popover

Package Overview
Dependencies
7
Maintainers
2
Versions
35
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0-beta.5 to 1.0.0

64

@ncstate/sat-popover.es5.js

@@ -338,2 +338,4 @@ import { Component, Directive, ElementRef, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, NgZone, Optional, Output, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';

this._verticalAlign = 'center';
this._forceAlignment = false;
this._lockAlignment = false;
this._autoFocus = true;

@@ -450,2 +452,43 @@ this._scrollStrategy = 'reposition';

});
Object.defineProperty(SatPopover.prototype, "forceAlignment", {
get: /**
* Whether the popover always opens with the specified alignment.
* @return {?}
*/
function () { return this._forceAlignment; },
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
var /** @type {?} */ coercedVal = coerceBooleanProperty(val);
if (this._forceAlignment !== coercedVal) {
this._forceAlignment = coercedVal;
this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SatPopover.prototype, "lockAlignment", {
get: /**
* Whether the popover's alignment is locked after opening. This prevents the popover
* from changing its alignement when scrolling or changing the size of the viewport.
* @return {?}
*/
function () { return this._lockAlignment; },
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
var /** @type {?} */ coercedVal = coerceBooleanProperty(val);
if (this._lockAlignment !== coercedVal) {
this._lockAlignment = coerceBooleanProperty(val);
this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SatPopover.prototype, "autoFocus", {

@@ -835,2 +878,4 @@ get: /**

"yAlign": [{ type: Input },],
"forceAlignment": [{ type: Input },],
"lockAlignment": [{ type: Input },],
"autoFocus": [{ type: Input },],

@@ -1008,2 +1053,4 @@ "scrollStrategy": [{ type: Input },],

scrollStrategy: this._popover.scrollStrategy,
forceAlignment: this._popover.forceAlignment,
lockAlignment: this._popover.lockAlignment,
};

@@ -1188,3 +1235,3 @@ var /** @type {?} */ overlayConfig = this._getOverlayConfig(popoverConfig, this._anchor);

return new OverlayConfig({
positionStrategy: this._getPositionStrategy(config.horizontalAlign, config.verticalAlign, anchor),
positionStrategy: this._getPositionStrategy(config.horizontalAlign, config.verticalAlign, config.forceAlignment, config.lockAlignment, anchor),
hasBackdrop: config.hasBackdrop,

@@ -1250,2 +1297,4 @@ backdropClass: config.backdropClass || 'cdk-overlay-transparent-backdrop',

* @param {?} verticalTarget
* @param {?} forceAlignment
* @param {?} lockAlignment
* @param {?} anchor

@@ -1258,6 +1307,8 @@ * @return {?}

* @param {?} verticalTarget
* @param {?} forceAlignment
* @param {?} lockAlignment
* @param {?} anchor
* @return {?}
*/
function (horizontalTarget, verticalTarget, anchor) {
function (horizontalTarget, verticalTarget, forceAlignment, lockAlignment, anchor) {
// Attach the overlay at the preferred position

@@ -1268,5 +1319,8 @@ var _a = getHorizontalConnectionPosPair(horizontalTarget), originX = _a.originX, overlayX = _a.overlayX;

.connectedTo(anchor, { originX: originX, originY: originY }, { overlayX: overlayX, overlayY: overlayY })
.withDirection(this._getDirection());
// Add fallbacks based on the preferred positions
this._addFallbacks(strategy, horizontalTarget, verticalTarget);
.withDirection(this._getDirection())
.withLockedPosition(lockAlignment);
// Unless the alignment is forced, add fallbacks based on the preferred positions
if (!forceAlignment) {
this._addFallbacks(strategy, horizontalTarget, verticalTarget);
}
return strategy;

@@ -1273,0 +1327,0 @@ };

54

@ncstate/sat-popover.js

@@ -328,2 +328,4 @@ import { Component, Directive, ElementRef, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, NgZone, Optional, Output, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';

this._verticalAlign = 'center';
this._forceAlignment = false;
this._lockAlignment = false;
this._autoFocus = true;

@@ -425,2 +427,35 @@ this._scrollStrategy = 'reposition';

/**
* Whether the popover always opens with the specified alignment.
* @return {?}
*/
get forceAlignment() { return this._forceAlignment; }
/**
* @param {?} val
* @return {?}
*/
set forceAlignment(val) {
const /** @type {?} */ coercedVal = coerceBooleanProperty(val);
if (this._forceAlignment !== coercedVal) {
this._forceAlignment = coercedVal;
this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));
}
}
/**
* Whether the popover's alignment is locked after opening. This prevents the popover
* from changing its alignement when scrolling or changing the size of the viewport.
* @return {?}
*/
get lockAlignment() { return this._lockAlignment; }
/**
* @param {?} val
* @return {?}
*/
set lockAlignment(val) {
const /** @type {?} */ coercedVal = coerceBooleanProperty(val);
if (this._lockAlignment !== coercedVal) {
this._lockAlignment = coerceBooleanProperty(val);
this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));
}
}
/**
* Whether the first focusable element should be focused on open.

@@ -702,2 +737,4 @@ * @return {?}

"yAlign": [{ type: Input },],
"forceAlignment": [{ type: Input },],
"lockAlignment": [{ type: Input },],
"autoFocus": [{ type: Input },],

@@ -841,2 +878,4 @@ "scrollStrategy": [{ type: Input },],

scrollStrategy: this._popover.scrollStrategy,
forceAlignment: this._popover.forceAlignment,
lockAlignment: this._popover.lockAlignment,
};

@@ -971,3 +1010,3 @@ const /** @type {?} */ overlayConfig = this._getOverlayConfig(popoverConfig, this._anchor);

return new OverlayConfig({
positionStrategy: this._getPositionStrategy(config.horizontalAlign, config.verticalAlign, anchor),
positionStrategy: this._getPositionStrategy(config.horizontalAlign, config.verticalAlign, config.forceAlignment, config.lockAlignment, anchor),
hasBackdrop: config.hasBackdrop,

@@ -1020,6 +1059,8 @@ backdropClass: config.backdropClass || 'cdk-overlay-transparent-backdrop',

* @param {?} verticalTarget
* @param {?} forceAlignment
* @param {?} lockAlignment
* @param {?} anchor
* @return {?}
*/
_getPositionStrategy(horizontalTarget, verticalTarget, anchor) {
_getPositionStrategy(horizontalTarget, verticalTarget, forceAlignment, lockAlignment, anchor) {
// Attach the overlay at the preferred position

@@ -1030,5 +1071,8 @@ const { originX, overlayX } = getHorizontalConnectionPosPair(horizontalTarget);

.connectedTo(anchor, { originX, originY }, { overlayX, overlayY })
.withDirection(this._getDirection());
// Add fallbacks based on the preferred positions
this._addFallbacks(strategy, horizontalTarget, verticalTarget);
.withDirection(this._getDirection())
.withLockedPosition(lockAlignment);
// Unless the alignment is forced, add fallbacks based on the preferred positions
if (!forceAlignment) {
this._addFallbacks(strategy, horizontalTarget, verticalTarget);
}
return strategy;

@@ -1035,0 +1079,0 @@ }

64

bundles/sat-popover.umd.js

@@ -328,2 +328,4 @@ (function (global, factory) {

this._verticalAlign = 'center';
this._forceAlignment = false;
this._lockAlignment = false;
this._autoFocus = true;

@@ -440,2 +442,43 @@ this._scrollStrategy = 'reposition';

});
Object.defineProperty(SatPopover.prototype, "forceAlignment", {
get: /**
* Whether the popover always opens with the specified alignment.
* @return {?}
*/
function () { return this._forceAlignment; },
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
var /** @type {?} */ coercedVal = coercion.coerceBooleanProperty(val);
if (this._forceAlignment !== coercedVal) {
this._forceAlignment = coercedVal;
this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SatPopover.prototype, "lockAlignment", {
get: /**
* Whether the popover's alignment is locked after opening. This prevents the popover
* from changing its alignement when scrolling or changing the size of the viewport.
* @return {?}
*/
function () { return this._lockAlignment; },
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
var /** @type {?} */ coercedVal = coercion.coerceBooleanProperty(val);
if (this._lockAlignment !== coercedVal) {
this._lockAlignment = coercion.coerceBooleanProperty(val);
this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SatPopover.prototype, "autoFocus", {

@@ -825,2 +868,4 @@ get: /**

"yAlign": [{ type: core.Input },],
"forceAlignment": [{ type: core.Input },],
"lockAlignment": [{ type: core.Input },],
"autoFocus": [{ type: core.Input },],

@@ -998,2 +1043,4 @@ "scrollStrategy": [{ type: core.Input },],

scrollStrategy: this._popover.scrollStrategy,
forceAlignment: this._popover.forceAlignment,
lockAlignment: this._popover.lockAlignment,
};

@@ -1178,3 +1225,3 @@ var /** @type {?} */ overlayConfig = this._getOverlayConfig(popoverConfig, this._anchor);

return new overlay.OverlayConfig({
positionStrategy: this._getPositionStrategy(config.horizontalAlign, config.verticalAlign, anchor),
positionStrategy: this._getPositionStrategy(config.horizontalAlign, config.verticalAlign, config.forceAlignment, config.lockAlignment, anchor),
hasBackdrop: config.hasBackdrop,

@@ -1240,2 +1287,4 @@ backdropClass: config.backdropClass || 'cdk-overlay-transparent-backdrop',

* @param {?} verticalTarget
* @param {?} forceAlignment
* @param {?} lockAlignment
* @param {?} anchor

@@ -1248,6 +1297,8 @@ * @return {?}

* @param {?} verticalTarget
* @param {?} forceAlignment
* @param {?} lockAlignment
* @param {?} anchor
* @return {?}
*/
function (horizontalTarget, verticalTarget, anchor) {
function (horizontalTarget, verticalTarget, forceAlignment, lockAlignment, anchor) {
// Attach the overlay at the preferred position

@@ -1258,5 +1309,8 @@ var _a = getHorizontalConnectionPosPair(horizontalTarget), originX = _a.originX, overlayX = _a.overlayX;

.connectedTo(anchor, { originX: originX, originY: originY }, { overlayX: overlayX, overlayY: overlayY })
.withDirection(this._getDirection());
// Add fallbacks based on the preferred positions
this._addFallbacks(strategy, horizontalTarget, verticalTarget);
.withDirection(this._getDirection())
.withLockedPosition(lockAlignment);
// Unless the alignment is forced, add fallbacks based on the preferred positions
if (!forceAlignment) {
this._addFallbacks(strategy, horizontalTarget, verticalTarget);
}
return strategy;

@@ -1263,0 +1317,0 @@ };

2

bundles/sat-popover.umd.min.js

@@ -1,2 +0,2 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/overlay"),require("@angular/cdk/a11y"),require("@angular/platform-browser"),require("@angular/cdk/coercion"),require("@angular/animations"),require("rxjs/Subject"),require("rxjs/observable/merge"),require("rxjs/operators/tap"),require("rxjs/operators/takeUntil"),require("@angular/cdk/keycodes"),require("@angular/cdk/portal"),require("rxjs/operators/take"),require("rxjs/operators/filter")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/cdk/overlay","@angular/cdk/a11y","@angular/platform-browser","@angular/cdk/coercion","@angular/animations","rxjs/Subject","rxjs/observable/merge","rxjs/operators/tap","rxjs/operators/takeUntil","@angular/cdk/keycodes","@angular/cdk/portal","rxjs/operators/take","rxjs/operators/filter"],e):e(t.popover={},t.ng.core,t.ng.common,t.ng.cdk.overlay,t.ng.cdk.a11y,t.ng.platformBrowser,t.ng.cdk.coercion,t.ng.animations,t.Rx,t.Rx.Observable,t.Rx.operators,t.Rx.operators,t.ng.cdk.keycodes,t.ng.cdk.portal,t.Rx.operators,t.Rx.operators)}(this,function(t,e,o,r,n,i,s,a,p,c,l,u,h,f,v,d){"use strict";function y(){return Error("SatPopoverAnchor must be provided an SatPopover component instance.")}function g(){return Error("SatPopover is not anchored to any SatPopoverAnchor.")}function _(t){return Error(O("horizontalAlign/xAlign",t,F))}function b(t){return Error(O("verticalAlign/yAlign",t,z))}function m(t){return Error(O("scrollStrategy",t,N))}function O(t,e,o){return"Invalid "+t+": '"+e+"'. Valid options are "+o.map(function(t){return"'"+t+"'"}).join(", ")+"."}function P(t){return"start"===t?"after":"end"===t?"before":"center"}function k(t){return"top"===t?"below":"bottom"===t?"above":"center"}function E(t){switch(t){case"before":return{originX:"start",overlayX:"end"};case"start":return{originX:"start",overlayX:"start"};case"end":return{originX:"end",overlayX:"end"};case"after":return{originX:"end",overlayX:"start"};default:return{originX:"center",overlayX:"center"}}}function C(t){switch(t){case"above":return{originY:"top",overlayY:"bottom"};case"start":return{originY:"top",overlayY:"top"};case"end":return{originY:"bottom",overlayY:"bottom"};case"below":return{originY:"bottom",overlayY:"top"};default:return{originY:"center",overlayY:"center"}}}function w(t,e){for(var o=e.indexOf(t),r=[t],n=e.slice(0,o),i=e.slice(o+1,e.length).reverse();n.length&&i.length;)r.push(i.pop()),r.push(n.pop());for(;i.length;)r.push(i.pop());for(;n.length;)r.push(n.pop());return r}var S=new e.InjectionToken("cdk-dir-doc"),T=function(){function t(t){if(this.value="ltr",this.change=new e.EventEmitter,t){var o=t.body?t.body.dir:null,r=t.documentElement?t.documentElement.dir:null;this.value=o||r||"ltr"}}return t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[S]}]}]},t}(),A=function(){function t(){this._dir="ltr",this._isInitialized=!1,this.change=new e.EventEmitter}return Object.defineProperty(t.prototype,"dir",{get:function(){return this._dir},set:function(t){var e=this._dir;this._dir=t,e!==this._dir&&this._isInitialized&&this.change.emit(this._dir)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return this.dir},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){this._isInitialized=!0},t.decorators=[{type:e.Directive,args:[{selector:"[dir]",providers:[{provide:T,useExisting:t}],host:{"[dir]":"dir"},exportAs:"dir"}]}],t.ctorParameters=function(){return[]},t.propDecorators={change:[{type:e.Output,args:["dirChange"]}],dir:[{type:e.Input,args:["dir"]}]},t}(),x=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{exports:[A],declarations:[A],providers:[{provide:S,useExisting:o.DOCUMENT},T]}]}],t.ctorParameters=function(){return[]},t}(),I=a.trigger("transformPopover",[a.transition(":enter",[a.style({opacity:0,transform:"scale(0.3)"}),a.animate("{{openTransition}}",a.style({opacity:1,transform:"scale(1)"}))]),a.transition(":leave",[a.animate("{{closeTransition}}",a.style({opacity:0,transform:"scale(0.5)"}))])]),j={OPEN:0,CLOSE:1,TOGGLE:2,REPOSITION:3,UPDATE_CONFIG:4};j[j.OPEN]="OPEN",j[j.CLOSE]="CLOSE",j[j.TOGGLE]="TOGGLE",j[j.REPOSITION]="REPOSITION",j[j.UPDATE_CONFIG]="UPDATE_CONFIG";var R=function(){return function(t,e){this.action=t,this.value=e}}(),D=function(){function t(){this.store=new p.Subject}return t.prototype.dispatch=function(t){this.store.next(t)},t.prototype.events=function(){return this.store.asObservable()},t.prototype.dispose=function(){this.store.complete()},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}(),N=["noop","block","reposition","close"],F=["before","start","center","end","after"],z=["above","start","center","end","below"],X="200ms cubic-bezier(0.25, 0.8, 0.25, 1)",Y=function(){function t(t,o){this._focusTrapFactory=t,this._document=o,this._horizontalAlign="center",this._verticalAlign="center",this._autoFocus=!0,this._scrollStrategy="reposition",this._hasBackdrop=!1,this._interactiveClose=!0,this._openTransition=X,this._closeTransition=X,this.backdropClass="",this.opened=new e.EventEmitter,this.closed=new e.EventEmitter,this.afterOpen=new e.EventEmitter,this.afterClose=new e.EventEmitter,this.backdropClicked=new e.EventEmitter,this.overlayKeydown=new e.EventEmitter,this._classList={},this._open=!1}return Object.defineProperty(t.prototype,"horizontalAlign",{get:function(){return this._horizontalAlign},set:function(t){this._validateHorizontalAlign(t),this._horizontalAlign!==t&&(this._horizontalAlign=t,this._dispatchConfigNotification(new R(j.REPOSITION)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"xAlign",{get:function(){return this.horizontalAlign},set:function(t){this.horizontalAlign=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"verticalAlign",{get:function(){return this._verticalAlign},set:function(t){this._validateVerticalAlign(t),this._verticalAlign!==t&&(this._verticalAlign=t,this._dispatchConfigNotification(new R(j.REPOSITION)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"yAlign",{get:function(){return this.verticalAlign},set:function(t){this.verticalAlign=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"autoFocus",{get:function(){return this._autoFocus},set:function(t){this._autoFocus=s.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"scrollStrategy",{get:function(){return this._scrollStrategy},set:function(t){this._validateScrollStrategy(t),this._scrollStrategy!==t&&(this._scrollStrategy=t,this._dispatchConfigNotification(new R(j.UPDATE_CONFIG)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"hasBackdrop",{get:function(){return this._hasBackdrop},set:function(t){this._hasBackdrop=s.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"interactiveClose",{get:function(){return this._interactiveClose},set:function(t){this._interactiveClose=s.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"openTransition",{get:function(){return this._openTransition},set:function(t){t&&(this._openTransition=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeTransition",{get:function(){return this._closeTransition},set:function(t){t&&(this._closeTransition=t)},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this._setAlignmentClasses()},t.prototype.ngOnDestroy=function(){this._notifications&&this._notifications.dispose()},t.prototype.open=function(){var t=new R(j.OPEN);this._dispatchActionNotification(t)},t.prototype.close=function(t){var e=new R(j.CLOSE,t);this._dispatchActionNotification(e)},t.prototype.toggle=function(){var t=new R(j.TOGGLE);this._dispatchActionNotification(t)},t.prototype.isOpen=function(){return this._open},t.prototype._getAnimation=function(){return{value:"visible",params:{openTransition:this.openTransition,closeTransition:this.closeTransition}}},t.prototype._onAnimationDone=function(t){"visible"===t.toState?(this._trapFocus(),this.afterOpen.emit()):"void"===t.toState&&(this._restoreFocus(),this.afterClose.emit())},t.prototype._setAlignmentClasses=function(t,e){void 0===t&&(t=this.horizontalAlign),void 0===e&&(e=this.verticalAlign),this._classList["sat-popover-before"]="before"===t||"end"===t,this._classList["sat-popover-after"]="after"===t||"start"===t,this._classList["sat-popover-above"]="above"===e||"end"===e,this._classList["sat-popover-below"]="below"===e||"start"===e,this._classList["sat-popover-center"]="center"===t||"center"===e},t.prototype._trapFocus=function(){this._savePreviouslyFocusedElement(),this._focusTrapElement&&(!this._focusTrap&&this._focusTrapElement&&(this._focusTrap=this._focusTrapFactory.create(this._focusTrapElement.nativeElement)),this.autoFocus&&this._focusTrap.focusInitialElementWhenReady())},t.prototype._restoreFocus=function(){var t=this._previouslyFocusedElement;t&&"focus"in t&&this._previouslyFocusedElement.focus(),this._previouslyFocusedElement=null,this._focusTrap&&(this._focusTrap.destroy(),this._focusTrap=void 0)},t.prototype._savePreviouslyFocusedElement=function(){this._document&&(this._previouslyFocusedElement=this._document.activeElement)},t.prototype._dispatchConfigNotification=function(t){this._notifications&&this._notifications.dispatch(t)},t.prototype._dispatchActionNotification=function(t){if(!this._notifications)throw g();this._notifications.dispatch(t)},t.prototype._validateHorizontalAlign=function(t){if(-1===F.indexOf(t))throw _(t)},t.prototype._validateVerticalAlign=function(t){if(-1===z.indexOf(t))throw b(t)},t.prototype._validateScrollStrategy=function(t){if(-1===N.indexOf(t))throw m(t)},t.decorators=[{type:e.Component,args:[{selector:"sat-popover",encapsulation:e.ViewEncapsulation.None,animations:[I],styles:["/** * Applies styles for users in high contrast mode. Note that this only applies * to Microsoft browsers. Chrome can be included by checking for the `html[hc]` * attribute, however Chrome handles high contrast differently. */ /* Theme for the ripple elements.*/ /** The mixins below are shared between mat-menu and mat-select */ /** * This mixin adds the correct panel transform styles based * on the direction that the menu panel opens. */ /* stylelint-disable material/no-prefixes */ /* stylelint-enable */ /** * This mixin contains shared option styles between the select and * autocomplete components. */ .cdk-overlay-container, .cdk-global-overlay-wrapper { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 0.48; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.6); } .cdk-overlay-transparent-backdrop { background: none; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } .sat-popover-container.sat-popover-before.sat-popover-above { transform-origin: right bottom; } [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-above { transform-origin: left bottom; } .sat-popover-container.sat-popover-before.sat-popover-center { transform-origin: right center; } [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-center { transform-origin: left center; } .sat-popover-container.sat-popover-before.sat-popover-below { transform-origin: right top; } [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-below { transform-origin: left top; } .sat-popover-container.sat-popover-center.sat-popover-above { transform-origin: center bottom; } .sat-popover-container.sat-popover-center.sat-popover-below { transform-origin: center top; } .sat-popover-container.sat-popover-after.sat-popover-above { transform-origin: left bottom; } [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-above { transform-origin: right bottom; } .sat-popover-container.sat-popover-after.sat-popover-center { transform-origin: left center; } [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-center { transform-origin: right center; } .sat-popover-container.sat-popover-after.sat-popover-below { transform-origin: left top; } [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-below { transform-origin: right top; } "],template:'<ng-template> <div class="sat-popover-container" #focusTrapElement [ngClass]="_classList" [@transformPopover]="_getAnimation()" (@transformPopover.done)="_onAnimationDone($event)"> <ng-content></ng-content> </div> </ng-template> '}]}],t.ctorParameters=function(){return[{type:n.FocusTrapFactory},{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[i.DOCUMENT]}]}]},t.propDecorators={horizontalAlign:[{type:e.Input}],xAlign:[{type:e.Input}],verticalAlign:[{type:e.Input}],yAlign:[{type:e.Input}],autoFocus:[{type:e.Input}],scrollStrategy:[{type:e.Input}],hasBackdrop:[{type:e.Input}],interactiveClose:[{type:e.Input}],openTransition:[{type:e.Input}],closeTransition:[{type:e.Input}],backdropClass:[{type:e.Input}],opened:[{type:e.Output}],closed:[{type:e.Output}],afterOpen:[{type:e.Output}],afterClose:[{type:e.Output}],backdropClicked:[{type:e.Output}],overlayKeydown:[{type:e.Output}],_templateRef:[{type:e.ViewChild,args:[e.TemplateRef]}],_focusTrapElement:[{type:e.ViewChild,args:["focusTrapElement"]}]},t}(),L=function(){function t(t,e,o){this._overlay=t,this._ngZone=e,this._dir=o,this.popoverOpened=new p.Subject,this.popoverClosed=new p.Subject,this._popoverOpen=!1,this._onDestroy=new p.Subject}return t.prototype.ngOnDestroy=function(){this._destroyPopover(),this._notificationsSubscription&&this._notificationsSubscription.unsubscribe(),this._positionChangeSubscription&&this._positionChangeSubscription.unsubscribe(),this._onDestroy.next(),this._onDestroy.complete(),this.popoverOpened.complete(),this.popoverClosed.complete()},t.prototype.anchor=function(t,e,o){this._destroyPopover(),this._popover=t,this._viewContainerRef=e,this._anchor=o,this._popover._notifications=this._notifications=new D,this._subscribeToNotifications()},t.prototype.isPopoverOpen=function(){return this._popoverOpen},t.prototype.togglePopover=function(){return this._popoverOpen?this.closePopover():this.openPopover()},t.prototype.openPopover=function(){this._popoverOpen||(this.createOverlay(),this._subscribeToBackdrop(),this._subscribeToEscape(),this._subscribeToDetachments(),this._saveOpenedState())},t.prototype.closePopover=function(t){this._overlayRef&&(this._saveClosedState(t),this._overlayRef.detach())},t.prototype.createOverlay=function(){if(!this._overlayRef){this._portal=new f.TemplatePortal(this._popover._templateRef,this._viewContainerRef);var t={horizontalAlign:this._popover.horizontalAlign,verticalAlign:this._popover.verticalAlign,hasBackdrop:this._popover.hasBackdrop,backdropClass:this._popover.backdropClass,scrollStrategy:this._popover.scrollStrategy},e=this._getOverlayConfig(t,this._anchor);this._subscribeToPositionChanges(e.positionStrategy),this._overlayRef=this._overlay.create(e)}return this._overlayRef.attach(this._portal),this._overlayRef},t.prototype._destroyPopover=function(){this._overlayRef&&(this._overlayRef.dispose(),this._overlayRef=null)},t.prototype._destroyPopoverOnceClosed=function(){var t=this;this.isPopoverOpen()&&this._overlayRef?this._overlayRef.detachments().pipe(v.take(1),u.takeUntil(this._onDestroy)).subscribe(function(){return t._destroyPopover()}):this._destroyPopover()},t.prototype._subscribeToNotifications=function(){var t=this;this._notificationsSubscription&&this._notificationsSubscription.unsubscribe(),this._notificationsSubscription=this._notifications.events().subscribe(function(e){switch(e.action){case j.OPEN:t.openPopover();break;case j.CLOSE:t.closePopover(e.value);break;case j.TOGGLE:t.togglePopover();break;case j.REPOSITION:case j.UPDATE_CONFIG:t._destroyPopoverOnceClosed()}})},t.prototype._subscribeToBackdrop=function(){var t=this;this._overlayRef.backdropClick().pipe(l.tap(function(){return t._popover.backdropClicked.emit()}),d.filter(function(){return t._popover.interactiveClose}),u.takeUntil(this.popoverClosed),u.takeUntil(this._onDestroy)).subscribe(function(){return t.closePopover()})},t.prototype._subscribeToEscape=function(){var t=this;this._overlayRef.keydownEvents().pipe(l.tap(function(e){return t._popover.overlayKeydown.emit(e)}),d.filter(function(t){return t.keyCode===h.ESCAPE}),d.filter(function(){return t._popover.interactiveClose}),u.takeUntil(this.popoverClosed),u.takeUntil(this._onDestroy)).subscribe(function(){return t.closePopover()})},t.prototype._subscribeToDetachments=function(){var t=this;this._overlayRef.detachments().pipe(u.takeUntil(this._onDestroy)).subscribe(function(){return t._saveClosedState()})},t.prototype._saveOpenedState=function(){this._popoverOpen||(this._popover._open=this._popoverOpen=!0,this.popoverOpened.next(),this._popover.opened.emit())},t.prototype._saveClosedState=function(t){this._popoverOpen&&(this._popover._open=this._popoverOpen=!1,this.popoverClosed.next(t),this._popover.closed.emit(t))},t.prototype._getDirection=function(){return this._dir&&"rtl"===this._dir.value?"rtl":"ltr"},t.prototype._getOverlayConfig=function(t,e){return new r.OverlayConfig({positionStrategy:this._getPositionStrategy(t.horizontalAlign,t.verticalAlign,e),hasBackdrop:t.hasBackdrop,backdropClass:t.backdropClass||"cdk-overlay-transparent-backdrop",scrollStrategy:this._getScrollStrategyInstance(t.scrollStrategy),direction:this._getDirection()})},t.prototype._subscribeToPositionChanges=function(t){var e=this;this._positionChangeSubscription&&this._positionChangeSubscription.unsubscribe(),this._positionChangeSubscription=t.onPositionChange.pipe(u.takeUntil(this._onDestroy)).subscribe(function(t){e._ngZone.run(function(){e._popover._setAlignmentClasses(P(t.connectionPair.overlayX),k(t.connectionPair.overlayY))})})},t.prototype._getScrollStrategyInstance=function(t){switch(t){case"block":return this._overlay.scrollStrategies.block();case"reposition":return this._overlay.scrollStrategies.reposition();case"close":return this._overlay.scrollStrategies.close();case"noop":default:return this._overlay.scrollStrategies.noop()}},t.prototype._getPositionStrategy=function(t,e,o){var r=E(t),n=r.originX,i=r.overlayX,s=C(e),a=s.originY,p=s.overlayY,c=this._overlay.position().connectedTo(o,{originX:n,originY:a},{overlayX:i,overlayY:p}).withDirection(this._getDirection());return this._addFallbacks(c,t,e),c},t.prototype._addFallbacks=function(t,e,o){var r=this,n="before"!==e&&"after"!==e,i="above"!==o&&"below"!==o,s=n?["before","start","center","end","after"]:["before","after"],a=i?["above","start","center","end","below"]:["above","below"],p=[];w(e,s).forEach(function(t){w(o,a).forEach(function(e){p.push({h:t,v:e})})}),p.slice(1,p.length).forEach(function(e){var o=e.h,n=e.v;return r._applyFallback(t,o,n)})},t.prototype._applyFallback=function(t,e,o){var r=E(e),n=r.originX,i=r.overlayX,s=C(o),a=s.originY,p=s.overlayY;t.withFallbackPosition({originX:n,originY:a},{overlayX:i,overlayY:p})},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:r.Overlay},{type:e.NgZone},{type:T,decorators:[{type:e.Optional}]}]},t}(),U=function(){function t(t,o,r){this._elementRef=t,this._viewContainerRef=o,this._anchoring=r,this.popoverOpened=new e.EventEmitter,this.popoverClosed=new e.EventEmitter,this._onDestroy=new p.Subject}return Object.defineProperty(t.prototype,"attachedPopover",{get:function(){return this._attachedPopover},set:function(t){this._validateAttachedPopover(t),this._attachedPopover=t,this._anchoring.anchor(this.attachedPopover,this._viewContainerRef,this._elementRef)},enumerable:!0,configurable:!0}),t.prototype.isPopoverOpen=function(){return this._anchoring.isPopoverOpen()},t.prototype.ngOnInit=function(){var t=this,e=this._anchoring.popoverOpened.pipe(l.tap(function(){return t.popoverOpened.emit()})),o=this._anchoring.popoverClosed.pipe(l.tap(function(e){return t.popoverClosed.emit(e)}));c.merge(e,o).pipe(u.takeUntil(this._onDestroy)).subscribe()},t.prototype.ngOnDestroy=function(){this._onDestroy.next(),this._onDestroy.complete()},t.prototype.togglePopover=function(){this._anchoring.togglePopover()},t.prototype.openPopover=function(){this._anchoring.openPopover()},t.prototype.closePopover=function(t){this._anchoring.closePopover(t)},t.prototype._validateAttachedPopover=function(t){if(!(t&&t instanceof Y))throw y()},t.decorators=[{type:e.Directive,args:[{selector:"[satPopoverAnchorFor]",exportAs:"satPopoverAnchor",providers:[L]}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ViewContainerRef},{type:L}]},t.propDecorators={attachedPopover:[{type:e.Input,args:["satPopoverAnchorFor"]}],popoverOpened:[{type:e.Output}],popoverClosed:[{type:e.Output}]},t}(),q=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[o.CommonModule,r.OverlayModule,n.A11yModule,x],declarations:[Y,U],exports:[Y,U,x]}]}],t.ctorParameters=function(){return[]},t}();t.SatPopoverModule=q,t.SatPopoverAnchor=U,t.SatPopover=Y,t.ɵb=L,t.ɵa=I,Object.defineProperty(t,"__esModule",{value:!0})});
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/overlay"),require("@angular/cdk/a11y"),require("@angular/platform-browser"),require("@angular/cdk/coercion"),require("@angular/animations"),require("rxjs/Subject"),require("rxjs/observable/merge"),require("rxjs/operators/tap"),require("rxjs/operators/takeUntil"),require("@angular/cdk/keycodes"),require("@angular/cdk/portal"),require("rxjs/operators/take"),require("rxjs/operators/filter")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/cdk/overlay","@angular/cdk/a11y","@angular/platform-browser","@angular/cdk/coercion","@angular/animations","rxjs/Subject","rxjs/observable/merge","rxjs/operators/tap","rxjs/operators/takeUntil","@angular/cdk/keycodes","@angular/cdk/portal","rxjs/operators/take","rxjs/operators/filter"],e):e(t.popover={},t.ng.core,t.ng.common,t.ng.cdk.overlay,t.ng.cdk.a11y,t.ng.platformBrowser,t.ng.cdk.coercion,t.ng.animations,t.Rx,t.Rx.Observable,t.Rx.operators,t.Rx.operators,t.ng.cdk.keycodes,t.ng.cdk.portal,t.Rx.operators,t.Rx.operators)}(this,function(t,e,o,r,n,i,s,a,p,c,l,u,h,f,v,d){"use strict";function y(){return Error("SatPopoverAnchor must be provided an SatPopover component instance.")}function g(){return Error("SatPopover is not anchored to any SatPopoverAnchor.")}function _(t){return Error(O("horizontalAlign/xAlign",t,F))}function b(t){return Error(O("verticalAlign/yAlign",t,z))}function m(t){return Error(O("scrollStrategy",t,D))}function O(t,e,o){return"Invalid "+t+": '"+e+"'. Valid options are "+o.map(function(t){return"'"+t+"'"}).join(", ")+"."}function P(t){return"start"===t?"after":"end"===t?"before":"center"}function k(t){return"top"===t?"below":"bottom"===t?"above":"center"}function A(t){switch(t){case"before":return{originX:"start",overlayX:"end"};case"start":return{originX:"start",overlayX:"start"};case"end":return{originX:"end",overlayX:"end"};case"after":return{originX:"end",overlayX:"start"};default:return{originX:"center",overlayX:"center"}}}function E(t){switch(t){case"above":return{originY:"top",overlayY:"bottom"};case"start":return{originY:"top",overlayY:"top"};case"end":return{originY:"bottom",overlayY:"bottom"};case"below":return{originY:"bottom",overlayY:"top"};default:return{originY:"center",overlayY:"center"}}}function C(t,e){for(var o=e.indexOf(t),r=[t],n=e.slice(0,o),i=e.slice(o+1,e.length).reverse();n.length&&i.length;)r.push(i.pop()),r.push(n.pop());for(;i.length;)r.push(i.pop());for(;n.length;)r.push(n.pop());return r}var w=new e.InjectionToken("cdk-dir-doc"),S=function(){function t(t){if(this.value="ltr",this.change=new e.EventEmitter,t){var o=t.body?t.body.dir:null,r=t.documentElement?t.documentElement.dir:null;this.value=o||r||"ltr"}}return t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[w]}]}]},t}(),T=function(){function t(){this._dir="ltr",this._isInitialized=!1,this.change=new e.EventEmitter}return Object.defineProperty(t.prototype,"dir",{get:function(){return this._dir},set:function(t){var e=this._dir;this._dir=t,e!==this._dir&&this._isInitialized&&this.change.emit(this._dir)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return this.dir},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){this._isInitialized=!0},t.decorators=[{type:e.Directive,args:[{selector:"[dir]",providers:[{provide:S,useExisting:t}],host:{"[dir]":"dir"},exportAs:"dir"}]}],t.ctorParameters=function(){return[]},t.propDecorators={change:[{type:e.Output,args:["dirChange"]}],dir:[{type:e.Input,args:["dir"]}]},t}(),x=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{exports:[T],declarations:[T],providers:[{provide:w,useExisting:o.DOCUMENT},S]}]}],t.ctorParameters=function(){return[]},t}(),I=a.trigger("transformPopover",[a.transition(":enter",[a.style({opacity:0,transform:"scale(0.3)"}),a.animate("{{openTransition}}",a.style({opacity:1,transform:"scale(1)"}))]),a.transition(":leave",[a.animate("{{closeTransition}}",a.style({opacity:0,transform:"scale(0.5)"}))])]),j={OPEN:0,CLOSE:1,TOGGLE:2,REPOSITION:3,UPDATE_CONFIG:4};j[j.OPEN]="OPEN",j[j.CLOSE]="CLOSE",j[j.TOGGLE]="TOGGLE",j[j.REPOSITION]="REPOSITION",j[j.UPDATE_CONFIG]="UPDATE_CONFIG";var R=function(){return function(t,e){this.action=t,this.value=e}}(),N=function(){function t(){this.store=new p.Subject}return t.prototype.dispatch=function(t){this.store.next(t)},t.prototype.events=function(){return this.store.asObservable()},t.prototype.dispose=function(){this.store.complete()},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}(),D=["noop","block","reposition","close"],F=["before","start","center","end","after"],z=["above","start","center","end","below"],X="200ms cubic-bezier(0.25, 0.8, 0.25, 1)",Y=function(){function t(t,o){this._focusTrapFactory=t,this._document=o,this._horizontalAlign="center",this._verticalAlign="center",this._forceAlignment=!1,this._lockAlignment=!1,this._autoFocus=!0,this._scrollStrategy="reposition",this._hasBackdrop=!1,this._interactiveClose=!0,this._openTransition=X,this._closeTransition=X,this.backdropClass="",this.opened=new e.EventEmitter,this.closed=new e.EventEmitter,this.afterOpen=new e.EventEmitter,this.afterClose=new e.EventEmitter,this.backdropClicked=new e.EventEmitter,this.overlayKeydown=new e.EventEmitter,this._classList={},this._open=!1}return Object.defineProperty(t.prototype,"horizontalAlign",{get:function(){return this._horizontalAlign},set:function(t){this._validateHorizontalAlign(t),this._horizontalAlign!==t&&(this._horizontalAlign=t,this._dispatchConfigNotification(new R(j.REPOSITION)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"xAlign",{get:function(){return this.horizontalAlign},set:function(t){this.horizontalAlign=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"verticalAlign",{get:function(){return this._verticalAlign},set:function(t){this._validateVerticalAlign(t),this._verticalAlign!==t&&(this._verticalAlign=t,this._dispatchConfigNotification(new R(j.REPOSITION)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"yAlign",{get:function(){return this.verticalAlign},set:function(t){this.verticalAlign=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"forceAlignment",{get:function(){return this._forceAlignment},set:function(t){var e=s.coerceBooleanProperty(t);this._forceAlignment!==e&&(this._forceAlignment=e,this._dispatchConfigNotification(new R(j.REPOSITION)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"lockAlignment",{get:function(){return this._lockAlignment},set:function(t){var e=s.coerceBooleanProperty(t);this._lockAlignment!==e&&(this._lockAlignment=s.coerceBooleanProperty(t),this._dispatchConfigNotification(new R(j.REPOSITION)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"autoFocus",{get:function(){return this._autoFocus},set:function(t){this._autoFocus=s.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"scrollStrategy",{get:function(){return this._scrollStrategy},set:function(t){this._validateScrollStrategy(t),this._scrollStrategy!==t&&(this._scrollStrategy=t,this._dispatchConfigNotification(new R(j.UPDATE_CONFIG)))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"hasBackdrop",{get:function(){return this._hasBackdrop},set:function(t){this._hasBackdrop=s.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"interactiveClose",{get:function(){return this._interactiveClose},set:function(t){this._interactiveClose=s.coerceBooleanProperty(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"openTransition",{get:function(){return this._openTransition},set:function(t){t&&(this._openTransition=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeTransition",{get:function(){return this._closeTransition},set:function(t){t&&(this._closeTransition=t)},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this._setAlignmentClasses()},t.prototype.ngOnDestroy=function(){this._notifications&&this._notifications.dispose()},t.prototype.open=function(){var t=new R(j.OPEN);this._dispatchActionNotification(t)},t.prototype.close=function(t){var e=new R(j.CLOSE,t);this._dispatchActionNotification(e)},t.prototype.toggle=function(){var t=new R(j.TOGGLE);this._dispatchActionNotification(t)},t.prototype.isOpen=function(){return this._open},t.prototype._getAnimation=function(){return{value:"visible",params:{openTransition:this.openTransition,closeTransition:this.closeTransition}}},t.prototype._onAnimationDone=function(t){"visible"===t.toState?(this._trapFocus(),this.afterOpen.emit()):"void"===t.toState&&(this._restoreFocus(),this.afterClose.emit())},t.prototype._setAlignmentClasses=function(t,e){void 0===t&&(t=this.horizontalAlign),void 0===e&&(e=this.verticalAlign),this._classList["sat-popover-before"]="before"===t||"end"===t,this._classList["sat-popover-after"]="after"===t||"start"===t,this._classList["sat-popover-above"]="above"===e||"end"===e,this._classList["sat-popover-below"]="below"===e||"start"===e,this._classList["sat-popover-center"]="center"===t||"center"===e},t.prototype._trapFocus=function(){this._savePreviouslyFocusedElement(),this._focusTrapElement&&(!this._focusTrap&&this._focusTrapElement&&(this._focusTrap=this._focusTrapFactory.create(this._focusTrapElement.nativeElement)),this.autoFocus&&this._focusTrap.focusInitialElementWhenReady())},t.prototype._restoreFocus=function(){var t=this._previouslyFocusedElement;t&&"focus"in t&&this._previouslyFocusedElement.focus(),this._previouslyFocusedElement=null,this._focusTrap&&(this._focusTrap.destroy(),this._focusTrap=void 0)},t.prototype._savePreviouslyFocusedElement=function(){this._document&&(this._previouslyFocusedElement=this._document.activeElement)},t.prototype._dispatchConfigNotification=function(t){this._notifications&&this._notifications.dispatch(t)},t.prototype._dispatchActionNotification=function(t){if(!this._notifications)throw g();this._notifications.dispatch(t)},t.prototype._validateHorizontalAlign=function(t){if(-1===F.indexOf(t))throw _(t)},t.prototype._validateVerticalAlign=function(t){if(-1===z.indexOf(t))throw b(t)},t.prototype._validateScrollStrategy=function(t){if(-1===D.indexOf(t))throw m(t)},t.decorators=[{type:e.Component,args:[{selector:"sat-popover",encapsulation:e.ViewEncapsulation.None,animations:[I],styles:["/** * Applies styles for users in high contrast mode. Note that this only applies * to Microsoft browsers. Chrome can be included by checking for the `html[hc]` * attribute, however Chrome handles high contrast differently. */ /* Theme for the ripple elements.*/ /** The mixins below are shared between mat-menu and mat-select */ /** * This mixin adds the correct panel transform styles based * on the direction that the menu panel opens. */ /* stylelint-disable material/no-prefixes */ /* stylelint-enable */ /** * This mixin contains shared option styles between the select and * autocomplete components. */ .cdk-overlay-container, .cdk-global-overlay-wrapper { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 0.48; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.6); } .cdk-overlay-transparent-backdrop { background: none; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } .sat-popover-container.sat-popover-before.sat-popover-above { transform-origin: right bottom; } [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-above { transform-origin: left bottom; } .sat-popover-container.sat-popover-before.sat-popover-center { transform-origin: right center; } [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-center { transform-origin: left center; } .sat-popover-container.sat-popover-before.sat-popover-below { transform-origin: right top; } [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-below { transform-origin: left top; } .sat-popover-container.sat-popover-center.sat-popover-above { transform-origin: center bottom; } .sat-popover-container.sat-popover-center.sat-popover-below { transform-origin: center top; } .sat-popover-container.sat-popover-after.sat-popover-above { transform-origin: left bottom; } [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-above { transform-origin: right bottom; } .sat-popover-container.sat-popover-after.sat-popover-center { transform-origin: left center; } [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-center { transform-origin: right center; } .sat-popover-container.sat-popover-after.sat-popover-below { transform-origin: left top; } [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-below { transform-origin: right top; } "],template:'<ng-template> <div class="sat-popover-container" #focusTrapElement [ngClass]="_classList" [@transformPopover]="_getAnimation()" (@transformPopover.done)="_onAnimationDone($event)"> <ng-content></ng-content> </div> </ng-template> '}]}],t.ctorParameters=function(){return[{type:n.FocusTrapFactory},{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[i.DOCUMENT]}]}]},t.propDecorators={horizontalAlign:[{type:e.Input}],xAlign:[{type:e.Input}],verticalAlign:[{type:e.Input}],yAlign:[{type:e.Input}],forceAlignment:[{type:e.Input}],lockAlignment:[{type:e.Input}],autoFocus:[{type:e.Input}],scrollStrategy:[{type:e.Input}],hasBackdrop:[{type:e.Input}],interactiveClose:[{type:e.Input}],openTransition:[{type:e.Input}],closeTransition:[{type:e.Input}],backdropClass:[{type:e.Input}],opened:[{type:e.Output}],closed:[{type:e.Output}],afterOpen:[{type:e.Output}],afterClose:[{type:e.Output}],backdropClicked:[{type:e.Output}],overlayKeydown:[{type:e.Output}],_templateRef:[{type:e.ViewChild,args:[e.TemplateRef]}],_focusTrapElement:[{type:e.ViewChild,args:["focusTrapElement"]}]},t}(),B=function(){function t(t,e,o){this._overlay=t,this._ngZone=e,this._dir=o,this.popoverOpened=new p.Subject,this.popoverClosed=new p.Subject,this._popoverOpen=!1,this._onDestroy=new p.Subject}return t.prototype.ngOnDestroy=function(){this._destroyPopover(),this._notificationsSubscription&&this._notificationsSubscription.unsubscribe(),this._positionChangeSubscription&&this._positionChangeSubscription.unsubscribe(),this._onDestroy.next(),this._onDestroy.complete(),this.popoverOpened.complete(),this.popoverClosed.complete()},t.prototype.anchor=function(t,e,o){this._destroyPopover(),this._popover=t,this._viewContainerRef=e,this._anchor=o,this._popover._notifications=this._notifications=new N,this._subscribeToNotifications()},t.prototype.isPopoverOpen=function(){return this._popoverOpen},t.prototype.togglePopover=function(){return this._popoverOpen?this.closePopover():this.openPopover()},t.prototype.openPopover=function(){this._popoverOpen||(this.createOverlay(),this._subscribeToBackdrop(),this._subscribeToEscape(),this._subscribeToDetachments(),this._saveOpenedState())},t.prototype.closePopover=function(t){this._overlayRef&&(this._saveClosedState(t),this._overlayRef.detach())},t.prototype.createOverlay=function(){if(!this._overlayRef){this._portal=new f.TemplatePortal(this._popover._templateRef,this._viewContainerRef);var t={horizontalAlign:this._popover.horizontalAlign,verticalAlign:this._popover.verticalAlign,hasBackdrop:this._popover.hasBackdrop,backdropClass:this._popover.backdropClass,scrollStrategy:this._popover.scrollStrategy,forceAlignment:this._popover.forceAlignment,lockAlignment:this._popover.lockAlignment},e=this._getOverlayConfig(t,this._anchor);this._subscribeToPositionChanges(e.positionStrategy),this._overlayRef=this._overlay.create(e)}return this._overlayRef.attach(this._portal),this._overlayRef},t.prototype._destroyPopover=function(){this._overlayRef&&(this._overlayRef.dispose(),this._overlayRef=null)},t.prototype._destroyPopoverOnceClosed=function(){var t=this;this.isPopoverOpen()&&this._overlayRef?this._overlayRef.detachments().pipe(v.take(1),u.takeUntil(this._onDestroy)).subscribe(function(){return t._destroyPopover()}):this._destroyPopover()},t.prototype._subscribeToNotifications=function(){var t=this;this._notificationsSubscription&&this._notificationsSubscription.unsubscribe(),this._notificationsSubscription=this._notifications.events().subscribe(function(e){switch(e.action){case j.OPEN:t.openPopover();break;case j.CLOSE:t.closePopover(e.value);break;case j.TOGGLE:t.togglePopover();break;case j.REPOSITION:case j.UPDATE_CONFIG:t._destroyPopoverOnceClosed()}})},t.prototype._subscribeToBackdrop=function(){var t=this;this._overlayRef.backdropClick().pipe(l.tap(function(){return t._popover.backdropClicked.emit()}),d.filter(function(){return t._popover.interactiveClose}),u.takeUntil(this.popoverClosed),u.takeUntil(this._onDestroy)).subscribe(function(){return t.closePopover()})},t.prototype._subscribeToEscape=function(){var t=this;this._overlayRef.keydownEvents().pipe(l.tap(function(e){return t._popover.overlayKeydown.emit(e)}),d.filter(function(t){return t.keyCode===h.ESCAPE}),d.filter(function(){return t._popover.interactiveClose}),u.takeUntil(this.popoverClosed),u.takeUntil(this._onDestroy)).subscribe(function(){return t.closePopover()})},t.prototype._subscribeToDetachments=function(){var t=this;this._overlayRef.detachments().pipe(u.takeUntil(this._onDestroy)).subscribe(function(){return t._saveClosedState()})},t.prototype._saveOpenedState=function(){this._popoverOpen||(this._popover._open=this._popoverOpen=!0,this.popoverOpened.next(),this._popover.opened.emit())},t.prototype._saveClosedState=function(t){this._popoverOpen&&(this._popover._open=this._popoverOpen=!1,this.popoverClosed.next(t),this._popover.closed.emit(t))},t.prototype._getDirection=function(){return this._dir&&"rtl"===this._dir.value?"rtl":"ltr"},t.prototype._getOverlayConfig=function(t,e){return new r.OverlayConfig({positionStrategy:this._getPositionStrategy(t.horizontalAlign,t.verticalAlign,t.forceAlignment,t.lockAlignment,e),hasBackdrop:t.hasBackdrop,backdropClass:t.backdropClass||"cdk-overlay-transparent-backdrop",scrollStrategy:this._getScrollStrategyInstance(t.scrollStrategy),direction:this._getDirection()})},t.prototype._subscribeToPositionChanges=function(t){var e=this;this._positionChangeSubscription&&this._positionChangeSubscription.unsubscribe(),this._positionChangeSubscription=t.onPositionChange.pipe(u.takeUntil(this._onDestroy)).subscribe(function(t){e._ngZone.run(function(){e._popover._setAlignmentClasses(P(t.connectionPair.overlayX),k(t.connectionPair.overlayY))})})},t.prototype._getScrollStrategyInstance=function(t){switch(t){case"block":return this._overlay.scrollStrategies.block();case"reposition":return this._overlay.scrollStrategies.reposition();case"close":return this._overlay.scrollStrategies.close();case"noop":default:return this._overlay.scrollStrategies.noop()}},t.prototype._getPositionStrategy=function(t,e,o,r,n){var i=A(t),s=i.originX,a=i.overlayX,p=E(e),c=p.originY,l=p.overlayY,u=this._overlay.position().connectedTo(n,{originX:s,originY:c},{overlayX:a,overlayY:l}).withDirection(this._getDirection()).withLockedPosition(r);return o||this._addFallbacks(u,t,e),u},t.prototype._addFallbacks=function(t,e,o){var r=this,n="before"!==e&&"after"!==e,i="above"!==o&&"below"!==o,s=n?["before","start","center","end","after"]:["before","after"],a=i?["above","start","center","end","below"]:["above","below"],p=[];C(e,s).forEach(function(t){C(o,a).forEach(function(e){p.push({h:t,v:e})})}),p.slice(1,p.length).forEach(function(e){var o=e.h,n=e.v;return r._applyFallback(t,o,n)})},t.prototype._applyFallback=function(t,e,o){var r=A(e),n=r.originX,i=r.overlayX,s=E(o),a=s.originY,p=s.overlayY;t.withFallbackPosition({originX:n,originY:a},{overlayX:i,overlayY:p})},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:r.Overlay},{type:e.NgZone},{type:S,decorators:[{type:e.Optional}]}]},t}(),L=function(){function t(t,o,r){this._elementRef=t,this._viewContainerRef=o,this._anchoring=r,this.popoverOpened=new e.EventEmitter,this.popoverClosed=new e.EventEmitter,this._onDestroy=new p.Subject}return Object.defineProperty(t.prototype,"attachedPopover",{get:function(){return this._attachedPopover},set:function(t){this._validateAttachedPopover(t),this._attachedPopover=t,this._anchoring.anchor(this.attachedPopover,this._viewContainerRef,this._elementRef)},enumerable:!0,configurable:!0}),t.prototype.isPopoverOpen=function(){return this._anchoring.isPopoverOpen()},t.prototype.ngOnInit=function(){var t=this,e=this._anchoring.popoverOpened.pipe(l.tap(function(){return t.popoverOpened.emit()})),o=this._anchoring.popoverClosed.pipe(l.tap(function(e){return t.popoverClosed.emit(e)}));c.merge(e,o).pipe(u.takeUntil(this._onDestroy)).subscribe()},t.prototype.ngOnDestroy=function(){this._onDestroy.next(),this._onDestroy.complete()},t.prototype.togglePopover=function(){this._anchoring.togglePopover()},t.prototype.openPopover=function(){this._anchoring.openPopover()},t.prototype.closePopover=function(t){this._anchoring.closePopover(t)},t.prototype._validateAttachedPopover=function(t){if(!(t&&t instanceof Y))throw y()},t.decorators=[{type:e.Directive,args:[{selector:"[satPopoverAnchorFor]",exportAs:"satPopoverAnchor",providers:[B]}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ViewContainerRef},{type:B}]},t.propDecorators={attachedPopover:[{type:e.Input,args:["satPopoverAnchorFor"]}],popoverOpened:[{type:e.Output}],popoverClosed:[{type:e.Output}]},t}(),U=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[o.CommonModule,r.OverlayModule,n.A11yModule,x],declarations:[Y,L],exports:[Y,L,x]}]}],t.ctorParameters=function(){return[]},t}();t.SatPopoverModule=U,t.SatPopoverAnchor=L,t.SatPopover=Y,t.ɵb=B,t.ɵa=I,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=sat-popover.umd.min.js.map

2

package.json
{
"name": "@ncstate/sat-popover",
"version": "1.0.0-beta.5",
"version": "1.0.0",
"description": "Popover component for Angular",

@@ -5,0 +5,0 @@ "author": "Will Howell",

2

popover.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"SatPopoverModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule"},{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"A11yModule"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"BidiModule"}],"declarations":[{"__symbolic":"reference","name":"SatPopover"},{"__symbolic":"reference","name":"SatPopoverAnchor"}],"exports":[{"__symbolic":"reference","name":"SatPopover"},{"__symbolic":"reference","name":"SatPopoverAnchor"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"BidiModule"}]}]}],"members":{}},"SatPopoverAnchor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[satPopoverAnchorFor]","exportAs":"satPopoverAnchor","providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"attachedPopover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["satPopoverAnchorFor"]}]}],"popoverOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"popoverClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"isPopoverOpen":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"togglePopover":[{"__symbolic":"method"}],"openPopover":[{"__symbolic":"method"}],"closePopover":[{"__symbolic":"method"}],"_validateAttachedPopover":[{"__symbolic":"method"}]}},"SatPopover":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sat-popover","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"reference","name":"ɵa"}],"template":"<ng-template>\n <div class=\"sat-popover-container\"\n #focusTrapElement\n [ngClass]=\"_classList\"\n [@transformPopover]=\"_getAnimation()\"\n (@transformPopover.done)=\"_onAnimationDone($event)\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n","styles":["/**\n * Applies styles for users in high contrast mode. Note that this only applies\n * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n * attribute, however Chrome handles high contrast differently.\n */\n/* Theme for the ripple elements.*/\n/** The mixins below are shared between mat-menu and mat-select */\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/**\n * This mixin contains shared option styles between the select and\n * autocomplete components.\n */\n.cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%; }\n\n.cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n\n.cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: 1000; }\n\n.cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n z-index: 1000; }\n\n.cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0; }\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.48; }\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.6); }\n\n.cdk-overlay-transparent-backdrop {\n background: none; }\n\n.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\n\n.sat-popover-container.sat-popover-before.sat-popover-above {\n transform-origin: right bottom; }\n [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-above {\n transform-origin: left bottom; }\n\n.sat-popover-container.sat-popover-before.sat-popover-center {\n transform-origin: right center; }\n [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-center {\n transform-origin: left center; }\n\n.sat-popover-container.sat-popover-before.sat-popover-below {\n transform-origin: right top; }\n [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-below {\n transform-origin: left top; }\n\n.sat-popover-container.sat-popover-center.sat-popover-above {\n transform-origin: center bottom; }\n\n.sat-popover-container.sat-popover-center.sat-popover-below {\n transform-origin: center top; }\n\n.sat-popover-container.sat-popover-after.sat-popover-above {\n transform-origin: left bottom; }\n [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-above {\n transform-origin: right bottom; }\n\n.sat-popover-container.sat-popover-after.sat-popover-center {\n transform-origin: left center; }\n [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-center {\n transform-origin: right center; }\n\n.sat-popover-container.sat-popover-after.sat-popover-below {\n transform-origin: left top; }\n [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-below {\n transform-origin: right top; }\n"]}]}],"members":{"horizontalAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"verticalAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollStrategy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hasBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"interactiveClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"openTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"afterOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"afterClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"backdropClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"overlayKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"_focusTrapElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["focusTrapElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusTrapFactory"},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"isOpen":[{"__symbolic":"method"}],"_getAnimation":[{"__symbolic":"method"}],"_onAnimationDone":[{"__symbolic":"method"}],"_setAlignmentClasses":[{"__symbolic":"method"}],"_trapFocus":[{"__symbolic":"method"}],"_restoreFocus":[{"__symbolic":"method"}],"_savePreviouslyFocusedElement":[{"__symbolic":"method"}],"_dispatchConfigNotification":[{"__symbolic":"method"}],"_dispatchActionNotification":[{"__symbolic":"method"}],"_validateHorizontalAlign":[{"__symbolic":"method"}],"_validateVerticalAlign":[{"__symbolic":"method"}],"_validateScrollStrategy":[{"__symbolic":"method"}]}},"SatPopoverHorizontalAlign":{"__symbolic":"interface"},"SatPopoverVerticalAlign":{"__symbolic":"interface"},"SatPopoverScrollStrategy":{"__symbolic":"interface"},"ɵa":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["transformPopover",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0.3)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["{{openTransition}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["{{closeTransition}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0.5)"}]}]}]]}]]},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"anchor":[{"__symbolic":"method"}],"isPopoverOpen":[{"__symbolic":"method"}],"togglePopover":[{"__symbolic":"method"}],"openPopover":[{"__symbolic":"method"}],"closePopover":[{"__symbolic":"method"}],"createOverlay":[{"__symbolic":"method"}],"_destroyPopover":[{"__symbolic":"method"}],"_destroyPopoverOnceClosed":[{"__symbolic":"method"}],"_subscribeToNotifications":[{"__symbolic":"method"}],"_subscribeToBackdrop":[{"__symbolic":"method"}],"_subscribeToEscape":[{"__symbolic":"method"}],"_subscribeToDetachments":[{"__symbolic":"method"}],"_saveOpenedState":[{"__symbolic":"method"}],"_saveClosedState":[{"__symbolic":"method"}],"_getDirection":[{"__symbolic":"method"}],"_getOverlayConfig":[{"__symbolic":"method"}],"_subscribeToPositionChanges":[{"__symbolic":"method"}],"_getScrollStrategyInstance":[{"__symbolic":"method"}],"_getPositionStrategy":[{"__symbolic":"method"}],"_addFallbacks":[{"__symbolic":"method"}],"_applyFallback":[{"__symbolic":"method"}]}}},"origins":{"SatPopoverModule":"./popover/popover.module","SatPopoverAnchor":"./popover/popover-anchor.directive","SatPopover":"./popover/popover.component","SatPopoverHorizontalAlign":"./popover/popover.component","SatPopoverVerticalAlign":"./popover/popover.component","SatPopoverScrollStrategy":"./popover/popover.component","ɵa":"./popover/popover.animations","ɵb":"./popover/popover-anchoring.service"},"importAs":"@ncstate/sat-popover"}
{"__symbolic":"module","version":4,"metadata":{"SatPopoverModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule"},{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"A11yModule"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"BidiModule"}],"declarations":[{"__symbolic":"reference","name":"SatPopover"},{"__symbolic":"reference","name":"SatPopoverAnchor"}],"exports":[{"__symbolic":"reference","name":"SatPopover"},{"__symbolic":"reference","name":"SatPopoverAnchor"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"BidiModule"}]}]}],"members":{}},"SatPopoverAnchor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[satPopoverAnchorFor]","exportAs":"satPopoverAnchor","providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"attachedPopover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["satPopoverAnchorFor"]}]}],"popoverOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"popoverClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"isPopoverOpen":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"togglePopover":[{"__symbolic":"method"}],"openPopover":[{"__symbolic":"method"}],"closePopover":[{"__symbolic":"method"}],"_validateAttachedPopover":[{"__symbolic":"method"}]}},"SatPopover":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sat-popover","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"reference","name":"ɵa"}],"template":"<ng-template>\n <div class=\"sat-popover-container\"\n #focusTrapElement\n [ngClass]=\"_classList\"\n [@transformPopover]=\"_getAnimation()\"\n (@transformPopover.done)=\"_onAnimationDone($event)\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n","styles":["/**\n * Applies styles for users in high contrast mode. Note that this only applies\n * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n * attribute, however Chrome handles high contrast differently.\n */\n/* Theme for the ripple elements.*/\n/** The mixins below are shared between mat-menu and mat-select */\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/**\n * This mixin contains shared option styles between the select and\n * autocomplete components.\n */\n.cdk-overlay-container, .cdk-global-overlay-wrapper {\n pointer-events: none;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%; }\n\n.cdk-overlay-container {\n position: fixed;\n z-index: 1000; }\n\n.cdk-global-overlay-wrapper {\n display: flex;\n position: absolute;\n z-index: 1000; }\n\n.cdk-overlay-pane {\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n z-index: 1000; }\n\n.cdk-overlay-backdrop {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0; }\n .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n opacity: 0.48; }\n\n.cdk-overlay-dark-backdrop {\n background: rgba(0, 0, 0, 0.6); }\n\n.cdk-overlay-transparent-backdrop {\n background: none; }\n\n.cdk-global-scrollblock {\n position: fixed;\n width: 100%;\n overflow-y: scroll; }\n\n.sat-popover-container.sat-popover-before.sat-popover-above {\n transform-origin: right bottom; }\n [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-above {\n transform-origin: left bottom; }\n\n.sat-popover-container.sat-popover-before.sat-popover-center {\n transform-origin: right center; }\n [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-center {\n transform-origin: left center; }\n\n.sat-popover-container.sat-popover-before.sat-popover-below {\n transform-origin: right top; }\n [dir='rtl'] .sat-popover-container.sat-popover-before.sat-popover-below {\n transform-origin: left top; }\n\n.sat-popover-container.sat-popover-center.sat-popover-above {\n transform-origin: center bottom; }\n\n.sat-popover-container.sat-popover-center.sat-popover-below {\n transform-origin: center top; }\n\n.sat-popover-container.sat-popover-after.sat-popover-above {\n transform-origin: left bottom; }\n [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-above {\n transform-origin: right bottom; }\n\n.sat-popover-container.sat-popover-after.sat-popover-center {\n transform-origin: left center; }\n [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-center {\n transform-origin: right center; }\n\n.sat-popover-container.sat-popover-after.sat-popover-below {\n transform-origin: left top; }\n [dir='rtl'] .sat-popover-container.sat-popover-after.sat-popover-below {\n transform-origin: right top; }\n"]}]}],"members":{"horizontalAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"verticalAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"forceAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lockAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollStrategy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hasBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"interactiveClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"openTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"afterOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"afterClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"backdropClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"overlayKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"_focusTrapElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["focusTrapElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusTrapFactory"},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"isOpen":[{"__symbolic":"method"}],"_getAnimation":[{"__symbolic":"method"}],"_onAnimationDone":[{"__symbolic":"method"}],"_setAlignmentClasses":[{"__symbolic":"method"}],"_trapFocus":[{"__symbolic":"method"}],"_restoreFocus":[{"__symbolic":"method"}],"_savePreviouslyFocusedElement":[{"__symbolic":"method"}],"_dispatchConfigNotification":[{"__symbolic":"method"}],"_dispatchActionNotification":[{"__symbolic":"method"}],"_validateHorizontalAlign":[{"__symbolic":"method"}],"_validateVerticalAlign":[{"__symbolic":"method"}],"_validateScrollStrategy":[{"__symbolic":"method"}]}},"SatPopoverHorizontalAlign":{"__symbolic":"interface"},"SatPopoverVerticalAlign":{"__symbolic":"interface"},"SatPopoverScrollStrategy":{"__symbolic":"interface"},"ɵa":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["transformPopover",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0.3)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["{{openTransition}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["{{closeTransition}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"scale(0.5)"}]}]}]]}]]},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"anchor":[{"__symbolic":"method"}],"isPopoverOpen":[{"__symbolic":"method"}],"togglePopover":[{"__symbolic":"method"}],"openPopover":[{"__symbolic":"method"}],"closePopover":[{"__symbolic":"method"}],"createOverlay":[{"__symbolic":"method"}],"_destroyPopover":[{"__symbolic":"method"}],"_destroyPopoverOnceClosed":[{"__symbolic":"method"}],"_subscribeToNotifications":[{"__symbolic":"method"}],"_subscribeToBackdrop":[{"__symbolic":"method"}],"_subscribeToEscape":[{"__symbolic":"method"}],"_subscribeToDetachments":[{"__symbolic":"method"}],"_saveOpenedState":[{"__symbolic":"method"}],"_saveClosedState":[{"__symbolic":"method"}],"_getDirection":[{"__symbolic":"method"}],"_getOverlayConfig":[{"__symbolic":"method"}],"_subscribeToPositionChanges":[{"__symbolic":"method"}],"_getScrollStrategyInstance":[{"__symbolic":"method"}],"_getPositionStrategy":[{"__symbolic":"method"}],"_addFallbacks":[{"__symbolic":"method"}],"_applyFallback":[{"__symbolic":"method"}]}}},"origins":{"SatPopoverModule":"./popover/popover.module","SatPopoverAnchor":"./popover/popover-anchor.directive","SatPopover":"./popover/popover.component","SatPopoverHorizontalAlign":"./popover/popover.component","SatPopoverVerticalAlign":"./popover/popover.component","SatPopoverScrollStrategy":"./popover/popover.component","ɵa":"./popover/popover.animations","ɵb":"./popover/popover-anchoring.service"},"importAs":"@ncstate/sat-popover"}

2

popover/popover-anchoring.service.d.ts

@@ -82,3 +82,3 @@ import { ElementRef, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';

/** Create and return a position strategy based on config provided to the component instance. */
private _getPositionStrategy(horizontalTarget, verticalTarget, anchor);
private _getPositionStrategy(horizontalTarget, verticalTarget, forceAlignment, lockAlignment, anchor);
/** Add fallbacks to a given strategy based around target alignments. */

@@ -85,0 +85,0 @@ private _addFallbacks(strategy, hTarget, vTarget);

9

popover/popover.component.d.ts

@@ -24,2 +24,11 @@ import { EventEmitter, TemplateRef, OnDestroy, OnInit } from '@angular/core';

yAlign: SatPopoverVerticalAlign;
/** Whether the popover always opens with the specified alignment. */
forceAlignment: boolean;
private _forceAlignment;
/**
* Whether the popover's alignment is locked after opening. This prevents the popover
* from changing its alignement when scrolling or changing the size of the viewport.
*/
lockAlignment: boolean;
private _lockAlignment;
/** Whether the first focusable element should be focused on open. */

@@ -26,0 +35,0 @@ autoFocus: boolean;

21

README.md

@@ -104,2 +104,23 @@ # Popover Component for Angular

By default, if the popover cannot fully fit within the viewport, it will use a fallback
alignment. You can use `forceAlignment` to ensure that the popover always displays
with the alignment you've specified.
```html
<sat-popover #contactPopover verticalAlign="below" forceAlignment>
<!-- This will always open below the anchor, even if it falls outside the viewport. -->
</sat-popover>
```
Also by default, as the user scrolls or changes the viewport size, the popover will attempt
to stay within the viewport by using a fallback position (provided `forceAlignment` is not
set). You can use `lockAlignment` to ensure the popover does not change its alignment once
opened.
```html
<sat-popover #contactPopover lockAlignment>
<!-- This will open as normal, but not change alignment while open. -->
</sat-popover>
```
### Opening and closing

@@ -106,0 +127,0 @@ 

@ncstate/sat-popover.es5.js.map

Sorry, the diff of this file is not supported yet

@ncstate/sat-popover.js.map

Sorry, the diff of this file is not supported yet

bundles/sat-popover.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/sat-popover.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc