@tririga/tri-template/lib/templates/responsive-app-v3/@element.js

A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.

import { PolymerElement, html } from '../@polymer/polymer/polymer-element.js';
import { mixinBehaviors } from '../@polymer/polymer/lib/legacy/class.js';
import { afterNextRender } from '../@polymer/polymer/lib/utils/render-status.js';
import { TriPlatViewBehavior } from "../triplat-view-behavior/triplat-view-behavior.js";
import { TriLazyLoadingBehavior } from "../tricore-lazy-loading-behavior/tricore-lazy-loading-behavior.js";
import "../triblock-app-layout/triblock-app-layout.js";
import { assertParametersAreDefined, getModuleUrl } from "../tricore-util/tricore-util.js";

import { @ElementCamelCaseBannerRoutingBehavior } from "./@element-banner-routing-behavior.js";

class @ElementCamelCase extends mixinBehaviors([TriPlatViewBehavior, TriLazyLoadingBehavior, @ElementCamelCaseBannerRoutingBehavior], PolymerElement) {
	static get template() {
		return html `
			<style>

				triblock-app-layout {
					--triblock-app-layout-body-background-color: white;
					--triblock-app-layout-mobile-drawer-z-index: 104;
				}

				@element-main {
					@apply --layout-flex;
					@apply --layout-vertical;
				}

			</style>

			<triblock-app-layout mobile-page-label="[[_mobilePageLabel]]"
					show-mobile-back-button="[[_showMobileBackButton]]">

				<div slot="app-title">
					<span><b>App @element</b></span>
				</div>

				<triblock-banner-button slot="banner-button" home tap-handler="_navigateHome"></triblock-banner-button>
				<triblock-banner-button slot="banner-button" back tap-handler="_handleBackButtonTap"></triblock-banner-button>

				<@element-main id="mainContent" content></@element-main>

			</triblock-app-layout>
		`
	}

	connectedCallback() {
		super.connectedCallback();
		afterNextRender(this, this._loadRequestsPage);
	}

	_navigateHome(e) {
		this.$.mainContent.openInbox();
	}

	_loadRequestsPage() {
		this.loadResource(this.$.mainContent, "@element-main.js");
	}

	static get importMeta() {
		return getModuleUrl("@element/@element.js");
	}
}

window.customElements.define("@element", @ElementCamelCase);