Custom Web Components (CWC)

Layout Components

Add structured layouts to the page, from simple cards and tables through to full application dockable layouts with menus and page areas that adapt to mobile.


Card

<cwc-layout-card>

Custom Web Component, a card based layout that can be expanded, and show a loading spinner.

Example

Simple Card

No header or footer, just content in the card

You can put images, or maybe something else in a card.

Simple wrap it in the body and style the card.

A Collapsible Card

Make your card have a header, you can make it collapsible.

You can also play with the loading attribute on the card to add a spinner to the card.

Style your card how you like.

You can even add a footer, put what you want in it.

Something in the footer, maybe a button?

A Loading Collapsible Card

Some thing in the body

Some thing in the body

Some thing in the body

Some thing in the body

Something in the footer, maybe a button?

Attributes

  • attribute collapsible string Tell the card it is collapsible, by clicking the required header.
  • attribute loading string Tell the collapsed card that it is loading, requires header an collapsible.

Style Variables

  • css style variable --cwc-layout-card--border The card border.
  • css style variable --cwc-layout-card--border-radius The card border radius.
  • css style variable --cwc-layout-card--header--padding The card header padding.
  • css style variable --cwc-layout-card--header--background The card header background.
  • css style variable --cwc-layout-card--header--color The card header text colour.
  • css style variable --cwc-layout-card--header--border-radius The card header border radius.
  • css style variable --cwc-layout-card--header--open--padding The card header padding when open.
  • css style variable --cwc-layout-card--header--open--background The card header background when open.
  • css style variable --cwc-layout-card--header--open--color The card header text colour when open.
  • css style variable --cwc-layout-card--header--open--border-radius The card header border radius when open.
  • css style variable --cwc-layout-card--body--padding The card body padding.
  • css style variable --cwc-layout-card--body--background The card body background.
  • css style variable --cwc-layout-card--body--color The card body text colour.
  • css style variable --cwc-layout-card--footer--padding The card footer padding.
  • css style variable --cwc-layout-card--footer--background The card footer background.
  • css style variable --cwc-layout-card--footer--color The card footer text colour.
  • css style variable --cwc-layout-card--footer--border-radius The card footer border colour.

Slots

  • header optional When added, shows a card title header, required if using collapsible and loading attributes.
  • body required The main body for the card, even when no header and fotter used.
  • footer optional When added, shows a card footer for text or buttons or other stuff.

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

<style>
	.header { 
		margin: 0px; 
		padding: 0px; 
		font-size: 20px; 
		font-weight: normal;
	}

	.body, .footer { 
		margin: 0px; 
		padding: 0px; 
	}

	.styled-one {
		--cwc-layout-card--border-radius: 10px;

		--cwc-layout-card--header--background: blue;
		--cwc-layout-card--header--color: white;
		--cwc-layout-card--header--border-radius: 10px;
		--cwc-layout-card--header--open--border-radius: 10px 10px 0px 0px;

		--cwc-layout-card--footer--background: rgb(198, 224, 198);
		--cwc-layout-card--footer--color: green;
		--cwc-layout-card--footer--border-radius: 0px 0px 10px 10px;
	}

	.styled-two {
		--cwc-layout-card--header--background: red;
		--cwc-layout-card--header--color: white;
	}
</style>

<cwc-layout-card>
	<div slot="body">
		<h2>Simple Card</h2>
		<p>No header or footer, just content in the card</p>
		<p>You can put images, or maybe something else in a card.</p>
		<p>Simple wrap it in the body and style the card.</p>
	</div>
</cwc-layout-card>

<cwc-layout-card class="styled-one" collapsible>
	<h4 class="header" slot="header">A Collapsible Card</h4>
	<div slot="body">
		<p>Make your card have a header, you can make it collapsible.</p>
		<p>You can also play with the loading attribute on the card to add a spinner to the card.</p>
		<p>Style your card how you like.</p>
		<p>You can even add a footer, put what you want in it.</p>
	</div>
	<div slot="footer">
		<span>Something in the footer, maybe a button?</span>
	</div>
</cwc-layout-card>

<cwc-layout-card class="styled-two" collapsible loading>
	<h4 class="header" slot="header">A Loading Collapsible Card</h4>
	<div slot="body">
		<p>Some thing in the body</p>
		<p>Some thing in the body</p>
		<p>Some thing in the body</p>
		<p>Some thing in the body</p>
	</div>
	<div slot="footer">
		<span>Something in the footer, maybe a button?</span>
	</div>
