@salesforcedevs/dx-components 1.2.18-lightdom → 1.2.18-lightdom-4

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -4,8 +4,6 @@ import { OptionWithNested } from "typings/custom";
 import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
-    static renderMode = 'light';
-
     @api open: boolean = false;
     @api value: string | null = null;
     @api pathname: string | null = null;
@@ -64,7 +62,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
 
     renderedCallback() {
         if (!this.navElement) {
-            this.navElement = this.querySelector("nav");
+            this.navElement = this.template.querySelector("nav");
         }
         if (this.open && !this.wasOpen && this.value) {
             this.scrollToAccordianSection();
@@ -75,10 +73,10 @@ export default class HeaderMobileNavMenu extends LightningElement {
     }
 
     private scrollToAccordianSection() {
-        const element = this.querySelector(
+        const element = this.template.querySelector(
             `li[data-id="${this.value}"]`
         );
-        const container = this.querySelector(".nav-menu");
+        const container = this.template.querySelector(".nav-menu");
         if (element && container) {
             container.scrollTop = element.offsetTop - 8;
         }

package/src/modules/dx/headerNav/{headerNav.scoped.css → headerNav.css}

@@ -1,3 +1,5 @@
+@import "dxHelpers/reset";
+
 a {
     text-decoration: none;
 }
@@ -22,7 +24,7 @@ nav {
     .nav-list-item-nav-menu {
         display: flex;
     }
-    
+
     dx-dropdown {
         display: none;
     }

package/src/modules/dx/headerNav/headerNav.html

@@ -1,7 +1,7 @@
-<template lwc:render-mode='light'>
+<template>
     <nav role="navigation" aria-label={ariaLabel}>
         <ul class="nav-list">
-            <template for:each={navItems} for:item="navItem" lwc:render-mode='light'>
+            <template for:each={navItems} for:item="navItem">
                 <li key={navItem.id}>
                     <dx-tab
                         if:false={navItem.options}

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,8 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
-    static renderMode = 'light';
-    
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,3 +1,62 @@
-dx-header-search {
+@import "dxHelpers/reset";
+
+/* DESKTOP */
+
+:host {
     --toggle-width: var(--dx-g-spacing-5xl);
-}
+}
+
+.desktop_search-container {
+    position: relative;
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+}
+
+.desktop_search-container dx-input {
+    --dx-c-input-width: calc(
+        var(--dx-c-header-search-width) - var(--toggle-width)
+    );
+}
+
+/* MOBILE */
+
+.mobile_search-button {
+    position: relative;
+    z-index: 3;
+}
+
+.mobile_search-dropdown {
+    --dx-c-popover-border-radius: 0;
+    --dx-c-popover-border: none;
+}
+
+.mobile_search-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transition: var(--dx-g-transition-hue-1x);
+    opacity: 0;
+    pointer-events: none;
+
+    --dx-c-input-border: none;
+    --dx-c-input-border-radius: 0;
+    --dx-c-input-border-active: none;
+    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
+    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
+    --dx-c-input-background-active: var(
+        --dx-g-brand-current-color-background-2
+    );
+    --dx-c-input-height: 100% !important;
+    --dx-c-input-width: 100%;
+}
+
+.mobile_search-input.state-open {
+    opacity: 1;
+    pointer-events: auto;
+}

package/src/modules/dx/headerSearch/headerSearch.html

@@ -1,7 +1,7 @@
-<template lwc:render-mode='light'>
+<template>
     <div class={className} role="search" aria-label="Records Search">
         <!-- MOBILE -->
-        <template if:true={mobile} lwc:render-mode='light'>
+        <template if:true={mobile}>
             <dx-dropdown
                 aria-label="Record Type"
                 class="mobile_search-dropdown"
@@ -37,7 +37,7 @@
         </template>
 
         <!-- DESKTOP -->
-        <template if:false={mobile} lwc:render-mode='light'>
+        <template if:false={mobile}>
             <dx-dropdown
                 options={suggestions}
                 open={isDropdownOpen}

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -12,8 +12,6 @@ import {
 const baseSearchHref = `/search`;
 
 export default class HeaderSearch extends LightningElement {
-    static renderMode = 'light';
-    
     @api mobile!: boolean;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;

package/src/modules/dx/icon/icon.css

@@ -1,5 +1,8 @@
-dx-icon {
+@import "dxHelpers/reset";
+
+:host {
     display: block;
+
     --dx-c-icon-color: currentColor;
 }
 

package/src/modules/dx/icon/icon.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template>
     <svg
         aria-hidden="true"
         style={style}

package/src/modules/dx/icon/icon.scoped.css

@@ -0,0 +1,5 @@
+:host {
+    display: block;
+
+    --dx-c-icon-color: currentColor;
+}

package/src/modules/dx/icon/icon.ts

@@ -14,8 +14,6 @@ const sizeMap = {
 };
 
 export default class Icon extends LightningElement {
-    static renderMode = 'light';
-    
     @api sprite: IconSprite = "utility";
     @api size: IconSize = "small";
     @api symbol!: IconSymbol;

package/src/modules/dx/logo/{logo.scoped.css → logo.css}

@@ -1,3 +1,6 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
 

package/src/modules/dx/logo/logo.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template>
     <a href={href} class="logo-link">
         <img src={imgSrc} alt={imgAlt} />
         <span class="dx-text-heading-7">{label}</span>

package/src/modules/dx/logo/logo.ts

@@ -1,8 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class Logo extends LightningElement {
-    static renderMode = 'light';
-    
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
     @api imgAlt: string = "Salesforce log";

package/src/modules/dx/popover/popover.html

@@ -1,5 +1,5 @@
-<template>
-    <slot name="control" onslotchange={onSlotChange}></slot>
+<template lwc:render-mode="light">
+    <slot name="control"></slot>
     <div class={containerClassName}>
         <div
             class={className}

package/src/modules/dx/popover/{popover.css → popover.scoped.css}

@@ -1,5 +1,3 @@
-@import "dxHelpers/reset";
-
 :host {
     --popover-border-radius: var(
         --dx-c-popover-border-radius,

package/src/modules/dx/popover/popover.ts

@@ -1,9 +1,5 @@
 import { LightningElement, api } from "lwc";
-import {
-    LightningSlotElement,
-    PopoverRequestCloseType,
-    PopperPlacement
-} from "typings/custom";
+import { PopoverRequestCloseType, PopperPlacement } from "typings/custom";
 
 import { computePosition, flip, size, shift } from "@floating-ui/dom";
 import cx from "classnames";
@@ -23,6 +19,8 @@ const isEventOutsideElements = (
         );
 
 export default class Popover extends LightningElement {
+    static renderMode = "light";
+
     @api ariaLabel: string | null = null;
     @api offset?: "small" | "medium";
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
@@ -118,8 +116,10 @@ export default class Popover extends LightningElement {
 
     renderedCallback() {
         if (!this.popover) {
-            this.popover = this.template.querySelector(".popover-container");
+            this.popover = this.querySelector(".popover-container");
         }
+
+        this.doWeirdControlStuff();
     }
 
     // GETTERS
@@ -127,6 +127,7 @@ export default class Popover extends LightningElement {
     private get className() {
         return cx(
             "popover",
+            "popover-content",
             this.offset && `popover-offset-${this.offset}`,
             this.small && "popover-small",
             this.width && "popover-overridewidth",
@@ -232,23 +233,36 @@ export default class Popover extends LightningElement {
         this.openPopover();
     };
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
-        const elements = slot.assignedElements();
-        const slotted = elements.length === 0 ? null : elements[0];
-        // allows dropdown/select to compose popover
-        const control =
-            slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
-        const onboardControl =
-            (!this.control || (control && !control.isSameNode(this.control))) &&
-            control;
-        if (onboardControl) {
+    // private onSlotChange(e: LightningSlotElement) {
+    //     const slot = e.target;
+    //     const elements = slot.assignedElements();
+    //     const slotted = elements.length === 0 ? null : elements[0];
+    //     // allows dropdown/select to compose popover
+    //     const control =
+    //         slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
+    //     const onboardControl =
+    //         (!this.control || (control && !control.isSameNode(this.control))) &&
+    //         control;
+    //     if (onboardControl) {
+    //         control.setAttribute("aria-haspopup", "true");
+    //         control.style.cursor = this.openOnHover ? "default" : "cursor";
+    //         this.control = control;
+    //         this.addControlListeners();
+    //         this.setPosition();
+    //     }
+    // }
+
+    private doWeirdControlStuff() {
+        const control = this.querySelector('[slot="control"]');
+
+        if (control) {
             control.setAttribute("aria-haspopup", "true");
             control.style.cursor = this.openOnHover ? "default" : "cursor";
             this.control = control;
-            this.addControlListeners();
-            this.setPosition();
         }
+
+        this.addControlListeners();
+        this.setPosition();
     }
 
     private onKeyDown(e: KeyboardEvent): void {

package/src/modules/dx/relativeDateTime/relativeDateTime.html

@@ -1,3 +1,3 @@
-<template lwc:render-mode='light'>
+<template>
     <time title={original}>{value}</time>
 </template>

package/src/modules/dx/relativeDateTime/relativeDateTime.ts

@@ -1,7 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class RelativeDateTime extends LightningElement {
-    static renderMode = 'light';
     @api messageWhenHoursPast: String = "";
     @api messageWhenDaysPast: String = "";
     @api messageWhenWeeksPast: String = "";

package/src/modules/dx/skipNavLink/{skipNavLink.scoped.css → skipNavLink.css}

@@ -1,3 +1,5 @@
+@import "dxHelpers/text";
+
 a {
     left: 0;
     top: 0;

package/src/modules/dx/skipNavLink/skipNavLink.html

@@ -1,3 +1,3 @@
-<template lwc:render-mode='light'>
+<template>
     <a class="dx-text-button-light" href="#maincontent">Skip Navigation</a>
 </template>

package/src/modules/dx/skipNavLink/skipNavLink.ts

@@ -1,6 +1,3 @@
 import { LightningElement } from "lwc";
 
-export default class SkipNavLink extends LightningElement {
-    static renderMode = 'light';
-
-}
+export default class SkipNavLink extends LightningElement {}