Overlay Authentication

End Next

<cwc-overlay-authentication>

Custom Web Component, authentication overlay, helps with login, logout, authorisation, registration. password reset.

Adds an overlay system to the page handling all authentication requirements, requires compatible API (GenericLAPI).

Example

Events

• event change The user data has changed, send user data as event detail.

Methods

• method login() Open the login overlay and wait for login.
• method authenticate() Open the authenticate overlay and wait fo rauthentication to happen.
• method terminate() Log the user out and terminate authentication.

Properties

• property Object route The route object form cwc-resource-router.

Attributes

• attribute reset-route string The route/path to the reset endpoint on the api.
• attribute register-route string The route/path to the register endpoint on the api.
• attribute activate-route string The route/path to the activate endpoint on the api.
• attribute system-key string The key to use for prefixing the local storage data, such as 'my-app' or the DNS name.
• attribute system-version string The version to output in the overlays as a footer.
• attribute api-url string The URL of the API used before the routes above, such as http://my-app.com.

Style Variables

• css style variable --cwc-overlay-authentication--transition-duration The transition duration of the authentication overlay as 1s or 500ms.
• css style variable --cwc-overlay-authentication--z-index The z-index of the authentication overlay.
• css style variable --cwc-overlay-authentication--backdrop--background The backdrop background colour.
• css style variable --cwc-overlay-authentication--backdrop--opacity The backdrop opacity.
• css style variable --cwc-overlay-authentication--backdrop--z-index The backdrop z-index (higher than authentication).
• css style variable --cwc-overlay-authentication--box--background The login/reset/registration box background.
• css style variable --cwc-overlay-authentication--box--border-radius The login/reset/registration box border-radius.
• css style variable --cwc-overlay-authentication--box--box-shadow The login/reset/registration box box-shadow.
• css style variable --cwc-overlay-authentication--box--color The login/reset/registration box text colour.
• css style variable --cwc-overlay-authentication--box--left The login/reset/registration box left position.
• css style variable --cwc-overlay-authentication--box--max-width The login/reset/registration box max-width.
• css style variable --cwc-overlay-authentication--box--top The login/reset/registration box top position.
• css style variable --cwc-overlay-authentication--box--transform The login/reset/registration box transform (for positioning).
• css style variable --cwc-overlay-authentication--box--width The login/reset/registration box width.
• css style variable --cwc-overlay-authentication--box--z-index The login/reset/registration box z-index.
• css style variable --cwc-overlay-authentication--box-header--background The box header background.
• css style variable --cwc-overlay-authentication--box-header--border-radius The box header border-radius.
• css style variable --cwc-overlay-authentication--box-header--color The box header text colour.
• css style variable --cwc-overlay-authentication--box-header--font-weight The box header font-weight.
• css style variable --cwc-overlay-authentication--box-header--font-size The box header font-size.
• css style variable --cwc-overlay-authentication--box-header--height The box header height.
• css style variable --cwc-overlay-authentication--box-header--line-height The box header line-height.
• css style variable --cwc-overlay-authentication--box-header--margin The box header margin.
• css style variable --cwc-overlay-authentication--box-header--padding The box header padding.
• css style variable --cwc-overlay-authentication--box-header--text-transform The box header text-transform.
• css style variable --cwc-overlay-authentication--box-header--text-align The box header text align.
• css style variable --cwc-overlay-authentication--box-main--background The box main background.
• css style variable --cwc-overlay-authentication--box-main--color The box main text colour.
• css style variable --cwc-overlay-authentication--box-main--margin The box main margin.
• css style variable --cwc-overlay-authentication--box-main--padding The box main padding.
• css style variable --cwc-overlay-authentication--box-main--input--border The box main input border.
• css style variable --cwc-overlay-authentication--box-main--input--border-radius The box main input border-radius.
• css style variable --cwc-overlay-authentication--box-main--input--font-size The box main input font-size.
• css style variable --cwc-overlay-authentication--box-main--input--margin The box main input margin.
• css style variable --cwc-overlay-authentication--box-main--input--padding The box main input padding.
• css style variable --cwc-overlay-authentication--box-main--input--invalid--background The box main input invalid background.
• css style variable --cwc-overlay-authentication--box-main--input--invalid--border The box main input invalid border.
• css style variable --cwc-overlay-authentication--box-main--button--background The box main button.
• css style variable --cwc-overlay-authentication--box-main--button--border The box main button border.
• css style variable --cwc-overlay-authentication--box-main--button--bottom The box main button bottom position.
• css style variable --cwc-overlay-authentication--box-main--button--color The box main button text colour.
• css style variable --cwc-overlay-authentication--box-main--button--height The box main button height.
• css style variable --cwc-overlay-authentication--box-main--button--padding The box main button padding.
• css style variable --cwc-overlay-authentication--box-main--button--position The box main button position.
• css style variable --cwc-overlay-authentication--box-main--button--right The box main button right position.
• css style variable --cwc-overlay-authentication--box-message--font-size The box message font-size.
• css style variable --cwc-overlay-authentication--box-message--margin The box message margin.
• css style variable --cwc-overlay-authentication--box-message--padding The box message padding.
• css style variable --cwc-overlay-authentication--box-message--text-align The box message text align.
• css style variable --cwc-overlay-authentication--box-message-icon--height The box message icon height.
• css style variable --cwc-overlay-authentication--box-message-icon--margin The box message icon margin.
• css style variable --cwc-overlay-authentication--box-message-icon--padding The box message icon padding.
• css style variable --cwc-overlay-authentication--box-message-icon--width The box message icon width.
• css style variable --cwc-overlay-authentication--box-message-danger--background The box message danger context background.
• css style variable --cwc-overlay-authentication--box-message-danger--fill The box message danger context fill colour.
• css style variable --cwc-overlay-authentication--box-message-danger--padding The box message danger context padding.
• css style variable --cwc-overlay-authentication--box-message-success--background The box message success context background.
• css style variable --cwc-overlay-authentication--box-message-success--fill The box message success context fill colour.
• css style variable --cwc-overlay-authentication--box-message-success--padding The box message success context padding.
• css style variable --cwc-overlay-authentication--box-footer--background The box footer background.
• css style variable --cwc-overlay-authentication--box-footer--height The box footer height.
• css style variable --cwc-overlay-authentication--box-footer--color The box footer font colour.
• css style variable --cwc-overlay-authentication--box-footer--color--hover The box footer font colour on hover.
• css style variable --cwc-overlay-authentication--box-footer--cursor The box footer cursor.
• css style variable --cwc-overlay-authentication--box-footer--font-size The box footer font-size.
• css style variable --cwc-overlay-authentication--box-footer--line-height The box footer line-height.
• css style variable --cwc-overlay-authentication--box-footer--padding The box footer padding.
• css style variable --cwc-overlay-authentication--box-footer--text-decoration The box footer text decoration.
• css style variable --cwc-overlay-authentication--bumpf--bottom The bumpf/text under the box, bottom position.
• css style variable --cwc-overlay-authentication--bumpf--color The bumpf/text under the box, text colour.
• css style variable --cwc-overlay-authentication--bumpf--font-size The bumpf/text under the box, font-size.
• css style variable --cwc-overlay-authentication--bumpf--left The bumpf/text under the box, left position.
• css style variable --cwc-overlay-authentication--bumpf-version--float The bumpf/text version under the box, float.
• css style variable --cwc-overlay-authentication--auth--background The authenticating overlay background.
• css style variable --cwc-overlay-authentication--auth--border-radius The authenticating overlay border-radius.
• css style variable --cwc-overlay-authentication--auth--color The authenticating overlay text colour.
• css style variable --cwc-overlay-authentication--auth-title--color The authenticating overlay title text colour.
• css style variable --cwc-overlay-authentication--auth-title--font-size The authenticating overlay title text font-size.
• css style variable --cwc-overlay-authentication--auth-title--padding The authenticating overlay title text padding.
• css style variable --cwc-overlay-authentication--auth-title--weight The authenticating overlay title font weight.
• css style variable --cwc-overlay-authentication--auth-icon--background The authenticating overlay icon background.
• css style variable --cwc-overlay-authentication--auth-icon--border-radius The authenticating overlay icon border-radius.
• css style variable --cwc-overlay-authentication--auth-icon--fill The authenticating overlay icon fill colour.
• css style variable --cwc-overlay-authentication--auth-icon--height The authenticating overlay icon height.
• css style variable --cwc-overlay-authentication--auth-icon--width The authenticating overlay icon width.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	[hideme] { display: none; }

	#authentication-overlay { 
		--cwc-overlay-authentication--box--border-radius: 10px;
		--cwc-overlay-authentication--box-header--border-radius: 10px 10px 0px 0px;
		--cwc-overlay-authentication--box-footer--border-radius: 0px 0px 10px 10px;
	}

	.remove-button {
		display: inline-block;
		position: fixed;
		top: 10px;
		left: 50%;
		transform: translate(-50%, 0%);
		z-index: 100000;
	}