</cwc-layout-card>
					

Dockable

<cwc-layout-dockable>

Custom Web Component, displays a structured dockable menu to the left with auto dock to top on mobile, page area to right, add a router in this to get SPA routing setup.

Example

My Business My Copywrite

Page One

This is a page...

Add a cwc-layout-router in this area and connect the selected route to render it here.

Events

  • event change The route is updated. Event detail is the route selected.

Methods

  • method changeRoute(Object route) Change the route by sending in a route object, please refer to cwc-layout-router for route object.
  • method updateHeight() Updates the menu to match the height of the page manually
  • method toggleMenu() Toggle the menu in mobile, docked, undocked.

Properties

  • property Array[Object] routes An array of all routes available
  • property Object route Selected route object, the selected route.
  • property Object route.component The component to load for this route such as 'my-component'.
  • property Object route.path The location path to match on route such as 'whole/route/matched' => 'http://test.com/whole/route/matched'.
  • property Object route.prefix The location prefix to match on route such as 'prefix/matched' => 'http://test.com/prefix/matched/123/456'.
  • property Object route.hidden Should the route be hidden from menu
  • property Object route.label The label to use in the menu area.
  • property Object route.permission The permission you need to have to view the route available against permission in cwc-layout-router

Attributes

  • attribute docked flag Present when menu is docked (mobile).

Style Variables

  • css style variable --cwc-layout-dockable--menu--margin The menu margin.
  • css style variable --cwc-layout-dockable--menu--padding The menu padding.
  • css style variable --cwc-layout-dockable--menu--background the menu background.
  • css style variable --cwc-layout-dockable--menu--color The menu text colour.
  • css style variable --cwc-layout-dockable--menu-header--padding The menu header padding.
  • css style variable --cwc-layout-dockable--menu-header--color The menu header text color (inherits menu text color).
  • css style variable --cwc-layout-dockable--menu-routes--color The routes text colour (inherits menu text color).
  • css style variable --cwc-layout-dockable--menu-routes--padding The menu routes padding.
  • css style variable --cwc-layout-dockable--menu-route--padding The individual menu route padding.
  • css style variable --cwc-layout-dockable--menu-route--opacity The individual menu route opacity.
  • css style variable --cwc-layout-dockable--menu-route--background--hover The individual menu route background on hover.
  • css style variable --cwc-layout-dockable--menu-route--selected--background The individual menu route selected background.
  • css style variable --cwc-layout-dockable--menu-route--link--padding The individual menu route link padding.
  • css style variable --cwc-layout-dockable--menu-button--width The menu toggle button in mobile width.
  • css style variable --cwc-layout-dockable--menu-button--height The menu toggle button in mobile height.
  • css style variable --cwc-layout-dockable--menu-button--border The menu toggle button in mobile border.
  • css style variable --cwc-layout-dockable--menu-button--border-radius The menu toggle button in mobile border radius.
  • css style variable --cwc-layout-dockable--menu-button--background The menu toggle button in mobile background.
  • css style variable --cwc-layout-dockable--menu-button--bottom The menu toggle button in mobile bottom position.
  • css style variable --cwc-layout-dockable--menu-button--right The menu toggle button in mobile right position.
  • css style variable --cwc-layout-dockable--menu-button--opacity The menu toggle button in mobile opacity.
  • css style variable --cwc-layout-dockable--menu-button--icon--width The menu toggle button in mobile icon width.
  • css style variable --cwc-layout-dockable--menu-button--icon--height The menu toggle button in mobile icon height.
  • css style variable --cwc-layout-dockable--menu-button--icon--padding The menu toggle button in mobile icon padding.
  • css style variable --cwc-layout-dockable--menu-button--icon--fill The menu toggle button in mobile icon fill.
  • css style variable --cwc-layout-dockable--menu-footer--padding The menu footer padding.
  • css style variable --cwc-layout-dockable--menu-footer--color The menu footer colour.
  • css style variable --cwc-layout-dockable--page--padding The page padding.
  • css style variable --cwc-layout-dockable--page--background The page background.
  • css style variable --cwc-layout-dockable--page--color The page text colour (omit for router).

Slots

  • menu-header optional Add a menu header to the menu area. Such as a logo, company name, saite name etc.
  • menu-footer optional Add a menu footer to the menu area. Such as a copywrite or website URL.
  • page required Add content to the page area, either static, with your own routing, or via the cwc-layout-router that can dynamically load components as a SPA (hash or path based)

