com.github.fluorumlabs.disconnect.vaadin.elements.OverlayElement Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of disconnect-vaadin Show documentation
Vaadin components bindings for Disconnect Zero
The newest version!
package com.github.fluorumlabs.disconnect.vaadin.elements;

import com.github.fluorumlabs.disconnect.core.annotations.Import;
import com.github.fluorumlabs.disconnect.core.annotations.NpmPackage;
import com.github.fluorumlabs.disconnect.vaadin.Vaadin;
import com.github.fluorumlabs.disconnect.vaadin.elements.mixins.ThemableMixin;
import com.github.fluorumlabs.disconnect.vaadin.renderers.OverlayRenderer;
import js.lang.Unknown;
import js.util.Record;
import js.web.dom.Element;
import js.web.dom.Event;
import js.web.dom.HTMLElement;
import js.web.dom.ParentNode;
import js.web.webcomponents.HTMLTemplateElement;
import org.teavm.jso.JSProperty;

import javax.annotation.Nullable;

/**
 * <vaadin-overlay> is a Web Component for creating overlays. The content of the overlay
 * can be populated in two ways: imperatively by using renderer callback function and
 * declaratively by using Polymer's Templates.
 *
 * Rendering
 * By default, the overlay uses the content provided by using the renderer callback function.
 * 
 * The renderer function provides root, owner, model arguments when applicable.
 * Generate DOM content by using model object properties if needed, append it to the root
 * element and control the state of the host element by accessing owner. Before generating new
 * content, users are able to check if there is already content in root for reusing it.
 *
 * 
<vaadin-overlay id="overlay"></vaadin-overlay>
 * 
 * const overlay = document.querySelector('#overlay');
 * overlay.renderer = function(root) {
 *  root.textContent = "Overlay content";
 * };
 * 
 * Renderer is called on the opening of the overlay and each time the related model is updated.
 * DOM generated during the renderer call can be reused
 * in the next renderer call and will be provided with the root argument.
 * On first call it will be empty.
 *
 * NOTE: when the renderer property is defined, the <template> content is not used.
 *
 * Templating
 * Alternatively, the content can be provided with Polymer Template.
 * Overlay finds the first child template and uses that in case renderer callback function
 * is not provided. You can also set a custom template using the template property.
 * 
 * After the content from the template is stamped, the content property
 * points to the content container.
 * 

 * The overlay provides forwardHostProp when calling
 * Polymer.Templatize.templatize for the template, so that the bindings
 * from the parent scope propagate to the content.  You can also pass
 * custom instanceProps object using the instanceProps property.
 *
 * 
<vaadin-overlay>
 *   <template>Overlay content</template>
 * </vaadin-overlay>
 * 
 * NOTE: when using instanceProps: because of the Polymer limitation,
 * every template can only be templatized once, so it is important
 * to set instanceProps before the template is assigned to the overlay.
 *
 * Styling
 * To style the overlay content, use styles in the parent scope:
 *
 * 
 * If the overlay is used in a component, then the component styles
 * apply the overlay content.
 * If the overlay is used in the global DOM scope, then global styles
 * apply to the overlay content.
 * 
 * See examples for styling the overlay content in the live demos.
 * 
 * The following Shadow DOM parts are available for styling the overlay component itself:
 *
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Part name Description
backdrop Backdrop of the overlay
overlay Container for position/sizing/alignment of the content
content Content of the overlay
 * The following state attributes are available for styling:
 *
 * 
 * 
 * 
 * 
 * 
 * 
 * 		
 * 		
 * 		Attribute Description Part
opening Applied just after the overlay is attached to the DOM. You can apply a CSS
 *
 * @keyframe animation for this state. :host
closing Applied just before the overlay is detached from the DOM. You can apply a
 * 		CSS
 * @keyframe animation for this state. :host
 * 		The following custom CSS properties are available for styling:
 *
 * 		
 * 		
 * 		
 * 		
 * 		
 * 		
 * 		
 * 		Custom CSS property Description Default value
--vaadin-overlay-viewport-bottom Bottom offset of the visible viewport
 * 		area 0 or detected offset
 * 		See
 * 		ThemableMixin – how to apply styles for shadow parts
 */
