@salesforcedevs/dx-components 1.2.12 → 1.2.15-alpha.0

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -1,11 +1,11 @@
 <template>
     <div class={containerClass}>
         <slot></slot>
-        <dx-button onclick={handleCloseModal}>Done</dx-button>
+        <dx-button onclick={handleToggleModal}>Done</dx-button>
     </div>
     <div
         if:true={open}
         class="modal-drawer_overlay"
-        onclick={handleCloseModal}
+        onclick={handleToggleModal}
     ></div>
 </template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -20,7 +20,13 @@ export default class ModalDrawer extends LightningElement {
         );
     }
 
-    handleCloseModal() {
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
         this._open = !this._open;
         this.dispatchEvent(new CustomEvent("clickclose"));
     }

package/src/modules/dx/popover/popover.css

@@ -6,6 +6,7 @@
         var(--dx-g-spacing-sm)
     );
     --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
+    --popover-padding: var(--dx-g-spacing-sm);
 }
 
 .popover-container {
@@ -25,7 +26,7 @@
     width: 168px;
     max-width: calc(100vw - var(--dx-g-spacing-lg));
     max-height: 65vh;
-    padding: var(--dx-g-spacing-sm);
+    padding: var(--popover-padding);
     overflow-y: auto;
     transition: opacity 0.2s linear, transform 0.2s linear;
     transition-delay: 0.02s;

package/src/modules/dx/section/section.css

@@ -8,6 +8,7 @@
     --dx-c-section-padding-right: var(--dx-c-section-padding-horizontal);
     --dx-c-section-padding-top: var(--dx-c-section-padding-vertical);
     --dx-c-section-padding-bottom: var(--dx-c-section-padding-vertical);
+    --dx-c-section-heading-margin-bottom: var(--dx-g-spacing-2xl);
 }
 
 .section {
@@ -58,10 +59,18 @@
     max-width: 800px;
 }
 
+.dx-text-heading-custom {
+    color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
+    font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
+    font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);
+    letter-spacing: var(--dx-c-section-heading-letter-spacing, -0.4px);
+    line-height: var(--dx-c-section-heading-line-height, 40px);
+}
+
 .text {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: var(--dx-c-section-heading-margin-bottom);
     z-index: 100;
 }
 

package/src/modules/dx/section/section.ts

@@ -5,7 +5,7 @@ import { toDxColor } from "dxUtils/css";
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";
     @api dark: boolean = false;
-    @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
+    @api headingLevel: "1" | "2" | "3" | "4" | "5" | "custom" = "3";
     @api label?: string;
     @api subtitle?: string;
     @api textAlign: "center" | "left" = "left";

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -18,6 +18,7 @@
             value={value}
             onchange={onInputChange}
             onfocus={onInputFocus}
+            onblur={onDropdownRequestClose}
             onclear={onInputClear}
             shortcut-key="j"
             clearable

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -422,6 +422,7 @@ export default class SidebarSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
+            case "input-blur":
                 this.dropdownRequestedOpen = false;
                 break;
             default:

package/src/modules/dx/tabPanel/tabPanel.css

@@ -0,0 +1,20 @@
+@import "dxHelpers/reset";
+
+:host {
+    --dx-c-tab-panel-margin-top: var(--dx-g-spacing-3xl);
+    --dx-c-tab-panel-gap: var(--dx-g-spacing-md);
+}
+
+.tabpanel {
+    display: none;
+}
+
+.tabpanel-active {
+    display: block;
+}
+
+@media screen and (max-width: 640px) {
+    .tabpanel-active {
+        --dx-c-tab-panel-margin-top: 36px;
+    }
+}

package/src/modules/dx/tabPanel/tabPanel.html

@@ -0,0 +1,13 @@
+<template>
+    <div
+        role="tabpanel"
+        part="tabpanel"
+        id={panelId}
+        class={className}
+        tabindex={activeTabIndex}
+        aria-labelledby={tabId}
+        hidden={panelHidden}
+    >
+        <slot></slot>
+    </div>
+</template>

package/src/modules/dx/tabPanel/tabPanel.ts

@@ -0,0 +1,27 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+export default class TabPanel extends LightningElement {
+    @api index!: number;
+    @api groupId!: string;
+    @api active: boolean = false;
+
+    private get tabId() {
+        return `tabs--${this.groupId}--tab--${this.index}`;
+    }
+
+    private get panelId() {
+        return `tabs--${this.groupId}--panel--${this.index}`;
+    }
+
+    private get activeTabIndex() {
+        return this.active ? 0 : -1;
+    }
+
+    private get className() {
+        return cx("tabpanel", this.active && "tabpanel-active");
+    }
+
+    private get panelHidden() {
+        return !this.active;
+    }
+}

package/src/modules/dx/tabPanelItem/tabPanelItem.css

