@skyux/popovers 4.5.2 → 4.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/bundles/skyux-popovers.umd.js +34 -13
- package/bundles/skyux-popovers.umd.js.map +1 -1
- package/bundles/skyux-popovers.umd.min.js +2 -2
- package/bundles/skyux-popovers.umd.min.js.map +1 -1
- package/esm2015/modules/dropdown/dropdown-menu.component.js +2 -2
- package/esm2015/modules/dropdown/dropdown.component.js +4 -3
- package/esm2015/modules/popover/popover-content.component.js +13 -3
- package/esm2015/modules/popover/popover.component.js +16 -8
- package/esm2015/modules/popover/popover.directive.js +4 -2
- package/esm5/modules/dropdown/dropdown-menu.component.js +2 -2
- package/esm5/modules/dropdown/dropdown.component.js +4 -3
- package/esm5/modules/popover/popover-content.component.js +13 -3
- package/esm5/modules/popover/popover.component.js +16 -8
- package/esm5/modules/popover/popover.directive.js +4 -2
- package/fesm2015/skyux-popovers.js +34 -13
- package/fesm2015/skyux-popovers.js.map +1 -1
- package/fesm5/skyux-popovers.js +34 -13
- package/fesm5/skyux-popovers.js.map +1 -1
- package/modules/dropdown/dropdown.component.d.ts +1 -0
- package/modules/popover/popover-content.component.d.ts +2 -0
- package/modules/popover/popover.component.d.ts +5 -0
- package/package.json +1 -1
- package/skyux-popovers.metadata.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
# 4.7.1 (2021-12-20)
|
|
2
|
+
|
|
3
|
+
- Added bug fixes and features from the `master` branch. [#171](https://github.com/blackbaud/skyux-popovers/pull/171)
|
|
4
|
+
|
|
5
|
+
# 4.7.0 (2021-08-25)
|
|
6
|
+
|
|
7
|
+
- Added reference checking on close to support AG Grid popovers. [#161](https://github.com/blackbaud/skyux-popovers/pull/161)
|
|
8
|
+
|
|
9
|
+
# 4.6.0 (2021-08-06)
|
|
10
|
+
|
|
11
|
+
- Added the error type for popovers. [#158](https://github.com/blackbaud/skyux-popovers/pull/158)
|
|
12
|
+
|
|
13
|
+
# 4.5.3 (2021-07-09)
|
|
14
|
+
|
|
15
|
+
- Fixed the dropdown menu component to close after users select items that are nested in multiple layers, such as `*ngFor` and `*ngIf` directives. [#156](https://github.com/blackbaud/skyux-popovers/pull/156)
|
|
16
|
+
|
|
1
17
|
# 4.5.2 (2021-05-10)
|
|
2
18
|
|
|
3
19
|
- Fixed the dropdown component to focus on the first menu item after users select the dropdown button. [#148](https://github.com/blackbaud/skyux-popovers/pull/148)
|
|
@@ -555,6 +555,7 @@
|
|
|
555
555
|
SkyDropdownComponent.prototype.ngOnDestroy = function () {
|
|
556
556
|
this.destroyAffixer();
|
|
557
557
|
this.destroyOverlay();
|
|
558
|
+
clearTimeout(this._positionTimeout);
|
|
558
559
|
this.ngUnsubscribe.next();
|
|
559
560
|
this.ngUnsubscribe.complete();
|
|
560
561
|
this.ngUnsubscribe = undefined;
|
|
@@ -718,7 +719,7 @@
|
|
|
718
719
|
this.isVisible = false;
|
|
719
720
|
this.createOverlay();
|
|
720
721
|
this.changeDetector.markForCheck();
|
|
721
|
-
setTimeout(function () {
|
|
722
|
+
this._positionTimeout = setTimeout(function () {
|
|
722
723
|
_this.affixer.affixTo(_this.triggerButton.nativeElement, {
|
|
723
724
|
autoFitContext: core$1.SkyAffixAutoFitContext.Viewport,
|
|
724
725
|
enableAutoFit: true,
|
|
@@ -785,7 +786,7 @@
|
|
|
785
786
|
selector: 'sky-dropdown',
|
|
786
787
|
template: "<div\n class=\"sky-dropdown\"\n>\n <button\n class=\"sky-btn sky-dropdown-button\"\n type=\"button\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? menuId : null\"\n [attr.aria-haspopup]=\"menuAriaRole\"\n [attr.aria-label]=\"label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\"\n [attr.title]=\"title\"\n [disabled]=\"disabled\"\n [ngClass]=\"[\n 'sky-dropdown-button-type-' + buttonType,\n 'sky-btn-' + buttonStyle\n ]\"\n #triggerButton\n >\n <ng-container [ngSwitch]=\"buttonType\">\n <ng-template ngSwitchCase=\"context-menu\">\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"ellipsis-h\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"ellipsis\"\n iconType=\"skyux\"\n ></sky-icon>\n </ng-template>\n\n <ng-template ngSwitchDefault>\n <div *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n class=\"sky-dropdown-button-container\"\n >\n <div\n class=\"sky-dropdown-button-content-container\"\n >\n <ng-content\n select=\"sky-dropdown-button\"\n >\n </ng-content>\n </div>\n <div\n class=\"sky-dropdown-button-icon-container\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n class=\"sky-dropdown-caret\"\n icon=\"caret-down\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n class=\"sky-dropdown-caret\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </div>\n </div>\n <div *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\">\n <sky-icon\n [icon]=\"buttonType\"\n size=\"lg\"\n ></sky-icon>\n </div>\n </ng-template>\n </ng-container>\n </button>\n</div>\n\n<ng-template\n #menuContainerTemplateRef\n>\n <div\n class=\"sky-dropdown-menu-container\"\n [class.hidden]=\"!isVisible\"\n #menuContainerElementRef\n >\n <ng-content\n select=\"sky-dropdown-menu\"\n ></ng-content>\n </div>\n</ng-template>\n",
|
|
787
788
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
788
|
-
styles: [".sky-dropdown-button-type-tab{border:none;border-radius:4px 4px 0 0;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#0974a1;color:#fff;max-width:100%;text-align:left}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:0;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:#686c73;cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){text-decoration:none;background-color:#0974a1;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}
|
|
789
|
+
styles: [".sky-dropdown-button-type-tab{border:none;border-radius:4px 4px 0 0;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#0974a1;color:#fff;max-width:100%;text-align:left}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:0;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:#686c73;cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){text-decoration:none;background-color:#0974a1;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow 150ms;background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:1px solid #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:0}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:3px solid #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:3px solid #1870b8;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow 150ms;background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:1px solid #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:0}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:3px solid #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:3px solid #1870b8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}"]
|
|
789
790
|
}),
|
|
790
791
|
__param(3, core.Optional())
|
|
791
792
|
], SkyDropdownComponent);
|
|
@@ -1101,7 +1102,7 @@
|
|
|
1101
1102
|
core.Output()
|
|
1102
1103
|
], SkyDropdownMenuComponent.prototype, "menuChanges", void 0);
|
|
1103
1104
|
__decorate([
|
|
1104
|
-
core.ContentChildren(SkyDropdownItemComponent)
|
|
1105
|
+
core.ContentChildren(SkyDropdownItemComponent, { descendants: true })
|
|
1105
1106
|
], SkyDropdownMenuComponent.prototype, "menuItems", void 0);
|
|
1106
1107
|
SkyDropdownMenuComponent = __decorate([
|
|
1107
1108
|
core.Component({
|
|
@@ -1298,6 +1299,7 @@
|
|
|
1298
1299
|
this.dismissOnBlur = true;
|
|
1299
1300
|
this.enableAnimations = true;
|
|
1300
1301
|
this.isOpen = false;
|
|
1302
|
+
this.popoverType = 'info';
|
|
1301
1303
|
this.ngUnsubscribe = new rxjs.Subject();
|
|
1302
1304
|
this._closed = new rxjs.Subject();
|
|
1303
1305
|
this._isMouseEnter = new rxjs.Subject();
|
|
@@ -1335,6 +1337,7 @@
|
|
|
1335
1337
|
var _this = this;
|
|
1336
1338
|
this.contentTarget.createEmbeddedView(this.context.contentTemplateRef);
|
|
1337
1339
|
this.addEventListeners();
|
|
1340
|
+
/*istanbul ignore else*/
|
|
1338
1341
|
if (this.themeSvc) {
|
|
1339
1342
|
this.themeSvc.settingsChange
|
|
1340
1343
|
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
@@ -1382,6 +1385,9 @@
|
|
|
1382
1385
|
this.horizontalAlignment = config.horizontalAlignment;
|
|
1383
1386
|
this.placement = config.placement;
|
|
1384
1387
|
this.popoverTitle = config.popoverTitle;
|
|
1388
|
+
if (config.popoverType) {
|
|
1389
|
+
this.popoverType = config.popoverType;
|
|
1390
|
+
}
|
|
1385
1391
|
this.changeDetector.markForCheck();
|
|
1386
1392
|
// Indicates if the popover should be displayed statically.
|
|
1387
1393
|
// Please note: This feature is internal-only and used by the visual tests to capture multiple
|
|
@@ -1394,6 +1400,11 @@
|
|
|
1394
1400
|
}
|
|
1395
1401
|
// Let the styles render before gauging the affix dimensions.
|
|
1396
1402
|
setTimeout(function () {
|
|
1403
|
+
var _a;
|
|
1404
|
+
/*istanbul ignore next*/
|
|
1405
|
+
if (!((_a = _this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) || !_this.ngUnsubscribe || _this.ngUnsubscribe.isStopped) {
|
|
1406
|
+
return;
|
|
1407
|
+
}
|
|
1397
1408
|
if (!_this.affixer) {
|
|
1398
1409
|
_this.setupAffixer();
|
|
1399
1410
|
}
|
|
@@ -1536,9 +1547,9 @@
|
|
|
1536
1547
|
SkyPopoverContentComponent = __decorate([
|
|
1537
1548
|
core.Component({
|
|
1538
1549
|
selector: 'sky-popover-content',
|
|
1539
|
-
template: "<div\n class=\"sky-popover-container sky-popover-max-height\"\n [@.disabled]=\"!enableAnimations\"\n [@skyPopoverAnimation]=\"animationState\"\n [class.sky-popover-hidden]=\"!placement\"\n [ngClass]=\"[\n 'sky-popover-alignment-' + horizontalAlignment,\n 'sky-popover-placement-' + placement\n ]\"\n (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n #popoverRef\n>\n <div\n class=\"sky-popover\"\n tabindex=\"-1\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n >\n <header *ngIf=\"popoverTitle\"\n class=\"sky-popover-header\"\n [skyThemeClass]=\"{\n 'sky-padding-even-default': 'default',\n 'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n }\"\n >\n <h1 *ngIf=\"popoverTitle\"\n class=\"sky-popover-title\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-emphasized': 'modern'\n }\"\n >\n {{ popoverTitle }}\n </h1>\n </header>\n <div\n class=\"sky-popover-body\"\n [skyThemeClass]=\"{\n 'sky-padding-even-default': 'default',\n 'sky-padding-even-lg': 'modern'\n }\"\n >\n <ng-container #contentTarget></ng-container>\n </div>\n <span\n aria-hidden=\"true\"\n class=\"sky-popover-arrow\"\n [style.left.px]=\"arrowLeft\"\n [style.top.px]=\"arrowTop\"\n #arrowRef\n ></span>\n </div>\n</div>\n",
|
|
1550
|
+
template: "<div\n class=\"sky-popover-container sky-popover-max-height\"\n [@.disabled]=\"!enableAnimations\"\n [@skyPopoverAnimation]=\"animationState\"\n [class.sky-popover-hidden]=\"!placement\"\n [ngClass]=\"[\n 'sky-popover-alignment-' + horizontalAlignment,\n 'sky-popover-placement-' + placement,\n 'sky-popover-' + popoverType\n ]\"\n (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n #popoverRef\n>\n <div\n class=\"sky-popover\"\n tabindex=\"-1\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n >\n <header *ngIf=\"popoverTitle\"\n class=\"sky-popover-header\"\n [skyThemeClass]=\"{\n 'sky-padding-even-default': 'default',\n 'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n }\"\n >\n <h1 *ngIf=\"popoverTitle\"\n class=\"sky-popover-title\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-emphasized': 'modern'\n }\"\n >\n {{ popoverTitle }}\n </h1>\n </header>\n <div\n class=\"sky-popover-body\"\n [skyThemeClass]=\"{\n 'sky-padding-even-default': 'default',\n 'sky-padding-even-lg': 'modern'\n }\"\n >\n <ng-container #contentTarget></ng-container>\n </div>\n <span\n aria-hidden=\"true\"\n class=\"sky-popover-arrow\"\n [style.left.px]=\"arrowLeft\"\n [style.top.px]=\"arrowTop\"\n #arrowRef\n ></span>\n </div>\n</div>\n",
|
|
1540
1551
|
animations: [skyPopoverAnimation],
|
|
1541
|
-
styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:0}@media (max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}
|
|
1552
|
+
styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:0}@media (max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:10px solid #00b4f1;border-right:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-color:transparent #ef4044 #ef4044 transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:10px solid #00b4f1;border-left:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 transparent transparent #ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:10px solid #00b4f1;border-left:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-color:transparent transparent #ef4044 #ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:10px solid #00b4f1;border-right:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 #ef4044 transparent transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:10px solid #00b4f1;border-right:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-color:transparent #ef4044 #ef4044 transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:10px solid #00b4f1;border-left:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 transparent transparent #ef4044}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:10px solid #00b4f1;border-left:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-color:transparent transparent #ef4044 #ef4044}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:10px solid #00b4f1;border-right:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 #ef4044 transparent transparent}"]
|
|
1542
1553
|
}),
|
|
1543
1554
|
__param(6, core.Optional())
|
|
1544
1555
|
], SkyPopoverContentComponent);
|
|
@@ -1648,7 +1659,8 @@
|
|
|
1648
1659
|
horizontalAlignment: this.alignment,
|
|
1649
1660
|
isStatic: false,
|
|
1650
1661
|
placement: this.placement,
|
|
1651
|
-
popoverTitle: this.popoverTitle
|
|
1662
|
+
popoverTitle: this.popoverTitle,
|
|
1663
|
+
popoverType: this.popoverType
|
|
1652
1664
|
});
|
|
1653
1665
|
};
|
|
1654
1666
|
/**
|
|
@@ -1656,14 +1668,16 @@
|
|
|
1656
1668
|
* @internal
|
|
1657
1669
|
*/
|
|
1658
1670
|
SkyPopoverComponent.prototype.close = function () {
|
|
1659
|
-
|
|
1671
|
+
var _a;
|
|
1672
|
+
(_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
1660
1673
|
};
|
|
1661
1674
|
/**
|
|
1662
1675
|
* Brings focus to the popover element if its open.
|
|
1663
1676
|
* @internal
|
|
1664
1677
|
*/
|
|
1665
1678
|
SkyPopoverComponent.prototype.applyFocus = function () {
|
|
1666
|
-
|
|
1679
|
+
var _a;
|
|
1680
|
+
(_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.applyFocus();
|
|
1667
1681
|
};
|
|
1668
1682
|
/**
|
|
1669
1683
|
* Adds a flag to the popover to close when the mouse leaves the popover's bounds.
|
|
@@ -1699,10 +1713,12 @@
|
|
|
1699
1713
|
contentRef.closed
|
|
1700
1714
|
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1701
1715
|
.subscribe(function () {
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1716
|
+
if (_this.isActive) {
|
|
1717
|
+
_this.overlayService.close(_this.overlay);
|
|
1718
|
+
_this.overlay = undefined;
|
|
1719
|
+
_this.isActive = false;
|
|
1720
|
+
_this.popoverClosed.emit(_this);
|
|
1721
|
+
}
|
|
1706
1722
|
});
|
|
1707
1723
|
contentRef.isMouseEnter
|
|
1708
1724
|
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
@@ -1731,6 +1747,9 @@
|
|
|
1731
1747
|
__decorate([
|
|
1732
1748
|
core.Input()
|
|
1733
1749
|
], SkyPopoverComponent.prototype, "popoverTitle", void 0);
|
|
1750
|
+
__decorate([
|
|
1751
|
+
core.Input()
|
|
1752
|
+
], SkyPopoverComponent.prototype, "popoverType", void 0);
|
|
1734
1753
|
__decorate([
|
|
1735
1754
|
core.Output()
|
|
1736
1755
|
], SkyPopoverComponent.prototype, "popoverClosed", void 0);
|
|
@@ -1912,7 +1931,9 @@
|
|
|
1912
1931
|
this.positionPopover();
|
|
1913
1932
|
break;
|
|
1914
1933
|
case exports.SkyPopoverMessageType.Close:
|
|
1915
|
-
this.
|
|
1934
|
+
if (this.skyPopover.isActive) {
|
|
1935
|
+
this.closePopover();
|
|
1936
|
+
}
|
|
1916
1937
|
break;
|
|
1917
1938
|
case exports.SkyPopoverMessageType.Reposition:
|
|
1918
1939
|
// Only reposition the popover if it is already open.
|