</style>

<cwc-overlay-authentication
	id="authentication-overlay"
	reset-route="reset"
	register-route="register"
	activate-route="activate"
	system-key="custom-web-components"
	system-version="1.2.3"
	api-url="http://custom-web-components.net"
></cwc-overlay-authentication>
					

Overlay Browser Compatible

Prev Next

<cwc-overlay-browser-compatible>

Custom Web Component, displays a compatible browser message if using incompatible browsers. Persistance saved to local storage to stop repeated showing of message (disabled for this example).

Example (Press F5 to retest)

Methods

• method remove() Remove the message and store in local storage to stop it showing again.

Slots

• root Single root slot for content to place in the component.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	#custom-compatible {
		padding: 20px;
	}
</style>
<script>
	// simulate IE11
	window.MSInputMethodContext = true;
	document.documentMode = true;
	
	// clear message each time, no persistence in example
	window.localStorage.clear();
</script>

<cwc-overlay-browser-compatible id="default-compatible"></cwc-overlay-browser-compatible>

<cwc-overlay-browser-compatible id="custom-compatible">
	<h1>A Message to Unsupported Users (IE)</h1>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
		Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<button onclick="document.querySelector('#custom-compatible-overlay').remove()">Remove This Message</button>
</cwc-overlay-browser-compatible>
					

