@skyux/popovers 5.7.2 → 6.0.0-beta.2

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.
Files changed (135) hide show
  1. package/documentation.json +2 -2
  2. package/esm2020/index.mjs +23 -0
  3. package/esm2020/lib/modules/dropdown/dropdown-button.component.mjs +14 -0
  4. package/esm2020/lib/modules/dropdown/dropdown-extensions.mjs +14 -0
  5. package/esm2020/lib/modules/dropdown/dropdown-item.component.mjs +69 -0
  6. package/esm2020/lib/modules/dropdown/dropdown-menu.component.mjs +305 -0
  7. package/esm2020/lib/modules/dropdown/dropdown.component.mjs +359 -0
  8. package/esm2020/lib/modules/dropdown/dropdown.module.mjs +60 -0
  9. package/esm2020/lib/modules/dropdown/types/dropdown-horizontal-alignment.mjs +2 -0
  10. package/esm2020/lib/modules/dropdown/types/dropdown-menu-change.mjs +2 -0
  11. package/esm2020/lib/modules/dropdown/types/dropdown-message-type.mjs +40 -0
  12. package/esm2020/lib/modules/dropdown/types/dropdown-message.mjs +2 -0
  13. package/esm2020/lib/modules/dropdown/types/dropdown-trigger-type.mjs +2 -0
  14. package/esm2020/lib/modules/popover/popover-adapter.service.mjs +74 -0
  15. package/esm2020/lib/modules/popover/popover-animation-state.mjs +2 -0
  16. package/esm2020/lib/modules/popover/popover-animation.mjs +19 -0
  17. package/esm2020/lib/modules/popover/popover-content.component.mjs +261 -0
  18. package/esm2020/lib/modules/popover/popover-context.mjs +10 -0
  19. package/esm2020/lib/modules/popover/popover-extensions.mjs +29 -0
  20. package/esm2020/lib/modules/popover/popover.component.mjs +198 -0
  21. package/esm2020/lib/modules/popover/popover.directive.mjs +176 -0
  22. package/esm2020/lib/modules/popover/popover.module.mjs +55 -0
  23. package/esm2020/lib/modules/popover/types/popover-adapter-arrow-coordinates.mjs +2 -0
  24. package/esm2020/lib/modules/popover/types/popover-adapter-elements.mjs +2 -0
  25. package/esm2020/lib/modules/popover/types/popover-alignment.mjs +2 -0
  26. package/esm2020/lib/modules/popover/types/popover-message-type.mjs +24 -0
  27. package/esm2020/lib/modules/popover/types/popover-message.mjs +2 -0
  28. package/esm2020/lib/modules/popover/types/popover-placement.mjs +2 -0
  29. package/esm2020/lib/modules/popover/types/popover-position.mjs +2 -0
  30. package/esm2020/lib/modules/popover/types/popover-trigger.mjs +2 -0
  31. package/esm2020/lib/modules/shared/sky-popovers-resources.module.mjs +47 -0
  32. package/esm2020/skyux-popovers.mjs +5 -0
  33. package/esm2020/testing/dropdown/dropdown-fixture.mjs +133 -0
  34. package/esm2020/testing/dropdown/dropdown-testing.module.mjs +15 -0
  35. package/esm2020/testing/dropdown/popovers-fixture-dropdown-item.mjs +2 -0
  36. package/esm2020/testing/dropdown/popovers-fixture-dropdown-menu.mjs +2 -0
  37. package/esm2020/testing/dropdown/popovers-fixture-dropdown.mjs +2 -0
  38. package/esm2020/testing/popover/popover-fixture.mjs +86 -0
  39. package/esm2020/testing/popover/popover-testing.module.mjs +29 -0
  40. package/esm2020/testing/public-api.mjs +8 -0
  41. package/esm2020/testing/skyux-popovers-testing.mjs +5 -0
  42. package/fesm2015/{skyux-popovers-testing.js → skyux-popovers-testing.mjs} +9 -9
  43. package/fesm2015/skyux-popovers-testing.mjs.map +1 -0
  44. package/fesm2015/skyux-popovers.mjs +1705 -0
  45. package/fesm2015/skyux-popovers.mjs.map +1 -0
  46. package/fesm2020/skyux-popovers-testing.mjs +266 -0
  47. package/fesm2020/skyux-popovers-testing.mjs.map +1 -0
  48. package/{fesm2015/skyux-popovers.js → fesm2020/skyux-popovers.mjs} +53 -88
  49. package/fesm2020/skyux-popovers.mjs.map +1 -0
  50. package/package.json +40 -16
  51. package/testing/package.json +5 -5
  52. package/bundles/skyux-popovers-testing.umd.js +0 -682
  53. package/bundles/skyux-popovers.umd.js +0 -1889
  54. package/esm2015/index.js +0 -23
  55. package/esm2015/index.js.map +0 -1
  56. package/esm2015/lib/modules/dropdown/dropdown-button.component.js +0 -17
  57. package/esm2015/lib/modules/dropdown/dropdown-button.component.js.map +0 -1
  58. package/esm2015/lib/modules/dropdown/dropdown-extensions.js +0 -14
  59. package/esm2015/lib/modules/dropdown/dropdown-extensions.js.map +0 -1
  60. package/esm2015/lib/modules/dropdown/dropdown-item.component.js +0 -75
  61. package/esm2015/lib/modules/dropdown/dropdown-item.component.js.map +0 -1
  62. package/esm2015/lib/modules/dropdown/dropdown-menu.component.js +0 -311
  63. package/esm2015/lib/modules/dropdown/dropdown-menu.component.js.map +0 -1
  64. package/esm2015/lib/modules/dropdown/dropdown.component.js +0 -363
  65. package/esm2015/lib/modules/dropdown/dropdown.component.js.map +0 -1
  66. package/esm2015/lib/modules/dropdown/dropdown.module.js +0 -60
  67. package/esm2015/lib/modules/dropdown/dropdown.module.js.map +0 -1
  68. package/esm2015/lib/modules/dropdown/types/dropdown-horizontal-alignment.js +0 -2
  69. package/esm2015/lib/modules/dropdown/types/dropdown-horizontal-alignment.js.map +0 -1
  70. package/esm2015/lib/modules/dropdown/types/dropdown-menu-change.js +0 -2
  71. package/esm2015/lib/modules/dropdown/types/dropdown-menu-change.js.map +0 -1
  72. package/esm2015/lib/modules/dropdown/types/dropdown-message-type.js +0 -40
  73. package/esm2015/lib/modules/dropdown/types/dropdown-message-type.js.map +0 -1
  74. package/esm2015/lib/modules/dropdown/types/dropdown-message.js +0 -2
  75. package/esm2015/lib/modules/dropdown/types/dropdown-message.js.map +0 -1
  76. package/esm2015/lib/modules/dropdown/types/dropdown-trigger-type.js +0 -2
  77. package/esm2015/lib/modules/dropdown/types/dropdown-trigger-type.js.map +0 -1
  78. package/esm2015/lib/modules/popover/popover-adapter.service.js +0 -74
  79. package/esm2015/lib/modules/popover/popover-adapter.service.js.map +0 -1
  80. package/esm2015/lib/modules/popover/popover-animation-state.js +0 -2
  81. package/esm2015/lib/modules/popover/popover-animation-state.js.map +0 -1
  82. package/esm2015/lib/modules/popover/popover-animation.js +0 -19
  83. package/esm2015/lib/modules/popover/popover-animation.js.map +0 -1
  84. package/esm2015/lib/modules/popover/popover-content.component.js +0 -271
  85. package/esm2015/lib/modules/popover/popover-content.component.js.map +0 -1
  86. package/esm2015/lib/modules/popover/popover-context.js +0 -10
  87. package/esm2015/lib/modules/popover/popover-context.js.map +0 -1
  88. package/esm2015/lib/modules/popover/popover-extensions.js +0 -29
  89. package/esm2015/lib/modules/popover/popover-extensions.js.map +0 -1
  90. package/esm2015/lib/modules/popover/popover.component.js +0 -203
  91. package/esm2015/lib/modules/popover/popover.component.js.map +0 -1
  92. package/esm2015/lib/modules/popover/popover.directive.js +0 -176
  93. package/esm2015/lib/modules/popover/popover.directive.js.map +0 -1
  94. package/esm2015/lib/modules/popover/popover.module.js +0 -56
  95. package/esm2015/lib/modules/popover/popover.module.js.map +0 -1
  96. package/esm2015/lib/modules/popover/types/popover-adapter-arrow-coordinates.js +0 -2
  97. package/esm2015/lib/modules/popover/types/popover-adapter-arrow-coordinates.js.map +0 -1
  98. package/esm2015/lib/modules/popover/types/popover-adapter-elements.js +0 -2
  99. package/esm2015/lib/modules/popover/types/popover-adapter-elements.js.map +0 -1
  100. package/esm2015/lib/modules/popover/types/popover-alignment.js +0 -2
  101. package/esm2015/lib/modules/popover/types/popover-alignment.js.map +0 -1
  102. package/esm2015/lib/modules/popover/types/popover-message-type.js +0 -24
  103. package/esm2015/lib/modules/popover/types/popover-message-type.js.map +0 -1
  104. package/esm2015/lib/modules/popover/types/popover-message.js +0 -2
  105. package/esm2015/lib/modules/popover/types/popover-message.js.map +0 -1
  106. package/esm2015/lib/modules/popover/types/popover-placement.js +0 -2
  107. package/esm2015/lib/modules/popover/types/popover-placement.js.map +0 -1
  108. package/esm2015/lib/modules/popover/types/popover-position.js +0 -2
  109. package/esm2015/lib/modules/popover/types/popover-position.js.map +0 -1
  110. package/esm2015/lib/modules/popover/types/popover-trigger.js +0 -2
  111. package/esm2015/lib/modules/popover/types/popover-trigger.js.map +0 -1
  112. package/esm2015/lib/modules/shared/sky-popovers-resources.module.js +0 -47
  113. package/esm2015/lib/modules/shared/sky-popovers-resources.module.js.map +0 -1
  114. package/esm2015/skyux-popovers.js +0 -5
  115. package/esm2015/skyux-popovers.js.map +0 -1
  116. package/esm2015/testing/dropdown/dropdown-fixture.js +0 -138
  117. package/esm2015/testing/dropdown/dropdown-fixture.js.map +0 -1
  118. package/esm2015/testing/dropdown/dropdown-testing.module.js +0 -15
  119. package/esm2015/testing/dropdown/dropdown-testing.module.js.map +0 -1
  120. package/esm2015/testing/dropdown/popovers-fixture-dropdown-item.js +0 -2
  121. package/esm2015/testing/dropdown/popovers-fixture-dropdown-item.js.map +0 -1
  122. package/esm2015/testing/dropdown/popovers-fixture-dropdown-menu.js +0 -2
  123. package/esm2015/testing/dropdown/popovers-fixture-dropdown-menu.js.map +0 -1
  124. package/esm2015/testing/dropdown/popovers-fixture-dropdown.js +0 -2
  125. package/esm2015/testing/dropdown/popovers-fixture-dropdown.js.map +0 -1
  126. package/esm2015/testing/popover/popover-fixture.js +0 -86
  127. package/esm2015/testing/popover/popover-fixture.js.map +0 -1
  128. package/esm2015/testing/popover/popover-testing.module.js +0 -29
  129. package/esm2015/testing/popover/popover-testing.module.js.map +0 -1
  130. package/esm2015/testing/public-api.js +0 -8
  131. package/esm2015/testing/public-api.js.map +0 -1
  132. package/esm2015/testing/skyux-popovers-testing.js +0 -5
  133. package/esm2015/testing/skyux-popovers-testing.js.map +0 -1
  134. package/fesm2015/skyux-popovers-testing.js.map +0 -1
  135. package/fesm2015/skyux-popovers.js.map +0 -1
