@aquera/nile-elements 1.6.7 → 1.6.8

package/dist/src/nile-nav-tab/nile-nav-tab.js

@@ -0,0 +1,190 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-nav-tab.css';
+import '../nile-icon-button/nile-icon-button';
+import { MouseKey } from '../internal/enum';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import '../nile-link/nile-link';
+let id = 0;
+let NileNavTab = class NileNavTab extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.attrId = ++id;
+        this.componentId = `nile-nav-tab-${this.attrId}`;
+        /** The name of the tab panel this tab is associated with. */
+        this.panel = '';
+        /** Draws the tab in an active state. */
+        this.active = false;
+        /** Makes the tab closable and shows a close button. */
+        this.closable = false;
+        /** Disables the tab and prevents selection. */
+        this.disabled = false;
+        this.centered = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tab');
+        this.syncA11yState();
+    }
+    firstUpdated() {
+        this.syncA11yState();
+        this.updateAccessibleName();
+    }
+    updated() {
+        this.syncA11yState();
+        this.updateAccessibleName();
+    }
+    syncA11yState() {
+        this.id = this.id || this.componentId;
+        this.tabIndex = this.disabled ? -1 : this.active ? 0 : -1;
+        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+        if (this.disabled) {
+            this.setAttribute('aria-hidden', 'true');
+        }
+        else {
+            this.removeAttribute('aria-hidden');
+        }
+    }
+    /**
+     * Give the host element the accessible name, since nile-link is hidden
+     * from the accessibility tree.
+     * Author `aria-label` (without `data-auto-aria-label`) is never overwritten so icon-only tabs can keep explicit names.
+     * Auto-derived names set `data-auto-aria-label="true"` so slot/text updates can refresh them.
+     */
+    updateAccessibleName() {
+        const userDefinedAriaLabel = this.hasAttribute('aria-label') && this.getAttribute('data-auto-aria-label') !== 'true';
+        if (userDefinedAriaLabel) {
+            return;
+        }
+        const label = (this.textContent || '').replace(/\s+/g, ' ').trim();
+        if (label) {
+            this.setAttribute('aria-label', label);
+            this.setAttribute('data-auto-aria-label', 'true');
+        }
+        else {
+            this.removeAttribute('aria-label');
+            this.removeAttribute('data-auto-aria-label');
+        }
+    }
+    handleCloseClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.emit('nile-close');
+    }
+    handleTabClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const isModifiedClick = Object.values(MouseKey).some(key => event[key]) ||
+            event.button !== 0;
+        if (isModifiedClick) {
+            return;
+        }
+        event.preventDefault();
+    }
+    handleActiveChange() {
+        this.syncA11yState();
+    }
+    handleDisabledChange() {
+        this.syncA11yState();
+    }
+    focus(options) {
+        super.focus(options);
+    }
+    blur() {
+        super.blur();
+    }
+    render() {
+        this.id = this.id || this.componentId;
+        return html `
+      <li part="base tab" class="nav-tab-container" role="presentation">
+        <nile-link
+          class=${classMap({
+            'nav-tab': true,
+            'tab--centered': this.centered,
+            'nav-tab--active': this.active,
+            'nav-tab--closable': this.closable,
+            'nav-tab--disabled': this.disabled
+        })}
+          tabindex="-1"
+          role="none"
+          href=${this.link || nothing}
+          aria-hidden="true"
+          exportparts="
+            base:link,
+            prefix:link-prefix,
+            label:link-label,
+            suffix:link-suffix
+          "
+          @click=${this.handleTabClick}
+        >
+          <slot name="prefix" @slotchange=${this.updateAccessibleName}></slot>
+          <slot @slotchange=${this.updateAccessibleName}></slot>
+          <slot name="suffix" @slotchange=${this.updateAccessibleName}></slot>
+
+          ${this.closable
+            ? html `
+                <nile-icon-button
+                  part="close-button"
+                  exportparts="base:close-button__base"
+                  name="var(--nile-icon-close, var(--ng-icon-x-close))"
+                  library="system"
+                  label="close"
+                  class="nav-tab__close-button"
+                  ?disabled=${this.disabled}
+                  @click=${this.handleCloseClick}
+                  tabindex="-1"
+                ></nile-icon-button>
+              `
+            : nothing}
+        </nile-link>
+      </li>
+    `;
+    }
+};
+NileNavTab.styles = styles;
+__decorate([
+    query('.nav-tab')
+], NileNavTab.prototype, "navTab", void 0);
+__decorate([
+    property({ reflect: true })
+], NileNavTab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileNavTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileNavTab.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileNavTab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileNavTab.prototype, "centered", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileNavTab.prototype, "link", void 0);
+__decorate([
+    watch('active')
+], NileNavTab.prototype, "handleActiveChange", null);
+__decorate([
+    watch('disabled')
+], NileNavTab.prototype, "handleDisabledChange", null);
+NileNavTab = __decorate([
+    customElement('nile-nav-tab')
+], NileNavTab);
+export { NileNavTab };
+export default NileNavTab;
+//# sourceMappingURL=nile-nav-tab.js.map

