@aquera/nile-elements 0.0.20 → 0.0.22

package/src/nile-tab-panel/nile-tab-panel.css.ts

@@ -0,0 +1,34 @@
+/**
+* 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';
+
+/**
+ * TabPanel CSS
+ */
+export const styles = css`
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --padding: 0;
+
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .tab-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;
+
+export default [styles];

package/src/nile-tab-panel/nile-tab-panel.ts

@@ -0,0 +1,74 @@
+/**
+ * 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-tab-panel.css';
+
+import { classMap } from 'lit/directives/class-map.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+let id = 0;
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tab-panel
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+@customElement('nile-tab-panel')
+export class NileTabPanel extends NileElement {
+
+  static styles: CSSResultGroup = styles;
+
+  private readonly attrId = ++id;
+  private readonly componentId = `nile-tab-panel-${this.attrId}`;
+
+  /** The tab panel's name. */
+  @property({ reflect: true }) name = '';
+
+  /** When true, the tab panel will be shown. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute('role', 'tabpanel');
+  }
+
+  @watch('active')
+  handleActiveChange() {
+    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');
+  }
+
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+          'tab-panel': true,
+          'tab-panel--active': this.active
+        })}
+      ></slot>
+    `;
+  }
+}
+
+export default NileTabPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-tab-panel': NileTabPanel;
+  }
+}