@@ -0,0 +1,39 @@
+@import "dxHelpers/reset";
+
+.tab {
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
+        var(--dx-g-spacing-sm);
+    border-top-left-radius: var(--dx-g-spacing-sm);
+    border-top-right-radius: var(--dx-g-spacing-sm);
+    border-bottom: var(--dx-g-spacing-xs) solid transparent;
+}
+
+.tab:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+}
+
+.tab-active {
+    color: var(--dx-g-blue-vibrant-50);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
+}
+
+.tab:hover,
+.tab-active {
+    font-weight: var(--dx-g-font-bold);
+}
+
+@media screen and (max-width: 640px) {
+    .tab {
+        font-size: var(--dx-g-text-base);
+        font-family: var(--dx-g-font-sans);
+        font-weight: var(--dx-g-font-normal);
+    }
+
+    .tab-active {
+        font-weight: var(--dx-g-font-bold);
+    }
+}

package/src/modules/dx/tabPanelItem/tabPanelItem.html

@@ -0,0 +1,15 @@
+<template>
+    <button
+        role="tab"
+        part="tab"
+        id={tabId}
+        onclick={onClick}
+        class={className}
+        aria-controls={panelId}
+        aria-label="Tab button"
+        aria-selected={active}
+        tabindex={index}
+    >
+        <slot></slot>
+    </button>
+</template>

package/src/modules/dx/tabPanelItem/tabPanelItem.ts

@@ -0,0 +1,39 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+export default class TabPanelItem extends LightningElement {
+    @api groupId!: string;
+    @api index!: number;
+    @api active: boolean = false;
+
+    @api focus() {
+        const button = this.template.querySelector("button");
+        if (!button) {
+            return;
+        }
+        button.focus();
+    }
+
+    private get activeTabIndex() {
+        return this.active ? 0 : -1;
+    }
+
+    private get panelId() {
+        return `tabs--${this.groupId}--panel--${this.index}`;
+    }
+
+    private get tabId() {
+        return `tabs--${this.groupId}--tab--${this.index}`;
+    }
+
+    private get className() {
+        return cx("tab", this.active && "tab-active");
+    }
+
+    private onClick() {
+        this.dispatchEvent(
+            new CustomEvent("select", {
+                detail: this.index
+            })
+        );
+    }
+}

package/src/modules/dx/tabPanelList/tabPanelList.css

@@ -0,0 +1,35 @@
+:host {
+    --dx-c-tab-panel-list-horizontal-padding: var(--dx-g-spacing-3xl);
+}
+
+.tablist-container {
+    padding: 0 var(--dx-c-tab-panel-list-horizontal-padding);
+}
+
+.tablist {
+    border-bottom: 1px solid var(--dx-g-gray-80);
+}
+
+dx-popover {
+    --popover-padding: none;
+}
+
+.dropdown-item {
+    padding: var(--dx-g-spacing-sm);
+}
+
+.dropdown-item:hover {
+    cursor: pointer;
+    font-weight: var(--dx-g-font-bold);
+    background-color: var(--dx-g-blue-vibrant-95);
+}
+
+.more-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.hidden {
+    display: none;
+}

package/src/modules/dx/tabPanelList/tabPanelList.html

@@ -0,0 +1,47 @@
+<template>
+    <div class="tablist-container">
+        <div class="tablist" role="tablist" part="tablist">
+            <template for:each={tabs} for:item="tab">
+                <dx-tab-panel-item
+                    key={tab.index}
+                    onselect={onTabClick}
+                    group-id={groupId}
+                    index={tab.index}
+                    active={tab.active}
+                >
+                    {tab.label}
+                </dx-tab-panel-item>
+            </template>
+            <dx-popover offset="medium" placement="bottom-center">
+                <dx-tab-panel-item class="more-btn-container" slot="control">
+                    <div class="more-btn">
+                        More
+                        <dx-icon
+                            sprite="utility"
+                            symbol="threedots"
+                            size="large"
+                        ></dx-icon>
+                    </div>
+                </dx-tab-panel-item>
+                <div slot="content">
+                    <template for:each={dropdownItems} for:item="dropdownItem">
+                        <div
+                            role="button"
+                            onclick={onDropdownItemClick}
+                            onkeydown={onDropdownItemClick}
+                            data-value={dropdownItem.index}
+                            key={dropdownItem.label}
+                            class="dropdown-item"
+                            tabindex="0"
+                        >
+                            {dropdownItem.label}
+                        </div>
+                    </template>
+                </div>
+            </dx-popover>
+        </div>
+        <div part="tabpanels">
+            <slot onslotchange={onSlotChange}></slot>
+        </div>
+    </div>
+</template>

package/src/modules/dx/tabPanelList/tabPanelList.ts