@NpmPackage(
		name = "@vaadin/vaadin",
		version = Vaadin.VERSION
)
@Import(

		module = "@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js"
)
public interface OverlayElement extends HTMLElement, ThemableMixin {
	static String TAGNAME() {
		return "vaadin-overlay";
	}

	@JSProperty
	boolean isOpened();

	@JSProperty
	void setOpened(boolean opened);

	/**
	 * Owner element passed with renderer function
	 */
	@Nullable
	@JSProperty
	Element getOwner();

	/**
	 * Owner element passed with renderer function
	 */
	@JSProperty
	void setOwner(Element owner);

	/**
	 * Custom function for rendering the content of the overlay.
	 * Receives three arguments:
	 *
	 * 
	 * root The root container DOM element. Append your content to it.
	 * owner The host element of the renderer function.
	 * model The object with the properties related with rendering.
	 * 
	 */
	@Nullable
	@JSProperty
	OverlayRenderer getRenderer();

	/**
	 * Custom function for rendering the content of the overlay.
	 * Receives three arguments:
	 *
	 * 
	 * root The root container DOM element. Append your content to it.
	 * owner The host element of the renderer function.
	 * model The object with the properties related with rendering.
	 * 
	 */
	@JSProperty
	void setRenderer(OverlayRenderer renderer);

	/**
	 * The template of the overlay content.
	 */
	@Nullable
	@JSProperty
	HTMLTemplateElement getTemplate();

	/**
	 * The template of the overlay content.
	 */
	@JSProperty
	void setTemplate(HTMLTemplateElement template);

	/**
	 * Optional argument for Polymer.Templatize.templatize.
	 */
	@Nullable
	@JSProperty
	Record getInstanceProps();

	/**
	 * Optional argument for Polymer.Templatize.templatize.
	 */
	@JSProperty
	void setInstanceProps(Record instanceProps);

	/**
	 * References the content container after the template is stamped.
	 */
	@Nullable
	@JSProperty
	ParentNode getContent();

	@JSProperty
	boolean isWithBackdrop();

	@JSProperty
	void setWithBackdrop(boolean withBackdrop);

	/**
	 * Object with properties that is passed to renderer function
	 */
	@Nullable
	@JSProperty
	Record getModel();

	/**
	 * Object with properties that is passed to renderer function
	 */
	@JSProperty
	void setModel(Record model);

	/**
	 * When true the overlay won't disable the main content, showing
	 * it doesn’t change the functionality of the user interface.
	 */
	@JSProperty
	boolean isModeless();

	/**
	 * When true the overlay won't disable the main content, showing
	 * it doesn’t change the functionality of the user interface.
	 */
	@JSProperty
	void setModeless(boolean modeless);

	/**
	 * When true move focus to the first focusable element in the overlay,
	 * or to the overlay if there are no focusable elements.
	 */
	@JSProperty
	boolean isFocusTrap();

	/**
	 * When true move focus to the first focusable element in the overlay,
	 * or to the overlay if there are no focusable elements.
	 */
	@JSProperty
	void setFocusTrap(boolean focusTrap);

	/**
	 * Set to true to enable restoring of focus when overlay is closed.
	 */
	@JSProperty
	boolean isRestoreFocusOnClose();

	/**
	 * Set to true to enable restoring of focus when overlay is closed.
	 */
	@JSProperty
	void setRestoreFocusOnClose(boolean restoreFocusOnClose);

	/**
	 *
	 */
	void close(Event sourceEvent);

	/**
	 * Manually invoke existing renderer.
	 */
	void render();

	/**
	 * Brings the overlay as visually the frontmost one
	 */
	void bringToFront();
}
Part name	Description
`backdrop`	Backdrop of the overlay
`overlay`	Container for position/sizing/alignment of the content
`content`	Content of the overlay
Attribute	Description	Part
`opening`	Applied just after the overlay is attached to the DOM. You can apply a CSS * * @keyframe animation for this state.	`:host`
`closing`	Applied just before the overlay is detached from the DOM. You can apply a * CSS * @keyframe animation for this state.	`:host`