package/dist/src/nile-nav-tab/nile-nav-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-nav-tab.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/nile-nav-tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\n\nimport { styles } from './nile-nav-tab.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { MouseKey } from '../internal/enum';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport '../nile-link/nile-link';\nlet id = 0;\n\n@customElement('nile-nav-tab')\nexport class NileNavTab extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private readonly attrId = ++id;\n  private readonly componentId = `nile-nav-tab-${this.attrId}`;\n\n  @query('.nav-tab') navTab!: HTMLElement;\n\n  /** The name of the tab panel this tab is associated with. */\n  @property({ reflect: true }) panel = '';\n\n  /** Draws the tab in an active state. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Makes the tab closable and shows a close button. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: Boolean, reflect: true }) centered = false;\n\n  @property({ type: String, reflect: true }) link?: string;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n    this.syncA11yState();\n  }\n\n  firstUpdated() {\n    this.syncA11yState();\n    this.updateAccessibleName();\n  }\n\n  updated() {\n    this.syncA11yState();\n    this.updateAccessibleName();\n  }\n\n  private syncA11yState() {\n    this.id = this.id || this.componentId;\n    this.tabIndex = this.disabled ? -1 : this.active ? 0 : -1;\n\n    this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    if (this.disabled) {\n      this.setAttribute('aria-hidden', 'true');\n    } else {\n      this.removeAttribute('aria-hidden');\n    }\n  }\n\n  /**\n   * Give the host element the accessible name, since nile-link is hidden\n   * from the accessibility tree.\n   * Author `aria-label` (without `data-auto-aria-label`) is never overwritten so icon-only tabs can keep explicit names.\n   * Auto-derived names set `data-auto-aria-label=\"true\"` so slot/text updates can refresh them.\n   */\n  private updateAccessibleName() {\n    const userDefinedAriaLabel =\n      this.hasAttribute('aria-label') && this.getAttribute('data-auto-aria-label') !== 'true';\n\n    if (userDefinedAriaLabel) {\n      return;\n    }\n\n    const label = (this.textContent || '').replace(/\\s+/g, ' ').trim();\n\n    if (label) {\n      this.setAttribute('aria-label', label);\n      this.setAttribute('data-auto-aria-label', 'true');\n    } else {\n      this.removeAttribute('aria-label');\n      this.removeAttribute('data-auto-aria-label');\n    }\n  }\n\n  private handleCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.emit('nile-close');\n  }\n\n  private handleTabClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    const isModifiedClick =\n      Object.values(MouseKey).some(key => event[key as keyof MouseEvent]) ||\n      event.button !== 0;\n\n    if (isModifiedClick) {\n      return;\n    }\n\n    event.preventDefault();\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.syncA11yState();\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.syncA11yState();\n  }\n\n  focus(options?: FocusOptions) {\n    super.focus(options);\n  }\n\n  blur() {\n    super.blur();\n  }\n\n  render() {\n    this.id = this.id || this.componentId;\n\n    return html`\n      <li part=\"base tab\" class=\"nav-tab-container\" role=\"presentation\">\n        <nile-link\n          class=${classMap({\n            'nav-tab': true,\n            'tab--centered': this.centered,\n            'nav-tab--active': this.active,\n            'nav-tab--closable': this.closable,\n            'nav-tab--disabled': this.disabled\n          })}\n          tabindex=\"-1\"\n          role=\"none\"\n          href=${this.link || nothing}\n          aria-hidden=\"true\"\n          exportparts=\"\n            base:link,\n            prefix:link-prefix,\n            label:link-label,\n            suffix:link-suffix\n          \"\n          @click=${this.handleTabClick}\n        >\n          <slot name=\"prefix\" @slotchange=${this.updateAccessibleName}></slot>\n          <slot @slotchange=${this.updateAccessibleName}></slot>\n          <slot name=\"suffix\" @slotchange=${this.updateAccessibleName}></slot>\n\n          ${this.closable\n            ? html`\n                <nile-icon-button\n                  part=\"close-button\"\n                  exportparts=\"base:close-button__base\"\n                  name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n                  library=\"system\"\n                  label=\"close\"\n                  class=\"nav-tab__close-button\"\n                  ?disabled=${this.disabled}\n                  @click=${this.handleCloseClick}\n                  tabindex=\"-1\"\n                ></nile-icon-button>\n              `\n            : nothing}\n        </nile-link>\n      </li>\n    `;\n  }\n}\n\nexport default NileNavTab;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-nav-tab': NileNavTab;\n  }\n}"]}

package/dist/src/nile-nav-tab/nile-nav-tab.test.d.ts

@@ -0,0 +1 @@
+import './nile-nav-tab';