@@ -0,0 +1,164 @@
+import { LightningElement, api } from "lwc";
+import { LightningSlotElement, Tab } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import { uniqueId } from "./uniqueId";
+export default class TabPanelList extends LightningElement {
+    @api
+    get initialIndex() {
+        return +this._initialIndex;
+    }
+    set initialIndex(value) {
+        this._initialIndex = +value;
+    }
+
+    @api
+    get tabs() {
+        return this._tabs.map((tab: Tab, index) => ({
+            ...tab,
+            index,
+            groupId: this.groupId,
+            active: this.activeIndex === index
+        }));
+    }
+    set tabs(value: Tab[]) {
+        this._tabs = toJson(value);
+    }
+
+    private _initialIndex: number = 0;
+    private _tabs: Tab[] = [];
+    private _activeIndex?: number;
+    private groupId: string = uniqueId();
+    private tabSlotPanels?: LightningSlotElement;
+    private showPopover: boolean = true;
+    private dropdownItems: Tab[] = [];
+    private hasRendered: boolean = false;
+
+    private get tabElements() {
+        return this.template.querySelectorAll("dx-tab-panel-item");
+    }
+
+    private get activeIndex() {
+        return this._activeIndex == null
+            ? this.initialIndex
+            : this._activeIndex;
+    }
+
+    private set activeIndex(value: number) {
+        this._activeIndex = value;
+        this.updateTabs();
+    }
+
+    connectedCallback() {
+        this.addListeners();
+    }
+
+    renderedCallback(): void {
+        if (!this.hasRendered) {
+            this.onResize();
+            this.hasRendered = true;
+        }
+    }
+
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+
+    private onTabClick(e: { detail: number }) {
+        if (e.detail !== this.activeIndex) {
+            this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
+        }
+        this.activeIndex = e.detail;
+    }
+
+    private onDropdownItemClick(e: CustomEvent) {
+        this.onTabClick({ detail: +e.currentTarget!.dataset.value });
+    }
+
+    private onSlotChange(e: Event) {
+        this.tabSlotPanels = <LightningSlotElement>e.target;
+        this.updateTabs();
+    }
+
+    private updateTabs() {
+        if (this.tabSlotPanels) {
+            this.tabSlotPanels.assignedElements().forEach((tabPanel, index) => {
+                tabPanel.index = index;
+                tabPanel.groupId = this.groupId;
+                tabPanel.active = this.activeIndex === index;
+            });
+        }
+        this.tabElements.forEach((tab, index) => {
+            tab.active = this.activeIndex === index;
+        });
+    }
+
+    private focusActiveTab() {
+        this.tabElements[this.activeIndex].focus();
+    }
+
+    private onKeydown = (e: KeyboardEvent) => {
+        switch (e.key) {
+            case "ArrowLeft": {
+                e.preventDefault();
+                const prev = this.activeIndex - 1;
+                this.activeIndex = prev < 0 ? this.tabs.length - 1 : prev;
+                this.focusActiveTab();
+                break;
+            }
+            case "ArrowRight": {
+                e.preventDefault();
+                const next = this.activeIndex + 1;
+                this.activeIndex = next === this.tabs.length ? 0 : next;
+                this.focusActiveTab();
+                break;
+            }
+            default:
+        }
+    };
+
+    private onResize = () => {
+        const allItems = this.template.querySelectorAll("dx-tab-panel-item");
+        const hiddenItems: number[] = [];
+        const primaryItems = this.template.querySelectorAll(
+            "dx-tab-panel-item:not(.more-btn-container)"
+        );
+        const moreBtn = this.template.querySelector(".more-btn-container")!;
+        const containerWidth =
+            this.template.querySelector(".tablist")!.offsetWidth;
+        let stopWidth = this.template.querySelector(
+            "dx-tab-panel-item.more-btn-container"
+        )!.offsetWidth;
+
+        this.dropdownItems = [];
+        allItems.forEach((item) => {
+            item.classList.remove("hidden");
+        });
+
+        primaryItems.forEach((item, i) => {
+            if (containerWidth >= stopWidth + item.offsetWidth) {
+                stopWidth += item.offsetWidth;
+            } else {
+                item.classList.add("hidden");
+                hiddenItems.push(i);
+            }
+        });
+
+        if (!hiddenItems.length) {
+            moreBtn.classList.add("hidden");
+        } else {
+            hiddenItems.forEach((i) => {
+                this.dropdownItems.push({ ...this._tabs[i], index: i });
+            });
+        }
+    };
+
+    private addListeners() {
+        this.template.addEventListener("keydown", this.onKeydown);
+        window.addEventListener("resize", this.onResize.bind(this));
+    }
+
+    private removeListeners() {
+        this.template.removeEventListener("keydown", this.onKeydown);
+        window.removeEventListener("resize", this.onResize.bind(this));
+    }
+}

package/src/modules/dx/tabPanelList/uniqueId.ts

@@ -0,0 +1,6 @@
+let idCounter = 0;
+
+export const uniqueId = (prefix: string = "") => {
+    const id = ++idCounter;
+    return prefix + id;
+};