@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

package/dist/packages/tabs/tabs.js

@@ -0,0 +1,238 @@
+// @warp-css;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { classNames } from '@chbphone55/classnames';
+import { property, query } from 'lit/decorators.js';
+import { reset } from '../styles.js';
+import { styles } from './styles.js';
+const ccTabs = {
+    wrapper: 'inline-block border-b s-border mb-32',
+    base: 'inline-grid relative -mb-1',
+    selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',
+};
+const ccGridLayout = {
+    cols1: 'grid-cols-1',
+    cols2: 'grid-cols-2',
+    cols3: 'grid-cols-3',
+    cols4: 'grid-cols-4',
+    cols5: 'grid-cols-5',
+    cols6: 'grid-cols-6',
+    cols7: 'grid-cols-7',
+    cols8: 'grid-cols-8',
+    cols9: 'grid-cols-9',
+};
+// Simple debounce utility
+function debounce(func, wait = 200, immediate = false) {
+    let timeout;
+    return ((...args) => {
+        const later = () => {
+            timeout = null;
+            if (!immediate)
+                func(...args);
+        };
+        const callNow = immediate && !timeout;
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow)
+            func(...args);
+    });
+}
+/**
+ * Tabs are used to organize content by grouping similar information on the same page.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+ */
+export class WarpTabs extends LitElement {
+    static { this.styles = [reset, styles]; }
+    constructor() {
+        super();
+        this.active = '';
+        this.tabClass = '';
+        this._activeTab = '';
+        this._updateSelectionIndicatorDebounced = debounce(this.updateSelectionIndicator.bind(this), 100);
+        this._handleTabClick = (event) => {
+            const newActiveTab = event.detail.name;
+            if (newActiveTab !== this._activeTab) {
+                this.active = newActiveTab;
+                this._activeTab = newActiveTab;
+                this.updateSelectionIndicator();
+                this.updatePanels();
+                this._notifyTabChange();
+            }
+        };
+        this._handleKeyDown = (event) => {
+            if (event.altKey || event.ctrlKey || event.shiftKey || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+                return;
+            }
+            const tabs = Array.from(this.querySelectorAll('w-tab'));
+            const currentIndex = tabs.findIndex((tab) => tab.getAttribute('name') === this._activeTab);
+            if (currentIndex === -1)
+                return;
+            let nextIndex = currentIndex;
+            switch (event.key) {
+                case 'Home':
+                    nextIndex = 0;
+                    break;
+                case 'End':
+                    nextIndex = tabs.length - 1;
+                    break;
+                case 'ArrowLeft':
+                    nextIndex = Math.max(0, currentIndex - 1);
+                    break;
+                case 'ArrowRight':
+                    nextIndex = Math.min(tabs.length - 1, currentIndex + 1);
+                    break;
+            }
+            if (nextIndex !== currentIndex) {
+                event.preventDefault();
+                const nextTab = tabs[nextIndex];
+                const nextTabName = nextTab.getAttribute('name');
+                if (nextTabName) {
+                    this.active = nextTabName;
+                    this._activeTab = nextTabName;
+                    this.updateSelectionIndicator();
+                    this.updatePanels();
+                    this._notifyTabChange();
+                    // Focus the next tab
+                    nextTab.focus();
+                }
+            }
+        };
+        this.addEventListener('tab-click', this._handleTabClick);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set up resize observer for selection indicator updates
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._updateSelectionIndicatorDebounced();
+            });
+            this._resizeObserver.observe(this);
+        }
+        // Fallback for older browsers
+        window.addEventListener('resize', this._updateSelectionIndicatorDebounced);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        window.removeEventListener('resize', this._updateSelectionIndicatorDebounced);
+        this.removeEventListener('tab-click', this._handleTabClick);
+    }
+    firstUpdated() {
+        this._initializeActiveTab();
+        this.updateSelectionIndicator();
+        this.updatePanels();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('active') && this.active !== this._activeTab) {
+            this._activeTab = this.active;
+            this.updateSelectionIndicator();
+            this.updatePanels();
+            this._notifyTabChange();
+        }
+    }
+    _initializeActiveTab() {
+        const tabs = Array.from(this.querySelectorAll('w-tab'));
+        const activeTab = tabs.find((tab) => tab.hasAttribute('active'));
+        if (activeTab) {
+            this._activeTab = activeTab.getAttribute('name') || '';
+        }
+        else if (tabs.length > 0) {
+            this._activeTab = tabs[0].getAttribute('name') || '';
+        }
+        if (this._activeTab) {
+            this.active = this._activeTab;
+        }
+    }
+    _notifyTabChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { name: this._activeTab },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updateSelectionIndicator() {
+        requestAnimationFrame(() => {
+            if (!this.tabList || !this.selectionIndicator)
+                return;
+            const activeTab = this.tabList.querySelector(`w-tab[name="${this._activeTab}"]`);
+            if (!activeTab)
+                return;
+            const tabListRect = this.tabList.getBoundingClientRect();
+            const activeTabRect = activeTab.getBoundingClientRect();
+            const left = activeTabRect.left - tabListRect.left;
+            const width = activeTabRect.width;
+            this.selectionIndicator.style.left = `${left}px`;
+            this.selectionIndicator.style.width = `${width}px`;
+        });
+    }
+    updatePanels() {
+        // Update tab panels visibility
+        const panels = document.querySelectorAll('w-tab-panel');
+        panels.forEach((panel) => {
+            const panelName = panel.getAttribute('name');
+            if (panelName === this._activeTab) {
+                panel.removeAttribute('hidden');
+                // Also explicitly set hidden property to false for web components
+                panel.hidden = false;
+            }
+            else {
+                panel.setAttribute('hidden', '');
+                panel.hidden = true;
+            }
+        });
+        // Update tab active states
+        const tabs = this.querySelectorAll('w-tab');
+        tabs.forEach((tab) => {
+            const tabName = tab.getAttribute('name');
+            if (tabName === this._activeTab) {
+                tab.setAttribute('active', '');
+            }
+            else {
+                tab.removeAttribute('active');
+            }
+        });
+    }
+    get _tabCount() {
+        return this.querySelectorAll('w-tab').length;
+    }
+    get _gridClass() {
+        const count = Math.min(this._tabCount, 9);
+        return ccGridLayout[`cols${count}`] || ccGridLayout.cols1;
+    }
+    render() {
+        const navClasses = classNames(this.tabClass, ccTabs.wrapper);
+        const divClasses = classNames([ccTabs.base, this._gridClass]);
+        return html `
+      <div class="${navClasses}">
+        <div role="tablist" class="${divClasses}" @keydown="${this._handleKeyDown}">
+          <slot></slot>
+          <span class="selection-indicator ${ccTabs.selectionIndicator}" data-testid="selection-indicator"></span>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], WarpTabs.prototype, "active", void 0);
+__decorate([
+    property({ attribute: 'tab-class', reflect: true })
+], WarpTabs.prototype, "tabClass", void 0);
+__decorate([
+    query('[role="tablist"]')
+], WarpTabs.prototype, "tabList", void 0);
+__decorate([
+    query('.selection-indicator')
+], WarpTabs.prototype, "selectionIndicator", void 0);
+if (!customElements.get('w-tabs')) {
+    customElements.define('w-tabs', WarpTabs);
+}

package/dist/packages/tabs/tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import './index.js';
+declare const meta: {
+    title: string;
+};
+export default meta;
+export declare const Default: () => import("lit").TemplateResult<1>;
+export declare const WithIcons: () => import("lit").TemplateResult<1>;
+export declare const ManyTabs: () => import("lit").TemplateResult<1>;

package/dist/packages/tabs/tabs.stories.js

@@ -0,0 +1,84 @@
+import { html } from 'lit';
+import './index.js';
+const meta = {
+    title: 'Components/Tabs',
+};
+export default meta;
+export const Default = () => html `
+  <w-tabs active="tab1">
+    <w-tab name="tab1" label="First Tab"></w-tab>
+    <w-tab name="tab2" label="Second Tab"></w-tab>
+    <w-tab name="tab3" label="Third Tab"></w-tab>
+  </w-tabs>
+
+  <w-tab-panel name="tab1">
+    <p>Content for the first tab. This panel is visible when the first tab is active.</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab2" hidden>
+    <p>Content for the second tab. This panel is visible when the second tab is active.</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab3" hidden>
+    <p>Content for the third tab. This panel is visible when the third tab is active.</p>
+  </w-tab-panel>
+`;
+export const WithIcons = () => html `
+  <w-tabs active="home">
+    <w-tab name="home" label="Home">
+      <span slot="icon">🏠</span>
+    </w-tab>
+    <w-tab name="search" label="Search">
+      <span slot="icon">🔍</span>
+    </w-tab>
+    <w-tab name="profile" label="Profile">
+      <span slot="icon">👤</span>
+    </w-tab>
+  </w-tabs>
+
+  <w-tab-panel name="home">
+    <p>Welcome to the home page!</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="search" hidden>
+    <p>Search functionality goes here.</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="profile" hidden>
+    <p>User profile information.</p>
+  </w-tab-panel>
+`;
+export const ManyTabs = () => html `
+  <w-tabs active="tab1">
+    <w-tab name="tab1" label="Tab 1"></w-tab>
+    <w-tab name="tab2" label="Tab 2"></w-tab>
+    <w-tab name="tab3" label="Tab 3"></w-tab>
+    <w-tab name="tab4" label="Tab 4"></w-tab>
+    <w-tab name="tab5" label="Tab 5"></w-tab>
+    <w-tab name="tab6" label="Tab 6"></w-tab>
+  </w-tabs>
+
+  <w-tab-panel name="tab1">
+    <p>Content for tab 1</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab2" hidden>
+    <p>Content for tab 2</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab3" hidden>
+    <p>Content for tab 3</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab4" hidden>
+    <p>Content for tab 4</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab5" hidden>
+    <p>Content for tab 5</p>
+  </w-tab-panel>
+
+  <w-tab-panel name="tab6" hidden>
+    <p>Content for tab 6</p>
+  </w-tab-panel>
+`;

package/dist/packages/textfield/index.d.ts

@@ -1,83 +1,81 @@
-declare const WarpTextField_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement, PropertyValues } from 'lit';
+export declare const ccinput: {
+    wrapper: string;
+    base: string;
+    default: string;
+    disabled: string;
+    invalid: string;
+    readOnly: string;
+    placeholder: string;
+    suffix: string;
+    prefix: string;
+    textArea: string;
+};
+export declare const ccLabel: {
+    base: string;
+    optional: string;
 };
-export class WarpTextField extends WarpTextField_base {
-    static properties: {
-        disabled: {
-            type: BooleanConstructor;
-        };
-        invalid: {
-            type: BooleanConstructor;
-        };
-        id: {
-            type: StringConstructor;
-        };
-        label: {
-            type: StringConstructor;
-        };
-        helpText: {
-            type: StringConstructor;
-        };
-        size: {
-            type: StringConstructor;
-        };
-        max: {
-            type: NumberConstructor;
-        };
-        min: {
-            type: NumberConstructor;
-        };
-        minLength: {
-            type: NumberConstructor;
-        };
-        maxLength: {
-            type: NumberConstructor;
-        };
-        name: {
-            type: StringConstructor;
-        };
-        pattern: {
-            type: StringConstructor;
-        };
-        placeholder: {
-            type: StringConstructor;
-        };
-        readOnly: {
-            type: BooleanConstructor;
-        };
-        required: {
-            type: BooleanConstructor;
-        };
-        type: {
-            type: StringConstructor;
-        };
-        value: {
-            type: StringConstructor;
-        };
-        _hasPrefix: {
-            state: boolean;
-        };
-        _hasSuffix: {
-            state: boolean;
-        };
+export declare const ccHelpText: {
+    base: string;
+    color: string;
+    colorInvalid: string;
+};
+declare const WarpTextField_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * A single line text input element.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+ */
+declare class WarpTextField extends WarpTextField_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
-    static styles: any[];
+    disabled: boolean;
+    invalid: boolean;
+    id: string;
+    label: string;
+    helpText: string;
+    size: string;
+    max: number;
+    min: number;
+    minLength: number;
+    maxLength: number;
+    pattern: string;
+    placeholder: string;
+    readOnly: boolean;
+    required: boolean;
     type: string;
-    get _inputStyles(): string;
-    get _helpTextStyles(): string;
+    value: string;
+    name: string;
+    /** @internal */
+    _hasPrefix: boolean;
+    /** @internal */
+    _hasSuffix: boolean;
+    updated(changedProperties: PropertyValues<this>): void;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    get _inputstyles(): string;
+    /** @internal */
+    get _helptextstyles(): string;
+    /** @internal */
     get _label(): import("lit").TemplateResult<1>;
+    /** @internal */
     get _helpId(): string;
+    /** @internal */
     get _id(): string;
+    /** @internal */
     get _error(): string;
-    handler(e: any): void;
-    prefixSlotChange(e: any): void;
-    _hasPrefix: boolean;
-    suffixSlotChange(e: any): void;
-    _hasSuffix: boolean;
+    handler(e: Event): void;
+    prefixSlotChange(): void;
+    suffixSlotChange(): void;
     render(): import("lit").TemplateResult<1>;
 }
-export {};
+export { WarpTextField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-textfield': WarpTextField;
+    }
+}