<style>
	.dockable {
		--cwc-layout-dockable--menu--color: white;
		--cwc-layout-dockable--menu--background: blue;
	}
</style>

<cwc-layout-dockable id="dockable" class="dockable">
	<span slot="menu-header">My Business</span>
	<span slot="menu-footer">My Copywrite</span>
	<div slot="page">
		<h1>Page One</h1>
		<p>This is a page...</p>
		<p>Add a cwc-layout-router in this area and connect the selected route to render it here.</p>
	</div>
</cwc-layout-dockable>

<script>
	setTimeout(() => {
		document.querySelector('#dockable').routes = [
			{ component: 'page-test-index', path: 'home', label: 'Home' },
			{ component: 'page-test-one', path: 'one', label: 'One' },
			{ component: 'page-test-two', path: 'two', label: 'Two' },
			{ component: 'page-test-three', path: 'three', label: 'Three' },
			{ component: 'page-test-four', path: 'four', label: 'Four' },
			{ component: 'page-test-five', path: 'five', label: 'Five' },
			{ component: 'page-not-found', path: '404', label: '404', hidden: true }
		];
	}, 1000);
</script>
					

Router

<cwc-layout-router>

Custom Web Component, adds dynamic lazy routing (deactivated) via push state URL or hashtag. Loads the matching component into the router dynamically.

Use optional permissions array to ensure user has access to show a permitted route. NOTE: Permissions are a way to restrict routes, DO NOT rely on JS based protection to safeguard an application. All system security should be at API for ANY JS based application!

Use with dockable to get a single page application with dockable meun and page area.

Events

  • event change The route has been changed and is painted to the DOM.

