\r\n \r\n
\r\n\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-popover-custom-content',\r\n templateUrl: './custom-content.html'\r\n})\r\nexport class DemoPopoverCustomContentComponent {\r\n title = 'Welcome word';\r\n content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';\r\n}\r\n","Event: {{message}}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-popover-outside-click',\r\n templateUrl: './outside-click.html'\r\n})\r\nexport class DemoPopoverOutsideClickComponent {}\r\n","\r\n\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-popover-placement',\r\n templateUrl: './placement.html'\r\n})\r\nexport class DemoPopoverPlacementComponent {}\r\n","\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-popover-context',\r\n templateUrl: './popover-context.html'\r\n})\r\nexport class DemoPopoverContextComponent {\r\n context = {\r\n message: 'Hello there!'\r\n };\r\n}\r\n","\r\n \r\n This text has attached popover\r\n \r\n
\r\n\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-popover-triggers-custom',\r\n templateUrl: './triggers-custom.html'\r\n})\r\nexport class DemoPopoverTriggersCustomComponent {}\r\n","\r\n \r\n This text has attached popover\r\n \r\n
\r\n\r\n\r\n\r\n\r\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n\r\nimport { demoComponentContent } from './popover-section.list';\r\nimport { ContentSection } from '@app/shared/components/docs/models/content-section.model';\r\n\r\n@Component({\r\n selector: 'tooltip-section',\r\n templateUrl: './popover-section.component.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class PopoverSectionComponent {\r\n name = 'Popover';\r\n src = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/popover';\r\n componentContent: ContentSection[] = demoComponentContent;\r\n}\r\n","Add small overlay content, like those found in iOS, to any element for housing secondary information.
\r\nThe easiest way to add the popover component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component popover\r\n
Four base positioning options are available: top, right,\r\n bottom, and left.\r\n Besides that, auto option may be used to detect a position that fits the component on screen.
Placement property of a popover can contain \"corner placement\" specifier following the base positioning.\r\n Thus, in addition to the four base positioning options, namely top, right,\r\n bottom, and left, eight more positioning options are available: top left, top right,\r\n right top, right bottom, bottom right, bottom left, left bottom, and left top.`,\r\n component: require('!!raw-loader!./demos/corner-placement/corner-placement.ts'),\r\n html: require('!!raw-loader!./demos/corner-placement/corner-placement.html'),\r\n outlet: DemoPopoverCornerPlacementComponent\r\n },\r\n {\r\n title: 'Disable adaptive position',\r\n anchor: 'adaptive-position',\r\n description: `\r\n
You can disable adaptive position via adaptivePosition input or config option
Use the focus trigger to dismiss popovers on the next click that the\r\n user makes.
Pass a string as popover content.
`,\r\n outlet: DemoPopoverDynamicComponent\r\n },\r\n {\r\n title: 'Custom content template',\r\n anchor: 'custom-content-template',\r\n component: require('!!raw-loader!./demos/custom-content/custom-content.ts'),\r\n html: require('!!raw-loader!./demos/custom-content/custom-content.html'),\r\n description: `Create <ng-template #myId> with any html allowed by Angular,\r\n and provide template ref [popover]=\"myId\" as popover content.
By using [innerHtml] inside ng-template you can display any dynamic html
When you have any styles on a parent element that interfere with a popover,\r\n you’ll want to specify a container=\"body\" so that the popover’s HTML will be\r\n appended to body. This will help to avoid rendering problems in more complex components\r\n (like input groups, button groups, etc) or inside elements with overflow: hidden
This demo shows manipulating popover by show,\r\n hide and toggle methods
You can show/hide popover by switching isOpen property
Click on the button to see popover delayed for 0,5 second
`,\r\n outlet: DemoPopoverDelayComponent\r\n }\r\n ]\r\n },\r\n {\r\n name: 'API Reference',\r\n anchor: 'api-reference',\r\n outlet: ApiSectionsComponent,\r\n content: [\r\n {\r\n title: 'PopoverDirective',\r\n anchor: 'popover-directive',\r\n outlet: NgApiDocComponent\r\n },\r\n {\r\n title: 'PopoverConfig',\r\n anchor: 'popover-config',\r\n outlet: NgApiDocConfigComponent\r\n }\r\n ]\r\n }\r\n];\r\n","export default \"\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-adaptive-position',\\r\\n templateUrl: './adaptive-position.html'\\r\\n})\\r\\nexport class DemoPopoverAdaptivePositionComponent {}\\r\\n\";","export default \"\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-basic',\\r\\n templateUrl: './basic.html'\\r\\n})\\r\\nexport class DemoPopoverBasicComponent {}\\r\\n\";","export default \"\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-class',\\r\\n templateUrl: './class.html'\\r\\n})\\r\\nexport class DemoPopoverClassComponent {}\\r\\n\";","export default \"\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\nimport { PopoverConfig } from 'ngx-bootstrap/popover';\\r\\n\\r\\n// such override allows to keep some initial values\\r\\n\\r\\nexport function getPopoverConfig(): PopoverConfig {\\r\\n return Object.assign(new PopoverConfig(), {\\r\\n placement: 'right',\\r\\n container: 'body',\\r\\n triggers: 'focus',\\r\\n delay: 500\\r\\n });\\r\\n}\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-config',\\r\\n templateUrl: './config.html',\\r\\n providers: [{ provide: PopoverConfig, useFactory: getPopoverConfig }]\\r\\n})\\r\\nexport class DemoPopoverConfigComponent {}\\r\\n\";","export default \"\\r\\n \\r\\n
\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-corner-placement',\\r\\n templateUrl: './corner-placement.html'\\r\\n})\\r\\nexport class DemoPopoverCornerPlacementComponent {\\r\\n placements = [\\r\\n 'top left',\\r\\n 'top right',\\r\\n 'right top',\\r\\n 'right bottom',\\r\\n 'bottom right',\\r\\n 'bottom left',\\r\\n 'left bottom',\\r\\n 'left top'\\r\\n ]\\r\\n placement = 'top left';\\r\\n}\\r\\n\";","export default \"Event: {{message}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-events',\\r\\n templateUrl: './events.html'\\r\\n})\\r\\nexport class DemoPopoverEventsComponent {\\r\\n message: string;\\r\\n\\r\\n onShown(): void {\\r\\n this.message = 'shown';\\r\\n }\\r\\n\\r\\n onHidden(): void {\\r\\n this.message = 'hidden';\\r\\n }\\r\\n}\\r\\n\";","export default \"\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-outside-click',\\r\\n templateUrl: './outside-click.html'\\r\\n})\\r\\nexport class DemoPopoverOutsideClickComponent {}\\r\\n\";","export default \"\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-placement',\\r\\n templateUrl: './placement.html'\\r\\n})\\r\\nexport class DemoPopoverPlacementComponent {}\\r\\n\";","export default \"\\r\\n \\r\\n This text has attached popover\\r\\n \\r\\n
\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-trigger-by-isopen',\\r\\n templateUrl: './trigger-by-isopen-property.html'\\r\\n})\\r\\nexport class DemoPopoverByIsOpenPropComponent {\\r\\n isOpen = false;\\r\\n}\\r\\n\";","export default \"\\r\\n \\r\\n This text has attached popover\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-popover-triggers-manual',\\r\\n templateUrl: './triggers-manual.html'\\r\\n})\\r\\nexport class DemoPopoverTriggersManualComponent {}\\r\\n\";","export default \"// RECOMMENDED\\r\\nimport { PopoverModule } from 'ngx-bootstrap/popover';\\r\\n// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)\\r\\nimport { PopoverModule } from 'ngx-bootstrap';\\r\\n\\r\\n@NgModule({\\r\\n imports: [PopoverModule.forRoot(),...]\\r\\n})\\r\\nexport class AppModule(){}\\r\\n\";"],"names":[],"sourceRoot":"webpack:///"}