@skyux/popovers 5.0.0 → 5.0.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/bundles/skyux-popovers-testing.umd.js +20 -32
- package/bundles/skyux-popovers-testing.umd.js.map +1 -1
- package/bundles/skyux-popovers.umd.js +137 -152
- package/bundles/skyux-popovers.umd.js.map +1 -1
- package/documentation.json +114 -109
- package/esm2015/modules/dropdown/dropdown-button.component.js +5 -5
- package/esm2015/modules/dropdown/dropdown-extensions.js +1 -1
- package/esm2015/modules/dropdown/dropdown-item.component.js +8 -8
- package/esm2015/modules/dropdown/dropdown-menu.component.js +14 -14
- package/esm2015/modules/dropdown/dropdown.component.js +14 -16
- package/esm2015/modules/dropdown/dropdown.module.js +10 -10
- package/esm2015/modules/dropdown/types/dropdown-horizontal-alignment.js +1 -1
- package/esm2015/modules/dropdown/types/dropdown-menu-change.js +1 -1
- package/esm2015/modules/dropdown/types/dropdown-message-type.js +1 -1
- package/esm2015/modules/dropdown/types/dropdown-message.js +1 -1
- package/esm2015/modules/popover/popover-adapter.service.js +6 -6
- package/esm2015/modules/popover/popover-animation.js +8 -14
- package/esm2015/modules/popover/popover-content.component.js +25 -30
- package/esm2015/modules/popover/popover-context.js +1 -1
- package/esm2015/modules/popover/popover-extensions.js +1 -1
- package/esm2015/modules/popover/popover.component.js +18 -22
- package/esm2015/modules/popover/popover.directive.js +6 -6
- package/esm2015/modules/popover/popover.module.js +10 -12
- package/esm2015/modules/popover/types/popover-adapter-elements.js +1 -1
- package/esm2015/modules/popover/types/popover-message-type.js +1 -1
- package/esm2015/modules/popover/types/popover-message.js +1 -1
- package/esm2015/modules/shared/sky-popovers-resources.module.js +18 -12
- package/esm2015/testing/dropdown/dropdown-fixture.js +4 -4
- package/esm2015/testing/dropdown/dropdown-testing.module.js +6 -8
- package/esm2015/testing/popover/popover-fixture.js +4 -8
- package/esm2015/testing/popover/popover-testing.module.js +7 -11
- package/fesm2015/skyux-popovers-testing.js +17 -27
- package/fesm2015/skyux-popovers-testing.js.map +1 -1
- package/fesm2015/skyux-popovers.js +120 -133
- package/fesm2015/skyux-popovers.js.map +1 -1
- package/package.json +8 -8
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('@angular/animations')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@skyux/popovers', ['exports', '@angular/common', '@angular/core', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/i18n', 'rxjs', 'rxjs/operators', '@angular/animations'], factory) :
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.popovers = {}), global.ng.common, global.ng.core, global.i1, global.i3, global.i2, global.i5, global.rxjs, global.rxjs.operators, global.ng.animations));
|
|
5
|
-
}(this, (function (exports, i4, i0, i1, i3, i2, i5, rxjs, operators, animations) { 'use strict';
|
|
5
|
+
})(this, (function (exports, i4, i0, i1, i3, i2, i5, rxjs, operators, animations) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -13,14 +13,12 @@
|
|
|
13
13
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
14
|
Object.defineProperty(n, k, d.get ? d : {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return e[k];
|
|
18
|
-
}
|
|
16
|
+
get: function () { return e[k]; }
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
|
-
n[
|
|
21
|
+
n["default"] = e;
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
@@ -75,7 +73,9 @@
|
|
|
75
73
|
* To update this file, simply rerun the command.
|
|
76
74
|
*/
|
|
77
75
|
var RESOURCES = {
|
|
78
|
-
'EN-US': {
|
|
76
|
+
'EN-US': {
|
|
77
|
+
skyux_dropdown_context_menu_default_label: { message: 'Context menu' },
|
|
78
|
+
},
|
|
79
79
|
};
|
|
80
80
|
var SkyPopoversResourcesProvider = /** @class */ (function () {
|
|
81
81
|
function SkyPopoversResourcesProvider() {
|
|
@@ -93,22 +93,26 @@
|
|
|
93
93
|
}
|
|
94
94
|
return SkyPopoversResourcesModule;
|
|
95
95
|
}());
|
|
96
|
-
SkyPopoversResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
97
|
-
SkyPopoversResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
98
|
-
SkyPopoversResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
96
|
+
SkyPopoversResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoversResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
97
|
+
SkyPopoversResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoversResourcesModule, exports: [i5.SkyI18nModule] });
|
|
98
|
+
SkyPopoversResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoversResourcesModule, providers: [
|
|
99
|
+
{
|
|
99
100
|
provide: i5.SKY_LIB_RESOURCES_PROVIDERS,
|
|
100
101
|
useClass: SkyPopoversResourcesProvider,
|
|
101
|
-
multi: true
|
|
102
|
-
}
|
|
103
|
-
|
|
102
|
+
multi: true,
|
|
103
|
+
},
|
|
104
|
+
], imports: [i5.SkyI18nModule] });
|
|
105
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoversResourcesModule, decorators: [{
|
|
104
106
|
type: i0.NgModule,
|
|
105
107
|
args: [{
|
|
106
108
|
exports: [i5.SkyI18nModule],
|
|
107
|
-
providers: [
|
|
109
|
+
providers: [
|
|
110
|
+
{
|
|
108
111
|
provide: i5.SKY_LIB_RESOURCES_PROVIDERS,
|
|
109
112
|
useClass: SkyPopoversResourcesProvider,
|
|
110
|
-
multi: true
|
|
111
|
-
}
|
|
113
|
+
multi: true,
|
|
114
|
+
},
|
|
115
|
+
],
|
|
112
116
|
}]
|
|
113
117
|
}] });
|
|
114
118
|
|
|
@@ -117,13 +121,13 @@
|
|
|
117
121
|
}
|
|
118
122
|
return SkyDropdownButtonComponent;
|
|
119
123
|
}());
|
|
120
|
-
SkyDropdownButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
121
|
-
SkyDropdownButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
122
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
124
|
+
SkyDropdownButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
125
|
+
SkyDropdownButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
|
|
126
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownButtonComponent, decorators: [{
|
|
123
127
|
type: i0.Component,
|
|
124
128
|
args: [{
|
|
125
129
|
selector: 'sky-dropdown-button',
|
|
126
|
-
|
|
130
|
+
template: "<ng-content></ng-content>\n",
|
|
127
131
|
}]
|
|
128
132
|
}] });
|
|
129
133
|
|
|
@@ -179,8 +183,8 @@
|
|
|
179
183
|
};
|
|
180
184
|
SkyDropdownItemComponent.prototype.isFocusable = function () {
|
|
181
185
|
/*tslint:disable no-null-keyword */
|
|
182
|
-
var isFocusable =
|
|
183
|
-
this.buttonElement.getAttribute('disabled') === null
|
|
186
|
+
var isFocusable = this.buttonElement &&
|
|
187
|
+
this.buttonElement.getAttribute('disabled') === null;
|
|
184
188
|
/*tslint:enable */
|
|
185
189
|
return isFocusable;
|
|
186
190
|
};
|
|
@@ -190,16 +194,16 @@
|
|
|
190
194
|
};
|
|
191
195
|
return SkyDropdownItemComponent;
|
|
192
196
|
}());
|
|
193
|
-
SkyDropdownItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
194
|
-
SkyDropdownItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
195
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
197
|
+
SkyDropdownItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
198
|
+
SkyDropdownItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDropdownItemComponent, selector: "sky-dropdown-item", inputs: { ariaRole: "ariaRole" }, ngImport: i0__namespace, template: "<div\n class=\"sky-dropdown-item\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-dropdown-item-active': isActive,\n 'sky-dropdown-item-disabled': isDisabled\n }\"\n>\n <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left}.sky-dropdown-item.sky-dropdown-item-active,.sky-dropdown-item:hover{background-color:#eeeeef}.sky-dropdown-item.sky-dropdown-item-disabled{cursor:default}.sky-dropdown-item.sky-dropdown-item-disabled:hover{background-color:transparent}.sky-dropdown-item>a,.sky-dropdown-item>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none}.sky-dropdown-item>a[disabled],.sky-dropdown-item>button[disabled]{color:#686c73}.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>button[disabled]:hover{cursor:default}.sky-theme-modern .sky-dropdown-item{margin:0}.sky-theme-modern .sky-dropdown-item.sky-dropdown-item-active,.sky-theme-modern .sky-dropdown-item:hover{background-color:transparent}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{padding:8px 20px;transition:box-shadow .15s}.sky-theme-modern .sky-dropdown-item>a:hover,.sky-theme-modern .sky-dropdown-item>button:hover{outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-dropdown-item>a:focus,.sky-theme-modern .sky-dropdown-item>a:active,.sky-theme-modern .sky-dropdown-item>button:focus,.sky-theme-modern .sky-dropdown-item>button:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-dropdown-item>a:focus:not(:active),.sky-theme-modern .sky-dropdown-item>button:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>a,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>button{color:#fbfcfe}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
199
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownItemComponent, decorators: [{
|
|
196
200
|
type: i0.Component,
|
|
197
201
|
args: [{
|
|
198
202
|
selector: 'sky-dropdown-item',
|
|
199
|
-
|
|
200
|
-
|
|
203
|
+
template: "<div\n class=\"sky-dropdown-item\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-dropdown-item-active': isActive,\n 'sky-dropdown-item-disabled': isDisabled\n }\"\n>\n <ng-content> </ng-content>\n</div>\n",
|
|
204
|
+
styles: [".sky-dropdown-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left}.sky-dropdown-item.sky-dropdown-item-active,.sky-dropdown-item:hover{background-color:#eeeeef}.sky-dropdown-item.sky-dropdown-item-disabled{cursor:default}.sky-dropdown-item.sky-dropdown-item-disabled:hover{background-color:transparent}.sky-dropdown-item>a,.sky-dropdown-item>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none}.sky-dropdown-item>a[disabled],
|
|
201
205
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
202
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
206
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
203
207
|
}]
|
|
204
208
|
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ariaRole: [{
|
|
205
209
|
type: i0.Input
|
|
@@ -470,12 +474,10 @@
|
|
|
470
474
|
}
|
|
471
475
|
var overlay = this.overlayService.create({
|
|
472
476
|
enableScroll: true,
|
|
473
|
-
enablePointerEvents: true
|
|
477
|
+
enablePointerEvents: true,
|
|
474
478
|
});
|
|
475
479
|
overlay.attachTemplate(this.menuContainerTemplateRef);
|
|
476
|
-
overlay.backdropClick
|
|
477
|
-
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
478
|
-
.subscribe(function () {
|
|
480
|
+
overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
479
481
|
if (_this.dismissOnBlur) {
|
|
480
482
|
_this.sendMessage(exports.SkyDropdownMessageType.Close);
|
|
481
483
|
}
|
|
@@ -502,7 +504,7 @@
|
|
|
502
504
|
affixer.placementChange
|
|
503
505
|
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
504
506
|
.subscribe(function (change) {
|
|
505
|
-
_this.isVisible =
|
|
507
|
+
_this.isVisible = change.placement !== null;
|
|
506
508
|
_this.changeDetector.markForCheck();
|
|
507
509
|
});
|
|
508
510
|
this.affixer = affixer;
|
|
@@ -546,7 +548,7 @@
|
|
|
546
548
|
enableAutoFit: true,
|
|
547
549
|
horizontalAlignment: parseAffixHorizontalAlignment$1(_this.horizontalAlignment),
|
|
548
550
|
isSticky: true,
|
|
549
|
-
placement: 'below'
|
|
551
|
+
placement: 'below',
|
|
550
552
|
});
|
|
551
553
|
_this.isVisible = true;
|
|
552
554
|
_this.changeDetector.markForCheck();
|
|
@@ -554,15 +556,15 @@
|
|
|
554
556
|
};
|
|
555
557
|
return SkyDropdownComponent;
|
|
556
558
|
}());
|
|
557
|
-
SkyDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
558
|
-
SkyDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
559
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
559
|
+
SkyDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyAffixService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
560
|
+
SkyDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDropdownComponent, selector: "sky-dropdown", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", disabled: "disabled", dismissOnBlur: "dismissOnBlur", label: "label", horizontalAlignment: "horizontalAlignment", messageStream: "messageStream", title: "title", trigger: "trigger" }, viewQueries: [{ propertyName: "menuContainerElementRef", first: true, predicate: ["menuContainerElementRef"], descendants: true, read: i0.ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-dropdown\">\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]=\"\n label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n \"\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'\" icon=\"ellipsis-h\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"ellipsis\"\n iconType=\"skyux\"\n ></sky-icon>\n </ng-template>\n\n <ng-template ngSwitchDefault>\n <div\n *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n class=\"sky-dropdown-button-container\"\n >\n <div class=\"sky-dropdown-button-content-container\">\n <ng-content select=\"sky-dropdown-button\"> </ng-content>\n </div>\n <div class=\"sky-dropdown-button-icon-container\">\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-dropdown-caret\"\n icon=\"caret-down\"\n >\n </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-dropdown-caret\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </div>\n </div>\n <div\n *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n >\n <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n </div>\n </ng-template>\n </ng-container>\n </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n <div\n class=\"sky-dropdown-menu-container\"\n [class.hidden]=\"!isVisible\"\n #menuContainerElementRef\n >\n <ng-content select=\"sky-dropdown-menu\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;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:hover:not(.sky-btn-tab-disabled){background-color:#eeeeef;color:#212327;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:none;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){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 .15s;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:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #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 .15s;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:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #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{color:#fff}.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}\n"], components: [{ type: i3__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
561
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownComponent, decorators: [{
|
|
560
562
|
type: i0.Component,
|
|
561
563
|
args: [{
|
|
562
564
|
selector: 'sky-dropdown',
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
565
|
+
template: "<div class=\"sky-dropdown\">\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]=\"\n label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n \"\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'\" icon=\"ellipsis-h\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"ellipsis\"\n iconType=\"skyux\"\n ></sky-icon>\n </ng-template>\n\n <ng-template ngSwitchDefault>\n <div\n *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n class=\"sky-dropdown-button-container\"\n >\n <div class=\"sky-dropdown-button-content-container\">\n <ng-content select=\"sky-dropdown-button\"> </ng-content>\n </div>\n <div class=\"sky-dropdown-button-icon-container\">\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-dropdown-caret\"\n icon=\"caret-down\"\n >\n </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-dropdown-caret\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </div>\n </div>\n <div\n *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n >\n <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n </div>\n </ng-template>\n </ng-container>\n </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n <div\n class=\"sky-dropdown-menu-container\"\n [class.hidden]=\"!isVisible\"\n #menuContainerElementRef\n >\n <ng-content select=\"sky-dropdown-menu\"></ng-content>\n </div>\n</ng-template>\n",
|
|
566
|
+
styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;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:hover:not(.sky-btn-tab-disabled){background-color:#eeeeef;color:#212327;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:none;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){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 .15s;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:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #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 .15s;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:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #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{color:#fff}.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}\n"],
|
|
567
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
566
568
|
}]
|
|
567
569
|
}], ctorParameters: function () {
|
|
568
570
|
return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyOverlayService }, { type: i2__namespace.SkyThemeService, decorators: [{
|
|
@@ -589,19 +591,19 @@
|
|
|
589
591
|
}], menuContainerElementRef: [{
|
|
590
592
|
type: i0.ViewChild,
|
|
591
593
|
args: ['menuContainerElementRef', {
|
|
592
|
-
read: i0.ElementRef
|
|
594
|
+
read: i0.ElementRef,
|
|
593
595
|
}]
|
|
594
596
|
}], menuContainerTemplateRef: [{
|
|
595
597
|
type: i0.ViewChild,
|
|
596
598
|
args: ['menuContainerTemplateRef', {
|
|
597
599
|
read: i0.TemplateRef,
|
|
598
|
-
static: true
|
|
600
|
+
static: true,
|
|
599
601
|
}]
|
|
600
602
|
}], triggerButton: [{
|
|
601
603
|
type: i0.ViewChild,
|
|
602
604
|
args: ['triggerButton', {
|
|
603
605
|
read: i0.ElementRef,
|
|
604
|
-
static: true
|
|
606
|
+
static: true,
|
|
605
607
|
}]
|
|
606
608
|
}] } });
|
|
607
609
|
|
|
@@ -663,7 +665,7 @@
|
|
|
663
665
|
Object.defineProperty(SkyDropdownMenuComponent.prototype, "hasFocusableItems", {
|
|
664
666
|
get: function () {
|
|
665
667
|
var found = this.menuItems.find(function (item) { return item.isFocusable(); });
|
|
666
|
-
return
|
|
668
|
+
return found !== undefined;
|
|
667
669
|
},
|
|
668
670
|
enumerable: false,
|
|
669
671
|
configurable: true
|
|
@@ -733,7 +735,7 @@
|
|
|
733
735
|
.subscribe(function (items) {
|
|
734
736
|
_this.reset();
|
|
735
737
|
_this.menuChanges.emit({
|
|
736
|
-
items: items.toArray()
|
|
738
|
+
items: items.toArray(),
|
|
737
739
|
});
|
|
738
740
|
});
|
|
739
741
|
this.addEventListeners();
|
|
@@ -809,22 +811,22 @@
|
|
|
809
811
|
this.resetItemsActiveState();
|
|
810
812
|
item.focusElement(this.useNativeFocus);
|
|
811
813
|
this.menuChanges.emit({
|
|
812
|
-
activeIndex: this.menuIndex
|
|
814
|
+
activeIndex: this.menuIndex,
|
|
813
815
|
});
|
|
814
816
|
};
|
|
815
817
|
SkyDropdownMenuComponent.prototype.getItemByIndex = function (index) {
|
|
816
818
|
return this.menuItems.find(function (item, i) {
|
|
817
|
-
return
|
|
819
|
+
return i === index;
|
|
818
820
|
});
|
|
819
821
|
};
|
|
820
822
|
SkyDropdownMenuComponent.prototype.selectItemByEventTarget = function (target) {
|
|
821
823
|
var _this = this;
|
|
822
824
|
var selectedItem = this.menuItems.find(function (item, i) {
|
|
823
|
-
var found =
|
|
825
|
+
var found = item.elementRef.nativeElement.contains(target);
|
|
824
826
|
if (found) {
|
|
825
827
|
_this.menuIndex = i;
|
|
826
828
|
_this.menuChanges.next({
|
|
827
|
-
activeIndex: _this.menuIndex
|
|
829
|
+
activeIndex: _this.menuIndex,
|
|
828
830
|
});
|
|
829
831
|
}
|
|
830
832
|
return found;
|
|
@@ -832,7 +834,7 @@
|
|
|
832
834
|
/* istanbul ignore else */
|
|
833
835
|
if (selectedItem) {
|
|
834
836
|
this.menuChanges.next({
|
|
835
|
-
selectedItem: selectedItem
|
|
837
|
+
selectedItem: selectedItem,
|
|
836
838
|
});
|
|
837
839
|
}
|
|
838
840
|
};
|
|
@@ -898,16 +900,16 @@
|
|
|
898
900
|
};
|
|
899
901
|
return SkyDropdownMenuComponent;
|
|
900
902
|
}());
|
|
901
|
-
SkyDropdownMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
902
|
-
SkyDropdownMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
903
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
903
|
+
SkyDropdownMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownMenuComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
904
|
+
SkyDropdownMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDropdownMenuComponent, selector: "sky-dropdown-menu", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", useNativeFocus: "useNativeFocus" }, outputs: { menuChanges: "menuChanges" }, queries: [{ propertyName: "menuItems", predicate: SkyDropdownItemComponent, descendants: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [id]=\"dropdownMenuId\"\n>\n <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px);display:flex;flex-direction:column;background-color:#fff}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-menu{background-color:#252a2e;color:#fff}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
905
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownMenuComponent, decorators: [{
|
|
904
906
|
type: i0.Component,
|
|
905
907
|
args: [{
|
|
906
908
|
selector: 'sky-dropdown-menu',
|
|
907
|
-
|
|
908
|
-
|
|
909
|
+
template: "<div\n class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [id]=\"dropdownMenuId\"\n>\n <ng-content> </ng-content>\n</div>\n",
|
|
910
|
+
styles: [".sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px);display:flex;flex-direction:column;background-color:#fff}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-menu{background-color:#252a2e;color:#fff}\n"],
|
|
909
911
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
910
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
912
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
911
913
|
}]
|
|
912
914
|
}], ctorParameters: function () {
|
|
913
915
|
return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: SkyDropdownComponent, decorators: [{
|
|
@@ -931,8 +933,8 @@
|
|
|
931
933
|
}
|
|
932
934
|
return SkyDropdownModule;
|
|
933
935
|
}());
|
|
934
|
-
SkyDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
935
|
-
SkyDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
936
|
+
SkyDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
937
|
+
SkyDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownModule, declarations: [SkyDropdownButtonComponent,
|
|
936
938
|
SkyDropdownComponent,
|
|
937
939
|
SkyDropdownItemComponent,
|
|
938
940
|
SkyDropdownMenuComponent], imports: [i4.CommonModule,
|
|
@@ -944,22 +946,22 @@
|
|
|
944
946
|
SkyDropdownComponent,
|
|
945
947
|
SkyDropdownItemComponent,
|
|
946
948
|
SkyDropdownMenuComponent] });
|
|
947
|
-
SkyDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
949
|
+
SkyDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownModule, imports: [[
|
|
948
950
|
i4.CommonModule,
|
|
949
951
|
i1.SkyAffixModule,
|
|
950
952
|
i3.SkyIconModule,
|
|
951
953
|
i1.SkyOverlayModule,
|
|
952
954
|
SkyPopoversResourcesModule,
|
|
953
|
-
i2.SkyThemeModule
|
|
955
|
+
i2.SkyThemeModule,
|
|
954
956
|
]] });
|
|
955
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
957
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDropdownModule, decorators: [{
|
|
956
958
|
type: i0.NgModule,
|
|
957
959
|
args: [{
|
|
958
960
|
declarations: [
|
|
959
961
|
SkyDropdownButtonComponent,
|
|
960
962
|
SkyDropdownComponent,
|
|
961
963
|
SkyDropdownItemComponent,
|
|
962
|
-
SkyDropdownMenuComponent
|
|
964
|
+
SkyDropdownMenuComponent,
|
|
963
965
|
],
|
|
964
966
|
imports: [
|
|
965
967
|
i4.CommonModule,
|
|
@@ -967,14 +969,14 @@
|
|
|
967
969
|
i3.SkyIconModule,
|
|
968
970
|
i1.SkyOverlayModule,
|
|
969
971
|
SkyPopoversResourcesModule,
|
|
970
|
-
i2.SkyThemeModule
|
|
972
|
+
i2.SkyThemeModule,
|
|
971
973
|
],
|
|
972
974
|
exports: [
|
|
973
975
|
SkyDropdownButtonComponent,
|
|
974
976
|
SkyDropdownComponent,
|
|
975
977
|
SkyDropdownItemComponent,
|
|
976
|
-
SkyDropdownMenuComponent
|
|
977
|
-
]
|
|
978
|
+
SkyDropdownMenuComponent,
|
|
979
|
+
],
|
|
978
980
|
}]
|
|
979
981
|
}] });
|
|
980
982
|
|
|
@@ -992,7 +994,7 @@
|
|
|
992
994
|
var top;
|
|
993
995
|
var left;
|
|
994
996
|
if (placement === 'above' || placement === 'below') {
|
|
995
|
-
left = callerRect.left +
|
|
997
|
+
left = callerRect.left + callerRect.width / 2;
|
|
996
998
|
// Make sure the arrow never detaches from the popover.
|
|
997
999
|
if (left - pixelTolerance < popoverRect.left) {
|
|
998
1000
|
left = popoverRect.left + pixelTolerance;
|
|
@@ -1018,7 +1020,7 @@
|
|
|
1018
1020
|
}
|
|
1019
1021
|
}
|
|
1020
1022
|
else {
|
|
1021
|
-
top = callerRect.top +
|
|
1023
|
+
top = callerRect.top + callerRect.height / 2;
|
|
1022
1024
|
// Make sure the arrow never detaches from the popover.
|
|
1023
1025
|
if (top - pixelTolerance < popoverRect.top) {
|
|
1024
1026
|
top = popoverRect.top + pixelTolerance;
|
|
@@ -1047,9 +1049,9 @@
|
|
|
1047
1049
|
};
|
|
1048
1050
|
return SkyPopoverAdapterService;
|
|
1049
1051
|
}());
|
|
1050
|
-
SkyPopoverAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1051
|
-
SkyPopoverAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1052
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1052
|
+
SkyPopoverAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1053
|
+
SkyPopoverAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverAdapterService });
|
|
1054
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverAdapterService, decorators: [{
|
|
1053
1055
|
type: i0.Injectable
|
|
1054
1056
|
}] });
|
|
1055
1057
|
|
|
@@ -1058,23 +1060,17 @@
|
|
|
1058
1060
|
*/
|
|
1059
1061
|
var skyPopoverAnimation = animations.trigger('skyPopoverAnimation', [
|
|
1060
1062
|
animations.state('void', animations.style({
|
|
1061
|
-
opacity: 0
|
|
1063
|
+
opacity: 0,
|
|
1062
1064
|
})),
|
|
1063
1065
|
animations.state('open', animations.style({
|
|
1064
|
-
opacity: 1
|
|
1066
|
+
opacity: 1,
|
|
1065
1067
|
})),
|
|
1066
1068
|
animations.state('closed', animations.style({
|
|
1067
|
-
opacity: 0
|
|
1069
|
+
opacity: 0,
|
|
1068
1070
|
})),
|
|
1069
|
-
animations.transition('void => *', [
|
|
1070
|
-
|
|
1071
|
-
]),
|
|
1072
|
-
animations.transition('open => closed', [
|
|
1073
|
-
animations.animate('150ms')
|
|
1074
|
-
]),
|
|
1075
|
-
animations.transition('closed => open', [
|
|
1076
|
-
animations.animate('150ms')
|
|
1077
|
-
])
|
|
1071
|
+
animations.transition('void => *', [animations.animate('250ms')]),
|
|
1072
|
+
animations.transition('open => closed', [animations.animate('150ms')]),
|
|
1073
|
+
animations.transition('closed => open', [animations.animate('150ms')]),
|
|
1078
1074
|
]);
|
|
1079
1075
|
|
|
1080
1076
|
function parseAffixPlacement(placement) {
|
|
@@ -1197,7 +1193,8 @@
|
|
|
1197
1193
|
this._isMouseEnter =
|
|
1198
1194
|
this._opened =
|
|
1199
1195
|
this.affixer =
|
|
1200
|
-
this.ngUnsubscribe =
|
|
1196
|
+
this.ngUnsubscribe =
|
|
1197
|
+
undefined;
|
|
1201
1198
|
};
|
|
1202
1199
|
SkyPopoverContentComponent.prototype.onAnimationEvent = function (event) {
|
|
1203
1200
|
var _a, _b;
|
|
@@ -1240,7 +1237,9 @@
|
|
|
1240
1237
|
setTimeout(function () {
|
|
1241
1238
|
var _a;
|
|
1242
1239
|
/*istanbul ignore next*/
|
|
1243
|
-
if (!((_a = _this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
|
|
1240
|
+
if (!((_a = _this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
|
|
1241
|
+
!_this.ngUnsubscribe ||
|
|
1242
|
+
_this.ngUnsubscribe.isStopped) {
|
|
1244
1243
|
return;
|
|
1245
1244
|
}
|
|
1246
1245
|
if (!_this.affixer) {
|
|
@@ -1251,11 +1250,12 @@
|
|
|
1251
1250
|
enableAutoFit: true,
|
|
1252
1251
|
horizontalAlignment: parseAffixHorizontalAlignment(_this.horizontalAlignment),
|
|
1253
1252
|
isSticky: true,
|
|
1254
|
-
placement: parseAffixPlacement(_this.placement)
|
|
1253
|
+
placement: parseAffixPlacement(_this.placement),
|
|
1255
1254
|
};
|
|
1256
1255
|
// Ensure that we are positioning the vertical alginment correctly. These
|
|
1257
1256
|
// are the default alignments for all popovers but ensure that we are future proof here.
|
|
1258
|
-
if (affixOptions.placement === 'left' ||
|
|
1257
|
+
if (affixOptions.placement === 'left' ||
|
|
1258
|
+
affixOptions.placement === 'right') {
|
|
1259
1259
|
affixOptions.verticalAlignment = 'middle';
|
|
1260
1260
|
}
|
|
1261
1261
|
else if (affixOptions.placement === 'above') {
|
|
@@ -1282,15 +1282,11 @@
|
|
|
1282
1282
|
SkyPopoverContentComponent.prototype.setupAffixer = function () {
|
|
1283
1283
|
var _this = this;
|
|
1284
1284
|
var affixer = this.affixService.createAffixer(this.popoverRef);
|
|
1285
|
-
affixer.offsetChange
|
|
1286
|
-
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1287
|
-
.subscribe(function () {
|
|
1285
|
+
affixer.offsetChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
1288
1286
|
_this.updateArrowOffset();
|
|
1289
1287
|
_this.changeDetector.markForCheck();
|
|
1290
1288
|
});
|
|
1291
|
-
affixer.overflowScroll
|
|
1292
|
-
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1293
|
-
.subscribe(function () {
|
|
1289
|
+
affixer.overflowScroll.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
1294
1290
|
_this.updateArrowOffset();
|
|
1295
1291
|
_this.changeDetector.markForCheck();
|
|
1296
1292
|
});
|
|
@@ -1306,7 +1302,7 @@
|
|
|
1306
1302
|
var _c = this.adapterService.getArrowCoordinates({
|
|
1307
1303
|
caller: this.caller,
|
|
1308
1304
|
popover: this.popoverRef,
|
|
1309
|
-
popoverArrow: this.arrowRef
|
|
1305
|
+
popoverArrow: this.arrowRef,
|
|
1310
1306
|
}, this.placement, this.themeName), top = _c.top, left = _c.left;
|
|
1311
1307
|
this.arrowTop = top;
|
|
1312
1308
|
this.arrowLeft = left;
|
|
@@ -1340,10 +1336,9 @@
|
|
|
1340
1336
|
return;
|
|
1341
1337
|
}
|
|
1342
1338
|
var focusableItems = _this.coreAdapterService.getFocusableChildren(hostElement);
|
|
1343
|
-
var isFirstItem =
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
!event.shiftKey);
|
|
1339
|
+
var isFirstItem = focusableItems[0] === event.target && event.shiftKey;
|
|
1340
|
+
var isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
|
|
1341
|
+
!event.shiftKey;
|
|
1347
1342
|
/*istanbul ignore else*/
|
|
1348
1343
|
if (focusableItems.length === 0 || isFirstItem || isLastItem) {
|
|
1349
1344
|
_this.close();
|
|
@@ -1357,20 +1352,16 @@
|
|
|
1357
1352
|
};
|
|
1358
1353
|
return SkyPopoverContentComponent;
|
|
1359
1354
|
}());
|
|
1360
|
-
SkyPopoverContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1361
|
-
SkyPopoverContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyPopoverContentComponent, selector: "sky-popover-content", providers: [
|
|
1362
|
-
|
|
1363
|
-
], viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, 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", 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:none}@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:solid 10px #00b4f1;border-right:solid 10px #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-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color: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:solid 10px #00b4f1;border-left:solid 10px #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-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}: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:solid 10px #00b4f1;border-left:solid 10px #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-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}: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:solid 10px #00b4f1;border-right:solid 10px #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-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color: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:solid 10px #00b4f1;border-right:solid 10px #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-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color: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:solid 10px #00b4f1;border-left:solid 10px #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-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.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:solid 10px #00b4f1;border-left:solid 10px #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-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.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:solid 10px #00b4f1;border-right:solid 10px #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-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
|
|
1364
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPopoverContentComponent, decorators: [{
|
|
1355
|
+
SkyPopoverContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverContentComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyAffixService }, { token: i1__namespace.SkyCoreAdapterService }, { token: SkyPopoverAdapterService }, { token: SkyPopoverContext, optional: true }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1356
|
+
SkyPopoverContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyPopoverContentComponent, selector: "sky-popover-content", providers: [SkyPopoverAdapterService], viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, 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\n *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\n *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", 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:none}@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:solid 10px #00b4f1;border-right:solid 10px #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-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color: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:solid 10px #00b4f1;border-left:solid 10px #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-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}: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:solid 10px #00b4f1;border-left:solid 10px #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-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}: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:solid 10px #00b4f1;border-right:solid 10px #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-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color: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:solid 10px #00b4f1;border-right:solid 10px #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-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color: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:solid 10px #00b4f1;border-left:solid 10px #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-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.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:solid 10px #00b4f1;border-left:solid 10px #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-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.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:solid 10px #00b4f1;border-right:solid 10px #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-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
|
|
1357
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverContentComponent, decorators: [{
|
|
1365
1358
|
type: i0.Component,
|
|
1366
1359
|
args: [{
|
|
1367
1360
|
selector: 'sky-popover-content',
|
|
1368
|
-
|
|
1369
|
-
|
|
1361
|
+
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\n *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\n *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",
|
|
1362
|
+
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:none}@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:solid 10px #00b4f1;border-right:solid 10px #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-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color: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:solid 10px #00b4f1;border-left:solid 10px #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-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}: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:solid 10px #00b4f1;border-left:solid 10px #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-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}: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:solid 10px #00b4f1;border-right:solid 10px #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-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color: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:solid 10px #00b4f1;border-right:solid 10px #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-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color: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:solid 10px #00b4f1;border-left:solid 10px #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-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.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:solid 10px #00b4f1;border-left:solid 10px #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-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.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:solid 10px #00b4f1;border-right:solid 10px #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-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"],
|
|
1370
1363
|
animations: [skyPopoverAnimation],
|
|
1371
|
-
providers: [
|
|
1372
|
-
SkyPopoverAdapterService
|
|
1373
|
-
]
|
|
1364
|
+
providers: [SkyPopoverAdapterService],
|
|
1374
1365
|
}]
|
|
1375
1366
|
}], ctorParameters: function () {
|
|
1376
1367
|
return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyCoreAdapterService }, { type: SkyPopoverAdapterService }, { type: SkyPopoverContext, decorators: [{
|
|
@@ -1382,19 +1373,19 @@
|
|
|
1382
1373
|
type: i0.ViewChild,
|
|
1383
1374
|
args: ['arrowRef', {
|
|
1384
1375
|
read: i0.ElementRef,
|
|
1385
|
-
static: true
|
|
1376
|
+
static: true,
|
|
1386
1377
|
}]
|
|
1387
1378
|
}], popoverRef: [{
|
|
1388
1379
|
type: i0.ViewChild,
|
|
1389
1380
|
args: ['popoverRef', {
|
|
1390
1381
|
read: i0.ElementRef,
|
|
1391
|
-
static: true
|
|
1382
|
+
static: true,
|
|
1392
1383
|
}]
|
|
1393
1384
|
}], contentTarget: [{
|
|
1394
1385
|
type: i0.ViewChild,
|
|
1395
1386
|
args: ['contentTarget', {
|
|
1396
1387
|
read: i0.ViewContainerRef,
|
|
1397
|
-
static: true
|
|
1388
|
+
static: true,
|
|
1398
1389
|
}]
|
|
1399
1390
|
}] } });
|
|
1400
1391
|
|
|
@@ -1502,7 +1493,7 @@
|
|
|
1502
1493
|
isStatic: false,
|
|
1503
1494
|
placement: this.placement,
|
|
1504
1495
|
popoverTitle: this.popoverTitle,
|
|
1505
|
-
popoverType: this.popoverType
|
|
1496
|
+
popoverType: this.popoverType,
|
|
1506
1497
|
});
|
|
1507
1498
|
};
|
|
1508
1499
|
/**
|
|
@@ -1534,29 +1525,25 @@
|
|
|
1534
1525
|
var _this = this;
|
|
1535
1526
|
var overlay = this.overlayService.create({
|
|
1536
1527
|
enableScroll: true,
|
|
1537
|
-
enablePointerEvents: true
|
|
1528
|
+
enablePointerEvents: true,
|
|
1538
1529
|
});
|
|
1539
|
-
overlay.backdropClick
|
|
1540
|
-
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1541
|
-
.subscribe(function () {
|
|
1530
|
+
overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
1542
1531
|
if (_this.dismissOnBlur) {
|
|
1543
1532
|
_this.close();
|
|
1544
1533
|
}
|
|
1545
1534
|
});
|
|
1546
|
-
var contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
|
|
1535
|
+
var contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
|
|
1536
|
+
{
|
|
1547
1537
|
provide: SkyPopoverContext,
|
|
1548
1538
|
useValue: new SkyPopoverContext({
|
|
1549
|
-
contentTemplateRef: this.templateRef
|
|
1550
|
-
})
|
|
1551
|
-
}
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
.subscribe(function () {
|
|
1539
|
+
contentTemplateRef: this.templateRef,
|
|
1540
|
+
}),
|
|
1541
|
+
},
|
|
1542
|
+
]);
|
|
1543
|
+
contentRef.opened.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
1555
1544
|
_this.popoverOpened.emit(_this);
|
|
1556
1545
|
});
|
|
1557
|
-
contentRef.closed
|
|
1558
|
-
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1559
|
-
.subscribe(function () {
|
|
1546
|
+
contentRef.closed.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
1560
1547
|
/*istanbul ignore else*/
|
|
1561
1548
|
if (_this.isActive) {
|
|
1562
1549
|
_this.overlayService.close(_this.overlay);
|
|
@@ -1579,13 +1566,13 @@
|
|
|
1579
1566
|
};
|
|
1580
1567
|
return SkyPopoverComponent;
|
|
1581
1568
|
}());
|
|
1582
|
-
SkyPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1583
|
-
SkyPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1584
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1569
|
+
SkyPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverComponent, deps: [{ token: i1__namespace.SkyOverlayService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1570
|
+
SkyPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyPopoverComponent, selector: "sky-popover", inputs: { alignment: "alignment", dismissOnBlur: "dismissOnBlur", placement: "placement", popoverTitle: "popoverTitle", popoverType: "popoverType" }, outputs: { popoverClosed: "popoverClosed", popoverOpened: "popoverOpened" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #templateRef>\n <ng-content></ng-content>\n</ng-template>\n" });
|
|
1571
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverComponent, decorators: [{
|
|
1585
1572
|
type: i0.Component,
|
|
1586
1573
|
args: [{
|
|
1587
1574
|
selector: 'sky-popover',
|
|
1588
|
-
|
|
1575
|
+
template: "<ng-template #templateRef>\n <ng-content></ng-content>\n</ng-template>\n",
|
|
1589
1576
|
}]
|
|
1590
1577
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyOverlayService }]; }, propDecorators: { alignment: [{
|
|
1591
1578
|
type: i0.Input
|
|
@@ -1605,7 +1592,7 @@
|
|
|
1605
1592
|
type: i0.ViewChild,
|
|
1606
1593
|
args: ['templateRef', {
|
|
1607
1594
|
read: i0.TemplateRef,
|
|
1608
|
-
static: true
|
|
1595
|
+
static: true,
|
|
1609
1596
|
}]
|
|
1610
1597
|
}] } });
|
|
1611
1598
|
|
|
@@ -1790,12 +1777,12 @@
|
|
|
1790
1777
|
};
|
|
1791
1778
|
return SkyPopoverDirective;
|
|
1792
1779
|
}());
|
|
1793
|
-
SkyPopoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1794
|
-
SkyPopoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
|
1795
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1780
|
+
SkyPopoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
|
1781
|
+
SkyPopoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyPopoverDirective, selector: "[skyPopover]", inputs: { skyPopover: "skyPopover", skyPopoverAlignment: "skyPopoverAlignment", skyPopoverMessageStream: "skyPopoverMessageStream", skyPopoverPlacement: "skyPopoverPlacement", skyPopoverTrigger: "skyPopoverTrigger" }, ngImport: i0__namespace });
|
|
1782
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverDirective, decorators: [{
|
|
1796
1783
|
type: i0.Directive,
|
|
1797
1784
|
args: [{
|
|
1798
|
-
selector: '[skyPopover]'
|
|
1785
|
+
selector: '[skyPopover]',
|
|
1799
1786
|
}]
|
|
1800
1787
|
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { skyPopover: [{
|
|
1801
1788
|
type: i0.Input
|
|
@@ -1814,8 +1801,8 @@
|
|
|
1814
1801
|
}
|
|
1815
1802
|
return SkyPopoverModule;
|
|
1816
1803
|
}());
|
|
1817
|
-
SkyPopoverModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1818
|
-
SkyPopoverModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1804
|
+
SkyPopoverModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1805
|
+
SkyPopoverModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverModule, declarations: [SkyPopoverComponent,
|
|
1819
1806
|
SkyPopoverContentComponent,
|
|
1820
1807
|
SkyPopoverDirective], imports: [i4.CommonModule,
|
|
1821
1808
|
i1.SkyAffixModule,
|
|
@@ -1825,21 +1812,21 @@
|
|
|
1825
1812
|
i2.SkyThemeModule], exports: [SkyPopoverComponent,
|
|
1826
1813
|
SkyPopoverContentComponent,
|
|
1827
1814
|
SkyPopoverDirective] });
|
|
1828
|
-
SkyPopoverModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1815
|
+
SkyPopoverModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverModule, imports: [[
|
|
1829
1816
|
i4.CommonModule,
|
|
1830
1817
|
i1.SkyAffixModule,
|
|
1831
1818
|
i3.SkyIconModule,
|
|
1832
1819
|
i1.SkyOverlayModule,
|
|
1833
1820
|
SkyPopoversResourcesModule,
|
|
1834
|
-
i2.SkyThemeModule
|
|
1821
|
+
i2.SkyThemeModule,
|
|
1835
1822
|
]] });
|
|
1836
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1823
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPopoverModule, decorators: [{
|
|
1837
1824
|
type: i0.NgModule,
|
|
1838
1825
|
args: [{
|
|
1839
1826
|
declarations: [
|
|
1840
1827
|
SkyPopoverComponent,
|
|
1841
1828
|
SkyPopoverContentComponent,
|
|
1842
|
-
SkyPopoverDirective
|
|
1829
|
+
SkyPopoverDirective,
|
|
1843
1830
|
],
|
|
1844
1831
|
imports: [
|
|
1845
1832
|
i4.CommonModule,
|
|
@@ -1847,16 +1834,14 @@
|
|
|
1847
1834
|
i3.SkyIconModule,
|
|
1848
1835
|
i1.SkyOverlayModule,
|
|
1849
1836
|
SkyPopoversResourcesModule,
|
|
1850
|
-
i2.SkyThemeModule
|
|
1837
|
+
i2.SkyThemeModule,
|
|
1851
1838
|
],
|
|
1852
1839
|
exports: [
|
|
1853
1840
|
SkyPopoverComponent,
|
|
1854
1841
|
SkyPopoverContentComponent,
|
|
1855
|
-
SkyPopoverDirective
|
|
1842
|
+
SkyPopoverDirective,
|
|
1856
1843
|
],
|
|
1857
|
-
entryComponents: [
|
|
1858
|
-
SkyPopoverContentComponent
|
|
1859
|
-
]
|
|
1844
|
+
entryComponents: [SkyPopoverContentComponent],
|
|
1860
1845
|
}]
|
|
1861
1846
|
}] });
|
|
1862
1847
|
|
|
@@ -1866,15 +1851,15 @@
|
|
|
1866
1851
|
|
|
1867
1852
|
exports.SkyDropdownModule = SkyDropdownModule;
|
|
1868
1853
|
exports.SkyPopoverModule = SkyPopoverModule;
|
|
1869
|
-
exports
|
|
1870
|
-
exports
|
|
1871
|
-
exports
|
|
1872
|
-
exports
|
|
1873
|
-
exports
|
|
1874
|
-
exports
|
|
1875
|
-
exports
|
|
1854
|
+
exports["λ1"] = SkyDropdownItemComponent;
|
|
1855
|
+
exports["λ2"] = SkyDropdownButtonComponent;
|
|
1856
|
+
exports["λ3"] = SkyDropdownComponent;
|
|
1857
|
+
exports["λ4"] = SkyDropdownMenuComponent;
|
|
1858
|
+
exports["λ5"] = SkyPopoverContentComponent;
|
|
1859
|
+
exports["λ6"] = SkyPopoverComponent;
|
|
1860
|
+
exports["λ7"] = SkyPopoverDirective;
|
|
1876
1861
|
|
|
1877
1862
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
1878
1863
|
|
|
1879
|
-
}))
|
|
1864
|
+
}));
|
|
1880
1865
|
//# sourceMappingURL=skyux-popovers.umd.js.map
|