@@ -1,1889 +0,0 @@
1
- (function (global, factory) {
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
- 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
- (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';
6
-
7
- function _interopNamespace(e) {
8
- if (e && e.__esModule) return e;
9
- var n = Object.create(null);
10
- if (e) {
11
- Object.keys(e).forEach(function (k) {
12
- if (k !== 'default') {
13
- var d = Object.getOwnPropertyDescriptor(e, k);
14
- Object.defineProperty(n, k, d.get ? d : {
15
- enumerable: true,
16
- get: function () { return e[k]; }
17
- });
18
- }
19
- });
20
- }
21
- n["default"] = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
26
- var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
27
- var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
28
- var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
29
- var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
30
- var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
31
-
32
- /**
33
- * Specifies the type of message to send.
34
- */
35
- exports.SkyDropdownMessageType = void 0;
36
- (function (SkyDropdownMessageType) {
37
- /**
38
- * Opens the dropdown menu.
39
- */
40
- SkyDropdownMessageType[SkyDropdownMessageType["Open"] = 0] = "Open";
41
- /**
42
- * Closes the dropdown menu.
43
- */
44
- SkyDropdownMessageType[SkyDropdownMessageType["Close"] = 1] = "Close";
45
- /**
46
- * Puts focus on the dropdown button.
47
- */
48
- SkyDropdownMessageType[SkyDropdownMessageType["FocusTriggerButton"] = 2] = "FocusTriggerButton";
49
- /**
50
- * Puts focus on the next item in the dropdown menu.
51
- */
52
- SkyDropdownMessageType[SkyDropdownMessageType["FocusNextItem"] = 3] = "FocusNextItem";
53
- /**
54
- * Puts focus on the previous item in the dropdown menu.
55
- */
56
- SkyDropdownMessageType[SkyDropdownMessageType["FocusPreviousItem"] = 4] = "FocusPreviousItem";
57
- /**
58
- * Repositions the dropdown menu next to the dropdown button. This is useful for when the
59
- * dropdown menu's width and height change while it is open.
60
- */
61
- SkyDropdownMessageType[SkyDropdownMessageType["Reposition"] = 5] = "Reposition";
62
- /**
63
- * Puts focus on the first item in the dropdown menu.
64
- */
65
- SkyDropdownMessageType[SkyDropdownMessageType["FocusFirstItem"] = 6] = "FocusFirstItem";
66
- /**
67
- * Puts focus on the last item in the dropdown menu.
68
- */
69
- SkyDropdownMessageType[SkyDropdownMessageType["FocusLastItem"] = 7] = "FocusLastItem";
70
- })(exports.SkyDropdownMessageType || (exports.SkyDropdownMessageType = {}));
71
-
72
- /**
73
- * NOTICE: DO NOT MODIFY THIS FILE!
74
- * The contents of this file were automatically generated by
75
- * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-popovers' schematic.
76
- * To update this file, simply rerun the command.
77
- */
78
- var RESOURCES = {
79
- 'EN-US': {
80
- skyux_dropdown_context_menu_default_label: { message: 'Context menu' },
81
- },
82
- };
83
- var SkyPopoversResourcesProvider = /** @class */ (function () {
84
- function SkyPopoversResourcesProvider() {
85
- }
86
- SkyPopoversResourcesProvider.prototype.getString = function (localeInfo, name) {
87
- return i5.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
88
- };
89
- return SkyPopoversResourcesProvider;
90
- }());
91
- /**
92
- * Import into any component library module that needs to use resource strings.
93
- */
94
- var SkyPopoversResourcesModule = /** @class */ (function () {
95
- function SkyPopoversResourcesModule() {
96
- }
97
- return SkyPopoversResourcesModule;
98
- }());
99
- SkyPopoversResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoversResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
100
- SkyPopoversResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoversResourcesModule, exports: [i5.SkyI18nModule] });
101
- SkyPopoversResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoversResourcesModule, providers: [
102
- {
103
- provide: i5.SKY_LIB_RESOURCES_PROVIDERS,
104
- useClass: SkyPopoversResourcesProvider,
105
- multi: true,
106
- },
107
- ], imports: [i5.SkyI18nModule] });
108
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoversResourcesModule, decorators: [{
109
- type: i0.NgModule,
110
- args: [{
111
- exports: [i5.SkyI18nModule],
112
- providers: [
113
- {
114
- provide: i5.SKY_LIB_RESOURCES_PROVIDERS,
115
- useClass: SkyPopoversResourcesProvider,
116
- multi: true,
117
- },
118
- ],
119
- }]
120
- }] });
121
-
122
- /**
123
- * Specifies the button for the dropdown menu.
124
- */
125
- var SkyDropdownButtonComponent = /** @class */ (function () {
126
- function SkyDropdownButtonComponent() {
127
- }
128
- return SkyDropdownButtonComponent;
129
- }());
130
- SkyDropdownButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
131
- SkyDropdownButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
132
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownButtonComponent, decorators: [{
133
- type: i0.Component,
134
- args: [{
135
- selector: 'sky-dropdown-button',
136
- template: "<ng-content></ng-content>\n",
137
- }]
138
- }] });
139
-
140
- /**
141
- * Specifies the items to display on the dropdown menu.
142
- */
143
- var SkyDropdownItemComponent = /** @class */ (function () {
144
- function SkyDropdownItemComponent(elementRef, changeDetector, renderer) {
145
- this.elementRef = elementRef;
146
- this.changeDetector = changeDetector;
147
- this.renderer = renderer;
148
- this.isActive = false;
149
- this.isDisabled = false;
150
- }
151
- Object.defineProperty(SkyDropdownItemComponent.prototype, "ariaRole", {
152
- get: function () {
153
- return this._ariaRole || 'menuitem';
154
- },
155
- /**
156
- * Specifies an ARIA role for the dropdown menu item
157
- * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
158
- * by indicating how the item functions and what it controls. For information about
159
- * how an ARIA role indicates what an item represents on a web page, see the
160
- * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
161
- * @default "menuitem"
162
- */
163
- set: function (value) {
164
- this._ariaRole = value;
165
- },
166
- enumerable: false,
167
- configurable: true
168
- });
169
- Object.defineProperty(SkyDropdownItemComponent.prototype, "buttonElement", {
170
- get: function () {
171
- return this.elementRef.nativeElement.querySelector('button,a');
172
- },
173
- enumerable: false,
174
- configurable: true
175
- });
176
- SkyDropdownItemComponent.prototype.ngAfterViewInit = function () {
177
- this.isDisabled = !this.isFocusable();
178
- // Make sure anchor elements are tab-able.
179
- var buttonElement = this.buttonElement;
180
- /* istanbul ignore else */
181
- if (buttonElement) {
182
- this.renderer.setAttribute(buttonElement, 'tabIndex', '0');
183
- }
184
- this.changeDetector.detectChanges();
185
- };
186
- SkyDropdownItemComponent.prototype.focusElement = function (enableNativeFocus) {
187
- this.isActive = true;
188
- if (enableNativeFocus) {
189
- this.buttonElement.focus();
190
- }
191
- this.changeDetector.detectChanges();
192
- };
193
- SkyDropdownItemComponent.prototype.isFocusable = function () {
194
- /*tslint:disable no-null-keyword */
195
- var isFocusable = this.buttonElement &&
196
- this.buttonElement.getAttribute('disabled') === null;
197
- /*tslint:enable */
198
- return isFocusable;
199
- };
200
- SkyDropdownItemComponent.prototype.resetState = function () {
201
- this.isActive = false;
202
- this.changeDetector.markForCheck();
203
- };
204
- return SkyDropdownItemComponent;
205
- }());
206
- SkyDropdownItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
207
- SkyDropdownItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 });
208
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownItemComponent, decorators: [{
209
- type: i0.Component,
210
- args: [{
211
- selector: 'sky-dropdown-item',
212
- 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",
213
- 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"],
214
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
215
- encapsulation: i0.ViewEncapsulation.None,
216
- }]
217
- }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ariaRole: [{
218
- type: i0.Input
219
- }] } });
220
-
221
- function parseAffixHorizontalAlignment$1(alignment) {
222
- switch (alignment) {
223
- case 'center':
224
- return 'center';
225
- case 'left':
226
- return 'left';
227
- case 'right':
228
- return 'right';
229
- /* istanbul ignore next */
230
- default:
231
- throw "SkyAffixHorizontalAlignment does not have a matching value for '" + alignment + "'!";
232
- }
233
- }
234
-
235
- /**
236
- * Creates a dropdown menu that displays menu items that users may select.
237
- */
238
- var SkyDropdownComponent = /** @class */ (function () {
239
- function SkyDropdownComponent(changeDetector, affixService, overlayService, themeSvc) {
240
- this.changeDetector = changeDetector;
241
- this.affixService = affixService;
242
- this.overlayService = overlayService;
243
- this.themeSvc = themeSvc;
244
- /**
245
- * Provides an observable to send commands to the dropdown. The commands should respect
246
- * the [[SkyDropdownMessage]] type.
247
- */
248
- this.messageStream = new rxjs.Subject();
249
- this.isMouseEnter = false;
250
- this.isVisible = false;
251
- this.ngUnsubscribe = new rxjs.Subject();
252
- this._isOpen = false;
253
- }
254
- Object.defineProperty(SkyDropdownComponent.prototype, "buttonStyle", {
255
- get: function () {
256
- return this._buttonStyle || 'default';
257
- },
258
- /**
259
- * Specifies a background color for the dropdown button. Available values are `default` and
260
- * `primary`. These values set the background color from the
261
- * [secondary and primary button classes](https://developer.blackbaud.com/skyux/components/button) respectively.
262
- * @default "default"
263
- */
264
- set: function (value) {
265
- this._buttonStyle = value;
266
- },
267
- enumerable: false,
268
- configurable: true
269
- });
270
- Object.defineProperty(SkyDropdownComponent.prototype, "buttonType", {
271
- get: function () {
272
- return this._buttonType || 'select';
273
- },
274
- /**
275
- * Specifies the type of button to render as the dropdown's trigger element. To display a button
276
- * with text and a caret, specify `select` and then enter the button text in a
277
- * `sky-dropdown-button` element. To display a round button with an ellipsis, specify
278
- * `context-menu`. And to display a button with a [Font Awesome icon](http://fontawesome.io/icons/), specify the icon's class name.
279
- * For example, to display the `fa-filter` icon, specify `filter`.
280
- * @default "select"
281
- */
282
- set: function (value) {
283
- this._buttonType = value;
284
- },
285
- enumerable: false,
286
- configurable: true
287
- });
288
- Object.defineProperty(SkyDropdownComponent.prototype, "disabled", {
289
- get: function () {
290
- return this._disabled || false;
291
- },
292
- /**
293
- * Indicates whether to disable the dropdown button.
294
- * @default false
295
- */
296
- set: function (value) {
297
- this._disabled = value;
298
- },
299
- enumerable: false,
300
- configurable: true
301
- });
302
- Object.defineProperty(SkyDropdownComponent.prototype, "dismissOnBlur", {
303
- get: function () {
304
- if (this._dismissOnBlur === undefined) {
305
- return true;
306
- }
307
- return this._dismissOnBlur;
308
- },
309
- /**
310
- * Indicates whether to close the dropdown when users click away from the menu.
311
- * @default true
312
- */
313
- set: function (value) {
314
- this._dismissOnBlur = value;
315
- },
316
- enumerable: false,
317
- configurable: true
318
- });
319
- Object.defineProperty(SkyDropdownComponent.prototype, "horizontalAlignment", {
320
- get: function () {
321
- return this._horizontalAlignment || 'left';
322
- },
323
- /**
324
- * Specifies the horizontal alignment of the dropdown menu in relation to the dropdown button.
325
- * @default "left"
326
- */
327
- set: function (value) {
328
- this._horizontalAlignment = value;
329
- },
330
- enumerable: false,
331
- configurable: true
332
- });
333
- Object.defineProperty(SkyDropdownComponent.prototype, "trigger", {
334
- get: function () {
335
- return this._trigger || 'click';
336
- },
337
- /**
338
- * Specifies how users interact with the dropdown button to expose the dropdown menu.
339
- * We recommend the default `click` value because the `hover` value can pose
340
- * [accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) issues
341
- * for users on touch devices such as phones and tablets.
342
- * @deprecated We recommend against using this property. If you choose to use the deprecated
343
- * `hover` value anyway, we recommend that you not use it in combination with the `title`
344
- * property. (This property will be removed in the next major version release.)
345
- * @default "click"
346
- */
347
- set: function (value) {
348
- this._trigger = value;
349
- },
350
- enumerable: false,
351
- configurable: true
352
- });
353
- Object.defineProperty(SkyDropdownComponent.prototype, "isOpen", {
354
- get: function () {
355
- return this._isOpen || false;
356
- },
357
- set: function (value) {
358
- this._isOpen = value;
359
- this.changeDetector.markForCheck();
360
- },
361
- enumerable: false,
362
- configurable: true
363
- });
364
- Object.defineProperty(SkyDropdownComponent.prototype, "menuContainerElementRef", {
365
- get: function () {
366
- return this._menuContainerElementRef;
367
- },
368
- set: function (value) {
369
- if (value) {
370
- this._menuContainerElementRef = value;
371
- this.destroyAffixer();
372
- this.createAffixer();
373
- this.changeDetector.markForCheck();
374
- }
375
- },
376
- enumerable: false,
377
- configurable: true
378
- });
379
- SkyDropdownComponent.prototype.ngOnInit = function () {
380
- var _this = this;
381
- var _a;
382
- this.addEventListeners();
383
- this.messageStream
384
- .pipe(operators.takeUntil(this.ngUnsubscribe))
385
- .subscribe(function (message) {
386
- _this.handleIncomingMessages(message);
387
- });
388
- // Load proper icons on theme change.
389
- (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
390
- _this.changeDetector.markForCheck();
391
- });
392
- };
393
- SkyDropdownComponent.prototype.ngOnDestroy = function () {
394
- this.destroyAffixer();
395
- this.destroyOverlay();
396
- clearTimeout(this._positionTimeout);
397
- this.ngUnsubscribe.next();
398
- this.ngUnsubscribe.complete();
399
- this.ngUnsubscribe = undefined;
400
- };
401
- SkyDropdownComponent.prototype.addEventListeners = function () {
402
- var _this = this;
403
- var buttonElement = this.triggerButton.nativeElement;
404
- rxjs.fromEvent(buttonElement, 'click')
405
- .pipe(operators.takeUntil(this.ngUnsubscribe))
406
- .subscribe(function () {
407
- if (_this.isOpen) {
408
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
409
- }
410
- else {
411
- _this.sendMessage(exports.SkyDropdownMessageType.Open);
412
- // Wait for dropdown to open, then set focus on first item.
413
- setTimeout(function () {
414
- _this.sendMessage(exports.SkyDropdownMessageType.FocusFirstItem);
415
- });
416
- }
417
- });
418
- rxjs.fromEvent(buttonElement, 'keydown')
419
- .pipe(operators.takeUntil(this.ngUnsubscribe))
420
- .subscribe(function (event) {
421
- var key = event.key.toLowerCase();
422
- /* tslint:disable-next-line:switch-default */
423
- switch (key) {
424
- case 'escape':
425
- /*istanbul ignore else*/
426
- if (_this.isOpen) {
427
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
428
- _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
429
- event.stopPropagation();
430
- }
431
- break;
432
- case 'tab':
433
- if (_this.isOpen && _this.dismissOnBlur) {
434
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
435
- }
436
- break;
437
- case 'arrowup':
438
- case 'up':
439
- if (!_this.isOpen) {
440
- _this.sendMessage(exports.SkyDropdownMessageType.Open);
441
- _this.sendMessage(exports.SkyDropdownMessageType.FocusLastItem);
442
- event.preventDefault();
443
- event.stopPropagation();
444
- }
445
- break;
446
- case 'enter':
447
- case 'arrowdown':
448
- case 'down':
449
- case ' ': // Spacebar.
450
- /*istanbul ignore else*/
451
- if (!_this.isOpen) {
452
- _this.sendMessage(exports.SkyDropdownMessageType.Open);
453
- _this.sendMessage(exports.SkyDropdownMessageType.FocusFirstItem);
454
- event.preventDefault();
455
- event.stopPropagation();
456
- }
457
- break;
458
- }
459
- });
460
- rxjs.fromEvent(buttonElement, 'mouseenter')
461
- .pipe(operators.takeUntil(this.ngUnsubscribe))
462
- .subscribe(function () {
463
- _this.isMouseEnter = true;
464
- if (_this.trigger === 'hover') {
465
- _this.sendMessage(exports.SkyDropdownMessageType.Open);
466
- }
467
- });
468
- rxjs.fromEvent(buttonElement, 'mouseleave')
469
- .pipe(operators.takeUntil(this.ngUnsubscribe))
470
- .subscribe(function () {
471
- _this.isMouseEnter = false;
472
- if (_this.trigger === 'hover') {
473
- // Allow the dropdown menu to set isMouseEnter before checking if the close action
474
- // should be taken.
475
- setTimeout(function () {
476
- if (!_this.isMouseEnter) {
477
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
478
- }
479
- });
480
- }
481
- });
482
- };
483
- SkyDropdownComponent.prototype.createOverlay = function () {
484
- var _this = this;
485
- if (this.overlay) {
486
- return;
487
- }
488
- var overlay = this.overlayService.create({
489
- enableScroll: true,
490
- enablePointerEvents: true,
491
- });
492
- overlay.attachTemplate(this.menuContainerTemplateRef);
493
- overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
494
- if (_this.dismissOnBlur) {
495
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
496
- }
497
- });
498
- this.overlay = overlay;
499
- };
500
- SkyDropdownComponent.prototype.destroyAffixer = function () {
501
- /*istanbul ignore else*/
502
- if (this.affixer) {
503
- this.affixer.destroy();
504
- this.affixer = undefined;
505
- }
506
- };
507
- SkyDropdownComponent.prototype.destroyOverlay = function () {
508
- /*istanbul ignore else*/
509
- if (this.overlay) {
510
- this.overlayService.close(this.overlay);
511
- this.overlay = undefined;
512
- }
513
- };
514
- SkyDropdownComponent.prototype.createAffixer = function () {
515
- var _this = this;
516
- var affixer = this.affixService.createAffixer(this.menuContainerElementRef);
517
- affixer.placementChange
518
- .pipe(operators.takeUntil(this.ngUnsubscribe))
519
- .subscribe(function (change) {
520
- _this.isVisible = change.placement !== null;
521
- _this.changeDetector.markForCheck();
522
- });
523
- this.affixer = affixer;
524
- };
525
- SkyDropdownComponent.prototype.handleIncomingMessages = function (message) {
526
- if (!this.disabled) {
527
- /* tslint:disable-next-line:switch-default */
528
- switch (message.type) {
529
- case exports.SkyDropdownMessageType.Open:
530
- this.isOpen = true;
531
- this.positionDropdownMenu();
532
- break;
533
- case exports.SkyDropdownMessageType.Close:
534
- this.isOpen = false;
535
- this.destroyOverlay();
536
- break;
537
- case exports.SkyDropdownMessageType.Reposition:
538
- // Only reposition the dropdown if it is already open.
539
- /* istanbul ignore else */
540
- if (this.isOpen && this.affixer) {
541
- this.affixer.reaffix();
542
- }
543
- break;
544
- case exports.SkyDropdownMessageType.FocusTriggerButton:
545
- this.triggerButton.nativeElement.focus();
546
- break;
547
- }
548
- }
549
- };
550
- SkyDropdownComponent.prototype.sendMessage = function (type) {
551
- this.messageStream.next({ type: type });
552
- };
553
- SkyDropdownComponent.prototype.positionDropdownMenu = function () {
554
- var _this = this;
555
- this.isVisible = false;
556
- this.createOverlay();
557
- this.changeDetector.markForCheck();
558
- // Explicitly declare the `setTimeout` from the `window` object in order to use the DOM typings
559
- // during a unit test (instead of confusing this with Node's `setTimeout`).
560
- this._positionTimeout = window.setTimeout(function () {
561
- _this.affixer.affixTo(_this.triggerButton.nativeElement, {
562
- autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
563
- enableAutoFit: true,
564
- horizontalAlignment: parseAffixHorizontalAlignment$1(_this.horizontalAlignment),
565
- isSticky: true,
566
- placement: 'below',
567
- });
568
- _this.isVisible = true;
569
- _this.changeDetector.markForCheck();
570
- });
571
- };
572
- return SkyDropdownComponent;
573
- }());
574
- SkyDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
575
- SkyDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 });
576
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownComponent, decorators: [{
577
- type: i0.Component,
578
- args: [{
579
- selector: 'sky-dropdown',
580
- 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",
581
- 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"],
582
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
583
- }]
584
- }], ctorParameters: function () {
585
- return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyOverlayService }, { type: i2__namespace.SkyThemeService, decorators: [{
586
- type: i0.Optional
587
- }] }];
588
- }, propDecorators: { buttonStyle: [{
589
- type: i0.Input
590
- }], buttonType: [{
591
- type: i0.Input
592
- }], disabled: [{
593
- type: i0.Input
594
- }], dismissOnBlur: [{
595
- type: i0.Input
596
- }], label: [{
597
- type: i0.Input
598
- }], horizontalAlignment: [{
599
- type: i0.Input
600
- }], messageStream: [{
601
- type: i0.Input
602
- }], title: [{
603
- type: i0.Input
604
- }], trigger: [{
605
- type: i0.Input
606
- }], menuContainerElementRef: [{
607
- type: i0.ViewChild,
608
- args: ['menuContainerElementRef', {
609
- read: i0.ElementRef,
610
- }]
611
- }], menuContainerTemplateRef: [{
612
- type: i0.ViewChild,
613
- args: ['menuContainerTemplateRef', {
614
- read: i0.TemplateRef,
615
- static: true,
616
- }]
617
- }], triggerButton: [{
618
- type: i0.ViewChild,
619
- args: ['triggerButton', {
620
- read: i0.ElementRef,
621
- static: true,
622
- }]
623
- }] } });
624
-
625
- var nextId = 0;
626
- /**
627
- * Creates a menu that contains dropdown menu items.
628
- *
629
- */
630
- var SkyDropdownMenuComponent = /** @class */ (function () {
631
- function SkyDropdownMenuComponent(changeDetector, elementRef, dropdownComponent) {
632
- this.changeDetector = changeDetector;
633
- this.elementRef = elementRef;
634
- this.dropdownComponent = dropdownComponent;
635
- /**
636
- * Fires when the dropdown menu's active index or selected item changes. This event provides an
637
- * observable to emit changes, and the response is of
638
- * the SkyDropdownMenuChange type.
639
- */
640
- this.menuChanges = new i0.EventEmitter();
641
- this.dropdownMenuId = "sky-dropdown-menu-" + ++nextId;
642
- this.ngUnsubscribe = new rxjs.Subject();
643
- this._menuIndex = 0;
644
- }
645
- Object.defineProperty(SkyDropdownMenuComponent.prototype, "ariaRole", {
646
- get: function () {
647
- return this._ariaRole || 'menu';
648
- },
649
- /**
650
- * Specifies an ARIA role for the dropdown menu
651
- * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
652
- * by indicating how the dropdown menu functions and what it controls. The dropdown button
653
- * inherits this value to set its `aria-haspopup` property. For information
654
- * about how an ARIA role indicates what an item represents on a web page, see the
655
- * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
656
- * @default "menu"
657
- */
658
- set: function (value) {
659
- this._ariaRole = value;
660
- },
661
- enumerable: false,
662
- configurable: true
663
- });
664
- Object.defineProperty(SkyDropdownMenuComponent.prototype, "useNativeFocus", {
665
- get: function () {
666
- if (this._useNativeFocus === undefined) {
667
- return true;
668
- }
669
- return this._useNativeFocus;
670
- },
671
- /**
672
- * Indicates whether to use the browser's native focus function when users navigate through menu
673
- * items with the keyboard. To disable the native focus function, set this property to `false`.
674
- * For example, to let users interact with the dropdown menu but keep the keyboard focus on a
675
- * different element, set this property to `false`.
676
- * @default true
677
- */
678
- set: function (value) {
679
- this._useNativeFocus = value;
680
- },
681
- enumerable: false,
682
- configurable: true
683
- });
684
- Object.defineProperty(SkyDropdownMenuComponent.prototype, "hasFocusableItems", {
685
- get: function () {
686
- var found = this.menuItems.find(function (item) { return item.isFocusable(); });
687
- return found !== undefined;
688
- },
689
- enumerable: false,
690
- configurable: true
691
- });
692
- Object.defineProperty(SkyDropdownMenuComponent.prototype, "menuIndex", {
693
- get: function () {
694
- return this._menuIndex;
695
- },
696
- set: function (value) {
697
- if (value < 0) {
698
- value = this.menuItems.length - 1;
699
- }
700
- if (value >= this.menuItems.length) {
701
- value = 0;
702
- }
703
- this._menuIndex = value;
704
- },
705
- enumerable: false,
706
- configurable: true
707
- });
708
- SkyDropdownMenuComponent.prototype.ngAfterContentInit = function () {
709
- var _this = this;
710
- /* istanbul ignore else */
711
- if (this.dropdownComponent) {
712
- this.dropdownComponent.menuId = this.dropdownMenuId;
713
- this.dropdownComponent.menuAriaRole = this.ariaRole;
714
- this.dropdownComponent.messageStream
715
- .pipe(operators.takeUntil(this.ngUnsubscribe))
716
- .subscribe(function (message) {
717
- /* tslint:disable-next-line:switch-default */
718
- switch (message.type) {
719
- case exports.SkyDropdownMessageType.Open:
720
- case exports.SkyDropdownMessageType.Close:
721
- _this.reset();
722
- break;
723
- case exports.SkyDropdownMessageType.FocusFirstItem:
724
- _this.focusFirstItem();
725
- break;
726
- case exports.SkyDropdownMessageType.FocusNextItem:
727
- _this.focusNextItem();
728
- break;
729
- case exports.SkyDropdownMessageType.FocusPreviousItem:
730
- _this.focusPreviousItem();
731
- break;
732
- case exports.SkyDropdownMessageType.FocusLastItem:
733
- _this.focusLastItem();
734
- break;
735
- }
736
- });
737
- this.menuChanges
738
- .pipe(operators.takeUntil(this.ngUnsubscribe))
739
- .subscribe(function (change) {
740
- // Close the dropdown when a menu item is selected.
741
- if (change.selectedItem) {
742
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
743
- _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
744
- }
745
- if (change.items) {
746
- // Update the popover style and position whenever the number of items changes.
747
- _this.sendMessage(exports.SkyDropdownMessageType.Reposition);
748
- }
749
- });
750
- }
751
- // Reset dropdown whenever the menu items change.
752
- this.menuItems.changes
753
- .pipe(operators.takeUntil(this.ngUnsubscribe))
754
- .subscribe(function (items) {
755
- _this.reset();
756
- _this.menuChanges.emit({
757
- items: items.toArray(),
758
- });
759
- });
760
- this.addEventListeners();
761
- };
762
- SkyDropdownMenuComponent.prototype.ngOnDestroy = function () {
763
- this.ngUnsubscribe.next();
764
- this.ngUnsubscribe.complete();
765
- this.ngUnsubscribe = undefined;
766
- };
767
- SkyDropdownMenuComponent.prototype.focusFirstItem = function () {
768
- if (!this.hasFocusableItems) {
769
- return;
770
- }
771
- this.menuIndex = 0;
772
- var firstItem = this.getItemByIndex(this.menuIndex);
773
- if (firstItem && firstItem.isFocusable()) {
774
- this.focusItem(firstItem);
775
- }
776
- else {
777
- this.focusNextItem();
778
- }
779
- };
780
- SkyDropdownMenuComponent.prototype.focusLastItem = function () {
781
- if (!this.hasFocusableItems) {
782
- return;
783
- }
784
- this.menuIndex = this.menuItems.length - 1;
785
- var lastItem = this.getItemByIndex(this.menuIndex);
786
- if (lastItem && lastItem.isFocusable()) {
787
- this.focusItem(lastItem);
788
- }
789
- else {
790
- this.focusPreviousItem();
791
- }
792
- };
793
- SkyDropdownMenuComponent.prototype.focusPreviousItem = function () {
794
- if (!this.hasFocusableItems) {
795
- return;
796
- }
797
- this.menuIndex--;
798
- var previousItem = this.getItemByIndex(this.menuIndex);
799
- if (previousItem && previousItem.isFocusable()) {
800
- this.focusItem(previousItem);
801
- }
802
- else {
803
- this.focusPreviousItem();
804
- }
805
- };
806
- SkyDropdownMenuComponent.prototype.focusNextItem = function () {
807
- if (!this.hasFocusableItems) {
808
- return;
809
- }
810
- this.menuIndex++;
811
- var nextItem = this.getItemByIndex(this.menuIndex);
812
- if (nextItem && nextItem.isFocusable()) {
813
- this.focusItem(nextItem);
814
- }
815
- else {
816
- this.focusNextItem();
817
- }
818
- };
819
- SkyDropdownMenuComponent.prototype.reset = function () {
820
- this._menuIndex = -1;
821
- this.resetItemsActiveState();
822
- this.changeDetector.markForCheck();
823
- };
824
- SkyDropdownMenuComponent.prototype.resetItemsActiveState = function () {
825
- this.menuItems.forEach(function (item) {
826
- item.resetState();
827
- });
828
- };
829
- SkyDropdownMenuComponent.prototype.focusItem = function (item) {
830
- this.resetItemsActiveState();
831
- item.focusElement(this.useNativeFocus);
832
- this.menuChanges.emit({
833
- activeIndex: this.menuIndex,
834
- });
835
- };
836
- SkyDropdownMenuComponent.prototype.getItemByIndex = function (index) {
837
- return this.menuItems.find(function (item, i) {
838
- return i === index;
839
- });
840
- };
841
- SkyDropdownMenuComponent.prototype.selectItemByEventTarget = function (target) {
842
- var _this = this;
843
- var selectedItem = this.menuItems.find(function (item, i) {
844
- var found = item.elementRef.nativeElement.contains(target);
845
- if (found) {
846
- _this.menuIndex = i;
847
- _this.menuChanges.next({
848
- activeIndex: _this.menuIndex,
849
- });
850
- }
851
- return found;
852
- });
853
- /* istanbul ignore else */
854
- if (selectedItem) {
855
- this.menuChanges.next({
856
- selectedItem: selectedItem,
857
- });
858
- }
859
- };
860
- SkyDropdownMenuComponent.prototype.sendMessage = function (type) {
861
- this.dropdownComponent.messageStream.next({ type: type });
862
- };
863
- SkyDropdownMenuComponent.prototype.addEventListeners = function () {
864
- var _this = this;
865
- var dropdownMenuElement = this.elementRef.nativeElement;
866
- rxjs.fromEvent(dropdownMenuElement, 'click')
867
- .pipe(operators.takeUntil(this.ngUnsubscribe))
868
- .subscribe(function (event) {
869
- _this.selectItemByEventTarget(event.target);
870
- });
871
- rxjs.fromEvent(dropdownMenuElement, 'keydown')
872
- .pipe(operators.takeUntil(this.ngUnsubscribe))
873
- .subscribe(function (event) {
874
- var key = event.key.toLowerCase();
875
- /*tslint:disable-next-line:switch-default*/
876
- switch (key) {
877
- case 'escape':
878
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
879
- _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
880
- event.stopPropagation();
881
- event.preventDefault();
882
- break;
883
- case 'arrowdown':
884
- case 'down':
885
- _this.focusNextItem();
886
- event.preventDefault();
887
- break;
888
- case 'arrowup':
889
- case 'up':
890
- _this.focusPreviousItem();
891
- event.preventDefault();
892
- break;
893
- case 'tab':
894
- if (_this.dropdownComponent.dismissOnBlur) {
895
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
896
- }
897
- _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
898
- break;
899
- }
900
- });
901
- rxjs.fromEvent(dropdownMenuElement, 'mouseenter')
902
- .pipe(operators.takeUntil(this.ngUnsubscribe))
903
- .subscribe(function () {
904
- _this.dropdownComponent.isMouseEnter = true;
905
- });
906
- rxjs.fromEvent(dropdownMenuElement, 'mouseleave')
907
- .pipe(operators.takeUntil(this.ngUnsubscribe))
908
- .subscribe(function () {
909
- _this.dropdownComponent.isMouseEnter = false;
910
- // Allow the dropdown component to set isMouseEnter before checking if the close action
911
- // should be taken.
912
- setTimeout(function () {
913
- if (_this.dropdownComponent.trigger === 'hover' &&
914
- _this.dropdownComponent.isMouseEnter === false) {
915
- _this.sendMessage(exports.SkyDropdownMessageType.Close);
916
- }
917
- });
918
- });
919
- };
920
- return SkyDropdownMenuComponent;
921
- }());
922
- SkyDropdownMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownMenuComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
923
- SkyDropdownMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 });
924
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownMenuComponent, decorators: [{
925
- type: i0.Component,
926
- args: [{
927
- selector: 'sky-dropdown-menu',
928
- 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",
929
- 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"],
930
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
931
- encapsulation: i0.ViewEncapsulation.None,
932
- }]
933
- }], ctorParameters: function () {
934
- return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: SkyDropdownComponent, decorators: [{
935
- type: i0.Optional
936
- }] }];
937
- }, propDecorators: { ariaLabelledBy: [{
938
- type: i0.Input
939
- }], ariaRole: [{
940
- type: i0.Input
941
- }], useNativeFocus: [{
942
- type: i0.Input
943
- }], menuChanges: [{
944
- type: i0.Output
945
- }], menuItems: [{
946
- type: i0.ContentChildren,
947
- args: [SkyDropdownItemComponent, { descendants: true }]
948
- }] } });
949
-
950
- var SkyDropdownModule = /** @class */ (function () {
951
- function SkyDropdownModule() {
952
- }
953
- return SkyDropdownModule;
954
- }());
955
- SkyDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
956
- SkyDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, declarations: [SkyDropdownButtonComponent,
957
- SkyDropdownComponent,
958
- SkyDropdownItemComponent,
959
- SkyDropdownMenuComponent], imports: [i4.CommonModule,
960
- i1.SkyAffixModule,
961
- i3.SkyIconModule,
962
- i1.SkyOverlayModule,
963
- SkyPopoversResourcesModule,
964
- i2.SkyThemeModule], exports: [SkyDropdownButtonComponent,
965
- SkyDropdownComponent,
966
- SkyDropdownItemComponent,
967
- SkyDropdownMenuComponent] });
968
- SkyDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, imports: [[
969
- i4.CommonModule,
970
- i1.SkyAffixModule,
971
- i3.SkyIconModule,
972
- i1.SkyOverlayModule,
973
- SkyPopoversResourcesModule,
974
- i2.SkyThemeModule,
975
- ]] });
976
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, decorators: [{
977
- type: i0.NgModule,
978
- args: [{
979
- declarations: [
980
- SkyDropdownButtonComponent,
981
- SkyDropdownComponent,
982
- SkyDropdownItemComponent,
983
- SkyDropdownMenuComponent,
984
- ],
985
- imports: [
986
- i4.CommonModule,
987
- i1.SkyAffixModule,
988
- i3.SkyIconModule,
989
- i1.SkyOverlayModule,
990
- SkyPopoversResourcesModule,
991
- i2.SkyThemeModule,
992
- ],
993
- exports: [
994
- SkyDropdownButtonComponent,
995
- SkyDropdownComponent,
996
- SkyDropdownItemComponent,
997
- SkyDropdownMenuComponent,
998
- ],
999
- }]
1000
- }] });
1001
-
1002
- /**
1003
- * @internal
1004
- */
1005
- var SkyPopoverAdapterService = /** @class */ (function () {
1006
- function SkyPopoverAdapterService() {
1007
- }
1008
- SkyPopoverAdapterService.prototype.getArrowCoordinates = function (elements, placement, themeName) {
1009
- var callerRect = elements.caller.nativeElement.getBoundingClientRect();
1010
- var popoverRect = elements.popover.nativeElement.getBoundingClientRect();
1011
- var arrowRect = elements.popoverArrow.nativeElement.getBoundingClientRect();
1012
- var pixelTolerance = 20;
1013
- var top;
1014
- var left;
1015
- if (placement === 'above' || placement === 'below') {
1016
- left = callerRect.left + callerRect.width * 0.5;
1017
- // Make sure the arrow never detaches from the popover.
1018
- if (left - pixelTolerance < popoverRect.left) {
1019
- left = popoverRect.left + pixelTolerance;
1020
- }
1021
- else if (left + pixelTolerance > popoverRect.right) {
1022
- left = popoverRect.right - pixelTolerance;
1023
- }
1024
- if (placement === 'above') {
1025
- if (themeName !== 'modern') {
1026
- top = callerRect.top - arrowRect.height;
1027
- }
1028
- else {
1029
- top = callerRect.top - arrowRect.height + 5;
1030
- }
1031
- }
1032
- else {
1033
- if (themeName !== 'modern') {
1034
- top = callerRect.bottom;
1035
- }
1036
- else {
1037
- top = callerRect.bottom + 4;
1038
- }
1039
- }
1040
- }
1041
- else {
1042
- top = callerRect.top + callerRect.height * 0.5;
1043
- // Make sure the arrow never detaches from the popover.
1044
- if (top - pixelTolerance < popoverRect.top) {
1045
- top = popoverRect.top + pixelTolerance;
1046
- }
1047
- else if (top + pixelTolerance > popoverRect.bottom) {
1048
- top = popoverRect.bottom - pixelTolerance;
1049
- }
1050
- if (placement === 'left') {
1051
- if (themeName !== 'modern') {
1052
- left = callerRect.left - arrowRect.width;
1053
- }
1054
- else {
1055
- left = callerRect.left - arrowRect.width + 5;
1056
- }
1057
- }
1058
- else {
1059
- if (themeName !== 'modern') {
1060
- left = callerRect.right;
1061
- }
1062
- else {
1063
- left = callerRect.right + 4;
1064
- }
1065
- }
1066
- }
1067
- return { top: top, left: left };
1068
- };
1069
- return SkyPopoverAdapterService;
1070
- }());
1071
- SkyPopoverAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
1072
- SkyPopoverAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService });
1073
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService, decorators: [{
1074
- type: i0.Injectable
1075
- }] });
1076
-
1077
- /**
1078
- * @internal
1079
- */
1080
- var skyPopoverAnimation = animations.trigger('skyPopoverAnimation', [
1081
- animations.state('void', animations.style({
1082
- opacity: 0,
1083
- })),
1084
- animations.state('open', animations.style({
1085
- opacity: 1,
1086
- })),
1087
- animations.state('closed', animations.style({
1088
- opacity: 0,
1089
- })),
1090
- animations.transition('void => *', [animations.animate('250ms')]),
1091
- animations.transition('open => closed', [animations.animate('150ms')]),
1092
- animations.transition('closed => open', [animations.animate('150ms')]),
1093
- ]);
1094
-
1095
- function parseAffixPlacement(placement) {
1096
- switch (placement) {
1097
- case 'above':
1098
- return 'above';
1099
- case 'below':
1100
- return 'below';
1101
- case 'right':
1102
- return 'right';
1103
- case 'left':
1104
- return 'left';
1105
- /* istanbul ignore next */
1106
- default:
1107
- throw "SkyAffixPlacement does not have a matching value for '" + placement + "'!";
1108
- }
1109
- }
1110
- function parseAffixHorizontalAlignment(alignment) {
1111
- switch (alignment) {
1112
- case 'center':
1113
- return 'center';
1114
- case 'left':
1115
- return 'left';
1116
- case 'right':
1117
- return 'right';
1118
- /* istanbul ignore next */
1119
- default:
1120
- throw "SkyAffixHorizontalAlignment does not have a matching value for '" + alignment + "'!";
1121
- }
1122
- }
1123
-
1124
- /**
1125
- * @dynamic
1126
- * @internal
1127
- */
1128
- var SkyPopoverContext = /** @class */ (function () {
1129
- function SkyPopoverContext(args) {
1130
- this.contentTemplateRef = args.contentTemplateRef;
1131
- }
1132
- return SkyPopoverContext;
1133
- }());
1134
-
1135
- /**
1136
- * @internal
1137
- */
1138
- var SkyPopoverContentComponent = /** @class */ (function () {
1139
- function SkyPopoverContentComponent(changeDetector, elementRef, affixService, coreAdapterService, adapterService, context, themeSvc) {
1140
- this.changeDetector = changeDetector;
1141
- this.elementRef = elementRef;
1142
- this.affixService = affixService;
1143
- this.coreAdapterService = coreAdapterService;
1144
- this.adapterService = adapterService;
1145
- this.context = context;
1146
- this.themeSvc = themeSvc;
1147
- this.dismissOnBlur = true;
1148
- this.enableAnimations = true;
1149
- this.isOpen = false;
1150
- this.popoverType = 'info';
1151
- this.ngUnsubscribe = new rxjs.Subject();
1152
- this._closed = new rxjs.Subject();
1153
- this._isMouseEnter = new rxjs.Subject();
1154
- this._opened = new rxjs.Subject();
1155
- }
1156
- Object.defineProperty(SkyPopoverContentComponent.prototype, "animationState", {
1157
- get: function () {
1158
- return this.isOpen ? 'open' : 'closed';
1159
- },
1160
- enumerable: false,
1161
- configurable: true
1162
- });
1163
- Object.defineProperty(SkyPopoverContentComponent.prototype, "closed", {
1164
- get: function () {
1165
- return this._closed.asObservable();
1166
- },
1167
- enumerable: false,
1168
- configurable: true
1169
- });
1170
- Object.defineProperty(SkyPopoverContentComponent.prototype, "opened", {
1171
- get: function () {
1172
- return this._opened.asObservable();
1173
- },
1174
- enumerable: false,
1175
- configurable: true
1176
- });
1177
- Object.defineProperty(SkyPopoverContentComponent.prototype, "isMouseEnter", {
1178
- get: function () {
1179
- return this._isMouseEnter.asObservable();
1180
- },
1181
- enumerable: false,
1182
- configurable: true
1183
- });
1184
- SkyPopoverContentComponent.prototype.ngOnInit = function () {
1185
- var _this = this;
1186
- var _a;
1187
- /*istanbul ignore next*/
1188
- this.contentTarget.createEmbeddedView((_a = this.context) === null || _a === void 0 ? void 0 : _a.contentTemplateRef);
1189
- this.addEventListeners();
1190
- /*istanbul ignore else*/
1191
- if (this.themeSvc) {
1192
- this.themeSvc.settingsChange
1193
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1194
- .subscribe(function (themeSettings) {
1195
- var _a, _b;
1196
- /*istanbul ignore next*/
1197
- _this.themeName = (_b = (_a = themeSettings.currentSettings) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.name;
1198
- });
1199
- }
1200
- };
1201
- SkyPopoverContentComponent.prototype.ngOnDestroy = function () {
1202
- this.ngUnsubscribe.next();
1203
- this.ngUnsubscribe.complete();
1204
- this._closed.complete();
1205
- this._isMouseEnter.complete();
1206
- this._opened.complete();
1207
- /* istanbul ignore else */
1208
- if (this.affixer) {
1209
- this.affixer.destroy();
1210
- }
1211
- this._closed =
1212
- this._isMouseEnter =
1213
- this._opened =
1214
- this.affixer =
1215
- this.ngUnsubscribe =
1216
- undefined;
1217
- };
1218
- SkyPopoverContentComponent.prototype.onAnimationEvent = function (event) {
1219
- var _a, _b;
1220
- if (event.fromState === 'void') {
1221
- return;
1222
- }
1223
- if (event.phaseName === 'done') {
1224
- if (event.toState === 'open') {
1225
- /*istanbul ignore next*/
1226
- (_a = this._opened) === null || _a === void 0 ? void 0 : _a.next();
1227
- }
1228
- else {
1229
- /*istanbul ignore next*/
1230
- (_b = this._closed) === null || _b === void 0 ? void 0 : _b.next();
1231
- }
1232
- }
1233
- };
1234
- SkyPopoverContentComponent.prototype.open = function (caller, config) {
1235
- var _this = this;
1236
- this.caller = caller;
1237
- this.dismissOnBlur = config.dismissOnBlur;
1238
- this.enableAnimations = config.enableAnimations;
1239
- this.horizontalAlignment = config.horizontalAlignment;
1240
- this.placement = config.placement;
1241
- this.popoverTitle = config.popoverTitle;
1242
- if (config.popoverType) {
1243
- this.popoverType = config.popoverType;
1244
- }
1245
- this.changeDetector.markForCheck();
1246
- // Indicates if the popover should be displayed statically.
1247
- // Please note: This feature is internal-only and used by the visual tests to capture multiple
1248
- // states simultaneously without the overhead of event listeners.
1249
- /* istanbul ignore if */
1250
- if (config.isStatic) {
1251
- this.isOpen = true;
1252
- this.changeDetector.markForCheck();
1253
- return;
1254
- }
1255
- // Let the styles render before gauging the affix dimensions.
1256
- setTimeout(function () {
1257
- var _a;
1258
- /*istanbul ignore next*/
1259
- if (!((_a = _this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
1260
- !_this.ngUnsubscribe ||
1261
- _this.ngUnsubscribe.isStopped) {
1262
- return;
1263
- }
1264
- if (!_this.affixer) {
1265
- _this.setupAffixer();
1266
- }
1267
- var affixOptions = {
1268
- autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
1269
- enableAutoFit: true,
1270
- horizontalAlignment: parseAffixHorizontalAlignment(_this.horizontalAlignment),
1271
- isSticky: true,
1272
- placement: parseAffixPlacement(_this.placement),
1273
- };
1274
- // Ensure that we are positioning the vertical alginment correctly. These
1275
- // are the default alignments for all popovers but ensure that we are future proof here.
1276
- if (affixOptions.placement === 'left' ||
1277
- affixOptions.placement === 'right') {
1278
- affixOptions.verticalAlignment = 'middle';
1279
- }
1280
- else if (affixOptions.placement === 'above') {
1281
- affixOptions.verticalAlignment = 'bottom';
1282
- }
1283
- else {
1284
- affixOptions.verticalAlignment = 'top';
1285
- }
1286
- _this.affixer.affixTo(_this.caller.nativeElement, affixOptions);
1287
- _this.updateArrowOffset();
1288
- _this.isOpen = true;
1289
- _this.changeDetector.markForCheck();
1290
- });
1291
- };
1292
- SkyPopoverContentComponent.prototype.close = function () {
1293
- this.isOpen = false;
1294
- this.changeDetector.markForCheck();
1295
- };
1296
- SkyPopoverContentComponent.prototype.applyFocus = function () {
1297
- if (this.isOpen) {
1298
- this.coreAdapterService.getFocusableChildrenAndApplyFocus(this.popoverRef, '.sky-popover', true);
1299
- }
1300
- };
1301
- SkyPopoverContentComponent.prototype.setupAffixer = function () {
1302
- var _this = this;
1303
- var affixer = this.affixService.createAffixer(this.popoverRef);
1304
- affixer.offsetChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
1305
- _this.updateArrowOffset();
1306
- _this.changeDetector.markForCheck();
1307
- });
1308
- affixer.overflowScroll.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
1309
- _this.updateArrowOffset();
1310
- _this.changeDetector.markForCheck();
1311
- });
1312
- affixer.placementChange
1313
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1314
- .subscribe(function (change) {
1315
- _this.placement = change.placement;
1316
- _this.changeDetector.markForCheck();
1317
- });
1318
- this.affixer = affixer;
1319
- };
1320
- SkyPopoverContentComponent.prototype.updateArrowOffset = function () {
1321
- var _c = this.adapterService.getArrowCoordinates({
1322
- caller: this.caller,
1323
- popover: this.popoverRef,
1324
- popoverArrow: this.arrowRef,
1325
- }, this.placement, this.themeName), top = _c.top, left = _c.left;
1326
- this.arrowTop = top;
1327
- this.arrowLeft = left;
1328
- };
1329
- SkyPopoverContentComponent.prototype.isFocusLeavingElement = function (event) {
1330
- var focusableItems = this.coreAdapterService.getFocusableChildren(this.elementRef.nativeElement);
1331
- var isFirstItem = focusableItems[0] === event.target && event.shiftKey;
1332
- var isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
1333
- !event.shiftKey;
1334
- return focusableItems.length === 0 || isFirstItem || isLastItem;
1335
- };
1336
- SkyPopoverContentComponent.prototype.addEventListeners = function () {
1337
- var _this = this;
1338
- var hostElement = this.elementRef.nativeElement;
1339
- rxjs.fromEvent(hostElement, 'mouseenter')
1340
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1341
- .subscribe(function () { return _this._isMouseEnter.next(true); });
1342
- rxjs.fromEvent(hostElement, 'mouseleave')
1343
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1344
- .subscribe(function () { return _this._isMouseEnter.next(false); });
1345
- rxjs.fromEvent(hostElement, 'keydown')
1346
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1347
- .subscribe(function (event) {
1348
- var key = event.key.toLowerCase();
1349
- /* tslint:disable-next-line:switch-default */
1350
- switch (key) {
1351
- case 'escape':
1352
- _this.close();
1353
- _this.caller.nativeElement.focus();
1354
- event.preventDefault();
1355
- event.stopPropagation();
1356
- break;
1357
- // Since the popover now lives in an overlay at the bottom of the document body, we need
1358
- // to handle the tab key ourselves. Otherwise, focus would be moved to the browser's
1359
- // search bar.
1360
- case 'tab':
1361
- if (!_this.dismissOnBlur) {
1362
- return;
1363
- }
1364
- /*istanbul ignore else*/
1365
- if (_this.isFocusLeavingElement(event)) {
1366
- _this.close();
1367
- _this.caller.nativeElement.focus();
1368
- event.preventDefault();
1369
- event.stopPropagation();
1370
- }
1371
- break;
1372
- }
1373
- });
1374
- };
1375
- return SkyPopoverContentComponent;
1376
- }());
1377
- SkyPopoverContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
1378
- SkyPopoverContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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] });
1379
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverContentComponent, decorators: [{
1380
- type: i0.Component,
1381
- args: [{
1382
- selector: 'sky-popover-content',
1383
- 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",
1384
- 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"],
1385
- animations: [skyPopoverAnimation],
1386
- providers: [SkyPopoverAdapterService],
1387
- }]
1388
- }], ctorParameters: function () {
1389
- return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyCoreAdapterService }, { type: SkyPopoverAdapterService }, { type: SkyPopoverContext, decorators: [{
1390
- type: i0.Optional
1391
- }] }, { type: i2__namespace.SkyThemeService, decorators: [{
1392
- type: i0.Optional
1393
- }] }];
1394
- }, propDecorators: { arrowRef: [{
1395
- type: i0.ViewChild,
1396
- args: ['arrowRef', {
1397
- read: i0.ElementRef,
1398
- static: true,
1399
- }]
1400
- }], popoverRef: [{
1401
- type: i0.ViewChild,
1402
- args: ['popoverRef', {
1403
- read: i0.ElementRef,
1404
- static: true,
1405
- }]
1406
- }], contentTarget: [{
1407
- type: i0.ViewChild,
1408
- args: ['contentTarget', {
1409
- read: i0.ViewContainerRef,
1410
- static: true,
1411
- }]
1412
- }] } });
1413
-
1414
- var SkyPopoverComponent = /** @class */ (function () {
1415
- function SkyPopoverComponent(overlayService) {
1416
- this.overlayService = overlayService;
1417
- /**
1418
- * Fires when users close the popover.
1419
- */
1420
- this.popoverClosed = new i0.EventEmitter();
1421
- /**
1422
- * Fires when users open the popover.
1423
- */
1424
- this.popoverOpened = new i0.EventEmitter();
1425
- /**
1426
- * Indicates that the popover is in the process of being opened or closed.
1427
- * @internal
1428
- */
1429
- this.isActive = false;
1430
- /**
1431
- * Used by unit tests to disable animations since the component is injected at the bottom of the
1432
- * document body.
1433
- * @internal
1434
- */
1435
- this.enableAnimations = true;
1436
- this.isMouseEnter = false;
1437
- this.isMarkedForCloseOnMouseLeave = false;
1438
- this.ngUnsubscribe = new rxjs.Subject();
1439
- }
1440
- Object.defineProperty(SkyPopoverComponent.prototype, "alignment", {
1441
- get: function () {
1442
- return this._alignment || 'center';
1443
- },
1444
- /**
1445
- * Specifies the horizontal alignment of the popover in relation to the trigger element.
1446
- * The `skyPopoverAlignment` property on the popover directive overwrites this property.
1447
- * Options include:`"center"`, `"right"`, and `'"left"`.
1448
- * @default "center"
1449
- */
1450
- set: function (value) {
1451
- this._alignment = value;
1452
- },
1453
- enumerable: false,
1454
- configurable: true
1455
- });
1456
- Object.defineProperty(SkyPopoverComponent.prototype, "dismissOnBlur", {
1457
- get: function () {
1458
- if (this._dismissOnBlur === undefined) {
1459
- return true;
1460
- }
1461
- return this._dismissOnBlur;
1462
- },
1463
- /**
1464
- * Indicates whether to close the popover when it loses focus.
1465
- * To require users to click a trigger button to close the popover, set this input to false.
1466
- * @default true
1467
- */
1468
- set: function (value) {
1469
- this._dismissOnBlur = value;
1470
- },
1471
- enumerable: false,
1472
- configurable: true
1473
- });
1474
- Object.defineProperty(SkyPopoverComponent.prototype, "placement", {
1475
- get: function () {
1476
- return this._placement || 'above';
1477
- },
1478
- /**
1479
- * Specifies the placement of the popover in relation to the trigger element.
1480
- * The `skyPopoverPlacement` property on the popover directive overwrites this property.
1481
- * Options include:`"above"`, `"below"`, `"right"`, and `"left"`.
1482
- * @default "above"
1483
- */
1484
- set: function (value) {
1485
- this._placement = value;
1486
- },
1487
- enumerable: false,
1488
- configurable: true
1489
- });
1490
- SkyPopoverComponent.prototype.ngOnDestroy = function () {
1491
- this.ngUnsubscribe.next();
1492
- this.ngUnsubscribe.complete();
1493
- this.ngUnsubscribe = undefined;
1494
- if (this.overlay) {
1495
- this.overlayService.close(this.overlay);
1496
- this.overlay = undefined;
1497
- }
1498
- };
1499
- /**
1500
- * Positions the popover next to a given caller element.
1501
- * @param caller The element that opened the popover.
1502
- * @param placement The placement of the popover.
1503
- * @param alignment The horizontal alignment of the popover.
1504
- * @internal
1505
- */
1506
- SkyPopoverComponent.prototype.positionNextTo = function (caller, placement, alignment) {
1507
- if (!this.overlay) {
1508
- this.setupOverlay();
1509
- }
1510
- this.placement = placement;
1511
- this.alignment = alignment;
1512
- this.isActive = true;
1513
- this.contentRef.open(caller, {
1514
- dismissOnBlur: this.dismissOnBlur,
1515
- enableAnimations: this.enableAnimations,
1516
- horizontalAlignment: this.alignment,
1517
- isStatic: false,
1518
- placement: this.placement,
1519
- popoverTitle: this.popoverTitle,
1520
- popoverType: this.popoverType,
1521
- });
1522
- };
1523
- /**
1524
- * Closes the popover.
1525
- * @internal
1526
- */
1527
- SkyPopoverComponent.prototype.close = function () {
1528
- var _a;
1529
- /*istanbul ignore next*/
1530
- (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.close();
1531
- };
1532
- /**
1533
- * Brings focus to the popover element if its open.
1534
- * @internal
1535
- */
1536
- SkyPopoverComponent.prototype.applyFocus = function () {
1537
- var _a;
1538
- /*istanbul ignore next*/
1539
- (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.applyFocus();
1540
- };
1541
- /**
1542
- * Adds a flag to the popover to close when the mouse leaves the popover's bounds.
1543
- * @internal
1544
- */
1545
- SkyPopoverComponent.prototype.markForCloseOnMouseLeave = function () {
1546
- this.isMarkedForCloseOnMouseLeave = true;
1547
- };
1548
- SkyPopoverComponent.prototype.setupOverlay = function () {
1549
- var _this = this;
1550
- var overlay = this.overlayService.create({
1551
- enableScroll: true,
1552
- enablePointerEvents: true,
1553
- });
1554
- overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
1555
- if (_this.dismissOnBlur) {
1556
- _this.close();
1557
- }
1558
- });
1559
- var contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
1560
- {
1561
- provide: SkyPopoverContext,
1562
- useValue: new SkyPopoverContext({
1563
- contentTemplateRef: this.templateRef,
1564
- }),
1565
- },
1566
- ]);
1567
- contentRef.opened.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
1568
- _this.popoverOpened.emit(_this);
1569
- });
1570
- contentRef.closed.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
1571
- /*istanbul ignore else*/
1572
- if (_this.isActive) {
1573
- _this.overlayService.close(_this.overlay);
1574
- _this.overlay = undefined;
1575
- _this.isActive = false;
1576
- _this.popoverClosed.emit(_this);
1577
- }
1578
- });
1579
- contentRef.isMouseEnter
1580
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1581
- .subscribe(function (isMouseEnter) {
1582
- _this.isMouseEnter = isMouseEnter;
1583
- if (_this.isMarkedForCloseOnMouseLeave) {
1584
- _this.isMarkedForCloseOnMouseLeave = false;
1585
- _this.close();
1586
- }
1587
- });
1588
- this.overlay = overlay;
1589
- this.contentRef = contentRef;
1590
- };
1591
- return SkyPopoverComponent;
1592
- }());
1593
- SkyPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverComponent, deps: [{ token: i1__namespace.SkyOverlayService }], target: i0__namespace.ɵɵFactoryTarget.Component });
1594
- SkyPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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" });
1595
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverComponent, decorators: [{
1596
- type: i0.Component,
1597
- args: [{
1598
- selector: 'sky-popover',
1599
- template: "<ng-template #templateRef>\n <ng-content></ng-content>\n</ng-template>\n",
1600
- }]
1601
- }], ctorParameters: function () { return [{ type: i1__namespace.SkyOverlayService }]; }, propDecorators: { alignment: [{
1602
- type: i0.Input
1603
- }], dismissOnBlur: [{
1604
- type: i0.Input
1605
- }], placement: [{
1606
- type: i0.Input
1607
- }], popoverTitle: [{
1608
- type: i0.Input
1609
- }], popoverType: [{
1610
- type: i0.Input
1611
- }], popoverClosed: [{
1612
- type: i0.Output
1613
- }], popoverOpened: [{
1614
- type: i0.Output
1615
- }], templateRef: [{
1616
- type: i0.ViewChild,
1617
- args: ['templateRef', {
1618
- read: i0.TemplateRef,
1619
- static: true,
1620
- }]
1621
- }] } });
1622
-
1623
- /**
1624
- * Specifies the type of message to send to the popover component.
1625
- */
1626
- exports.SkyPopoverMessageType = void 0;
1627
- (function (SkyPopoverMessageType) {
1628
- /**
1629
- * Opens the popover.
1630
- */
1631
- SkyPopoverMessageType[SkyPopoverMessageType["Open"] = 0] = "Open";
1632
- /**
1633
- * Closes the popover.
1634
- */
1635
- SkyPopoverMessageType[SkyPopoverMessageType["Close"] = 1] = "Close";
1636
- /**
1637
- * Repositions the popover to the appropriate position.
1638
- * This is useful for when the popover's width and height change while it is open.
1639
- */
1640
- SkyPopoverMessageType[SkyPopoverMessageType["Reposition"] = 2] = "Reposition";
1641
- /**
1642
- * Brings focus to the popover element.
1643
- */
1644
- SkyPopoverMessageType[SkyPopoverMessageType["Focus"] = 3] = "Focus";
1645
- })(exports.SkyPopoverMessageType || (exports.SkyPopoverMessageType = {}));
1646
-
1647
- var SkyPopoverDirective = /** @class */ (function () {
1648
- function SkyPopoverDirective(elementRef) {
1649
- this.elementRef = elementRef;
1650
- /**
1651
- * Provides an observable to send commands to the popover that respect the `SkyPopoverMessage` type.
1652
- */
1653
- this.skyPopoverMessageStream = new rxjs.Subject();
1654
- this.ngUnsubscribe = new rxjs.Subject();
1655
- }
1656
- Object.defineProperty(SkyPopoverDirective.prototype, "skyPopoverTrigger", {
1657
- get: function () {
1658
- return this._trigger || 'click';
1659
- },
1660
- /**
1661
- * Specifies the user action that displays the popover.
1662
- */
1663
- set: function (value) {
1664
- this._trigger = value;
1665
- },
1666
- enumerable: false,
1667
- configurable: true
1668
- });
1669
- SkyPopoverDirective.prototype.ngOnInit = function () {
1670
- this.addEventListeners();
1671
- };
1672
- SkyPopoverDirective.prototype.ngOnDestroy = function () {
1673
- this.removeEventListeners();
1674
- };
1675
- SkyPopoverDirective.prototype.togglePopover = function () {
1676
- if (this.skyPopover.isActive) {
1677
- this.sendMessage(exports.SkyPopoverMessageType.Close);
1678
- return;
1679
- }
1680
- this.sendMessage(exports.SkyPopoverMessageType.Open);
1681
- };
1682
- SkyPopoverDirective.prototype.positionPopover = function () {
1683
- this.skyPopover.positionNextTo(this.elementRef, this.skyPopoverPlacement, this.skyPopoverAlignment);
1684
- };
1685
- SkyPopoverDirective.prototype.closePopover = function () {
1686
- this.skyPopover.close();
1687
- };
1688
- SkyPopoverDirective.prototype.closePopoverOrMarkForClose = function () {
1689
- if (this.skyPopover.isMouseEnter) {
1690
- this.skyPopover.markForCloseOnMouseLeave();
1691
- }
1692
- else {
1693
- this.sendMessage(exports.SkyPopoverMessageType.Close);
1694
- }
1695
- };
1696
- SkyPopoverDirective.prototype.addEventListeners = function () {
1697
- var _this = this;
1698
- var element = this.elementRef.nativeElement;
1699
- this.skyPopoverMessageStream
1700
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1701
- .subscribe(function (message) {
1702
- _this.handleIncomingMessages(message);
1703
- });
1704
- rxjs.fromEvent(element, 'keydown')
1705
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1706
- .subscribe(function (event) {
1707
- if (!_this.skyPopover.isActive) {
1708
- return;
1709
- }
1710
- var key = event.key.toLowerCase();
1711
- /* tslint:disable-next-line:switch-default */
1712
- switch (key) {
1713
- case 'escape':
1714
- _this.sendMessage(exports.SkyPopoverMessageType.Close);
1715
- event.preventDefault();
1716
- event.stopPropagation();
1717
- break;
1718
- case 'tab':
1719
- if (_this.skyPopover.dismissOnBlur) {
1720
- _this.sendMessage(exports.SkyPopoverMessageType.Close);
1721
- }
1722
- break;
1723
- case 'arrowdown':
1724
- case 'arrowleft':
1725
- case 'arrowright':
1726
- case 'arrowup':
1727
- case 'down':
1728
- case 'left':
1729
- case 'right':
1730
- case 'up':
1731
- _this.sendMessage(exports.SkyPopoverMessageType.Focus);
1732
- event.stopPropagation();
1733
- event.preventDefault();
1734
- break;
1735
- }
1736
- });
1737
- rxjs.fromEvent(element, 'click')
1738
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1739
- .subscribe(function () {
1740
- if (_this.skyPopover) {
1741
- _this.togglePopover();
1742
- }
1743
- });
1744
- rxjs.fromEvent(element, 'mouseenter')
1745
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1746
- .subscribe(function () {
1747
- if (_this.skyPopover) {
1748
- _this.skyPopover.isMouseEnter = true;
1749
- if (!_this.skyPopover.isActive &&
1750
- _this.skyPopoverTrigger === 'mouseenter') {
1751
- _this.sendMessage(exports.SkyPopoverMessageType.Open);
1752
- }
1753
- }
1754
- });
1755
- rxjs.fromEvent(element, 'mouseleave')
1756
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1757
- .subscribe(function () {
1758
- if (_this.skyPopover) {
1759
- _this.skyPopover.isMouseEnter = false;
1760
- if (_this.skyPopover.isActive &&
1761
- _this.skyPopoverTrigger === 'mouseenter') {
1762
- // Give the popover a chance to set its isMouseEnter flag before checking to see
1763
- // if it should be closed.
1764
- setTimeout(function () {
1765
- _this.closePopoverOrMarkForClose();
1766
- });
1767
- }
1768
- }
1769
- });
1770
- };
1771
- SkyPopoverDirective.prototype.removeEventListeners = function () {
1772
- this.ngUnsubscribe.next();
1773
- this.ngUnsubscribe.complete();
1774
- this.ngUnsubscribe = undefined;
1775
- };
1776
- SkyPopoverDirective.prototype.handleIncomingMessages = function (message) {
1777
- /* tslint:disable-next-line:switch-default */
1778
- switch (message.type) {
1779
- case exports.SkyPopoverMessageType.Open:
1780
- this.positionPopover();
1781
- break;
1782
- case exports.SkyPopoverMessageType.Close:
1783
- /*istanbul ignore else*/
1784
- if (this.skyPopover.isActive) {
1785
- this.closePopover();
1786
- }
1787
- break;
1788
- case exports.SkyPopoverMessageType.Reposition:
1789
- // Only reposition the popover if it is already open.
1790
- if (this.skyPopover.isActive) {
1791
- this.positionPopover();
1792
- }
1793
- break;
1794
- case exports.SkyPopoverMessageType.Focus:
1795
- this.skyPopover.applyFocus();
1796
- break;
1797
- }
1798
- };
1799
- SkyPopoverDirective.prototype.sendMessage = function (messageType) {
1800
- this.skyPopoverMessageStream.next({ type: messageType });
1801
- };
1802
- return SkyPopoverDirective;
1803
- }());
1804
- SkyPopoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
1805
- SkyPopoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyPopoverDirective, selector: "[skyPopover]", inputs: { skyPopover: "skyPopover", skyPopoverAlignment: "skyPopoverAlignment", skyPopoverMessageStream: "skyPopoverMessageStream", skyPopoverPlacement: "skyPopoverPlacement", skyPopoverTrigger: "skyPopoverTrigger" }, ngImport: i0__namespace });
1806
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverDirective, decorators: [{
1807
- type: i0.Directive,
1808
- args: [{
1809
- selector: '[skyPopover]',
1810
- }]
1811
- }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { skyPopover: [{
1812
- type: i0.Input
1813
- }], skyPopoverAlignment: [{
1814
- type: i0.Input
1815
- }], skyPopoverMessageStream: [{
1816
- type: i0.Input
1817
- }], skyPopoverPlacement: [{
1818
- type: i0.Input
1819
- }], skyPopoverTrigger: [{
1820
- type: i0.Input
1821
- }] } });
1822
-
1823
- var SkyPopoverModule = /** @class */ (function () {
1824
- function SkyPopoverModule() {
1825
- }
1826
- return SkyPopoverModule;
1827
- }());
1828
- SkyPopoverModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
1829
- SkyPopoverModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverModule, declarations: [SkyPopoverComponent,
1830
- SkyPopoverContentComponent,
1831
- SkyPopoverDirective], imports: [i4.CommonModule,
1832
- i1.SkyAffixModule,
1833
- i3.SkyIconModule,
1834
- i1.SkyOverlayModule,
1835
- SkyPopoversResourcesModule,
1836
- i2.SkyThemeModule], exports: [SkyPopoverComponent,
1837
- SkyPopoverContentComponent,
1838
- SkyPopoverDirective] });
1839
- SkyPopoverModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverModule, imports: [[
1840
- i4.CommonModule,
1841
- i1.SkyAffixModule,
1842
- i3.SkyIconModule,
1843
- i1.SkyOverlayModule,
1844
- SkyPopoversResourcesModule,
1845
- i2.SkyThemeModule,
1846
- ]] });
1847
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverModule, decorators: [{
1848
- type: i0.NgModule,
1849
- args: [{
1850
- declarations: [
1851
- SkyPopoverComponent,
1852
- SkyPopoverContentComponent,
1853
- SkyPopoverDirective,
1854
- ],
1855
- imports: [
1856
- i4.CommonModule,
1857
- i1.SkyAffixModule,
1858
- i3.SkyIconModule,
1859
- i1.SkyOverlayModule,
1860
- SkyPopoversResourcesModule,
1861
- i2.SkyThemeModule,
1862
- ],
1863
- exports: [
1864
- SkyPopoverComponent,
1865
- SkyPopoverContentComponent,
1866
- SkyPopoverDirective,
1867
- ],
1868
- entryComponents: [SkyPopoverContentComponent],
1869
- }]
1870
- }] });
1871
-
1872
- /**
1873
- * Generated bundle index. Do not edit.
1874
- */
1875
-
1876
- exports.SkyDropdownModule = SkyDropdownModule;
1877
- exports.SkyPopoverModule = SkyPopoverModule;
1878
- exports["λ1"] = SkyDropdownItemComponent;
1879
- exports["λ2"] = SkyDropdownButtonComponent;
1880
- exports["λ3"] = SkyDropdownComponent;
1881
- exports["λ4"] = SkyDropdownMenuComponent;
1882
- exports["λ5"] = SkyPopoverContentComponent;
1883
- exports["λ6"] = SkyPopoverComponent;
1884
- exports["λ7"] = SkyPopoverDirective;
1885
-
1886
- Object.defineProperty(exports, '__esModule', { value: true });
1887
-
1888
- }));
1889
- //# sourceMappingURL=skyux-popovers.umd.js.map