Properties

  • property Object route The route selected { component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' }
  • property Array[Object] routes The routes to use as array of objects [{ component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' },...]
  • property Array[Object.String] routes[].src (optional) The full src path to the component such as '/src/component/my-component.js', if you wish to dynamically import, omit if loading all routes manually.
  • property Array[Object.String] routes[].component The component to display when route matched such as my-component
  • property Array[Object.String] routes[].path The url path to match such as some/url would match http://yoursite.com/some/url
  • property Array[Object.String] routes[].prefix The url prefix to match instead of the full path, such as some/url would match http://yoursite.com/some/url/fsdfsdfsdfsd
  • property Array[Object.String] routes[].label The label to use when displaying links in the menu
  • property Array[Object.String] routes[].hidden (optional) Do not show the route in the menu
  • property Array[Object.String] routes[].permission (optional) The permission you need to have to view the route such as ui.route.something
  • property Array[Object] permissions (optional) The permissions for the user logged in, as an array of objects [{role, 'ur.role.name', read: true, write, true, delete: true}, ...]
  • property Array[Object.String] permissions[].role The role that needs to match to the permission in the route
  • property Array[Object.Boolean] permissions[].read Does the user have read access
  • property Array[Object.Boolean] permissions[].write Does the user have write access
  • property Array[Object.Boolean] permissions[].delete Does the user have delete access

Attributes

  • attribute default string The default route path when no path has been found inthe URL, e.g. yoursite.com, the base address, as in index.
  • attribute not-found string The route to use when no route path matche to available routes e.g. 404.
  • attribute not-found flag Flag to tell the router if it's using push-state routing, requires <base href="/" /> (fallback is hashtag routing)
  • attribute redirect flag Flag to tell the system to redirect the default page to it's actual route or show it as domain root e.g. yoursite.com

Dynamically Import Components and Load Routes


export default [
	{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', path: 'home', label: 'Home' },
	{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', prefix: 'reset', label: 'Password Reset', hidden: true },
	{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', prefix: 'register', label: 'Register', hidden: true },
	{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', prefix: 'activate', label: 'Activate', hidden: true },
	{ src: '/src/app/test/app-test-one.js', component: 'app-test-one', path: 'one', label: 'One' },
	{ src: '/src/app/test/app-test-two.js', component: 'app-test-two', path: 'two', label: 'Two' },
	{ src: '/src/app/test/app-test-three.js', component: 'app-test-three', path: 'three', label: 'Three' },
	{ src: '/src/app/test/app-test-four.js', component: 'app-test-four', path: 'four', label: 'Four' },
	{ src: '/src/app/test/app-test-five.js', component: 'app-test-five', path: 'five', label: 'Five' },

	{ src: '/src/app/system/app-system-account.js', component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' },
	{ src: '/src/app/system/app-system-admin.js', component: 'app-system-admin', path: 'admin', label: 'Admin', hidden: true, permission: 'ui.route.admin' },

	{ src: '/src/app/not/app-not-found.js', component: 'app-not-found', path: '404', label: '404', hidden: true },
	{ src: '/src/app/not/app-not-allowed.js', component: 'app-not-allowed', path: '401', label: '401', hidden: true }
];
					

Manually Import Components and Load Routes


import './app/test/app-test-index.js';
import './app/test/app-test-one.js';
import './app/test/app-test-two.js';
import './app/test/app-test-three.js';
import './app/test/app-test-four.js';
import './app/test/app-test-five.js';
import './app/system/app-system-account.js';
import './app/system/app-system-admin.js';
import './app/not/app-not-found.js';
import './app/not/app-not-allowed.js';

export default [
	{ component: 'app-test-index', path: 'home', label: 'Home' },
	{ component: 'app-test-index', prefix: 'reset', label: 'Password Reset', hidden: true },
	{ component: 'app-test-index', prefix: 'register', label: 'Register', hidden: true },
	{ component: 'app-test-index', prefix: 'activate', label: 'Activate', hidden: true },
	{ component: 'app-test-one', path: 'one', label: 'One' },
	{ component: 'app-test-two', path: 'two', label: 'Two' },
	{ component: 'app-test-three', path: 'three', label: 'Three' },
	{ component: 'app-test-four', path: 'four', label: 'Four' },
	{ component: 'app-test-five', path: 'five', label: 'Five' },

	{ component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' },
	{ component: 'app-system-admin', path: 'admin', label: 'Admin', hidden: true, permission: 'ui.route.admin' },

	{ component: 'app-not-found', path: '404', label: '404', hidden: true },
	{ component: 'app-not-allowed', path: '401', label: '401', hidden: true }
];
					

Use Router Inside Dockable for SPA


<style>
	.dockable {
		--cwc-layout-dockable--menu--color: white;
		--cwc-layout-dockable--menu--background: blue;
	}
</style>

<cwc-layout-dockable id="dockable" class="dockable">
	<span slot="menu-header">My Business</span>
	<span slot="menu-footer">My Copywrite</span>
	<div slot="page">
		<cwc-layout-router 
			.route="${this._route}"
			.routes="${Routes}"
			.permissions="${this._permissions}"
			default="home"
			not-found="404"
			not-allowed="401"
			@change="${this._routerUpdated.bind(this)}"
			push-state
		></cwc-layout-router>	
	</div>
</cwc-layout-dockable>
					

Table

<cwc-layout-table>

Custom Web Component, a table based layout that can be paginated internally, externally or have its own footer, shows a loading spinner when loading.

Example

No Pagination

Pagination Internally (Full Dataset)

Pagination Externally (Paged Dataset)

Events

  • event order The table needs to order by external ordering, detail contains index of data to order and order.
  • event page The table needs to move to page by external pagination, detail contains page to move to.
  • event start The table needs to move to the start of the pages externally.
  • event end The table needs to move to the end of the pages externally.
  • event back The table needs to move back a page externally.
  • event forward The table needs to move forward a page externally.
  • event {action} A table data event has been triggered, as set in table data [[{event: ...}]] returns row as detail.

Properties

  • property Array[String|Object] header An array (columns) of string table headings or objects ['One', {...}, ...].
  • property Number header[].colspan Column span of heading as Number.
  • property Number header[].justify Justify the heading left, center, right.
  • property Number header[].fontWeight Font weight of the heading normal, bold.
  • property Number header[].weight Width of the heading as percentage or pixel etc. 50%, 100px.
  • property Number header[].order Should the column be orderable, and direction, empty for orderable, asc, desc to force order.
  • property Number header[].value The actual heading should you be using an object and not a string.
  • property Array[Array[String|Object]] body An array (rows) of arrays (columns) of table data as strings or objects [['One', {...}, ...]].
  • property Number body[][].colspan Column span of data as Number.
  • property Number body[][].justify Justify the heading left, center, right.
  • property Number body[][].fontWeight Font weight of the heading normal, bold.
  • property Number body[][].event Make the contents a clickable button with an event to fire (returns row).
  • property Number body[][].link Make the contents a clickable anchor link.
  • property Number body[][].value The actual data should you be using an object and not a string.
  • property Array[String|Object] footer An array (columns) of table footers as strings or objects ['One', {...}, ...], if not paginating table.
  • property Number body[][].colspan Column span of footer as Number.
  • property Number body[][].justify Justify the footer left, center, right.
  • property Number body[][].fontWeight Font weight of the footer normal, bold.
  • property Number body[][].value The actual data should you be using an object and not a string.

Attributes

  • attribute page-size number The size of the pages (how many rows) when paginating internally or externally.
  • attribute page-count number The amount pages calculated when paginating externally only.
  • attribute page number The page you are currently on when paginating externally only.
  • attribute loading flag The element is loading.
  • attribute paginate-internal flag The table is paginated internally (replaces footer properties), we feed it all the data and let it handle the pagination, ordering etc.
  • attribute paginate-external flag The table is paginated (replaces footer properties), but externally, all pagination/ordering is handled outside table, events emit for table actions.

Style Variables

  • css style variable --cwc-layout-table--border The table border.
  • css style variable --cwc-layout-table--border-radius The table border radius.
  • css style variable --cwc-layout-table--cell--empty--height The table cell height when empty (to stop collapse when loading).
  • css style variable --cwc-layout-table--header--background The table header background.
  • css style variable --cwc-layout-table--header--color The table header text color.
  • css style variable --cwc-layout-table--header--border-radius The table header border radius.
  • css style variable --cwc-layout-table--header--padding The table header padding.
  • css style variable --cwc-layout-table--body--background The table body background.
  • css style variable --cwc-layout-table--body--color The table body text colour.
  • css style variable --cwc-layout-table--body--cell--padding The table body cell padding.
  • css style variable --cwc-layout-table--body--cell--event--padding The table body cell event padding (when data has an event action).
  • css style variable --cwc-layout-table--footer--background The table footer background.
  • css style variable --cwc-layout-table--footer--color The table footer text colour.
  • css style variable --cwc-layout-table--footer--fill The table fill colour for icons (when paginating).
  • css style variable --cwc-layout-table--footer--cell--padding The table footer cell padding.
  • css style variable --cwc-layout-table--footer--page-count--right The table footer page count right position.
  • css style variable --cwc-layout-table--footer--page-count--pading The table footer page count padding.
  • css style variable --cwc-layout-table--footer--page-count--border The table footer page count border.
  • css style variable --cwc-layout-table--footer--page-count--border-radius The table footer page count border-radius.
  • css style variable --cwc-layout-table--footer--page-count--background The table footer page count background.
  • css style variable --cwc-layout-table--footer--page-count--color The table footer page count text colour.

<style>
	.tabled2 {
		--cwc-layout-table--header--background: blue;
		--cwc-layout-table--header--color: white;

		--cwc-layout-table--footer--background: blue;
		--cwc-layout-table--footer--color: white;
		--cwc-layout-table--footer--page-count--background: lightblue;
		--cwc-layout-table--footer--page-count--color: blue;
	}

	.tabled3 {
		--cwc-layout-table--border-radius: 10px;

		--cwc-layout-table--header--background: red;
		--cwc-layout-table--header--color: white;
		
		--cwc-layout-table--footer--background: red;
		--cwc-layout-table--footer--color: white;
		--cwc-layout-table--footer--page-count--background: white;
		--cwc-layout-table--footer--page-count--color: #444;
		--cwc-layout-table--footer--page-count--border-radius: 5px;
		--cwc-layout-table--footer--page-count--right: 20px;
	}
</style>

<h4>No Pagination</h4>
<cwc-layout-table 
	id="tabled"
	class="tabled" 
	.header="${this._userHeader}" 
	.body="${this._userBody}"
></cwc-layout-table>

<h4>Pagination Internally (Full Dataset)</h4>
<cwc-layout-table 
	id="tabled2"
	class="tabled2" 
	.header="${this._userHeader}" 
	.body="${this._userBody}"
	page-size="5"
	paginate-internal
></cwc-layout-table>

<h4>Pagination Externally (Paged Dataset)</h4>
<cwc-layout-table 
	id="tabled3"
	class="tabled3" 
	.header="${this._userHeader}" 
	.body="${this._userBody}"
	page-size="5"
	page-count="${this._pageCount}"
	page="${this._page}"
	?loading="${!this._userBody}"
	paginate-internal
	@order="${this.order.bind(this)}"
	@page="${this.page.bind(this)}"
	@start="${this.start.bind(this)}"
	@end="${this.end.bind(this)}"
	@back="${this.back.bind(this)}"
	@forward="${this.forward.bind(this)}"
	@xyz="${this.cellButtonAction.bind(this, 'xyz')}"
	@abc="${this.cellButtonAction.bind(this, 'abc')}"
></cwc-layout-table>
					

Go To Top