@skyux/popovers 5.0.2 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/bundles/skyux-popovers-testing.umd.js +8 -8
- package/bundles/skyux-popovers.umd.js +43 -39
- package/documentation.json +241 -44
- package/esm2015/index.js +23 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/dropdown/dropdown-button.component.js +14 -0
- package/esm2015/lib/modules/dropdown/dropdown-button.component.js.map +1 -0
- package/esm2015/lib/modules/dropdown/dropdown-extensions.js +14 -0
- package/esm2015/lib/modules/dropdown/dropdown-extensions.js.map +1 -0
- package/esm2015/lib/modules/dropdown/dropdown-item.component.js +72 -0
- package/esm2015/lib/modules/dropdown/dropdown-item.component.js.map +1 -0
- package/esm2015/lib/modules/dropdown/dropdown-menu.component.js +307 -0
- package/esm2015/lib/modules/dropdown/dropdown-menu.component.js.map +1 -0
- package/esm2015/lib/modules/dropdown/dropdown.component.js +360 -0
- package/esm2015/lib/modules/dropdown/dropdown.component.js.map +1 -0
- package/esm2015/lib/modules/dropdown/dropdown.module.js +60 -0
- package/esm2015/lib/modules/dropdown/dropdown.module.js.map +1 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-horizontal-alignment.js +2 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-horizontal-alignment.js.map +1 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-menu-change.js +2 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-menu-change.js.map +1 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-message-type.js +37 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-message-type.js.map +1 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-message.js +2 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-message.js.map +1 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-trigger-type.js +2 -0
- package/esm2015/lib/modules/dropdown/types/dropdown-trigger-type.js.map +1 -0
- package/esm2015/lib/modules/popover/popover-adapter.service.js +74 -0
- package/esm2015/lib/modules/popover/popover-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/popover/popover-animation-state.js +2 -0
- package/esm2015/lib/modules/popover/popover-animation-state.js.map +1 -0
- package/esm2015/lib/modules/popover/popover-animation.js +19 -0
- package/esm2015/lib/modules/popover/popover-animation.js.map +1 -0
- package/esm2015/lib/modules/popover/popover-content.component.js +268 -0
- package/esm2015/lib/modules/popover/popover-content.component.js.map +1 -0
- package/esm2015/lib/modules/popover/popover-context.js +10 -0
- package/esm2015/lib/modules/popover/popover-context.js.map +1 -0
- package/esm2015/lib/modules/popover/popover-extensions.js +29 -0
- package/esm2015/lib/modules/popover/popover-extensions.js.map +1 -0
- package/esm2015/lib/modules/popover/popover.component.js +203 -0
- package/esm2015/lib/modules/popover/popover.component.js.map +1 -0
- package/esm2015/lib/modules/popover/popover.directive.js +176 -0
- package/esm2015/lib/modules/popover/popover.directive.js.map +1 -0
- package/esm2015/lib/modules/popover/popover.module.js +56 -0
- package/esm2015/lib/modules/popover/popover.module.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-adapter-arrow-coordinates.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-adapter-arrow-coordinates.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-adapter-elements.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-adapter-elements.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-alignment.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-alignment.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-message-type.js +24 -0
- package/esm2015/lib/modules/popover/types/popover-message-type.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-message.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-message.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-placement.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-placement.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-position.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-position.js.map +1 -0
- package/esm2015/lib/modules/popover/types/popover-trigger.js +2 -0
- package/esm2015/lib/modules/popover/types/popover-trigger.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-popovers-resources.module.js +47 -0
- package/esm2015/lib/modules/shared/sky-popovers-resources.module.js.map +1 -0
- package/esm2015/skyux-popovers.js +2 -2
- package/esm2015/skyux-popovers.js.map +1 -0
- package/esm2015/testing/dropdown/dropdown-fixture.js +1 -1
- package/esm2015/testing/dropdown/dropdown-fixture.js.map +1 -0
- package/esm2015/testing/dropdown/dropdown-testing.module.js +5 -5
- package/esm2015/testing/dropdown/dropdown-testing.module.js.map +1 -0
- package/esm2015/testing/dropdown/popovers-fixture-dropdown-item.js +1 -1
- package/esm2015/testing/dropdown/popovers-fixture-dropdown-item.js.map +1 -0
- package/esm2015/testing/dropdown/popovers-fixture-dropdown-menu.js +1 -1
- package/esm2015/testing/dropdown/popovers-fixture-dropdown-menu.js.map +1 -0
- package/esm2015/testing/dropdown/popovers-fixture-dropdown.js +1 -1
- package/esm2015/testing/dropdown/popovers-fixture-dropdown.js.map +1 -0
- package/esm2015/testing/popover/popover-fixture.js +1 -1
- package/esm2015/testing/popover/popover-fixture.js.map +1 -0
- package/esm2015/testing/popover/popover-testing.module.js +5 -5
- package/esm2015/testing/popover/popover-testing.module.js.map +1 -0
- package/esm2015/testing/public-api.js +1 -1
- package/esm2015/testing/public-api.js.map +1 -0
- package/esm2015/testing/skyux-popovers-testing.js +1 -1
- package/esm2015/testing/skyux-popovers-testing.js.map +1 -0
- package/fesm2015/skyux-popovers-testing.js +8 -8
- package/fesm2015/skyux-popovers-testing.js.map +1 -1
- package/fesm2015/skyux-popovers.js +53 -49
- package/fesm2015/skyux-popovers.js.map +1 -1
- package/index.d.ts +20 -0
- package/{modules → lib/modules}/dropdown/dropdown-button.component.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/dropdown-extensions.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/dropdown-item.component.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/dropdown-menu.component.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/dropdown.component.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/dropdown.module.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/types/dropdown-horizontal-alignment.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/types/dropdown-menu-change.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/types/dropdown-message-type.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/types/dropdown-message.d.ts +0 -0
- package/{modules → lib/modules}/dropdown/types/dropdown-trigger-type.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover-animation-state.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover-animation.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover-content.component.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover-context.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover-extensions.d.ts +0 -0
- package/{modules → lib/modules}/popover/popover.component.d.ts +4 -1
- package/{modules → lib/modules}/popover/popover.directive.d.ts +2 -0
- package/{modules → lib/modules}/popover/popover.module.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-adapter-arrow-coordinates.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-adapter-elements.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-alignment.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-message-type.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-message.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-placement.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-position.d.ts +0 -0
- package/{modules → lib/modules}/popover/types/popover-trigger.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-popovers-resources.module.d.ts +0 -0
- package/package.json +23 -9
- package/skyux-popovers.d.ts +1 -1
- package/LICENSE +0 -21
- package/esm2015/modules/dropdown/dropdown-button.component.js +0 -14
- package/esm2015/modules/dropdown/dropdown-extensions.js +0 -14
- package/esm2015/modules/dropdown/dropdown-item.component.js +0 -72
- package/esm2015/modules/dropdown/dropdown-menu.component.js +0 -306
- package/esm2015/modules/dropdown/dropdown.component.js +0 -357
- package/esm2015/modules/dropdown/dropdown.module.js +0 -60
- package/esm2015/modules/dropdown/types/dropdown-horizontal-alignment.js +0 -2
- package/esm2015/modules/dropdown/types/dropdown-menu-change.js +0 -2
- package/esm2015/modules/dropdown/types/dropdown-message-type.js +0 -37
- package/esm2015/modules/dropdown/types/dropdown-message.js +0 -2
- package/esm2015/modules/dropdown/types/dropdown-trigger-type.js +0 -2
- package/esm2015/modules/popover/popover-adapter.service.js +0 -74
- package/esm2015/modules/popover/popover-animation-state.js +0 -2
- package/esm2015/modules/popover/popover-animation.js +0 -19
- package/esm2015/modules/popover/popover-content.component.js +0 -266
- package/esm2015/modules/popover/popover-context.js +0 -10
- package/esm2015/modules/popover/popover-extensions.js +0 -29
- package/esm2015/modules/popover/popover.component.js +0 -200
- package/esm2015/modules/popover/popover.directive.js +0 -175
- package/esm2015/modules/popover/popover.module.js +0 -56
- package/esm2015/modules/popover/types/popover-adapter-arrow-coordinates.js +0 -2
- package/esm2015/modules/popover/types/popover-adapter-elements.js +0 -2
- package/esm2015/modules/popover/types/popover-alignment.js +0 -2
- package/esm2015/modules/popover/types/popover-message-type.js +0 -24
- package/esm2015/modules/popover/types/popover-message.js +0 -2
- package/esm2015/modules/popover/types/popover-placement.js +0 -2
- package/esm2015/modules/popover/types/popover-position.js +0 -2
- package/esm2015/modules/popover/types/popover-trigger.js +0 -2
- package/esm2015/modules/shared/sky-popovers-resources.module.js +0 -47
- package/esm2015/public-api.js +0 -23
- package/public-api.d.ts +0 -20
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAQ3C;;GAEG;AAEH,MAAM,OAAO,wBAAwB;IAC5B,mBAAmB,CACxB,QAAmC,EACnC,SAA8B,EAC9B,SAAkB;QAElB,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAC3E,MAAM,SAAS,GACb,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAE9D,MAAM,cAAc,GAAG,EAAE,CAAC;QAE1B,IAAI,GAAW,CAAC;QAChB,IAAI,IAAY,CAAC;QAEjB,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,OAAO,EAAE;YAClD,IAAI,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC;YAEhD,uDAAuD;YACvD,IAAI,IAAI,GAAG,cAAc,GAAG,WAAW,CAAC,IAAI,EAAE;gBAC5C,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,cAAc,CAAC;aAC1C;iBAAM,IAAI,IAAI,GAAG,cAAc,GAAG,WAAW,CAAC,KAAK,EAAE;gBACpD,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,cAAc,CAAC;aAC3C;YAED,IAAI,SAAS,KAAK,OAAO,EAAE;gBACzB,IAAI,SAAS,KAAK,QAAQ,EAAE;oBAC1B,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,CAAC;iBACzC;qBAAM;oBACL,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC7C;aACF;iBAAM;gBACL,IAAI,SAAS,KAAK,QAAQ,EAAE;oBAC1B,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC;iBACzB;qBAAM;oBACL,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC7B;aACF;SACF;aAAM;YACL,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,GAAG,CAAC;YAE/C,uDAAuD;YACvD,IAAI,GAAG,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;gBAC1C,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,cAAc,CAAC;aACxC;iBAAM,IAAI,GAAG,GAAG,cAAc,GAAG,WAAW,CAAC,MAAM,EAAE;gBACpD,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,cAAc,CAAC;aAC3C;YAED,IAAI,SAAS,KAAK,MAAM,EAAE;gBACxB,IAAI,SAAS,KAAK,QAAQ,EAAE;oBAC1B,IAAI,GAAG,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC;iBAC1C;qBAAM;oBACL,IAAI,GAAG,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC;iBAC9C;aACF;iBAAM;gBACL,IAAI,SAAS,KAAK,QAAQ,EAAE;oBAC1B,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC;iBACzB;qBAAM;oBACL,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;iBAC7B;aACF;SACF;QAED,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACvB,CAAC;;sHAjEU,wBAAwB;0HAAxB,wBAAwB;4FAAxB,wBAAwB;kBADpC,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { SkyPopoverAdapterArrowCoordinates } from './types/popover-adapter-arrow-coordinates';\n\nimport { SkyPopoverAdapterElements } from './types/popover-adapter-elements';\n\nimport { SkyPopoverPlacement } from './types/popover-placement';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyPopoverAdapterService {\n public getArrowCoordinates(\n elements: SkyPopoverAdapterElements,\n placement: SkyPopoverPlacement,\n themeName?: string\n ): SkyPopoverAdapterArrowCoordinates {\n const callerRect = elements.caller.nativeElement.getBoundingClientRect();\n const popoverRect = elements.popover.nativeElement.getBoundingClientRect();\n const arrowRect =\n elements.popoverArrow.nativeElement.getBoundingClientRect();\n\n const pixelTolerance = 20;\n\n let top: number;\n let left: number;\n\n if (placement === 'above' || placement === 'below') {\n left = callerRect.left + callerRect.width * 0.5;\n\n // Make sure the arrow never detaches from the popover.\n if (left - pixelTolerance < popoverRect.left) {\n left = popoverRect.left + pixelTolerance;\n } else if (left + pixelTolerance > popoverRect.right) {\n left = popoverRect.right - pixelTolerance;\n }\n\n if (placement === 'above') {\n if (themeName !== 'modern') {\n top = callerRect.top - arrowRect.height;\n } else {\n top = callerRect.top - arrowRect.height + 5;\n }\n } else {\n if (themeName !== 'modern') {\n top = callerRect.bottom;\n } else {\n top = callerRect.bottom + 4;\n }\n }\n } else {\n top = callerRect.top + callerRect.height * 0.5;\n\n // Make sure the arrow never detaches from the popover.\n if (top - pixelTolerance < popoverRect.top) {\n top = popoverRect.top + pixelTolerance;\n } else if (top + pixelTolerance > popoverRect.bottom) {\n top = popoverRect.bottom - pixelTolerance;\n }\n\n if (placement === 'left') {\n if (themeName !== 'modern') {\n left = callerRect.left - arrowRect.width;\n } else {\n left = callerRect.left - arrowRect.width + 5;\n }\n } else {\n if (themeName !== 'modern') {\n left = callerRect.right;\n } else {\n left = callerRect.right + 4;\n }\n }\n }\n\n return { top, left };\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-animation-state.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-animation-state.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @internal\n */\nexport type SkyPopoverAnimationState = 'open' | 'closed';\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { animate, state, style, transition, trigger, } from '@angular/animations';
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export const skyPopoverAnimation = trigger('skyPopoverAnimation', [
|
|
6
|
+
state('void', style({
|
|
7
|
+
opacity: 0,
|
|
8
|
+
})),
|
|
9
|
+
state('open', style({
|
|
10
|
+
opacity: 1,
|
|
11
|
+
})),
|
|
12
|
+
state('closed', style({
|
|
13
|
+
opacity: 0,
|
|
14
|
+
})),
|
|
15
|
+
transition('void => *', [animate('250ms')]),
|
|
16
|
+
transition('open => closed', [animate('150ms')]),
|
|
17
|
+
transition('closed => open', [animate('150ms')]),
|
|
18
|
+
]);
|
|
19
|
+
//# sourceMappingURL=popover-animation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-animation.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EAEP,KAAK,EACL,KAAK,EACL,UAAU,EACV,OAAO,GACR,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA6B,OAAO,CAClE,qBAAqB,EACrB;IACE,KAAK,CACH,MAAM,EACN,KAAK,CAAC;QACJ,OAAO,EAAE,CAAC;KACX,CAAC,CACH;IACD,KAAK,CACH,MAAM,EACN,KAAK,CAAC;QACJ,OAAO,EAAE,CAAC;KACX,CAAC,CACH;IACD,KAAK,CACH,QAAQ,EACR,KAAK,CAAC;QACJ,OAAO,EAAE,CAAC;KACX,CAAC,CACH;IACD,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,UAAU,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,UAAU,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD,CACF,CAAC","sourcesContent":["import {\n animate,\n AnimationTriggerMetadata,\n state,\n style,\n transition,\n trigger,\n} from '@angular/animations';\n\n/**\n * @internal\n */\nexport const skyPopoverAnimation: AnimationTriggerMetadata = trigger(\n 'skyPopoverAnimation',\n [\n state(\n 'void',\n style({\n opacity: 0,\n })\n ),\n state(\n 'open',\n style({\n opacity: 1,\n })\n ),\n state(\n 'closed',\n style({\n opacity: 0,\n })\n ),\n transition('void => *', [animate('250ms')]),\n transition('open => closed', [animate('150ms')]),\n transition('closed => open', [animate('150ms')]),\n ]\n);\n"]}
|
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
import { ChangeDetectorRef, Component, ElementRef, Optional, ViewChild, ViewContainerRef, } from '@angular/core';
|
|
2
|
+
import { SkyAffixAutoFitContext, SkyAffixService, SkyCoreAdapterService, } from '@skyux/core';
|
|
3
|
+
import { SkyThemeService } from '@skyux/theme';
|
|
4
|
+
import { fromEvent as observableFromEvent, Subject } from 'rxjs';
|
|
5
|
+
import { takeUntil } from 'rxjs/operators';
|
|
6
|
+
import { SkyPopoverAdapterService } from './popover-adapter.service';
|
|
7
|
+
import { skyPopoverAnimation } from './popover-animation';
|
|
8
|
+
import { SkyPopoverContext } from './popover-context';
|
|
9
|
+
import { parseAffixHorizontalAlignment, parseAffixPlacement, } from './popover-extensions';
|
|
10
|
+
import * as i0 from "@angular/core";
|
|
11
|
+
import * as i1 from "@skyux/core";
|
|
12
|
+
import * as i2 from "./popover-adapter.service";
|
|
13
|
+
import * as i3 from "./popover-context";
|
|
14
|
+
import * as i4 from "@skyux/theme";
|
|
15
|
+
import * as i5 from "@angular/common";
|
|
16
|
+
/**
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
export class SkyPopoverContentComponent {
|
|
20
|
+
constructor(changeDetector, elementRef, affixService, coreAdapterService, adapterService, context, themeSvc) {
|
|
21
|
+
this.changeDetector = changeDetector;
|
|
22
|
+
this.elementRef = elementRef;
|
|
23
|
+
this.affixService = affixService;
|
|
24
|
+
this.coreAdapterService = coreAdapterService;
|
|
25
|
+
this.adapterService = adapterService;
|
|
26
|
+
this.context = context;
|
|
27
|
+
this.themeSvc = themeSvc;
|
|
28
|
+
this.dismissOnBlur = true;
|
|
29
|
+
this.enableAnimations = true;
|
|
30
|
+
this.isOpen = false;
|
|
31
|
+
this.popoverType = 'info';
|
|
32
|
+
this.ngUnsubscribe = new Subject();
|
|
33
|
+
this._closed = new Subject();
|
|
34
|
+
this._isMouseEnter = new Subject();
|
|
35
|
+
this._opened = new Subject();
|
|
36
|
+
}
|
|
37
|
+
get animationState() {
|
|
38
|
+
return this.isOpen ? 'open' : 'closed';
|
|
39
|
+
}
|
|
40
|
+
get closed() {
|
|
41
|
+
return this._closed.asObservable();
|
|
42
|
+
}
|
|
43
|
+
get opened() {
|
|
44
|
+
return this._opened.asObservable();
|
|
45
|
+
}
|
|
46
|
+
get isMouseEnter() {
|
|
47
|
+
return this._isMouseEnter.asObservable();
|
|
48
|
+
}
|
|
49
|
+
ngOnInit() {
|
|
50
|
+
var _a;
|
|
51
|
+
/*istanbul ignore next*/
|
|
52
|
+
this.contentTarget.createEmbeddedView((_a = this.context) === null || _a === void 0 ? void 0 : _a.contentTemplateRef);
|
|
53
|
+
this.addEventListeners();
|
|
54
|
+
/*istanbul ignore else*/
|
|
55
|
+
if (this.themeSvc) {
|
|
56
|
+
this.themeSvc.settingsChange
|
|
57
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
58
|
+
.subscribe((themeSettings) => {
|
|
59
|
+
var _a, _b;
|
|
60
|
+
/*istanbul ignore next*/
|
|
61
|
+
this.themeName = (_b = (_a = themeSettings.currentSettings) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.name;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
ngOnDestroy() {
|
|
66
|
+
this.ngUnsubscribe.next();
|
|
67
|
+
this.ngUnsubscribe.complete();
|
|
68
|
+
this._closed.complete();
|
|
69
|
+
this._isMouseEnter.complete();
|
|
70
|
+
this._opened.complete();
|
|
71
|
+
/* istanbul ignore else */
|
|
72
|
+
if (this.affixer) {
|
|
73
|
+
this.affixer.destroy();
|
|
74
|
+
}
|
|
75
|
+
this._closed =
|
|
76
|
+
this._isMouseEnter =
|
|
77
|
+
this._opened =
|
|
78
|
+
this.affixer =
|
|
79
|
+
this.ngUnsubscribe =
|
|
80
|
+
undefined;
|
|
81
|
+
}
|
|
82
|
+
onAnimationEvent(event) {
|
|
83
|
+
var _a, _b;
|
|
84
|
+
if (event.fromState === 'void') {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (event.phaseName === 'done') {
|
|
88
|
+
if (event.toState === 'open') {
|
|
89
|
+
/*istanbul ignore next*/
|
|
90
|
+
(_a = this._opened) === null || _a === void 0 ? void 0 : _a.next();
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
/*istanbul ignore next*/
|
|
94
|
+
(_b = this._closed) === null || _b === void 0 ? void 0 : _b.next();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
open(caller, config) {
|
|
99
|
+
this.caller = caller;
|
|
100
|
+
this.dismissOnBlur = config.dismissOnBlur;
|
|
101
|
+
this.enableAnimations = config.enableAnimations;
|
|
102
|
+
this.horizontalAlignment = config.horizontalAlignment;
|
|
103
|
+
this.placement = config.placement;
|
|
104
|
+
this.popoverTitle = config.popoverTitle;
|
|
105
|
+
if (config.popoverType) {
|
|
106
|
+
this.popoverType = config.popoverType;
|
|
107
|
+
}
|
|
108
|
+
this.changeDetector.markForCheck();
|
|
109
|
+
// Indicates if the popover should be displayed statically.
|
|
110
|
+
// Please note: This feature is internal-only and used by the visual tests to capture multiple
|
|
111
|
+
// states simultaneously without the overhead of event listeners.
|
|
112
|
+
/* istanbul ignore if */
|
|
113
|
+
if (config.isStatic) {
|
|
114
|
+
this.isOpen = true;
|
|
115
|
+
this.changeDetector.markForCheck();
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
// Let the styles render before gauging the affix dimensions.
|
|
119
|
+
setTimeout(() => {
|
|
120
|
+
var _a;
|
|
121
|
+
/*istanbul ignore next*/
|
|
122
|
+
if (!((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
|
|
123
|
+
!this.ngUnsubscribe ||
|
|
124
|
+
this.ngUnsubscribe.isStopped) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
if (!this.affixer) {
|
|
128
|
+
this.setupAffixer();
|
|
129
|
+
}
|
|
130
|
+
const affixOptions = {
|
|
131
|
+
autoFitContext: SkyAffixAutoFitContext.Viewport,
|
|
132
|
+
enableAutoFit: true,
|
|
133
|
+
horizontalAlignment: parseAffixHorizontalAlignment(this.horizontalAlignment),
|
|
134
|
+
isSticky: true,
|
|
135
|
+
placement: parseAffixPlacement(this.placement),
|
|
136
|
+
};
|
|
137
|
+
// Ensure that we are positioning the vertical alginment correctly. These
|
|
138
|
+
// are the default alignments for all popovers but ensure that we are future proof here.
|
|
139
|
+
if (affixOptions.placement === 'left' ||
|
|
140
|
+
affixOptions.placement === 'right') {
|
|
141
|
+
affixOptions.verticalAlignment = 'middle';
|
|
142
|
+
}
|
|
143
|
+
else if (affixOptions.placement === 'above') {
|
|
144
|
+
affixOptions.verticalAlignment = 'bottom';
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
affixOptions.verticalAlignment = 'top';
|
|
148
|
+
}
|
|
149
|
+
this.affixer.affixTo(this.caller.nativeElement, affixOptions);
|
|
150
|
+
this.updateArrowOffset();
|
|
151
|
+
this.isOpen = true;
|
|
152
|
+
this.changeDetector.markForCheck();
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
close() {
|
|
156
|
+
this.isOpen = false;
|
|
157
|
+
this.changeDetector.markForCheck();
|
|
158
|
+
}
|
|
159
|
+
applyFocus() {
|
|
160
|
+
if (this.isOpen) {
|
|
161
|
+
this.coreAdapterService.getFocusableChildrenAndApplyFocus(this.popoverRef, '.sky-popover', true);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
setupAffixer() {
|
|
165
|
+
const affixer = this.affixService.createAffixer(this.popoverRef);
|
|
166
|
+
affixer.offsetChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
167
|
+
this.updateArrowOffset();
|
|
168
|
+
this.changeDetector.markForCheck();
|
|
169
|
+
});
|
|
170
|
+
affixer.overflowScroll.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
171
|
+
this.updateArrowOffset();
|
|
172
|
+
this.changeDetector.markForCheck();
|
|
173
|
+
});
|
|
174
|
+
affixer.placementChange
|
|
175
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
176
|
+
.subscribe((change) => {
|
|
177
|
+
this.placement = change.placement;
|
|
178
|
+
this.changeDetector.markForCheck();
|
|
179
|
+
});
|
|
180
|
+
this.affixer = affixer;
|
|
181
|
+
}
|
|
182
|
+
updateArrowOffset() {
|
|
183
|
+
const { top, left } = this.adapterService.getArrowCoordinates({
|
|
184
|
+
caller: this.caller,
|
|
185
|
+
popover: this.popoverRef,
|
|
186
|
+
popoverArrow: this.arrowRef,
|
|
187
|
+
}, this.placement, this.themeName);
|
|
188
|
+
this.arrowTop = top;
|
|
189
|
+
this.arrowLeft = left;
|
|
190
|
+
}
|
|
191
|
+
addEventListeners() {
|
|
192
|
+
const hostElement = this.elementRef.nativeElement;
|
|
193
|
+
observableFromEvent(hostElement, 'mouseenter')
|
|
194
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
195
|
+
.subscribe(() => this._isMouseEnter.next(true));
|
|
196
|
+
observableFromEvent(hostElement, 'mouseleave')
|
|
197
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
198
|
+
.subscribe(() => this._isMouseEnter.next(false));
|
|
199
|
+
observableFromEvent(hostElement, 'keydown')
|
|
200
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
201
|
+
.subscribe((event) => {
|
|
202
|
+
const key = event.key.toLowerCase();
|
|
203
|
+
/* tslint:disable-next-line:switch-default */
|
|
204
|
+
switch (key) {
|
|
205
|
+
case 'escape':
|
|
206
|
+
this.close();
|
|
207
|
+
this.caller.nativeElement.focus();
|
|
208
|
+
event.preventDefault();
|
|
209
|
+
event.stopPropagation();
|
|
210
|
+
break;
|
|
211
|
+
// Since the popover now lives in an overlay at the bottom of the document body, we need
|
|
212
|
+
// to handle the tab key ourselves. Otherwise, focus would be moved to the browser's
|
|
213
|
+
// search bar.
|
|
214
|
+
case 'tab':
|
|
215
|
+
if (!this.dismissOnBlur) {
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
const focusableItems = this.coreAdapterService.getFocusableChildren(hostElement);
|
|
219
|
+
const isFirstItem = focusableItems[0] === event.target && event.shiftKey;
|
|
220
|
+
const isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
|
|
221
|
+
!event.shiftKey;
|
|
222
|
+
/*istanbul ignore else*/
|
|
223
|
+
if (focusableItems.length === 0 || isFirstItem || isLastItem) {
|
|
224
|
+
this.close();
|
|
225
|
+
this.caller.nativeElement.focus();
|
|
226
|
+
event.preventDefault();
|
|
227
|
+
event.stopPropagation();
|
|
228
|
+
}
|
|
229
|
+
break;
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
SkyPopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i1.SkyCoreAdapterService }, { token: i2.SkyPopoverAdapterService }, { token: i3.SkyPopoverContext, optional: true }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
235
|
+
SkyPopoverContentComponent.ɵcmp = i0.ɵɵ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: ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-popover-container sky-popover-max-height\"\n [@.disabled]=\"!enableAnimations\"\n [@skyPopoverAnimation]=\"animationState\"\n [class.sky-popover-hidden]=\"!placement\"\n [ngClass]=\"[\n 'sky-popover-alignment-' + horizontalAlignment,\n 'sky-popover-placement-' + placement,\n 'sky-popover-' + popoverType\n ]\"\n (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n #popoverRef\n>\n <div\n class=\"sky-popover\"\n tabindex=\"-1\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n >\n <header\n *ngIf=\"popoverTitle\"\n class=\"sky-popover-header\"\n [skyThemeClass]=\"{\n 'sky-padding-even-default': 'default',\n 'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n }\"\n >\n <h1\n *ngIf=\"popoverTitle\"\n class=\"sky-popover-title\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-emphasized': 'modern'\n }\"\n >\n {{ popoverTitle }}\n </h1>\n </header>\n <div\n class=\"sky-popover-body\"\n [skyThemeClass]=\"{\n 'sky-padding-even-default': 'default',\n 'sky-padding-even-lg': 'modern'\n }\"\n >\n <ng-container #contentTarget></ng-container>\n </div>\n <span\n aria-hidden=\"true\"\n class=\"sky-popover-arrow\"\n [style.left.px]=\"arrowLeft\"\n [style.top.px]=\"arrowTop\"\n #arrowRef\n ></span>\n </div>\n</div>\n", styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media (max-width: 276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverContentComponent, decorators: [{
|
|
237
|
+
type: Component,
|
|
238
|
+
args: [{
|
|
239
|
+
selector: 'sky-popover-content',
|
|
240
|
+
templateUrl: './popover-content.component.html',
|
|
241
|
+
styleUrls: ['./popover-content.component.scss'],
|
|
242
|
+
animations: [skyPopoverAnimation],
|
|
243
|
+
providers: [SkyPopoverAdapterService],
|
|
244
|
+
}]
|
|
245
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: i1.SkyCoreAdapterService }, { type: i2.SkyPopoverAdapterService }, { type: i3.SkyPopoverContext, decorators: [{
|
|
246
|
+
type: Optional
|
|
247
|
+
}] }, { type: i4.SkyThemeService, decorators: [{
|
|
248
|
+
type: Optional
|
|
249
|
+
}] }]; }, propDecorators: { arrowRef: [{
|
|
250
|
+
type: ViewChild,
|
|
251
|
+
args: ['arrowRef', {
|
|
252
|
+
read: ElementRef,
|
|
253
|
+
static: true,
|
|
254
|
+
}]
|
|
255
|
+
}], popoverRef: [{
|
|
256
|
+
type: ViewChild,
|
|
257
|
+
args: ['popoverRef', {
|
|
258
|
+
read: ElementRef,
|
|
259
|
+
static: true,
|
|
260
|
+
}]
|
|
261
|
+
}], contentTarget: [{
|
|
262
|
+
type: ViewChild,
|
|
263
|
+
args: ['contentTarget', {
|
|
264
|
+
read: ViewContainerRef,
|
|
265
|
+
static: true,
|
|
266
|
+
}]
|
|
267
|
+
}] } });
|
|
268
|
+
//# sourceMappingURL=popover-content.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-content.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-content.component.ts","../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-content.component.html"],"names":[],"mappings":"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","sourcesContent":["import { AnimationEvent } from '@angular/animations';\n\nimport {\n ChangeDetectorRef,\n Component,\n ElementRef,\n OnDestroy,\n OnInit,\n Optional,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\n\nimport {\n SkyAffixAutoFitContext,\n SkyAffixConfig,\n SkyAffixer,\n SkyAffixService,\n SkyCoreAdapterService,\n} from '@skyux/core';\n\nimport { SkyThemeService } from '@skyux/theme';\n\nimport { fromEvent as observableFromEvent, Observable, Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyPopoverAlignment } from './types/popover-alignment';\n\nimport { SkyPopoverPlacement } from './types/popover-placement';\n\nimport { SkyPopoverAdapterService } from './popover-adapter.service';\n\nimport { skyPopoverAnimation } from './popover-animation';\n\nimport { SkyPopoverAnimationState } from './popover-animation-state';\n\nimport { SkyPopoverContext } from './popover-context';\n\nimport {\n parseAffixHorizontalAlignment,\n parseAffixPlacement,\n} from './popover-extensions';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-popover-content',\n templateUrl: './popover-content.component.html',\n styleUrls: ['./popover-content.component.scss'],\n animations: [skyPopoverAnimation],\n providers: [SkyPopoverAdapterService],\n})\nexport class SkyPopoverContentComponent implements OnInit, OnDestroy {\n public get animationState(): SkyPopoverAnimationState {\n return this.isOpen ? 'open' : 'closed';\n }\n\n public get closed(): Observable<void> {\n return this._closed.asObservable();\n }\n\n public get opened(): Observable<void> {\n return this._opened.asObservable();\n }\n\n public get isMouseEnter(): Observable<boolean> {\n return this._isMouseEnter.asObservable();\n }\n\n public affixer: SkyAffixer;\n\n public arrowLeft: number;\n\n public arrowTop: number;\n\n public dismissOnBlur: boolean = true;\n\n public enableAnimations: boolean = true;\n\n public horizontalAlignment: SkyPopoverAlignment;\n\n public isOpen: boolean = false;\n\n public placement: SkyPopoverPlacement;\n\n public popoverTitle: string;\n\n public popoverType: 'danger' | 'info' = 'info';\n\n public themeName: string;\n\n @ViewChild('arrowRef', {\n read: ElementRef,\n static: true,\n })\n private arrowRef: ElementRef;\n\n @ViewChild('popoverRef', {\n read: ElementRef,\n static: true,\n })\n private popoverRef: ElementRef;\n\n @ViewChild('contentTarget', {\n read: ViewContainerRef,\n static: true,\n })\n private contentTarget: ViewContainerRef;\n\n private caller: ElementRef;\n\n private ngUnsubscribe = new Subject<void>();\n\n private _closed = new Subject<void>();\n\n private _isMouseEnter = new Subject<boolean>();\n\n private _opened = new Subject<void>();\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n private elementRef: ElementRef,\n private affixService: SkyAffixService,\n private coreAdapterService: SkyCoreAdapterService,\n private adapterService: SkyPopoverAdapterService,\n @Optional() private context?: SkyPopoverContext,\n @Optional() private themeSvc?: SkyThemeService\n ) {}\n\n public ngOnInit(): void {\n /*istanbul ignore next*/\n this.contentTarget.createEmbeddedView(this.context?.contentTemplateRef);\n this.addEventListeners();\n\n /*istanbul ignore else*/\n if (this.themeSvc) {\n this.themeSvc.settingsChange\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((themeSettings) => {\n /*istanbul ignore next*/\n this.themeName = themeSettings.currentSettings?.theme?.name;\n });\n }\n }\n\n public ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n\n this._closed.complete();\n this._isMouseEnter.complete();\n this._opened.complete();\n\n /* istanbul ignore else */\n if (this.affixer) {\n this.affixer.destroy();\n }\n\n this._closed =\n this._isMouseEnter =\n this._opened =\n this.affixer =\n this.ngUnsubscribe =\n undefined;\n }\n\n public onAnimationEvent(event: AnimationEvent): void {\n if (event.fromState === 'void') {\n return;\n }\n\n if (event.phaseName === 'done') {\n if (event.toState === 'open') {\n /*istanbul ignore next*/\n this._opened?.next();\n } else {\n /*istanbul ignore next*/\n this._closed?.next();\n }\n }\n }\n\n public open(\n caller: ElementRef,\n config: {\n dismissOnBlur: boolean;\n enableAnimations: boolean;\n horizontalAlignment: SkyPopoverAlignment;\n isStatic: boolean;\n placement: SkyPopoverPlacement;\n popoverTitle: string;\n popoverType?: 'danger' | 'info';\n }\n ): void {\n this.caller = caller;\n this.dismissOnBlur = config.dismissOnBlur;\n this.enableAnimations = config.enableAnimations;\n this.horizontalAlignment = config.horizontalAlignment;\n this.placement = config.placement;\n this.popoverTitle = config.popoverTitle;\n if (config.popoverType) {\n this.popoverType = config.popoverType;\n }\n\n this.changeDetector.markForCheck();\n\n // Indicates if the popover should be displayed statically.\n // Please note: This feature is internal-only and used by the visual tests to capture multiple\n // states simultaneously without the overhead of event listeners.\n /* istanbul ignore if */\n if (config.isStatic) {\n this.isOpen = true;\n this.changeDetector.markForCheck();\n return;\n }\n\n // Let the styles render before gauging the affix dimensions.\n setTimeout(() => {\n /*istanbul ignore next*/\n if (\n !this.popoverRef?.nativeElement ||\n !this.ngUnsubscribe ||\n this.ngUnsubscribe.isStopped\n ) {\n return;\n }\n\n if (!this.affixer) {\n this.setupAffixer();\n }\n\n const affixOptions: SkyAffixConfig = {\n autoFitContext: SkyAffixAutoFitContext.Viewport,\n enableAutoFit: true,\n horizontalAlignment: parseAffixHorizontalAlignment(\n this.horizontalAlignment\n ),\n isSticky: true,\n placement: parseAffixPlacement(this.placement),\n };\n\n // Ensure that we are positioning the vertical alginment correctly. These\n // are the default alignments for all popovers but ensure that we are future proof here.\n if (\n affixOptions.placement === 'left' ||\n affixOptions.placement === 'right'\n ) {\n affixOptions.verticalAlignment = 'middle';\n } else if (affixOptions.placement === 'above') {\n affixOptions.verticalAlignment = 'bottom';\n } else {\n affixOptions.verticalAlignment = 'top';\n }\n\n this.affixer.affixTo(this.caller.nativeElement, affixOptions);\n\n this.updateArrowOffset();\n\n this.isOpen = true;\n this.changeDetector.markForCheck();\n });\n }\n\n public close(): void {\n this.isOpen = false;\n this.changeDetector.markForCheck();\n }\n\n public applyFocus(): void {\n if (this.isOpen) {\n this.coreAdapterService.getFocusableChildrenAndApplyFocus(\n this.popoverRef,\n '.sky-popover',\n true\n );\n }\n }\n\n private setupAffixer(): void {\n const affixer = this.affixService.createAffixer(this.popoverRef);\n\n affixer.offsetChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n this.updateArrowOffset();\n this.changeDetector.markForCheck();\n });\n\n affixer.overflowScroll.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n this.updateArrowOffset();\n this.changeDetector.markForCheck();\n });\n\n affixer.placementChange\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((change) => {\n this.placement = change.placement;\n this.changeDetector.markForCheck();\n });\n\n this.affixer = affixer;\n }\n\n private updateArrowOffset(): void {\n const { top, left } = this.adapterService.getArrowCoordinates(\n {\n caller: this.caller,\n popover: this.popoverRef,\n popoverArrow: this.arrowRef,\n },\n this.placement,\n this.themeName\n );\n\n this.arrowTop = top;\n this.arrowLeft = left;\n }\n\n private addEventListeners(): void {\n const hostElement = this.elementRef.nativeElement;\n\n observableFromEvent(hostElement, 'mouseenter')\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe(() => this._isMouseEnter.next(true));\n\n observableFromEvent(hostElement, 'mouseleave')\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe(() => this._isMouseEnter.next(false));\n\n observableFromEvent(hostElement, 'keydown')\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((event: KeyboardEvent) => {\n const key = event.key.toLowerCase();\n\n /* tslint:disable-next-line:switch-default */\n switch (key) {\n case 'escape':\n this.close();\n this.caller.nativeElement.focus();\n event.preventDefault();\n event.stopPropagation();\n break;\n\n // Since the popover now lives in an overlay at the bottom of the document body, we need\n // to handle the tab key ourselves. Otherwise, focus would be moved to the browser's\n // search bar.\n case 'tab':\n if (!this.dismissOnBlur) {\n return;\n }\n\n const focusableItems =\n this.coreAdapterService.getFocusableChildren(hostElement);\n\n const isFirstItem =\n focusableItems[0] === event.target && event.shiftKey;\n\n const isLastItem =\n focusableItems[focusableItems.length - 1] === event.target &&\n !event.shiftKey;\n\n /*istanbul ignore else*/\n if (focusableItems.length === 0 || isFirstItem || isLastItem) {\n this.close();\n this.caller.nativeElement.focus();\n event.preventDefault();\n event.stopPropagation();\n }\n break;\n }\n });\n }\n}\n","<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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-context.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-context.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,OAAO,iBAAiB;IAG5B,YAAY,IAA8C;QACxD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;IACpD,CAAC;CACF","sourcesContent":["import { TemplateRef } from '@angular/core';\n\n/**\n * @dynamic\n * @internal\n */\nexport class SkyPopoverContext {\n public readonly contentTemplateRef: TemplateRef<any>;\n\n constructor(args: { contentTemplateRef: TemplateRef<any> }) {\n this.contentTemplateRef = args.contentTemplateRef;\n }\n}\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export function parseAffixPlacement(placement) {
|
|
2
|
+
switch (placement) {
|
|
3
|
+
case 'above':
|
|
4
|
+
return 'above';
|
|
5
|
+
case 'below':
|
|
6
|
+
return 'below';
|
|
7
|
+
case 'right':
|
|
8
|
+
return 'right';
|
|
9
|
+
case 'left':
|
|
10
|
+
return 'left';
|
|
11
|
+
/* istanbul ignore next */
|
|
12
|
+
default:
|
|
13
|
+
throw `SkyAffixPlacement does not have a matching value for '${placement}'!`;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export function parseAffixHorizontalAlignment(alignment) {
|
|
17
|
+
switch (alignment) {
|
|
18
|
+
case 'center':
|
|
19
|
+
return 'center';
|
|
20
|
+
case 'left':
|
|
21
|
+
return 'left';
|
|
22
|
+
case 'right':
|
|
23
|
+
return 'right';
|
|
24
|
+
/* istanbul ignore next */
|
|
25
|
+
default:
|
|
26
|
+
throw `SkyAffixHorizontalAlignment does not have a matching value for '${alignment}'!`;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=popover-extensions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-extensions.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/popover/popover-extensions.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,mBAAmB,CACjC,SAA8B;IAE9B,QAAQ,SAAS,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,0BAA0B;QAC1B;YACE,MAAM,yDAAyD,SAAS,IAAI,CAAC;KAChF;AACH,CAAC;AAED,MAAM,UAAU,6BAA6B,CAC3C,SAA8B;IAE9B,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,0BAA0B;QAC1B;YACE,MAAM,mEAAmE,SAAS,IAAI,CAAC;KAC1F;AACH,CAAC","sourcesContent":["import { SkyAffixHorizontalAlignment, SkyAffixPlacement } from '@skyux/core';\n\nimport { SkyPopoverAlignment } from './types/popover-alignment';\n\nimport { SkyPopoverPlacement } from './types/popover-placement';\n\nexport function parseAffixPlacement(\n placement: SkyPopoverPlacement\n): SkyAffixPlacement {\n switch (placement) {\n case 'above':\n return 'above';\n case 'below':\n return 'below';\n case 'right':\n return 'right';\n case 'left':\n return 'left';\n /* istanbul ignore next */\n default:\n throw `SkyAffixPlacement does not have a matching value for '${placement}'!`;\n }\n}\n\nexport function parseAffixHorizontalAlignment(\n alignment: SkyPopoverAlignment\n): SkyAffixHorizontalAlignment {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'left':\n return 'left';\n case 'right':\n return 'right';\n /* istanbul ignore next */\n default:\n throw `SkyAffixHorizontalAlignment does not have a matching value for '${alignment}'!`;\n }\n}\n"]}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
|
|
2
|
+
import { SkyOverlayService } from '@skyux/core';
|
|
3
|
+
import { Subject } from 'rxjs';
|
|
4
|
+
import { takeUntil } from 'rxjs/operators';
|
|
5
|
+
import { SkyPopoverContentComponent } from './popover-content.component';
|
|
6
|
+
import { SkyPopoverContext } from './popover-context';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@skyux/core";
|
|
9
|
+
export class SkyPopoverComponent {
|
|
10
|
+
constructor(overlayService) {
|
|
11
|
+
this.overlayService = overlayService;
|
|
12
|
+
/**
|
|
13
|
+
* Fires when users close the popover.
|
|
14
|
+
*/
|
|
15
|
+
this.popoverClosed = new EventEmitter();
|
|
16
|
+
/**
|
|
17
|
+
* Fires when users open the popover.
|
|
18
|
+
*/
|
|
19
|
+
this.popoverOpened = new EventEmitter();
|
|
20
|
+
/**
|
|
21
|
+
* Indicates that the popover is in the process of being opened or closed.
|
|
22
|
+
* @internal
|
|
23
|
+
*/
|
|
24
|
+
this.isActive = false;
|
|
25
|
+
/**
|
|
26
|
+
* Used by unit tests to disable animations since the component is injected at the bottom of the
|
|
27
|
+
* document body.
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
30
|
+
this.enableAnimations = true;
|
|
31
|
+
this.isMouseEnter = false;
|
|
32
|
+
this.isMarkedForCloseOnMouseLeave = false;
|
|
33
|
+
this.ngUnsubscribe = new Subject();
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Specifies the horizontal alignment of the popover in relation to the trigger element.
|
|
37
|
+
* The `skyPopoverAlignment` property on the popover directive overwrites this property.
|
|
38
|
+
* Options include:`"center"`, `"right"`, and `'"left"`.
|
|
39
|
+
* @default "center"
|
|
40
|
+
*/
|
|
41
|
+
set alignment(value) {
|
|
42
|
+
this._alignment = value;
|
|
43
|
+
}
|
|
44
|
+
get alignment() {
|
|
45
|
+
return this._alignment || 'center';
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Indicates whether to close the popover when it loses focus.
|
|
49
|
+
* To require users to click a trigger button to close the popover, set this input to false.
|
|
50
|
+
* @default true
|
|
51
|
+
*/
|
|
52
|
+
set dismissOnBlur(value) {
|
|
53
|
+
this._dismissOnBlur = value;
|
|
54
|
+
}
|
|
55
|
+
get dismissOnBlur() {
|
|
56
|
+
if (this._dismissOnBlur === undefined) {
|
|
57
|
+
return true;
|
|
58
|
+
}
|
|
59
|
+
return this._dismissOnBlur;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Specifies the placement of the popover in relation to the trigger element.
|
|
63
|
+
* The `skyPopoverPlacement` property on the popover directive overwrites this property.
|
|
64
|
+
* Options include:`"above"`, `"below"`, `"right"`, and `"left"`.
|
|
65
|
+
* @default "above"
|
|
66
|
+
*/
|
|
67
|
+
set placement(value) {
|
|
68
|
+
this._placement = value;
|
|
69
|
+
}
|
|
70
|
+
get placement() {
|
|
71
|
+
return this._placement || 'above';
|
|
72
|
+
}
|
|
73
|
+
ngOnDestroy() {
|
|
74
|
+
this.ngUnsubscribe.next();
|
|
75
|
+
this.ngUnsubscribe.complete();
|
|
76
|
+
this.ngUnsubscribe = undefined;
|
|
77
|
+
if (this.overlay) {
|
|
78
|
+
this.overlayService.close(this.overlay);
|
|
79
|
+
this.overlay = undefined;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Positions the popover next to a given caller element.
|
|
84
|
+
* @param caller The element that opened the popover.
|
|
85
|
+
* @param placement The placement of the popover.
|
|
86
|
+
* @param alignment The horizontal alignment of the popover.
|
|
87
|
+
* @internal
|
|
88
|
+
*/
|
|
89
|
+
positionNextTo(caller, placement, alignment) {
|
|
90
|
+
if (!this.overlay) {
|
|
91
|
+
this.setupOverlay();
|
|
92
|
+
}
|
|
93
|
+
this.placement = placement;
|
|
94
|
+
this.alignment = alignment;
|
|
95
|
+
this.isActive = true;
|
|
96
|
+
this.contentRef.open(caller, {
|
|
97
|
+
dismissOnBlur: this.dismissOnBlur,
|
|
98
|
+
enableAnimations: this.enableAnimations,
|
|
99
|
+
horizontalAlignment: this.alignment,
|
|
100
|
+
isStatic: false,
|
|
101
|
+
placement: this.placement,
|
|
102
|
+
popoverTitle: this.popoverTitle,
|
|
103
|
+
popoverType: this.popoverType,
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Closes the popover.
|
|
108
|
+
* @internal
|
|
109
|
+
*/
|
|
110
|
+
close() {
|
|
111
|
+
var _a;
|
|
112
|
+
/*istanbul ignore next*/
|
|
113
|
+
(_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Brings focus to the popover element if its open.
|
|
117
|
+
* @internal
|
|
118
|
+
*/
|
|
119
|
+
applyFocus() {
|
|
120
|
+
var _a;
|
|
121
|
+
/*istanbul ignore next*/
|
|
122
|
+
(_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.applyFocus();
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Adds a flag to the popover to close when the mouse leaves the popover's bounds.
|
|
126
|
+
* @internal
|
|
127
|
+
*/
|
|
128
|
+
markForCloseOnMouseLeave() {
|
|
129
|
+
this.isMarkedForCloseOnMouseLeave = true;
|
|
130
|
+
}
|
|
131
|
+
setupOverlay() {
|
|
132
|
+
const overlay = this.overlayService.create({
|
|
133
|
+
enableScroll: true,
|
|
134
|
+
enablePointerEvents: true,
|
|
135
|
+
});
|
|
136
|
+
overlay.backdropClick.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
137
|
+
if (this.dismissOnBlur) {
|
|
138
|
+
this.close();
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
const contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
|
|
142
|
+
{
|
|
143
|
+
provide: SkyPopoverContext,
|
|
144
|
+
useValue: new SkyPopoverContext({
|
|
145
|
+
contentTemplateRef: this.templateRef,
|
|
146
|
+
}),
|
|
147
|
+
},
|
|
148
|
+
]);
|
|
149
|
+
contentRef.opened.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
150
|
+
this.popoverOpened.emit(this);
|
|
151
|
+
});
|
|
152
|
+
contentRef.closed.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
153
|
+
/*istanbul ignore else*/
|
|
154
|
+
if (this.isActive) {
|
|
155
|
+
this.overlayService.close(this.overlay);
|
|
156
|
+
this.overlay = undefined;
|
|
157
|
+
this.isActive = false;
|
|
158
|
+
this.popoverClosed.emit(this);
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
contentRef.isMouseEnter
|
|
162
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
163
|
+
.subscribe((isMouseEnter) => {
|
|
164
|
+
this.isMouseEnter = isMouseEnter;
|
|
165
|
+
if (this.isMarkedForCloseOnMouseLeave) {
|
|
166
|
+
this.isMarkedForCloseOnMouseLeave = false;
|
|
167
|
+
this.close();
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
this.overlay = overlay;
|
|
171
|
+
this.contentRef = contentRef;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
SkyPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverComponent, deps: [{ token: i1.SkyOverlayService }], target: i0.ɵɵFactoryTarget.Component });
|
|
175
|
+
SkyPopoverComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #templateRef>\n <ng-content></ng-content>\n</ng-template>\n" });
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverComponent, decorators: [{
|
|
177
|
+
type: Component,
|
|
178
|
+
args: [{
|
|
179
|
+
selector: 'sky-popover',
|
|
180
|
+
templateUrl: './popover.component.html',
|
|
181
|
+
}]
|
|
182
|
+
}], ctorParameters: function () { return [{ type: i1.SkyOverlayService }]; }, propDecorators: { alignment: [{
|
|
183
|
+
type: Input
|
|
184
|
+
}], dismissOnBlur: [{
|
|
185
|
+
type: Input
|
|
186
|
+
}], placement: [{
|
|
187
|
+
type: Input
|
|
188
|
+
}], popoverTitle: [{
|
|
189
|
+
type: Input
|
|
190
|
+
}], popoverType: [{
|
|
191
|
+
type: Input
|
|
192
|
+
}], popoverClosed: [{
|
|
193
|
+
type: Output
|
|
194
|
+
}], popoverOpened: [{
|
|
195
|
+
type: Output
|
|
196
|
+
}], templateRef: [{
|
|
197
|
+
type: ViewChild,
|
|
198
|
+
args: ['templateRef', {
|
|
199
|
+
read: TemplateRef,
|
|
200
|
+
static: true,
|
|
201
|
+
}]
|
|
202
|
+
}] } });
|
|
203
|
+
//# sourceMappingURL=popover.component.js.map
|