@redvars/peacock 3.8.1 → 3.8.3

package/dist/tab.js

@@ -0,0 +1,658 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b, A, c as __classPrivateFieldGet } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-DPxaZrZF.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
+import { i as isLink } from './is-link-Dk2OV3PM.js';
+import { s as spread } from './spread-B5cgadZl.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  height: 100%;
+  --tab-outline-color: var(--color-primary);
+}
+
+.tab-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 var(--_container-padding);
+  width: 100%;
+  cursor: pointer;
+}
+.tab .tab-content {
+  position: relative;
+  font-family: var(--typography-title-small-font-family) !important;
+  font-size: var(--typography-title-small-font-size) !important;
+  font-weight: var(--typography-title-small-font-weight) !important;
+  line-height: var(--typography-title-small-line-height) !important;
+  letter-spacing: var(--typography-title-small-letter-spacing) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  transition: color var(--duration-short4) var(--easing-standard), opacity var(--duration-short4) var(--easing-standard);
+  --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.tab .tab-content ::slotted([slot=icon]) {
+  color: var(--_label-text-color);
+  --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.tab .tab-content ::slotted([slot=badge]) {
+  --badge-color: var(--_tab-badge-color, var(--color-error));
+}
+.tab .indicator {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  background: var(--_active-indicator-color);
+  border-radius: var(--_active-indicator-shape);
+  transform: scaleX(0.6);
+  transform-origin: center bottom;
+  height: var(--_active-indicator-height);
+  inset: auto 0px 0px;
+  opacity: 0;
+  transition: transform var(--duration-medium2) var(--easing-standard), opacity var(--duration-short4) var(--easing-standard);
+  will-change: transform, opacity;
+}
+.tab .background {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+  transform: scaleX(0.6);
+  transform-origin: center center;
+  transition: transform var(--duration-medium2) var(--easing-standard), opacity var(--duration-short4) var(--easing-standard), background-color var(--duration-short4) var(--easing-standard);
+  will-change: transform, opacity;
+}
+.tab.has-content .slot-container {
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+.tab.disabled {
+  cursor: not-allowed;
+}
+.tab {
+  /*
+    Background layers
+   */
+}
+.tab .focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+}
+.tab .ripple {
+  corner-shape: var(--_container-corner-shape-variant);
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+}
+.tab .outline {
+  z-index: 1;
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--_outline-width) solid var(--_outline-color);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+
+:host-context([variant=primary]) .tab {
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.5rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--_label-text-color);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_active-indicator-color: var(--color-primary);
+  --_active-indicator-shape: 3px 3px 0 0;
+  --_active-indicator-height: 2px;
+}
+:host-context([variant=primary]) .tab .focus-ring {
+  inset: 3px 3px 4px 3px;
+}
+:host-context([variant=primary]) .tab .tab-content {
+  flex-direction: column;
+}
+:host-context([variant=primary]) .tab .tab-content .icon-section {
+  position: relative;
+}
+:host-context([variant=primary]) .tab .tab-content .icon-section ::slotted([slot=badge]) {
+  position: absolute;
+  top: 0;
+  left: calc(100% - 3px);
+}
+:host-context([variant=primary]) .tab .tab-content .icon-section ::slotted([slot=badge][value]) {
+  position: absolute;
+  top: 0;
+  left: calc(100% - 6px);
+}
+:host-context([variant=primary]) .tab.active .indicator {
+  opacity: 1;
+  transform: scaleX(1);
+}
+:host-context([variant=primary]) .tab.active .focus-ring {
+  inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
+}
+:host-context([variant=primary]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=primary]) .tab:active:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=primary]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=primary]) .tab.disabled .ripple {
+  display: none;
+}
+
+:host-context([variant=secondary]) .tab {
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--_label-text-color);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_active-indicator-color: var(--color-primary);
+  --_active-indicator-shape: 0;
+  --_active-indicator-height: 2px;
+}
+:host-context([variant=secondary]) .tab .focus-ring {
+  inset: 3px 3px 4px 3px;
+}
+:host-context([variant=secondary]) .tab .tab-content ::slotted([slot=icon]) {
+  margin-inline-end: var(--_tab-icon-label-spacing);
+}
+:host-context([variant=secondary]) .tab .tab-content ::slotted([slot=badge]) {
+  margin-inline-start: var(--_tab-badge-label-spacing);
+}
+:host-context([variant=secondary]) .tab.active .indicator {
+  opacity: 1;
+  transform: scaleX(1);
+}
+:host-context([variant=secondary]) .tab.active .focus-ring {
+  inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
+}
+:host-context([variant=secondary]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=secondary]) .tab:active:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=secondary]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=secondary]) .tab.disabled .ripple {
+  display: none;
+}
+
+:host-context([variant=filled]) .tab {
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+  --_container-shape-start-start: var(--shape-corner-medium);
+  --_container-shape-start-end: var(--shape-corner-medium);
+  --_container-shape-end-start: var(--shape-corner-medium);
+  --_container-shape-end-end: var(--shape-corner-medium);
+  --_container-corner-shape-variant: squircle;
+  --_active-surface-color: var(--color-surface);
+}
+:host-context([variant=filled]) .tab .focus-ring {
+  inset: 2px;
+}
+:host-context([variant=filled]) .tab .tab-content ::slotted([slot=icon]) {
+  margin-inline-end: var(--_tab-icon-label-spacing);
+}
+:host-context([variant=filled]) .tab .tab-content ::slotted([slot=badge]) {
+  margin-inline-start: var(--_tab-badge-label-spacing);
+}
+:host-context([variant=filled]) .tab .indicator {
+  display: none;
+}
+:host-context([variant=filled]) .tab .ripple {
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+:host-context([variant=filled]) .tab .background {
+  corner-shape: var(--_container-corner-shape-variant);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  background: var(--_active-surface-color);
+}
+:host-context([variant=filled]) .tab.active {
+  --_label-text-color: var(--color-on-surface);
+}
+:host-context([variant=filled]) .tab.active .background {
+  opacity: 1;
+  transform: scaleX(1);
+}
+:host-context([variant=filled]) .tab.active .ripple {
+  display: none;
+}
+:host-context([variant=filled]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=filled]) .tab:active:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=filled]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=filled]) .tab.disabled .ripple {
+  display: none;
+}
+
+:host-context([variant=contained]) .tab {
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--color-primary);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_container-corner-shape-variant: squircle;
+  --_active-surface-color: var(--color-secondary-container);
+}
+:host-context([variant=contained]) .tab .focus-ring {
+  inset: 2px;
+}
+:host-context([variant=contained]) .tab .tab-content ::slotted([slot=icon]) {
+  margin-inline-end: var(--_tab-icon-label-spacing);
+}
+:host-context([variant=contained]) .tab .tab-content ::slotted([slot=badge]) {
+  margin-inline-start: var(--_tab-badge-label-spacing);
+}
+:host-context([variant=contained]) .tab .indicator {
+  display: none;
+}
+:host-context([variant=contained]) .tab .ripple {
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+:host-context([variant=contained]) .tab .background {
+  corner-shape: var(--_container-corner-shape-variant);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  background: var(--_active-surface-color);
+}
+:host-context([variant=contained]) .tab.active {
+  --_label-text-color: var(--color-on-secondary-container);
+}
+:host-context([variant=contained]) .tab.active .background {
+  opacity: 1;
+  transform: scaleX(1);
+}
+:host-context([variant=contained]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=contained]) .tab:active:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=contained]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=contained]) .tab.disabled .ripple {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab .tab-content,
+  .tab .indicator,
+  .tab .background {
+    transition: none;
+  }
+}`;
+
+var _Tab_id;
+/**
+ * @label Tab
+ * @tag wc-tab
+ * @rawTag tab
+ *
+ * @summary A tab component for use within tabs.
+ * @overview
+ * <p>Tab represents an individual tab in a tabs component.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab>Tab Label</wc-tab>
+ * ```
+ * @tags navigation
+ */
+let Tab = class Tab extends i$1 {
+    focus() {
+        this.tabElement?.focus();
+    }
+    blur() {
+        this.tabElement?.blur();
+    }
+    constructor() {
+        super();
+        _Tab_id.set(this, crypto.randomUUID());
+        this.active = false;
+        this.disabled = false;
+        this.disabledReason = '';
+        /**
+         * Sets or retrieves the window or frame at which to target content.
+         */
+        this.target = '_self';
+        this.hasFocus = false;
+        this.slotHasContent = false;
+        this.slotHasIcon = false;
+        this.slotHasBadge = false;
+        this._tabindex = 0;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.disabled && this.href) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.tabElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.tabElement);
+        };
+        this._tabindex = 0;
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+    }
+    firstUpdated() {
+        if (typeof this.throttleDelay === 'number') {
+            this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        }
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="icon"]'), hasContent => {
+            this.slotHasIcon = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="badge"]'), hasContent => {
+            this.slotHasBadge = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __getParentTabsVariant() {
+        return this.closest('wc-tabs')?.variant ?? 'primary';
+    }
+    // private handleKeyDown(evt: KeyboardEvent) {
+    //   if (this.disabled || this.showLoader) return;
+    //   if (evt.key === 'Enter' || evt.key === ' ') {
+    //     evt.preventDefault();
+    //     this.isActive = true;
+    //     this.dispatchTabClick();
+    //   }
+    // }
+    render() {
+        const variant = this.__getParentTabsVariant();
+        const cssClasses = {
+            tab: true,
+            'tab-element': true,
+            disabled: this.disabled,
+            active: this.active,
+            [`variant-${variant}`]: true,
+            'has-content': this.slotHasContent,
+            'has-icon': this.slotHasIcon,
+            'has-badge': this.slotHasBadge,
+        };
+        if (!isLink(this)) {
+            return b `<button
+        id="button"
+        class=${e$1(cssClasses)}
+        tabindex="0"
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-disabled=${`${this.disabled}`}
+        ?disabled=${this.disabled}
+        ${spread(this.configAria)}
+      >
+        ${this.renderTabContent(variant)}
+      </button>`;
+        }
+        return b `<a
+      class=${e$1(cssClasses)}
+      id="button"
+      tabindex="0"
+      href=${this.href}
+      target=${this.target}
+      role="button"
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      aria-disabled=${`${this.disabled}`}
+      ${spread(this.configAria)}
+    >
+      ${this.renderTabContent(variant)}
+    </a>`;
+    }
+    renderTabContent(variant) {
+        switch (variant) {
+            case 'secondary':
+                return this.renderSecondaryTabContent();
+            case 'contained':
+                return this.renderContainedTabContent();
+            case 'filled':
+                return this.renderFilledTabContent();
+            case 'primary':
+            default:
+                return this.renderPrimaryTabContent();
+        }
+    }
+    renderPrimaryTabContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="tab-content">
+        <div class="icon-section">
+          <slot name="badge"></slot>
+          <slot name="icon"></slot>
+        </div>
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <div class="indicator"></div>
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    renderSecondaryTabContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="tab-content">
+        <slot name="icon"></slot>
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <slot name="badge"></slot>
+      </div>
+
+      <div class="indicator"></div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    renderContainedTabContent() {
+        return this.renderSegmentedTabContent();
+    }
+    renderFilledTabContent() {
+        return this.renderSegmentedTabContent();
+    }
+    renderSegmentedTabContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="tab-content">
+        <slot name="icon"></slot>
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <slot name="badge"></slot>
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _Tab_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _Tab_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        {this.disabledReason}
+      </div>`;
+        return A;
+    }
+};
+_Tab_id = new WeakMap();
+Tab.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Tab.prototype, "active", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], Tab.prototype, "disabledReason", void 0);
+__decorate([
+    n({ type: String })
+], Tab.prototype, "value", void 0);
+__decorate([
+    n({ reflect: true })
+], Tab.prototype, "configAria", void 0);
+__decorate([
+    n()
+], Tab.prototype, "target", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Tab.prototype, "href", void 0);
+__decorate([
+    n()
+], Tab.prototype, "throttleDelay", void 0);
+__decorate([
+    r()
+], Tab.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Tab.prototype, "slotHasContent", void 0);
+__decorate([
+    r()
+], Tab.prototype, "slotHasIcon", void 0);
+__decorate([
+    r()
+], Tab.prototype, "slotHasBadge", void 0);
+__decorate([
+    e('.tab-element')
+], Tab.prototype, "tabElement", void 0);
+Tab = __decorate([
+    IndividualComponent
+], Tab);
+
+export { Tab };
+//# sourceMappingURL=tab.js.map

package/dist/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../src/tabs/tab.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { spread } from '@/__internal/directive/spread.js';\n\nimport styles from './tab.scss';\nimport type { Tabs } from './tabs.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab\n * @tag wc-tab\n * @rawTag tab\n *\n * @summary A tab component for use within tabs.\n * @overview\n * <p>Tab represents an individual tab in a tabs component.</p>\n *\n * @example\n * ```html\n * <wc-tab>Tab Label</wc-tab>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class Tab extends LitElement {\n  #id = crypto.randomUUID();\n\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) disabledReason = '';\n\n  @property({ type: String }) value?: string;\n\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target: string = '_self';\n\n  @property({ type: String, reflect: true }) href?: string;\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  @state() hasFocus = false;\n\n  @state() slotHasContent = false;\n\n  @state() slotHasIcon = false;\n\n  @state() slotHasBadge = false;\n\n  private _tabindex = 0;\n\n  @query('.tab-element') readonly tabElement!: HTMLElement | null;\n\n  override focus() {\n    this.tabElement?.focus();\n  }\n\n  override blur() {\n    this.tabElement?.blur();\n  }\n\n  constructor() {\n    super();\n    this._tabindex = 0;\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot:not([name])'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"icon\"]'),\n      hasContent => {\n        this.slotHasIcon = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"badge\"]'),\n      hasContent => {\n        this.slotHasBadge = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.tabElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.tabElement);\n  };\n\n  __getParentTabsVariant(): Tabs['variant'] {\n    return (this.closest('wc-tabs') as Tabs | null)?.variant ?? 'primary';\n  }\n\n  // private handleKeyDown(evt: KeyboardEvent) {\n  //   if (this.disabled || this.showLoader) return;\n  //   if (evt.key === 'Enter' || evt.key === ' ') {\n  //     evt.preventDefault();\n  //     this.isActive = true;\n  //     this.dispatchTabClick();\n  //   }\n  // }\n\n  render() {\n    const variant = this.__getParentTabsVariant();\n\n    const cssClasses = {\n      tab: true,\n      'tab-element': true,\n      disabled: this.disabled,\n      active: this.active,\n      [`variant-${variant}`]: true,\n      'has-content': this.slotHasContent,\n      'has-icon': this.slotHasIcon,\n      'has-badge': this.slotHasBadge,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        id=\"button\"\n        class=${classMap(cssClasses)}\n        tabindex=\"0\"\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderTabContent(variant)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=\"0\"\n      href=${this.href}\n      target=${this.target}\n      role=\"button\"\n      ?aria-describedby=${this.__getDisabledReasonID()}\n      aria-disabled=${`${this.disabled}`}\n      ${spread(this.configAria)}\n    >\n      ${this.renderTabContent(variant)}\n    </a>`;\n  }\n\n  renderTabContent(variant: Tabs['variant']) {\n    switch (variant) {\n      case 'secondary':\n        return this.renderSecondaryTabContent();\n      case 'contained':\n        return this.renderContainedTabContent();\n      case 'filled':\n        return this.renderFilledTabContent();\n      case 'primary':\n      default:\n        return this.renderPrimaryTabContent();\n    }\n  }\n\n  renderPrimaryTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <div class=\"icon-section\">\n          <slot name=\"badge\"></slot>\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <div class=\"indicator\"></div>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  renderSecondaryTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <slot name=\"icon\"></slot>\n\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"badge\"></slot>\n      </div>\n\n      <div class=\"indicator\"></div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  renderContainedTabContent() {\n    return this.renderSegmentedTabContent();\n  }\n\n  renderFilledTabContent() {\n    return this.renderSegmentedTabContent();\n  }\n\n  renderSegmentedTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <slot name=\"icon\"></slot>\n\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"badge\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        {this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state","query"],"mappings":"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"}