diff --git a/ui/element/src/element.ts b/ui/element/src/element.ts index 102efbaa0..9c4b771d3 100644 --- a/ui/element/src/element.ts +++ b/ui/element/src/element.ts @@ -3,9 +3,9 @@ import {LitElement} from 'lit'; import {LoggerMixin} from './mixins/logging.js'; import {SignalMixin} from './mixins/signal.js'; +import {AlwatrRootElement} from './root.js'; -export * from './mixins/logging.js'; -export * from './mixins/signal.js'; +export {LoggerMixin, SignalMixin, AlwatrRootElement}; export * from 'lit'; export * from 'lit/decorators.js'; @@ -22,4 +22,4 @@ alwatrRegisteredList.push({ }); export const AlwatrDummyElement = LoggerMixin(LitElement); -export const AlwatrElement = SignalMixin(LoggerMixin(LitElement)); +export const AlwatrSmartElement = SignalMixin(LoggerMixin(LitElement)); diff --git a/ui/element/src/root.ts b/ui/element/src/root.ts new file mode 100644 index 000000000..f7cd024e3 --- /dev/null +++ b/ui/element/src/root.ts @@ -0,0 +1,64 @@ +import {l10n} from '@alwatr/i18n'; +import {router} from '@alwatr/router'; +import {LitElement, css, CSSResultGroup, html} from 'lit'; + +import {LoggerMixin} from './mixins/logging.js'; + +import type {TemplateResult} from '@alwatr/element'; +import type {RoutesConfig} from '@alwatr/router'; + + +/** + * Alwatr Root Base Element + */ +export class AlwatrRootElement extends LoggerMixin(LitElement) { + static override styles: CSSResultGroup = css` + :host { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + overflow: clip; + contain: layout size style; + } + + .page-container { + flex-grow: 1; + contain: size layout style; + } + `; + + protected _routes: RoutesConfig = { + map: (route) => route.sectionList[0]?.toString(), + list: { + home: { + render: () => html`