Overlay Help

Prev Next

<cwc-overlay-help>

Custom Web Component, overlay help tooltip with clickable icon.

Example

Events

• event show The help tip has been shown.
• event hide The help tip has been hidden.

Methods

• method show() Show the help tip manually.
• method hide() Hide the help tip manually.

Attributes

• attribute flip flag Swap help tip message to other side.

Style Variables

• css style variable --cwc-overlay-help--icon--color The help icon colour.
• css style variable --cwc-overlay-help--icon--width The help icon width.
• css style variable --cwc-overlay-help--icon--height The help icon height.
• css style variable --cwc-overlay-help--helptip--background-color The help tooltip background colour.
• css style variable --cwc-overlay-help--helptip--border The help tooltip border.
• css style variable --cwc-overlay-help--helptip--border-radius The help tooltip border-radius.
• css style variable --cwc-overlay-help--helptip--box-shadow The help tooltip box-shadow.
• css style variable --cwc-overlay-help--helptip--color The help tooltip text colour.
• css style variable --cwc-overlay-help--helptip--font-size The help tooltip font-size.
• css style variable --cwc-overlay-help--helptip--max-width The help tooltip max width of box.
• css style variable --cwc-overlay-help--helptip--padding The help tooltip padding of box.
• css style variable --cwc-overlay-help--helptip--width The help tooltip width of box.
• css style variable --cwc-overlay-help--helptip-pointer--background-color The help tooltip pointer colour (defaults to box background colour).

Slots

• root Single root slot for content to place in the component.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	.tip2 {
		--cwc-overlay-help--helptip--width: 100px;
	}

	.tip3 {
		vertical-align: middle;
		--cwc-overlay-help--icon--width: 40px;
		--cwc-overlay-help--icon--height: 40px;
		--cwc-overlay-help--icon--color: red;
		--cwc-overlay-help--helptip--background-color: green;
		--cwc-overlay-help--helptip--border-radius: 6px;
	}
</style>

<cwc-overlay-help>This is a help message...</cwc-overlay-help>

<cwc-overlay-help class="tip2">This is a help message, should be shorter...</cwc-overlay-help>

<cwc-overlay-help class="tip3" flip>This is a help message, flipped to other side, styled...</cwc-overlay-help>
					

Overlay Loading

Prev Next

<cwc-overlay-loading>

