@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, } from 'lit';\nimport {\n    property, query, queryAssignedElements, state,\n} from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8TabPanel } from '../tab-panel/tab-panel';\nimport { Cre8Tab } from '../tab/tab';\nimport styles from './tabs.styles.js';\n\nlet tabId = 1;\n\n/**\n * Tabs are used to quickly navigate back and forth between views.\n * The Tab design and interaction varies depending on the requirements for your organization and project.\n * Standardizing on the best individual controls will improve usability and reduce development and QA time.\n *\n * Create a standard set of Tab controls:\n * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).\n *\n * ## Usability Guidelines\n * - The selected Tab should be visually differentiated from the other Tabs.\n *   The deselected Tabs should still look enabled.\n *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.\n * - There must be a minimum of 2 Tabs.\n * - Showing status in a Tab is non-standard (such as 0%, 10%).\n * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab\n *   which can be a rollup of content across other Tabs.\n * - Keep the font size of the Tabs the same.\n *   If the Tabs are a fixed width and one of the labels is too long,\n *   don't resize the text to fit and consider wrapping text to a second line.\n * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.\n * - Try not to use more than six Tabs to keep the UI uncluttered.\n * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.\n *   Find alternate ways of navigating page hierarchy.\n *\n * @slot default - Default, unnamed slot container for each `cre8-tab` button\n * @slot panel - Container for each `cre8-tab-panel` content item\n */\n\nexport class Cre8Tabs extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Tab sizes\n     * - **default** displays the cre8-tab text with cre8-typography-label-default\n     * - **sm** displays the cre8-tab text with cre8-typography-label-small\n     * @type {\"sm\"}\n     * @attr\n     */\n    @property()\n    size?: 'sm';\n\n    /**\n     * Displays a set of tabs with a spanning the width of the element\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    fullWidth?: boolean;\n\n    /**\n     * Auto Increment id to sync tab and tab panel\n     *\n     * _*This property is dynamically set_\n     */\n    tabId: string;\n\n    /**\n     * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)\n     * @attr {number}\n     */\n    @property({ type: Number })\n    activeIndex?: number = 0;\n\n    /**\n     * The active tab\n     *\n     * _*This property is dynamically set_\n     */\n    @state()\n    activeTab?: Cre8Tab;\n\n    /**\n     * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isStart?: boolean = true;\n\n    /**\n     * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isEnd?: boolean = false;\n\n    /**\n     * Query all the tab items\n     */\n    @queryAssignedElements()\n    _Cre8TabItems: Array<Cre8Tab>;\n\n    /**\n     * Query all the tab panels\n     */\n    @queryAssignedElements({ slot: 'panel' })\n    _Cre8TabPanels: Array<Cre8TabPanel>;\n\n    /**\n     * Query the tabs header element\n     */\n    @query('.cre8-c-tabs__header')\n    _Cre8TabsHeader: HTMLElement;\n\n    /**\n     * Query the tabs header list element\n     */\n    @query('.cre8-c-tabs__list')\n    _Cre8TabsHeaderList: HTMLElement;\n\n    /**\n     * Query the document direction value\n     *\n     * _*This property is dynamically set_\n     */\n    get isRTL() {\n        return document.dir === 'rtl';\n    }\n\n    /**\n     * Initialize Functions\n     */\n    constructor() {\n        super();\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n        this.setIsStart = this.setIsStart.bind(this);\n        this.setIsEnd = this.setIsEnd.bind(this);\n        this.emitEvent = this.emitEvent.bind(this);\n\n        /**\n         * Set the tab id.\n         */\n        this.tabId = `cre8-tabpanel-${tabId}`;\n        tabId += 1;\n    }\n\n    /**\n     * Connected Callback Lifecycle\n     * 1. Fires each time a custom element is appended into a document-connected element.\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * Disconnected Callback Lifecycle\n     * 1. Removes the event listeners to ensure that any memory allocated by your component\n     *    will be cleaned up when your component is destroyed or disconnected from the page.\n     */\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        window.removeEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * First Updated Lifecycle Hook\n     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.\n     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.\n     * 3. Initialize isStart and isEnd.\n     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.\n     */\n    async firstUpdated() {\n        /* 1 */\n        this.setTabAttributes();\n        await this.updateComplete;\n\n        /* 2 */\n        this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0];\n        this.setActiveTab();\n\n        /* 3 */\n        this.setIsStart();\n        this.setIsEnd();\n\n        /* 4 */\n        this.setTabVariant();\n    }\n\n    /**\n     * Updated Lifecycle Hook\n     * 1. remove selected state from previously selected tab\n     * 2. Checks to see if the old `activeIndex` property has been updated.\n     *    If the new value doesn't equal the old value, activate the proper tab\n     */\n    async updated(changedProperties: Map<string, unknown>) {\n        changedProperties.forEach(async (oldValue, propName) => {\n            if (propName === 'activeIndex' && this.activeIndex !== oldValue) {\n                await this.updateComplete;\n\n                if (this.activeTab) {\n                    this.removePreviousActiveTab(); /* 1 */\n                }\n\n                this.activeTab = this._Cre8TabItems[this.activeIndex];\n                this.setActiveTab(); /* 2 */\n            }\n        });\n    }\n\n    /**\n     * Handle Resize\n     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires resize\n     */\n    handleResize() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Handle Scroll\n     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires scroll\n     */\n    handleScroll() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Set isStart State\n     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     */\n    setIsStart() {\n        if (this.isRTL) {\n            if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n                this.isStart = true;\n            } else {\n                this.isStart = false;\n            }\n        } else if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n            this.isStart = false;\n        } else {\n            this.isStart = true;\n        }\n    }\n\n    /**\n     * Set isEnd State\n     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     */\n    setIsEnd() {\n        if (this.isInViewport() === true) {\n            this.isEnd = true;\n        } else {\n            this.isEnd = false;\n        }\n    }\n\n    /**\n     * Check if last overflow list item is in the viewport\n     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child\n     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less\n     * than or equal to the window inner width or document client width\n     */\n    isInViewport() {\n        const lastChild = this._Cre8TabItems[this._Cre8TabItems.length - 1];\n        const tabElement = lastChild.shadowRoot?.querySelector('.cre8-c-tab');\n        if (!tabElement) {\n            return false; // Return false if the tab element is not found\n        }\n\n        const rect = tabElement.getBoundingClientRect(); /* 1 */\n        const windowWidth = window.innerWidth || document.documentElement.clientWidth;\n        return rect.left >= 0 && rect.right <= windowWidth; /* 2 */\n    }\n\n    /**\n     * Set Tab Variant\n     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.\n     */\n    setTabVariant() {\n        if (this.size === 'sm') {\n            this._Cre8TabItems.forEach((tab: Cre8Tab) => {\n                tab.size = 'sm';\n            });\n        }\n    }\n\n    /**\n     * Set the attributes on tab and tab panel\n     * 1. Sets the index value on the tab items.\n     * 2. Sets the `aria-labelledby` on the tab items.\n     * 3. Set the index and id on the tab-panel to match the tab.\n     */\n    setTabAttributes() {\n        this._Cre8TabItems.forEach((tab, index) => {\n            /* 1 */\n            tab.index = index;\n\n            /* 2 */\n            const ariaLabelledBy = tab.ariaLabelledBy;\n            const id = ariaLabelledBy || nanoid();\n            tab.ariaLabelledBy = id;\n\n\n            /* 3 */\n            const tabPanel = this._Cre8TabPanels[index];\n            tabPanel.index = index;\n        });\n    }\n\n    /**\n     * Set Active Tab\n     * 1. Sets the active state for the selected tab.\n     * 2. Sets the active state for the tab panel with the same index value as the selected tab.\n     */\n    setActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = true;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = true;\n        }\n    }\n\n    /**\n     * Set Active Tab Focus\n     */\n    setActiveTabFocus() {\n        this.activeTab.shadowRoot?.querySelector<HTMLElement>('.cre8-c-tab').focus();\n    }\n\n    /**\n     * Handle Tab Selected\n     * 1. Only continue if event target is a tab\n     * 2. If tab is active, make the previous selected tab inactive.\n     * 3. Set the clicked tab active.\n     * 4. Emit the custom event.\n     * @fires tabSelected\n     */\n    handleTabSelected(event: MouseEvent) {\n        const { target } = event;\n\n        /* 1 */\n        if (this._Cre8TabItems.includes(target as Cre8Tab)) {\n            /* 2 */\n            if (this.activeTab) {\n                this.removePreviousActiveTab();\n            }\n\n            /* 3 */\n            this.activeTab = target as Cre8Tab;\n            const activeIndex = this._Cre8TabItems.findIndex((tab) => tab === this.activeTab);\n            this.activeIndex = activeIndex;\n            this.setActiveTab();\n\n            /* 4 */\n            this.emitEvent();\n        }\n    }\n\n    /**\n     * Handle Keydown\n     * 1. If the active tab is not focused then handle the keydown events.\n     * 2. On keydown of the right arrow, make the next tab active.\n     * 3. On keydown of the left arrow, make the previous tab active.\n     * 4. On keydown of the home key, make the first tab active.\n     * 5. On keydown of the end key, make the last tab active.\n     * 6. On keydown of the escape key, remove the focus.\n     * @fires keydown\n     */\n    handleKeydown(event: KeyboardEvent) {\n        /* 1 */\n        const { target } = event;\n        const focused = document.activeElement as Cre8Tab;\n        if (!focused.matches('cre8-tab')) {\n            return;\n        }\n        switch (event.key) {\n            /* 2 */\n            case 'ArrowRight':\n                event.preventDefault();\n                this.setSelectedToNextTab(target as Cre8Tab);\n                break;\n            /* 3 */\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(target as Cre8Tab);\n                break;\n            /* 4 */\n            case 'Home':\n                event.preventDefault();\n                this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);\n                break;\n            /* 5 */\n            case 'End':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(this._Cre8TabItems[0]);\n                break;\n            /* 6 */\n            case 'Escape':\n                this.activeTab.blur();\n                break;\n            default:\n            // no default\n        }\n    }\n\n    /**\n     * Set Selected To Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in first position then move the tab focus to last tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tabChange\n     */\n    setSelectedToPreviousTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === 0) {\n            this.activeIndex = tabListLength;\n            this.activeTab = this._Cre8TabItems[tabListLength];\n        } else {\n            const previousIndex = activeIndex - 1;\n            this.activeIndex = previousIndex;\n            this.activeTab = this._Cre8TabItems[previousIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Set Selected To Next Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in last position then move the tab focus to first tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tabChange\n     */\n    setSelectedToNextTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === tabListLength) {\n            this.activeIndex = 0;\n            this.activeTab = this._Cre8TabItems[0];\n        } else {\n            const nextIndex = activeIndex + 1;\n            this.activeIndex = nextIndex;\n            this.activeTab = this._Cre8TabItems[nextIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Remove Active from Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab\n     * 2. If current activeIndex is in first position then move the tab focus to last tab\n     */\n    removePreviousActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = false;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = false;\n        }\n    }\n\n    /**\n     * Emit custom event\n     */\n    emitEvent() {\n        const customEvent = new CustomEvent('tabChange', {\n            detail: {\n                value: this.activeTab,\n                activeTabIndex: this.activeIndex,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-tabs', {\n            'cre8-is-start': this.isStart === true,\n            'cre8-is-end': this.isEnd === true,\n            'cre8-c-tabs--full-width': this.fullWidth,\n        });\n\n        return html`\n        <div class=\"${componentClassNames}\">\n            <div class=\"cre8-c-tabs__header\">\n                <div\n                    class=\"cre8-c-tabs__list\"\n                    role=\"tablist\"\n                    tabindex=0\n                    @scroll=${this.handleScroll}\n                    @keydown=${this.handleKeydown}\n                    @click=${this.handleTabSelected}\n                >\n                    <slot></slot>\n                </div>\n            </div>\n            <div class=\"cre8-c-tabs__body\">\n                <slot name=\"panel\"></slot>\n            </div>\n        </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-tabs') === undefined) {\n    customElements.define('cre8-tabs', Cre8Tabs);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-tabs': Cre8Tabs;\n    }\n}\n\nexport default Cre8Tabs;\n"]}

package/lib/components/tabs/tabs.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=tabs.styles.d.ts.map

package/lib/components/tabs/tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../components/tabs/tabs.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAqqBV,CAAC;AACH,eAAe,MAAM,CAAC"}