@aquera/nile-elements 0.0.85 → 0.0.86

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -78,7 +78,8 @@
     "./nile-split-panel": "./dist/src/nile-split-panel/index.js",
     "./nile-list": "./dist/src/nile-list/index.js",
     "./nile-list-item": "./dist/src/nile-list-item/index.js",
-    "./nile-detail": "./dist/src/nile-detail/index.js"
+    "./nile-detail": "./dist/src/nile-detail/index.js",
+    "./nile-title": "./dist/src/nile-title/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -71,3 +71,4 @@ export { NileListItem } from './nile-list-item';
 export { NileList } from './nile-list';
 export { NileDetail } from './nile-detail';
 export { NileDivider } from './nile-divider';
+export { NileTitle } from './nile-title';

package/src/nile-title/index.ts

@@ -0,0 +1 @@
+export { NileTitle } from './nile-title';

package/src/nile-title/nile-title.css.ts

@@ -0,0 +1,19 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Title CSS
+ */
+export const styles = css`
+	:host {
+    font: 500 20px / 30px var(--nile-font-family-sans-serif);
+	}
+`;
+
+export default [styles];

package/src/nile-title/nile-title.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-title.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile title component.
+ *
+ * @tag nile-title
+ *
+ */
+@customElement('nile-title')
+export class NileTitle extends NileElement {
+  @property({ type: String }) headerText = '';
+
+  @property({ type: String }) pageTitle = '';
+
+  /**
+   * The styles for nile-title
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Called when the component is updated
+   */
+  protected updated(_changedProperties: Map<string | number | symbol, unknown>): void {
+    super.updated(_changedProperties);
+    this.updateDocumentTitle();
+  }
+
+  /**
+   * Updates the document title based on pageTitle or headerText
+   */
+  private updateDocumentTitle(): void {
+    document.title = this.pageTitle || this.headerText;
+  }
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html` ${this.headerText ? html` ${this.headerText} ` : ''} `;
+  }
+
+  /* #endregion */
+}
+
+export default NileTitle;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-title': NileTitle;
+  }
+}