Custom Web Component, centrally positioned overlay loader that can be styled or statically placed.

Example

Show Loader 1 Close Loader 1

Show Loader 2 Close Loader 2

Show Loader 3 Close Loader 3

Events

• event show The loading overlay has been shown.
• event hide The loading overlay has been hidden.

Methods

• method show() Show the loading overlay manually.
• method hide() Hide the loading overlay manually.

Attributes

• attribute static flag The loading overlay is statically placed inline with other content.
• attribute visible flag The loading overlay is visible.
• attribute show-on-load flag The loading overlay is shown when loaded.

Style Variables

• css style variable --cwc-overlay-loading--height The height of the loader.
• css style variable --cwc-overlay-loading--width The width of the loader.
• css style variable --cwc-overlay-loading--z-index The z-index of the loader.
• css style variable --cwc-overlay-loading--box-shadow The box shadow of the loader.
• css style variable --cwc-overlay-loading--border The border of the loader.
• css style variable --cwc-overlay-loading--padding The padding of the loader.
• css style variable --cwc-overlay-loading--background The background of hte loader.
• css style variable --cwc-overlay-loading--speed The speed to spin loader at.
• css style variable --cwc-overlay-loading--icon--fill The icon colour of the default loader icon.

Slots

• root Single root slot for content to place in the component.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	#loading-overlay2 {
		--cwc-overlay-loading--background: red;
		--cwc-overlay-loading--padding: 0;
		--cwc-overlay-loading--width: 260px;
		--cwc-overlay-loading--height: 260px;
		--cwc-overlay-loading--icon--fill: white;
	}

	#loading-overlay3 {
		--cwc-overlay-loading--background: transparent;
		--cwc-overlay-loading--border: none;
		--cwc-overlay-loading--box-shadow: none;
	}
</style>

<cwc-overlay-loading id="loading-overlay1"></cwc-overlay-loading>

<cwc-overlay-loading id="loading-overlay2"></cwc-overlay-loading>

<cwc-overlay-loading id="loading-overlay3">
	<img src="/assets/shield.png" width="100%">
</cwc-overlay-loading>
					

Overlay Modal

Prev Next

<cwc-overlay-modal>

Custom Web Component, overlay base component to provide a modal bare bones or with header and footer.

Example

Events

• event show The modal has been shown.
• event hide The modal has been hidden.

Methods

• method show() Show the modal manually.
• method hide() Hide the modal manually.
• method toggle() Toggle the modal manually from hide / show or show / hide.

Attributes

• attribute visible flag The loading overlay is visible.

Style Variables

