@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
|
@@ -58,7 +58,9 @@ var SkyDropdownMessageType;
|
|
|
58
58
|
* To update this file, simply rerun the command.
|
|
59
59
|
*/
|
|
60
60
|
const RESOURCES = {
|
|
61
|
-
'EN-US': {
|
|
61
|
+
'EN-US': {
|
|
62
|
+
skyux_dropdown_context_menu_default_label: { message: 'Context menu' },
|
|
63
|
+
},
|
|
62
64
|
};
|
|
63
65
|
class SkyPopoversResourcesProvider {
|
|
64
66
|
getString(localeInfo, name) {
|
|
@@ -70,34 +72,38 @@ class SkyPopoversResourcesProvider {
|
|
|
70
72
|
*/
|
|
71
73
|
class SkyPopoversResourcesModule {
|
|
72
74
|
}
|
|
73
|
-
SkyPopoversResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
74
|
-
SkyPopoversResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
75
|
-
SkyPopoversResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
75
|
+
SkyPopoversResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoversResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
76
|
+
SkyPopoversResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoversResourcesModule, exports: [SkyI18nModule] });
|
|
77
|
+
SkyPopoversResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoversResourcesModule, providers: [
|
|
78
|
+
{
|
|
76
79
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
77
80
|
useClass: SkyPopoversResourcesProvider,
|
|
78
|
-
multi: true
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
+
multi: true,
|
|
82
|
+
},
|
|
83
|
+
], imports: [SkyI18nModule] });
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoversResourcesModule, decorators: [{
|
|
81
85
|
type: NgModule,
|
|
82
86
|
args: [{
|
|
83
87
|
exports: [SkyI18nModule],
|
|
84
|
-
providers: [
|
|
88
|
+
providers: [
|
|
89
|
+
{
|
|
85
90
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
86
91
|
useClass: SkyPopoversResourcesProvider,
|
|
87
|
-
multi: true
|
|
88
|
-
}
|
|
92
|
+
multi: true,
|
|
93
|
+
},
|
|
94
|
+
],
|
|
89
95
|
}]
|
|
90
96
|
}] });
|
|
91
97
|
|
|
92
98
|
class SkyDropdownButtonComponent {
|
|
93
99
|
}
|
|
94
|
-
SkyDropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
95
|
-
SkyDropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
100
|
+
SkyDropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
SkyDropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownButtonComponent, decorators: [{
|
|
97
103
|
type: Component,
|
|
98
104
|
args: [{
|
|
99
105
|
selector: 'sky-dropdown-button',
|
|
100
|
-
templateUrl: './dropdown-button.component.html'
|
|
106
|
+
templateUrl: './dropdown-button.component.html',
|
|
101
107
|
}]
|
|
102
108
|
}] });
|
|
103
109
|
|
|
@@ -145,8 +151,8 @@ class SkyDropdownItemComponent {
|
|
|
145
151
|
}
|
|
146
152
|
isFocusable() {
|
|
147
153
|
/*tslint:disable no-null-keyword */
|
|
148
|
-
const isFocusable =
|
|
149
|
-
this.buttonElement.getAttribute('disabled') === null
|
|
154
|
+
const isFocusable = this.buttonElement &&
|
|
155
|
+
this.buttonElement.getAttribute('disabled') === null;
|
|
150
156
|
/*tslint:enable */
|
|
151
157
|
return isFocusable;
|
|
152
158
|
}
|
|
@@ -155,16 +161,16 @@ class SkyDropdownItemComponent {
|
|
|
155
161
|
this.changeDetector.markForCheck();
|
|
156
162
|
}
|
|
157
163
|
}
|
|
158
|
-
SkyDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
159
|
-
SkyDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
164
|
+
SkyDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
165
|
+
SkyDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDropdownItemComponent, selector: "sky-dropdown-item", inputs: { ariaRole: "ariaRole" }, ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownItemComponent, decorators: [{
|
|
161
167
|
type: Component,
|
|
162
168
|
args: [{
|
|
163
169
|
selector: 'sky-dropdown-item',
|
|
164
170
|
templateUrl: './dropdown-item.component.html',
|
|
165
171
|
styleUrls: ['./dropdown-item.component.scss'],
|
|
166
172
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
167
|
-
encapsulation: ViewEncapsulation.None
|
|
173
|
+
encapsulation: ViewEncapsulation.None,
|
|
168
174
|
}]
|
|
169
175
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { ariaRole: [{
|
|
170
176
|
type: Input
|
|
@@ -400,12 +406,10 @@ class SkyDropdownComponent {
|
|
|
400
406
|
}
|
|
401
407
|
const overlay = this.overlayService.create({
|
|
402
408
|
enableScroll: true,
|
|
403
|
-
enablePointerEvents: true
|
|
409
|
+
enablePointerEvents: true,
|
|
404
410
|
});
|
|
405
411
|
overlay.attachTemplate(this.menuContainerTemplateRef);
|
|
406
|
-
overlay.backdropClick
|
|
407
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
408
|
-
.subscribe(() => {
|
|
412
|
+
overlay.backdropClick.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
409
413
|
if (this.dismissOnBlur) {
|
|
410
414
|
this.sendMessage(SkyDropdownMessageType.Close);
|
|
411
415
|
}
|
|
@@ -431,7 +435,7 @@ class SkyDropdownComponent {
|
|
|
431
435
|
affixer.placementChange
|
|
432
436
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
433
437
|
.subscribe((change) => {
|
|
434
|
-
this.isVisible =
|
|
438
|
+
this.isVisible = change.placement !== null;
|
|
435
439
|
this.changeDetector.markForCheck();
|
|
436
440
|
});
|
|
437
441
|
this.affixer = affixer;
|
|
@@ -474,22 +478,22 @@ class SkyDropdownComponent {
|
|
|
474
478
|
enableAutoFit: true,
|
|
475
479
|
horizontalAlignment: parseAffixHorizontalAlignment$1(this.horizontalAlignment),
|
|
476
480
|
isSticky: true,
|
|
477
|
-
placement: 'below'
|
|
481
|
+
placement: 'below',
|
|
478
482
|
});
|
|
479
483
|
this.isVisible = true;
|
|
480
484
|
this.changeDetector.markForCheck();
|
|
481
485
|
});
|
|
482
486
|
}
|
|
483
487
|
}
|
|
484
|
-
SkyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
485
|
-
SkyDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
488
|
+
SkyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyAffixService }, { token: i1.SkyOverlayService }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
489
|
+
SkyDropdownComponent.ɵcmp = i0.ɵɵ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: ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownComponent, decorators: [{
|
|
487
491
|
type: Component,
|
|
488
492
|
args: [{
|
|
489
493
|
selector: 'sky-dropdown',
|
|
490
494
|
templateUrl: './dropdown.component.html',
|
|
491
495
|
styleUrls: ['./dropdown.component.scss'],
|
|
492
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
496
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
493
497
|
}]
|
|
494
498
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyAffixService }, { type: i1.SkyOverlayService }, { type: i2.SkyThemeService, decorators: [{
|
|
495
499
|
type: Optional
|
|
@@ -514,19 +518,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
514
518
|
}], menuContainerElementRef: [{
|
|
515
519
|
type: ViewChild,
|
|
516
520
|
args: ['menuContainerElementRef', {
|
|
517
|
-
read: ElementRef
|
|
521
|
+
read: ElementRef,
|
|
518
522
|
}]
|
|
519
523
|
}], menuContainerTemplateRef: [{
|
|
520
524
|
type: ViewChild,
|
|
521
525
|
args: ['menuContainerTemplateRef', {
|
|
522
526
|
read: TemplateRef,
|
|
523
|
-
static: true
|
|
527
|
+
static: true,
|
|
524
528
|
}]
|
|
525
529
|
}], triggerButton: [{
|
|
526
530
|
type: ViewChild,
|
|
527
531
|
args: ['triggerButton', {
|
|
528
532
|
read: ElementRef,
|
|
529
|
-
static: true
|
|
533
|
+
static: true,
|
|
530
534
|
}]
|
|
531
535
|
}] } });
|
|
532
536
|
|
|
@@ -578,8 +582,8 @@ class SkyDropdownMenuComponent {
|
|
|
578
582
|
return this._useNativeFocus;
|
|
579
583
|
}
|
|
580
584
|
get hasFocusableItems() {
|
|
581
|
-
const found = this.menuItems.find(item => item.isFocusable());
|
|
582
|
-
return
|
|
585
|
+
const found = this.menuItems.find((item) => item.isFocusable());
|
|
586
|
+
return found !== undefined;
|
|
583
587
|
}
|
|
584
588
|
set menuIndex(value) {
|
|
585
589
|
if (value < 0) {
|
|
@@ -641,7 +645,7 @@ class SkyDropdownMenuComponent {
|
|
|
641
645
|
.subscribe((items) => {
|
|
642
646
|
this.reset();
|
|
643
647
|
this.menuChanges.emit({
|
|
644
|
-
items: items.toArray()
|
|
648
|
+
items: items.toArray(),
|
|
645
649
|
});
|
|
646
650
|
});
|
|
647
651
|
this.addEventListeners();
|
|
@@ -717,21 +721,21 @@ class SkyDropdownMenuComponent {
|
|
|
717
721
|
this.resetItemsActiveState();
|
|
718
722
|
item.focusElement(this.useNativeFocus);
|
|
719
723
|
this.menuChanges.emit({
|
|
720
|
-
activeIndex: this.menuIndex
|
|
724
|
+
activeIndex: this.menuIndex,
|
|
721
725
|
});
|
|
722
726
|
}
|
|
723
727
|
getItemByIndex(index) {
|
|
724
728
|
return this.menuItems.find((item, i) => {
|
|
725
|
-
return
|
|
729
|
+
return i === index;
|
|
726
730
|
});
|
|
727
731
|
}
|
|
728
732
|
selectItemByEventTarget(target) {
|
|
729
733
|
const selectedItem = this.menuItems.find((item, i) => {
|
|
730
|
-
const found =
|
|
734
|
+
const found = item.elementRef.nativeElement.contains(target);
|
|
731
735
|
if (found) {
|
|
732
736
|
this.menuIndex = i;
|
|
733
737
|
this.menuChanges.next({
|
|
734
|
-
activeIndex: this.menuIndex
|
|
738
|
+
activeIndex: this.menuIndex,
|
|
735
739
|
});
|
|
736
740
|
}
|
|
737
741
|
return found;
|
|
@@ -739,7 +743,7 @@ class SkyDropdownMenuComponent {
|
|
|
739
743
|
/* istanbul ignore else */
|
|
740
744
|
if (selectedItem) {
|
|
741
745
|
this.menuChanges.next({
|
|
742
|
-
selectedItem
|
|
746
|
+
selectedItem,
|
|
743
747
|
});
|
|
744
748
|
}
|
|
745
749
|
}
|
|
@@ -803,16 +807,16 @@ class SkyDropdownMenuComponent {
|
|
|
803
807
|
});
|
|
804
808
|
}
|
|
805
809
|
}
|
|
806
|
-
SkyDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
807
|
-
SkyDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
810
|
+
SkyDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
811
|
+
SkyDropdownMenuComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownMenuComponent, decorators: [{
|
|
809
813
|
type: Component,
|
|
810
814
|
args: [{
|
|
811
815
|
selector: 'sky-dropdown-menu',
|
|
812
816
|
templateUrl: './dropdown-menu.component.html',
|
|
813
817
|
styleUrls: ['./dropdown-menu.component.scss'],
|
|
814
818
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
815
|
-
encapsulation: ViewEncapsulation.None
|
|
819
|
+
encapsulation: ViewEncapsulation.None,
|
|
816
820
|
}]
|
|
817
821
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyDropdownComponent, decorators: [{
|
|
818
822
|
type: Optional
|
|
@@ -831,8 +835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
831
835
|
|
|
832
836
|
class SkyDropdownModule {
|
|
833
837
|
}
|
|
834
|
-
SkyDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
835
|
-
SkyDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
838
|
+
SkyDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
839
|
+
SkyDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownModule, declarations: [SkyDropdownButtonComponent,
|
|
836
840
|
SkyDropdownComponent,
|
|
837
841
|
SkyDropdownItemComponent,
|
|
838
842
|
SkyDropdownMenuComponent], imports: [CommonModule,
|
|
@@ -844,22 +848,22 @@ SkyDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
|
|
|
844
848
|
SkyDropdownComponent,
|
|
845
849
|
SkyDropdownItemComponent,
|
|
846
850
|
SkyDropdownMenuComponent] });
|
|
847
|
-
SkyDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
851
|
+
SkyDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownModule, imports: [[
|
|
848
852
|
CommonModule,
|
|
849
853
|
SkyAffixModule,
|
|
850
854
|
SkyIconModule,
|
|
851
855
|
SkyOverlayModule,
|
|
852
856
|
SkyPopoversResourcesModule,
|
|
853
|
-
SkyThemeModule
|
|
857
|
+
SkyThemeModule,
|
|
854
858
|
]] });
|
|
855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDropdownModule, decorators: [{
|
|
856
860
|
type: NgModule,
|
|
857
861
|
args: [{
|
|
858
862
|
declarations: [
|
|
859
863
|
SkyDropdownButtonComponent,
|
|
860
864
|
SkyDropdownComponent,
|
|
861
865
|
SkyDropdownItemComponent,
|
|
862
|
-
SkyDropdownMenuComponent
|
|
866
|
+
SkyDropdownMenuComponent,
|
|
863
867
|
],
|
|
864
868
|
imports: [
|
|
865
869
|
CommonModule,
|
|
@@ -867,14 +871,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
867
871
|
SkyIconModule,
|
|
868
872
|
SkyOverlayModule,
|
|
869
873
|
SkyPopoversResourcesModule,
|
|
870
|
-
SkyThemeModule
|
|
874
|
+
SkyThemeModule,
|
|
871
875
|
],
|
|
872
876
|
exports: [
|
|
873
877
|
SkyDropdownButtonComponent,
|
|
874
878
|
SkyDropdownComponent,
|
|
875
879
|
SkyDropdownItemComponent,
|
|
876
|
-
SkyDropdownMenuComponent
|
|
877
|
-
]
|
|
880
|
+
SkyDropdownMenuComponent,
|
|
881
|
+
],
|
|
878
882
|
}]
|
|
879
883
|
}] });
|
|
880
884
|
|
|
@@ -890,7 +894,7 @@ class SkyPopoverAdapterService {
|
|
|
890
894
|
let top;
|
|
891
895
|
let left;
|
|
892
896
|
if (placement === 'above' || placement === 'below') {
|
|
893
|
-
left = callerRect.left +
|
|
897
|
+
left = callerRect.left + callerRect.width / 2;
|
|
894
898
|
// Make sure the arrow never detaches from the popover.
|
|
895
899
|
if (left - pixelTolerance < popoverRect.left) {
|
|
896
900
|
left = popoverRect.left + pixelTolerance;
|
|
@@ -916,7 +920,7 @@ class SkyPopoverAdapterService {
|
|
|
916
920
|
}
|
|
917
921
|
}
|
|
918
922
|
else {
|
|
919
|
-
top = callerRect.top +
|
|
923
|
+
top = callerRect.top + callerRect.height / 2;
|
|
920
924
|
// Make sure the arrow never detaches from the popover.
|
|
921
925
|
if (top - pixelTolerance < popoverRect.top) {
|
|
922
926
|
top = popoverRect.top + pixelTolerance;
|
|
@@ -944,9 +948,9 @@ class SkyPopoverAdapterService {
|
|
|
944
948
|
return { top, left };
|
|
945
949
|
}
|
|
946
950
|
}
|
|
947
|
-
SkyPopoverAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
948
|
-
SkyPopoverAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
951
|
+
SkyPopoverAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
952
|
+
SkyPopoverAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverAdapterService });
|
|
953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverAdapterService, decorators: [{
|
|
950
954
|
type: Injectable
|
|
951
955
|
}] });
|
|
952
956
|
|
|
@@ -955,23 +959,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
955
959
|
*/
|
|
956
960
|
const skyPopoverAnimation = trigger('skyPopoverAnimation', [
|
|
957
961
|
state('void', style({
|
|
958
|
-
opacity: 0
|
|
962
|
+
opacity: 0,
|
|
959
963
|
})),
|
|
960
964
|
state('open', style({
|
|
961
|
-
opacity: 1
|
|
965
|
+
opacity: 1,
|
|
962
966
|
})),
|
|
963
967
|
state('closed', style({
|
|
964
|
-
opacity: 0
|
|
968
|
+
opacity: 0,
|
|
965
969
|
})),
|
|
966
|
-
transition('void => *', [
|
|
967
|
-
|
|
968
|
-
]),
|
|
969
|
-
transition('open => closed', [
|
|
970
|
-
animate('150ms')
|
|
971
|
-
]),
|
|
972
|
-
transition('closed => open', [
|
|
973
|
-
animate('150ms')
|
|
974
|
-
])
|
|
970
|
+
transition('void => *', [animate('250ms')]),
|
|
971
|
+
transition('open => closed', [animate('150ms')]),
|
|
972
|
+
transition('closed => open', [animate('150ms')]),
|
|
975
973
|
]);
|
|
976
974
|
|
|
977
975
|
function parseAffixPlacement(placement) {
|
|
@@ -1076,7 +1074,8 @@ class SkyPopoverContentComponent {
|
|
|
1076
1074
|
this._isMouseEnter =
|
|
1077
1075
|
this._opened =
|
|
1078
1076
|
this.affixer =
|
|
1079
|
-
this.ngUnsubscribe =
|
|
1077
|
+
this.ngUnsubscribe =
|
|
1078
|
+
undefined;
|
|
1080
1079
|
}
|
|
1081
1080
|
onAnimationEvent(event) {
|
|
1082
1081
|
var _a, _b;
|
|
@@ -1118,7 +1117,9 @@ class SkyPopoverContentComponent {
|
|
|
1118
1117
|
setTimeout(() => {
|
|
1119
1118
|
var _a;
|
|
1120
1119
|
/*istanbul ignore next*/
|
|
1121
|
-
if (!((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
|
|
1120
|
+
if (!((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
|
|
1121
|
+
!this.ngUnsubscribe ||
|
|
1122
|
+
this.ngUnsubscribe.isStopped) {
|
|
1122
1123
|
return;
|
|
1123
1124
|
}
|
|
1124
1125
|
if (!this.affixer) {
|
|
@@ -1129,11 +1130,12 @@ class SkyPopoverContentComponent {
|
|
|
1129
1130
|
enableAutoFit: true,
|
|
1130
1131
|
horizontalAlignment: parseAffixHorizontalAlignment(this.horizontalAlignment),
|
|
1131
1132
|
isSticky: true,
|
|
1132
|
-
placement: parseAffixPlacement(this.placement)
|
|
1133
|
+
placement: parseAffixPlacement(this.placement),
|
|
1133
1134
|
};
|
|
1134
1135
|
// Ensure that we are positioning the vertical alginment correctly. These
|
|
1135
1136
|
// are the default alignments for all popovers but ensure that we are future proof here.
|
|
1136
|
-
if (affixOptions.placement === 'left' ||
|
|
1137
|
+
if (affixOptions.placement === 'left' ||
|
|
1138
|
+
affixOptions.placement === 'right') {
|
|
1137
1139
|
affixOptions.verticalAlignment = 'middle';
|
|
1138
1140
|
}
|
|
1139
1141
|
else if (affixOptions.placement === 'above') {
|
|
@@ -1159,15 +1161,11 @@ class SkyPopoverContentComponent {
|
|
|
1159
1161
|
}
|
|
1160
1162
|
setupAffixer() {
|
|
1161
1163
|
const affixer = this.affixService.createAffixer(this.popoverRef);
|
|
1162
|
-
affixer.offsetChange
|
|
1163
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1164
|
-
.subscribe(() => {
|
|
1164
|
+
affixer.offsetChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1165
1165
|
this.updateArrowOffset();
|
|
1166
1166
|
this.changeDetector.markForCheck();
|
|
1167
1167
|
});
|
|
1168
|
-
affixer.overflowScroll
|
|
1169
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1170
|
-
.subscribe(() => {
|
|
1168
|
+
affixer.overflowScroll.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1171
1169
|
this.updateArrowOffset();
|
|
1172
1170
|
this.changeDetector.markForCheck();
|
|
1173
1171
|
});
|
|
@@ -1183,7 +1181,7 @@ class SkyPopoverContentComponent {
|
|
|
1183
1181
|
const { top, left } = this.adapterService.getArrowCoordinates({
|
|
1184
1182
|
caller: this.caller,
|
|
1185
1183
|
popover: this.popoverRef,
|
|
1186
|
-
popoverArrow: this.arrowRef
|
|
1184
|
+
popoverArrow: this.arrowRef,
|
|
1187
1185
|
}, this.placement, this.themeName);
|
|
1188
1186
|
this.arrowTop = top;
|
|
1189
1187
|
this.arrowLeft = left;
|
|
@@ -1216,10 +1214,9 @@ class SkyPopoverContentComponent {
|
|
|
1216
1214
|
return;
|
|
1217
1215
|
}
|
|
1218
1216
|
const focusableItems = this.coreAdapterService.getFocusableChildren(hostElement);
|
|
1219
|
-
const isFirstItem =
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
!event.shiftKey);
|
|
1217
|
+
const isFirstItem = focusableItems[0] === event.target && event.shiftKey;
|
|
1218
|
+
const isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
|
|
1219
|
+
!event.shiftKey;
|
|
1223
1220
|
/*istanbul ignore else*/
|
|
1224
1221
|
if (focusableItems.length === 0 || isFirstItem || isLastItem) {
|
|
1225
1222
|
this.close();
|
|
@@ -1232,20 +1229,16 @@ class SkyPopoverContentComponent {
|
|
|
1232
1229
|
});
|
|
1233
1230
|
}
|
|
1234
1231
|
}
|
|
1235
|
-
SkyPopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1236
|
-
SkyPopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyPopoverContentComponent, selector: "sky-popover-content", providers: [
|
|
1237
|
-
|
|
1238
|
-
], viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
|
|
1239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPopoverContentComponent, decorators: [{
|
|
1232
|
+
SkyPopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i1.SkyCoreAdapterService }, { token: SkyPopoverAdapterService }, { token: SkyPopoverContext, optional: true }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1233
|
+
SkyPopoverContentComponent.ɵcmp = i0.ɵɵ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: ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
|
|
1234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverContentComponent, decorators: [{
|
|
1240
1235
|
type: Component,
|
|
1241
1236
|
args: [{
|
|
1242
1237
|
selector: 'sky-popover-content',
|
|
1243
1238
|
templateUrl: './popover-content.component.html',
|
|
1244
1239
|
styleUrls: ['./popover-content.component.scss'],
|
|
1245
1240
|
animations: [skyPopoverAnimation],
|
|
1246
|
-
providers: [
|
|
1247
|
-
SkyPopoverAdapterService
|
|
1248
|
-
]
|
|
1241
|
+
providers: [SkyPopoverAdapterService],
|
|
1249
1242
|
}]
|
|
1250
1243
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: i1.SkyCoreAdapterService }, { type: SkyPopoverAdapterService }, { type: SkyPopoverContext, decorators: [{
|
|
1251
1244
|
type: Optional
|
|
@@ -1255,19 +1248,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
1255
1248
|
type: ViewChild,
|
|
1256
1249
|
args: ['arrowRef', {
|
|
1257
1250
|
read: ElementRef,
|
|
1258
|
-
static: true
|
|
1251
|
+
static: true,
|
|
1259
1252
|
}]
|
|
1260
1253
|
}], popoverRef: [{
|
|
1261
1254
|
type: ViewChild,
|
|
1262
1255
|
args: ['popoverRef', {
|
|
1263
1256
|
read: ElementRef,
|
|
1264
|
-
static: true
|
|
1257
|
+
static: true,
|
|
1265
1258
|
}]
|
|
1266
1259
|
}], contentTarget: [{
|
|
1267
1260
|
type: ViewChild,
|
|
1268
1261
|
args: ['contentTarget', {
|
|
1269
1262
|
read: ViewContainerRef,
|
|
1270
|
-
static: true
|
|
1263
|
+
static: true,
|
|
1271
1264
|
}]
|
|
1272
1265
|
}] } });
|
|
1273
1266
|
|
|
@@ -1363,7 +1356,7 @@ class SkyPopoverComponent {
|
|
|
1363
1356
|
isStatic: false,
|
|
1364
1357
|
placement: this.placement,
|
|
1365
1358
|
popoverTitle: this.popoverTitle,
|
|
1366
|
-
popoverType: this.popoverType
|
|
1359
|
+
popoverType: this.popoverType,
|
|
1367
1360
|
});
|
|
1368
1361
|
}
|
|
1369
1362
|
/**
|
|
@@ -1394,29 +1387,25 @@ class SkyPopoverComponent {
|
|
|
1394
1387
|
setupOverlay() {
|
|
1395
1388
|
const overlay = this.overlayService.create({
|
|
1396
1389
|
enableScroll: true,
|
|
1397
|
-
enablePointerEvents: true
|
|
1390
|
+
enablePointerEvents: true,
|
|
1398
1391
|
});
|
|
1399
|
-
overlay.backdropClick
|
|
1400
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1401
|
-
.subscribe(() => {
|
|
1392
|
+
overlay.backdropClick.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1402
1393
|
if (this.dismissOnBlur) {
|
|
1403
1394
|
this.close();
|
|
1404
1395
|
}
|
|
1405
1396
|
});
|
|
1406
|
-
const contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
|
|
1397
|
+
const contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
|
|
1398
|
+
{
|
|
1407
1399
|
provide: SkyPopoverContext,
|
|
1408
1400
|
useValue: new SkyPopoverContext({
|
|
1409
|
-
contentTemplateRef: this.templateRef
|
|
1410
|
-
})
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
.subscribe(() => {
|
|
1401
|
+
contentTemplateRef: this.templateRef,
|
|
1402
|
+
}),
|
|
1403
|
+
},
|
|
1404
|
+
]);
|
|
1405
|
+
contentRef.opened.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1415
1406
|
this.popoverOpened.emit(this);
|
|
1416
1407
|
});
|
|
1417
|
-
contentRef.closed
|
|
1418
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1419
|
-
.subscribe(() => {
|
|
1408
|
+
contentRef.closed.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1420
1409
|
/*istanbul ignore else*/
|
|
1421
1410
|
if (this.isActive) {
|
|
1422
1411
|
this.overlayService.close(this.overlay);
|
|
@@ -1438,13 +1427,13 @@ class SkyPopoverComponent {
|
|
|
1438
1427
|
this.contentRef = contentRef;
|
|
1439
1428
|
}
|
|
1440
1429
|
}
|
|
1441
|
-
SkyPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1442
|
-
SkyPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1430
|
+
SkyPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverComponent, deps: [{ token: i1.SkyOverlayService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1431
|
+
SkyPopoverComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #templateRef>\n <ng-content></ng-content>\n</ng-template>\n" });
|
|
1432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverComponent, decorators: [{
|
|
1444
1433
|
type: Component,
|
|
1445
1434
|
args: [{
|
|
1446
1435
|
selector: 'sky-popover',
|
|
1447
|
-
templateUrl: './popover.component.html'
|
|
1436
|
+
templateUrl: './popover.component.html',
|
|
1448
1437
|
}]
|
|
1449
1438
|
}], ctorParameters: function () { return [{ type: i1.SkyOverlayService }]; }, propDecorators: { alignment: [{
|
|
1450
1439
|
type: Input
|
|
@@ -1464,7 +1453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
1464
1453
|
type: ViewChild,
|
|
1465
1454
|
args: ['templateRef', {
|
|
1466
1455
|
read: TemplateRef,
|
|
1467
|
-
static: true
|
|
1456
|
+
static: true,
|
|
1468
1457
|
}]
|
|
1469
1458
|
}] } });
|
|
1470
1459
|
|
|
@@ -1541,7 +1530,7 @@ class SkyPopoverDirective {
|
|
|
1541
1530
|
const element = this.elementRef.nativeElement;
|
|
1542
1531
|
this.skyPopoverMessageStream
|
|
1543
1532
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1544
|
-
.subscribe(message => {
|
|
1533
|
+
.subscribe((message) => {
|
|
1545
1534
|
this.handleIncomingMessages(message);
|
|
1546
1535
|
});
|
|
1547
1536
|
fromEvent(element, 'keydown')
|
|
@@ -1643,12 +1632,12 @@ class SkyPopoverDirective {
|
|
|
1643
1632
|
this.skyPopoverMessageStream.next({ type: messageType });
|
|
1644
1633
|
}
|
|
1645
1634
|
}
|
|
1646
|
-
SkyPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1647
|
-
SkyPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
|
1648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1635
|
+
SkyPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1636
|
+
SkyPopoverDirective.ɵdir = i0.ɵɵ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 });
|
|
1637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverDirective, decorators: [{
|
|
1649
1638
|
type: Directive,
|
|
1650
1639
|
args: [{
|
|
1651
|
-
selector: '[skyPopover]'
|
|
1640
|
+
selector: '[skyPopover]',
|
|
1652
1641
|
}]
|
|
1653
1642
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { skyPopover: [{
|
|
1654
1643
|
type: Input
|
|
@@ -1664,8 +1653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
1664
1653
|
|
|
1665
1654
|
class SkyPopoverModule {
|
|
1666
1655
|
}
|
|
1667
|
-
SkyPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1668
|
-
SkyPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1656
|
+
SkyPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1657
|
+
SkyPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverModule, declarations: [SkyPopoverComponent,
|
|
1669
1658
|
SkyPopoverContentComponent,
|
|
1670
1659
|
SkyPopoverDirective], imports: [CommonModule,
|
|
1671
1660
|
SkyAffixModule,
|
|
@@ -1675,21 +1664,21 @@ SkyPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
|
|
|
1675
1664
|
SkyThemeModule], exports: [SkyPopoverComponent,
|
|
1676
1665
|
SkyPopoverContentComponent,
|
|
1677
1666
|
SkyPopoverDirective] });
|
|
1678
|
-
SkyPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1667
|
+
SkyPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverModule, imports: [[
|
|
1679
1668
|
CommonModule,
|
|
1680
1669
|
SkyAffixModule,
|
|
1681
1670
|
SkyIconModule,
|
|
1682
1671
|
SkyOverlayModule,
|
|
1683
1672
|
SkyPopoversResourcesModule,
|
|
1684
|
-
SkyThemeModule
|
|
1673
|
+
SkyThemeModule,
|
|
1685
1674
|
]] });
|
|
1686
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyPopoverModule, decorators: [{
|
|
1687
1676
|
type: NgModule,
|
|
1688
1677
|
args: [{
|
|
1689
1678
|
declarations: [
|
|
1690
1679
|
SkyPopoverComponent,
|
|
1691
1680
|
SkyPopoverContentComponent,
|
|
1692
|
-
SkyPopoverDirective
|
|
1681
|
+
SkyPopoverDirective,
|
|
1693
1682
|
],
|
|
1694
1683
|
imports: [
|
|
1695
1684
|
CommonModule,
|
|
@@ -1697,16 +1686,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
|
|
|
1697
1686
|
SkyIconModule,
|
|
1698
1687
|
SkyOverlayModule,
|
|
1699
1688
|
SkyPopoversResourcesModule,
|
|
1700
|
-
SkyThemeModule
|
|
1689
|
+
SkyThemeModule,
|
|
1701
1690
|
],
|
|
1702
1691
|
exports: [
|
|
1703
1692
|
SkyPopoverComponent,
|
|
1704
1693
|
SkyPopoverContentComponent,
|
|
1705
|
-
SkyPopoverDirective
|
|
1694
|
+
SkyPopoverDirective,
|
|
1706
1695
|
],
|
|
1707
|
-
entryComponents: [
|
|
1708
|
-
SkyPopoverContentComponent
|
|
1709
|
-
]
|
|
1696
|
+
entryComponents: [SkyPopoverContentComponent],
|
|
1710
1697
|
}]
|
|
1711
1698
|
}] });
|
|
1712
1699
|
|