Stencil Popup

Stencil Popup is a standalone component for facilitate the opening of pop-up windows and obtain redirection data.

Using this component

In a Stencil-starters or Ionic-pwa-toolkit

• Run npm install stencil-popup --save
• Add an import to the npm packages import stencil-popup;
• Then you can use the element anywhere in your template, JSX, html etc

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/stencil-popup@latest/dist/stencil-popup.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install stencil-popup --save
• Put a script tag similar to this <script src='node_modules/stencil-popup/dist/stencil-popup.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Properties

Property	Attribute	Description	Type
config	--	Configuration of the pop-up window and other things.	object={ ... }

Properties (example):

{
    button_text: "Abrir Popup",
    type: "_blank",
    popupOptions: {
      width: 600, 
      height: 679,
      top: window.screenY + ((window.outerHeight - 600) / 2.5),
      left: window.screenX + ((window.outerWidth - 679) / 2)
    }
}

Events

Event	Detail	Description
closedPopup		Event activated when the pop-up window was closed
redirectPopup		Event activated when the popup window has redirected obtaining parameters.

Methods

open(url: string, redirectUri: string)

Parameters

Name	Type	Optional
url	string	no
redirectUri	string	yes