• css style variable --cwc-overlay-modal--background The overlay modal background.
• css style variable --cwc-overlay-modal--border The overlay modal border.
• css style variable --cwc-overlay-modal--border-radius The overlay modal border radius.
• css style variable --cwc-overlay-modal--box-shadow The overlay modal box shadow.
• css style variable --cwc-overlay-modal--height The overlay modal height.
• css style variable --cwc-overlay-modal--max-height The overlay modal max height.
• css style variable --cwc-overlay-modal--max-width The overlay modal max width.
• css style variable --cwc-overlay-modal--overflow The overlay modal overflow.
• css style variable --cwc-overlay-modal--padding The overlay modal padding.
• css style variable --cwc-overlay-modal--width The overlay modal width.
• css style variable --cwc-overlay-modal--transition-time The overlay modal transition time as 200ms or 0.2s.
• css style variable --cwc-overlay-modal--z-index The overlay modal z index.
• css style variable --cwc-overlay-modal--backdrop--background The overlay modal backdrop background.
• css style variable --cwc-overlay-modal--backdrop--opacity The overlay modal backdrop opacity.
• css style variable --cwc-overlay-modal--header--background The overlay modal header background.
• css style variable --cwc-overlay-modal--header--border The overlay modal header border.
• css style variable --cwc-overlay-modal--header--border-radius The overlay modal header border radius.
• css style variable --cwc-overlay-modal--header--color The overlay modal header text colour.
• css style variable --cwc-overlay-modal--header--padding The overlay modal padding.
• css style variable --cwc-overlay-modal--header--icon--fill The overlay modal header icon fill colour.
• css style variable --cwc-overlay-modal--header--icon--height The overlay modal header icon height.
• css style variable --cwc-overlay-modal--header--icon--padding The overlay modal header icon padding.
• css style variable --cwc-overlay-modal--header--icon--right The overlay modal header icon right position.
• css style variable --cwc-overlay-modal--header--icon--width The overlay modal header icon width.
• css style variable --cwc-overlay-modal--body--background The overlay modal body background.
• css style variable --cwc-overlay-modal--body--border The overlay modal body border.
• css style variable --cwc-overlay-modal--body--border-radius The overlay modal body border radius.
• css style variable --cwc-overlay-modal--body--color The overlay modal body text colour.
• css style variable --cwc-overlay-modal--body--padding The overlay modal body padding.
• css style variable --cwc-overlay-modal--footer--background The overlay modal footer background.
• css style variable --cwc-overlay-modal--footer--border The overlay modal footer border.
• css style variable --cwc-overlay-modal--footer--border-radius The overlay modal footer border radius.
• css style variable --cwc-overlay-modal--footer--color The overlay modal footer text colour.
• css style variable --cwc-overlay-modal--footer--padding The overlay modal footer padding.
• css style variable --cwc-overlay-modal--tablet--height The overlay modal height for tablet (<980px wide).
• css style variable --cwc-overlay-modal--tablet--max-height The overlay modal max height for tablet (<980px wide).
• css style variable --cwc-overlay-modal--tablet--max-width The overlay modal max width for tablet (<980px wide).
• css style variable --cwc-overlay-modal--tablet--overflow The overlay modal overflow for tablet (<980px wide).
• css style variable --cwc-overlay-modal--tablet--width The overlay modal width for tablet (<980px wide).
• css style variable --cwc-overlay-modal--mobile--height The overlay modal height for mobile (<600px wide).
• css style variable --cwc-overlay-modal--mobile--max-height The overlay modal max height for mobile (<600px wide).
• css style variable --cwc-overlay-modal--mobile--max-width The overlay modal max width for mobile (<600px wide).
• css style variable --cwc-overlay-modal--mobile--overflow The overlay modal overflow for mobile (<600px wide).
• css style variable --cwc-overlay-modal--mobile--width The overlay modal width for mobile (<600px wide).

Slots

• root Single root slot for content to place in the overlay.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	[loaded] { display: none; }

	#overlay2 { 
		--cwc-overlay-modal--background: lightblue;
		--cwc-overlay-modal--border-radius: 10px;
		--cwc-overlay-modal--max-height: 30%;
		--cwc-overlay-modal--padding: 10px;
	}

	#overlay3 { 
		--cwc-overlay-modal--border-radius: 12px;
		--cwc-overlay-modal--header--border-radius: 10px 10px 0px 0px;
		--cwc-overlay-modal--footer--border-radius: 0px 0px 10px 10px;
		--cwc-overlay-modal--box-shadow: 0px 0px 15px 0px black;
		--cwc-overlay-modal--backdrop--background: black;
		--cwc-overlay-modal--backdrop--opacity: 0.5;
	}

	#overlay3 h3 {
		margin: 0;
		padding: 0;
	}
</style>
<div id="overlays" loaded>
	
	<cwc-overlay-modal id="overlay1">
		<span slot="body">Your thing overlayed... no headers, no footers, just an overlay ;)</span>
	</cwc-overlay-modal>

	<cwc-overlay-modal id="overlay2">
		<div slot="body">
			<span>Your thing overlayed... no headers, no footers, just an overlay, styled a bit ;)</span><br>
		</div>
	</cwc-overlay-modal>

	<cwc-overlay-modal id="overlay3">
		<h3 slot="header">Throw it, Cake!</h3>
		<div slot="body">
			<p>
				Eyahh! These jelly kinders arent... alive, are they? What? No, they cant even talk. Kick it! Thanks for helping me out guys.
				What are these buggers for, anyway? Oh, theyre decorations for my Biennial Gumball Ball. Tonight!
			</p>
		</div>
		<div slot="footer">
			<cwc-control-button>A Button</cwc-control-button>
		</div>
	</cwc-overlay-modal>
</div>

<script>
	// FOUC, as we are not in an app component... we have to manually pause showing components to ensure they are defined
	// this is not an issue in single page apps or components inside components, just components in static HTML pages!
	setTimeout(() => document.querySelector('#overlays').removeAttribute('loaded'), 1000);
