@wolf_and_associates/popover

WolfLTC Popover

A reusable menu, iframe, and content outlet for use with Wolf & Associates projects.

Requirements

This library must use the same Angular Compiler version as the project you are adding it to.

Usage

Import the PopoverModule in your project's app.module.ts:

import { PopoverModule } from '@wolf_and_associates/popover';

@NgModule({
  // ...
  imports: [
    // ...
    PopoverModule
  ]
})

Interfaces

PopoverMenuItemAction

Property	Type	Description
type	'new_tab' or 'iframe' or 'menu' or 'route' or 'content_outlet'	What kind of action does this take?
url	string	Used to execute the action

PopoverMenuItem

Property	Type	Description
placeholder?	string	The placeholder displayed to the user in the admin portal
prefix?	string	Used in the admin portal for the 'type' dropdown text
our_tools?	PopoverMenuItem[]	If this is an Our Tools item, this property will be an array of PopoverMenuItems
data?	PopoverMenuItem[]	If this is an Menu item, this property will be an array of PopoverMenuItems
action	PopoverMenuItemAction	What kind of action will this item take?
title	string	The title displayed to the user
route_prefix?	string[]	If the action type is a 'menu' or 'route' then this is added before the route executes
omit_base_action_url	boolean	If the action type is a 'menu' the base article url will be omitted when fetching items using the MenuOutletComponent

Components

Menu Outlet

A full-screen vertical menu. Utilizes an API call to the PopoverMenuItem.action.url to retrieve items.

Inputs

Input	Type	Description
domain	string	Overwride the protocol and domain. Currently using window.location.protocol and window.location.hostname

Events

Event	Parameters	Description
onOpen	EventEmitter<ComponentRef>	When the popover opens
onClosed	EventEmitter<ComponentRef>	When the popover closes
onContentOutletClick	EventEmitter	The user clicked a content_outlet PopoverMenuItem
onIframeOutletClick	EventEmitter	The user clicked an iframe PopoverMenuItem

Properties

Property	Type	Description
popovers	{ subscriptions: Subscription[]; component: ComponentRef }[]	All open popovers

Methods

Method	Parameters	Description
createMenu	item: PopoverMenuItem	Create and display a Menu. Will fetch the menu items if not already present
close		Close the most recently opened Popover

Usage

<popover-menu-outlet [items]="[]"></popover-menu-outlet>

Content Outlet

A full-screen content outlet. Accepts any html or Component.

Inputs

Input	Type	Default	Description
show_close_button	boolean	true	Should the close button be visible
navbar_spacing	number	0	The space from the top of the viewport the component is rendered
shadow	string	none	Set the box shadow of the component
slide	string	'slide-left'	Change the default slide direction to one of the following: 'slide-up', 'slide-left', 'slide-down', 'slide-right'

Events

Event	Parameters	Description
onOpened	EventEmitter	When the popover opens
onClosed	EventEmitter	When the popover closes

Properties

Property	Type	Description
visible	boolean	Is the popover visible

Methods

Method	Parameters	Description
toggle		Toggle the visibility of the popover
open		Open the popover
close		Close the popover

Usage

<popover-content-outlet>
  <h2>This is an H2 heading in a popover</h2>
</popover-content-outlet>

iFrame

A full-screen iframe embed.

Inputs

Input	Type	Default	Description
show_close_button	boolean	true	Should the close button be visible
navbar_spacing	number	0	The space from the top of the viewport the component is rendered
shadow	string	none	Set the box shadow of the component
slide	string	'slide-left'	Change the default slide direction to one of the following: 'slide-up', 'slide-left', 'slide-down', 'slide-right'
iframe_url	string	undefined	The iFrame URL

Events

Event	Parameters	Description
onOpen	EventEmitter	When the popover opens
onClosed	EventEmitter	When the popover closes

Properties

Property	Type	Description
visible	boolean	Is the popover visible

Methods

Method	Parameters	Description
toggle		Toggle the visibility of the popover
open		Open the popover
close		Close the popover

Usage

<popover-iframe [iframe_url]="some_url">
  <h1>Here's a heading above the <code>iframe</code>!</h1>
</popover-iframe>

Development

Build the project and then add it to the destination project node_modules folder using the example below:

ng build --project=popover --watch

In another terminal window:

cd destination-project/
npm i ../wolfltc-ngx/dist/popover