</script>
					

Overlay Notify

Prev Next

<cwc-overlay-notify>

Custom Web Component, overlay notify message that can be styled.

Example

Events

• event show The modal has been shown.
• event hide The modal has been hidden.

Methods

• method show(Number timeout) Show the modal manually, pass optional milliseconds to override attribute for this one time.
• method hide() Hide the modal manually.

Attributes

• attribute visible flag The notify overlay is visible.
• attribute timeout Number The default timeout to use in milliseconds such as 4000 for 4 seconds.

Style Variables

• css style variable --cwc-overlay-notify--background The notify background.
• css style variable --cwc-overlay-notify--border The notify border.
• css style variable --cwc-overlay-notify--border-radius The notify border radius.
• css style variable --cwc-overlay-notify--bottom The notify bottom position (use unset to turn off).
• css style variable --cwc-overlay-notify--box-shadow The notify box shadow.
• css style variable --cwc-overlay-notify--color The notify text colour.
• css style variable --cwc-overlay-notify--fill The notify icon fill colour.
• css style variable --cwc-overlay-notify--height The notify height.
• css style variable --cwc-overlay-notify--left The notify left position (use unset to turn off).
• css style variable --cwc-overlay-notify--max-height The notify max height.
• css style variable --cwc-overlay-notify--max-width The notify max width.
• css style variable --cwc-overlay-notify--min-height The notify min height.
• css style variable --cwc-overlay-notify--min-width The notify min width.
• css style variable --cwc-overlay-notify--padding The notify padding.
• css style variable --cwc-overlay-notify--right The notify right position (use unset to turn off).
• css style variable --cwc-overlay-notify--top The notify top position (use unset to turn off).
• css style variable --cwc-overlay-notify--transform Thenotify transform property.
• css style variable --cwc-overlay-notify--width The notify width.
• css style variable --cwc-overlay-notify--z-index The notify Z Index.

Slots

• root Single root slot for content to place in the overlay.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	[loaded] { display: none; }

	#notify1 {
		font-size: 14px;
		--cwc-overlay-notify--background: black;
		--cwc-overlay-notify--color: #eee;
	}

	#notify2 {
		font-size: 14px;
		--cwc-overlay-notify--top: 70px; 
		--cwc-overlay-notify--bottom: unset; 
		--cwc-overlay-notify--background: red;
		--cwc-overlay-notify--color: #eee;
		--cwc-overlay-notify--border-radius: 6px;
	}

	#notify3 {
		font-size: 14px;
		--cwc-overlay-notify--right: 50%; 
		--cwc-overlay-notify--transform: translateX(50%); 
		--cwc-overlay-notify--background: darkorange;
		--cwc-overlay-notify--color: #eee;
		--cwc-overlay-notify--fill: #eee;
		--cwc-overlay-notify--border-radius: 100px;
	}

	#notify3 .icon {
		padding: 0;
		width: 25px;
		height: 25px;
	}
</style>

<div id="notifies" loaded>
	<cwc-overlay-notify id="notify1" timeout="4000" context="primary">Your Message 1</cwc-overlay-notify>
	<cwc-overlay-notify id="notify2" timeout="4000" context="primary">Your Message 2</cwc-overlay-notify>
	<cwc-overlay-notify id="notify3" timeout="4000" context="primary">
		<cwc-icon-material-general class="icon" name="warning"></cwc-icon-material-general>
		Your Message 3
	</cwc-overlay-notify>
</div>
					

Overlay To Top

Prev Next

<cwc-overlay-top-top>

Custom Web Component, common component, overlay top top button.

Example

Events

• event show The to top has been shown.
• event hidden The to top has been hidden.
• event totop The to top has gone to top.

Methods

• method show() Show the to top button manually, normally shows automatically.
• method hide() Hide the to top button manually, normally hides automatically.

Style Variables

• css style variable --cwc-overlay-to-top--top The overlay to top, top position (undefined to unset).
• css style variable --cwc-overlay-to-top--bottom The overlay to top, bottom position (undefined to unset).
• css style variable --cwc-overlay-to-top--right The overlay to top, right position (undefined to unset).
• css style variable --cwc-overlay-to-top--left The overlay to top, left position (undefined to unset).
• css style variable --cwc-overlay-to-top--width The overlay to top button width.
• css style variable --cwc-overlay-to-top--height The overlay to top button height.
• css style variable --cwc-overlay-to-top--transition-time The overlay to top transiation time.
• css style variable --cwc-overlay-to-top--transform The overlay to top transform.
• css style variable --cwc-overlay-to-top--fill The overlay to top icon fill colour.
• css style variable --cwc-overlay-to-top--padding The overlay to top padding.
• css style variable --cwc-overlay-to-top--background The overlay to top background.
• css style variable --cwc-overlay-to-top--border The overlay to top border.
• css style variable --cwc-overlay-to-top--border-radius The overlay to top border radius.
• css style variable --cwc-overlay-to-top--box-shadow The overlay to top box shadow.
• css style variable --cwc-overlay-to-top--opacity The over to top opacity.
• css style variable --cwc-overlay-to-top--cursor The overlay to top cursor.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	#totop2 {
		--cwc-overlay-to-top--background: red;
		--cwc-overlay-to-top--left: auto;
		--cwc-overlay-to-top--right: 10px;
		--cwc-overlay-to-top--bottom: 10px;
		--cwc-overlay-to-top--transform: none;
	}
</style>
<cwc-overlay-to-top id="totop1"></cwc-overlay-to-top>
<cwc-overlay-to-top id="totop2"></cwc-overlay-to-top>
					

Overlay Tooltip

Prev Start

<cwc-overlay-tooltip>

Custom Web Component, common component, overlay tooltip you can assign to any element.

Example

Events

• event show The tooltip has been shown.
• event hidden The to tooltip been hidden.

Methods

• method show() Show tooltip manually, normally shows automatically on hover over linked element.
• method hide() Hide tooltip manually, normally hides automatically on hover over linked element.

Attributes

• attribute for string Will search the parent elements children for an element that has a matching 'name' value.

Style Variables

• css style variable --cwc-overlay-tooltip--transition-time The tooltip transiation time.
• css style variable --cwc-overlay-tooltip--max-width The tooltip max width.
• css style variable --cwc-overlay-tooltip--box-shadow The tooltip box shadow.
• css style variable --cwc-overlay-tooltip--border The tooltip border.
• css style variable --cwc-overlay-tooltip--border-radius The tooltip border radius.
• css style variable --cwc-overlay-tooltip--background The tooltip background.
• css style variable --cwc-overlay-tooltip--color The tooltip text colour.
• css style variable --cwc-overlay-tooltip--padding The tooltip padding.
• css style variable --cwc-overlay-tooltip--font-size The tooltip font-size.
• css style variable --cwc-overlay-tooltip--font-weight The tooltip font weight.
• css style variable --cwc-overlay-tooltip--text-align The tooltip text align.

Slots

• root Single root slot for content to place in the component.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/overlay/index.js"></script>

<style>
	[for="tooltip-2"] {
		--cwc-overlay-tooltip--border-radius: 6px;
		--cwc-overlay-tooltip--background: blue;
		--cwc-overlay-tooltip--color: white;
		--cwc-overlay-tooltip--max-width: 100px;
	}

	[for="tooltip-3"] {
		--cwc-overlay-tooltip--border-radius: 10px;
		--cwc-overlay-tooltip--background: red;
		--cwc-overlay-tooltip--color: white;
		--cwc-overlay-tooltip--font-size: 16px;
	}
</style>
<div class="row">
	<div class="col-md-4 text-left">
		<span name="tooltip-1">Some text</span>
		<cwc-overlay-tooltip for="tooltip-1">Tooltip that stays on screen.</cwc-overlay-tooltip>
	</div>
	<div class="col-md-4 text-center">
		<span name="tooltip-2">More text</span>
		<cwc-overlay-tooltip for="tooltip-2">Tooltip thinner with slightly more text in it to make it deeper.</cwc-overlay-tooltip>
	</div>
	<div class="col-md-4 text-right">
		<span name="tooltip-3">Even more text</span>
		<cwc-overlay-tooltip for="tooltip-3">Some text to explain what this is. Some text to explain what this is. Some text to explain what this is. Stays on screen.</cwc-overlay-tooltip>
	</div>
</div>