@salesforcedevs/dx-components 1.3.179 → 1.3.180-alpha

package/src/modules/dx/select/select.ts

@@ -2,7 +2,6 @@ import cx from "classnames";
 import { LightningElement, api } from "lwc";
 import { SelectOption } from "typings/custom";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
-import { reflectBooleanAttribute } from "dxUtils/lwc";
 
 export const DEFAULT_MISSING_MESSAGE = "This field is required";
 
@@ -11,6 +10,7 @@ export default class Select extends LightningElement {
     @api autocomplete?: string;
     @api label?: string;
     @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
+    @api name?: string;
     @api placeholder?: string;
     @api size?: string;
 
@@ -39,11 +39,6 @@ export default class Select extends LightningElement {
 
     set required(value) {
         this._required = normalizeBoolean(value);
-        reflectBooleanAttribute(
-            this as unknown as LightningElement,
-            "required",
-            value
-        );
     }
 
     @api
@@ -56,22 +51,11 @@ export default class Select extends LightningElement {
         this.updateSelectValue();
     }
 
-    @api
-    get name() {
-        return this._name;
-    }
-
-    set name(name) {
-        this._name = name;
-        this.setAttribute("name", name); // reflect to HTML
-    }
-
     _disabled = false;
     _size = "";
     _required = false;
     _options: Array<SelectOption> = [];
     _value: string = "";
-    _name?: string;
     _selectElement: HTMLSelectElement | null = null;
     helpMessage?: string = "";
 
@@ -95,16 +79,13 @@ export default class Select extends LightningElement {
 
     get selectElement() {
         if (!this._selectElement) {
-            this._selectElement =
-                this.template.querySelector<HTMLSelectElement>("select");
+            this._selectElement = this.template.querySelector<HTMLSelectElement>(
+                "select"
+            );
         }
         return this._selectElement;
     }
 
-    get isRequiredButEmpty() {
-        return this.required && !this.value;
-    }
-
     @api
     blur(): void {
         if (this.selectElement) {
@@ -121,17 +102,13 @@ export default class Select extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        const isInvalid = this.isRequiredButEmpty;
+        const isInvalid = this._required && !this._value;
         this.helpMessage = isInvalid
             ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
             : "";
         return !isInvalid;
     }
 
-    @api checkValidity(): boolean {
-        return !this.isRequiredButEmpty;
-    }
-
     handleBlur(): void {
         this.reportValidity();
         this.dispatchEvent(new CustomEvent("blur"));

package/src/modules/dx/stepSequence/stepSequence.css

@@ -9,6 +9,10 @@
     width: 100%;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 .no-animations ::slotted(*) {
     display: none;
 }

package/src/modules/dx/stepSequence/stepSequence.html

@@ -1,7 +1,6 @@
 <template>
-    <div class={containerClassName} role="region" aria-live="polite">
+    <div class={containerClassName}>
         <slot
-            class={slotClassName}
             onslotchange={handleSlotChange}
             onstepincrement={handleStepIncrement}
             onstepdecrement={handleStepDecrement}

package/src/modules/dx/stepSequence/stepSequence.ts

@@ -7,21 +7,12 @@ import cx from "classnames";
 // forward/back buttons and via any action buttons defined in the dx-step-sequence-step components (see that
 // component for details on the action buttons).
 export default class StepSequence extends LightningElement {
-    @api animateTransitions = false;
-    @api communicateStepChanges = false;
-    @api forceInitiallyVisible = false;
     @api initialStepIndex: string | undefined;
-    @api optimizePositionAfterAnimation = false;
-    @api sessionStorageId = "";
-    @api useHistory = false;
+    @api animateTransitions = false;
 
     private currentStepIndex = 0;
-    private defaultScrollRestorationValue = history.scrollRestoration;
-    private didInitiallyBecomeVisible = false;
-    private isHiddenForInitialAnimation = true;
-    private measuredStepHeights: number[] = [];
-    private slotClassName = "step-sequence-steps-slot";
     private steps: Array<HTMLElement> = [];
+    private isHiddenForInitialAnimation = true;
 
     private get containerClassName() {
         return cx("step-sequence-container", {
@@ -32,33 +23,16 @@ export default class StepSequence extends LightningElement {
 
     connectedCallback() {
         const initialStepIndex = parseInt(this.initialStepIndex as string, 10);
-
         if (!isNaN(initialStepIndex)) {
             this.currentStepIndex = initialStepIndex;
         }
-
-        if (this.useHistory) {
-            this.defaultScrollRestorationValue = history.scrollRestoration;
-            history.scrollRestoration = "manual";
-            history.replaceState(
-                {
-                    ...window.history.state,
-                    currentStepIndex: this.currentStepIndex
-                },
-                ""
-            );
-            window.addEventListener("popstate", this.handleHistoryPopstate);
-        }
-
-        if (this.sessionStorageId) {
-            sessionStorage.setItem(
-                this.sessionStorageId,
-                JSON.stringify({
-                    currentStepIndex: this.currentStepIndex
-                })
-            );
-        }
-
+        history.replaceState(
+            {
+                currentStepIndex: this.currentStepIndex
+            },
+            ""
+        );
+        window.addEventListener("popstate", this.handleHistoryPopstate);
         if (this.animateTransitions) {
             this.addEventListener("transitionend", this.handleTransitionEnd);
         } else {
@@ -66,33 +40,9 @@ export default class StepSequence extends LightningElement {
         }
     }
 
-    renderedCallback() {
-        // If we're not animating and we want to force visible, we can do it right on first render.
-        // If we're animating, this is handled after the initial animations end (to avoid seeing weird flashes).
-        if (this.forceInitiallyVisible && !this.didInitiallyBecomeVisible) {
-            this.didInitiallyBecomeVisible = true;
-
-            if (!this.animateTransitions) {
-                this.scrollToStepTop();
-            } else {
-                setTimeout(() => {
-                    this.isHiddenForInitialAnimation = false;
-                    requestAnimationFrame(() => {
-                        this.scrollToStepTop();
-                    });
-                }, 400);
-            }
-        }
-    }
-
     disconnectedCallback() {
         window.removeEventListener("popstate", this.handleHistoryPopstate);
         this.removeEventListener("transitionend", this.handleTransitionEnd);
-        history.scrollRestoration = this.defaultScrollRestorationValue;
-    }
-
-    private scrollToStepTop() {
-        this.template.host.scrollIntoView();
     }
 
     // Used only if this.animateTransitions is truthy
@@ -105,6 +55,10 @@ export default class StepSequence extends LightningElement {
             return;
         }
 
+        if (this.isHiddenForInitialAnimation) {
+            this.isHiddenForInitialAnimation = false;
+        }
+
         // Ensure subsequent steps are no longer visible:
         const prevStep = this.steps[this.currentStepIndex - 1];
         const nextStep = this.steps[this.currentStepIndex + 1];
@@ -117,38 +71,18 @@ export default class StepSequence extends LightningElement {
 
         // Mark the current step as fully active:
         this.steps[this.currentStepIndex].classList.add("active-step");
-        // Remove temporary minHeight set for nice animations, so that component will resize properly:
-        this.template.querySelector(
-            ".step-sequence-container"
-        )!.style.minHeight = "auto";
     };
 
-    // NOTE: This is the ultimate coordinator of step transitions; it should all go through here.
     private changeActiveStep(nextStepIndex: number, updateHistory = true) {
-        if (
-            nextStepIndex === this.currentStepIndex ||
-            !this.isStepIndexWithinBounds(nextStepIndex)
-        ) {
+        if (nextStepIndex === this.currentStepIndex) {
             // Should never happen, but covering all logical bases. Nothing to do here.
             return;
         }
 
-        if (this.optimizePositionAfterAnimation) {
-            this.scrollToStepTop();
-        }
-
         if (!this.animateTransitions) {
             this.steps[this.currentStepIndex].className = "";
             this.steps[nextStepIndex].className = "visible active-step";
         } else {
-            // Set minHeight temporarily to ensure nice animations:
-            this.template.querySelector(
-                ".step-sequence-container"
-            )!.style.minHeight = `${
-                this.measuredStepHeights[nextStepIndex] ||
-                this.steps[nextStepIndex].clientHeight
-            }px`;
-
             // If animations are enabled, we need to animate in the correct directions:
             if (nextStepIndex > this.currentStepIndex) {
                 this.steps[this.currentStepIndex].className =
@@ -159,13 +93,9 @@ export default class StepSequence extends LightningElement {
                     "visible animate-right-out";
                 this.steps[nextStepIndex].className = "visible animate-in";
             }
-            // Ensure focus cannot drift to invisible off-screen components
-            this.steps[nextStepIndex].removeAttribute("inert");
-            this.steps[this.currentStepIndex].setAttribute("inert", "true");
-            this.steps[nextStepIndex].focus();
         }
 
-        if (this.useHistory && updateHistory) {
+        if (updateHistory) {
             history.pushState(
                 {
                     currentStepIndex: nextStepIndex
@@ -173,29 +103,7 @@ export default class StepSequence extends LightningElement {
                 ""
             );
         }
-
-        if (this.sessionStorageId) {
-            sessionStorage.setItem(
-                this.sessionStorageId,
-                JSON.stringify({
-                    currentStepIndex: nextStepIndex
-                })
-            );
-        }
-
         this.currentStepIndex = nextStepIndex;
-
-        if (this.communicateStepChanges) {
-            this.dispatchEvent(
-                new CustomEvent("stepsequencechange", {
-                    detail: {
-                        stepIndex: this.currentStepIndex
-                    },
-                    composed: true,
-                    bubbles: true
-                })
-            );
-        }
     }
 
     private initializeStepAnimationClasses(
@@ -215,15 +123,10 @@ export default class StepSequence extends LightningElement {
         }
     }
 
-    @api
-    public getCurrentStepIndex(): number {
-        return this.currentStepIndex;
-    }
-
     // This method is available in case there are scenarios where a sequence needs to "jump" in some cases
     @api
     public jumpToStep(stepIndex: number) {
-        if (!this.isStepIndexWithinBounds(stepIndex)) {
+        if (stepIndex < 0 || stepIndex >= this.steps.length) {
             // illegal value; ignore
             return;
         }
@@ -237,18 +140,8 @@ export default class StepSequence extends LightningElement {
         }
     }
 
-    @api
-    public remeasureSteps() {
-        this.measuredStepHeights = this.steps.map((step) => step.clientHeight);
-    }
-
-    private isStepIndexWithinBounds(stepIndex: number) {
-        return stepIndex >= 0 && stepIndex < this.steps.length;
-    }
-
     handleHistoryPopstate = ({ state }: PopStateEvent) => {
-        if (typeof state?.currentStepIndex === "number") {
-            this.remeasureSteps();
+        if (typeof state.currentStepIndex === "number") {
             this.changeActiveStep(state.currentStepIndex, false);
         }
     };
@@ -276,27 +169,29 @@ export default class StepSequence extends LightningElement {
     // change it).
     handleSlotChange(e: Event) {
         const slot = e.target as HTMLSlotElement;
-
-        if (slot.className !== this.slotClassName) {
-            return;
-        }
-
         this.steps = slot.assignedElements() as HTMLElement[];
-
-        this.steps.forEach((step, index) => {
-            if (this.animateTransitions) {
+        if (!this.animateTransitions) {
+            this.steps[this.currentStepIndex].className = "visible active-step";
+        } else {
+            // For transition animations to be visible, the container must have a height that will
+            // keep the components visible as they transition in and out. Currently this component
+            // will have at least the height of the "tallest" slotted element.
+            let minHeight = 0;
+            this.steps.forEach((step, index) => {
+                if (step.clientHeight > minHeight) {
+                    minHeight = step.clientHeight;
+                }
                 this.initializeStepAnimationClasses(
                     this.currentStepIndex,
                     step,
                     index
                 );
-                if (index !== this.currentStepIndex) {
-                    // Ensure focus cannot drift to invisible off-screen components
-                    step.setAttribute("inert", "true");
-                }
+            });
+            if (minHeight > 0) {
+                this.template.querySelector(
+                    ".step-sequence-container"
+                )!.style.minHeight = `${minHeight}px`;
             }
-        });
-
-        this.steps[this.currentStepIndex].className = "visible active-step";
+        }
     }
 }

package/src/modules/dx/trafficLabeler/trafficLabeler.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/trafficLabeler/trafficLabeler.ts

@@ -0,0 +1,66 @@
+import { LightningElement, api } from "lwc";
+
+const REDUNDANT_INSTANCE_ERROR_MESSAGE =
+    "Multiple <dx-traffic-labeler>s detected, this should never be the case.";
+
+const CLEARBIT_PUBLIC_KEY = "pk_c7acb4500cec7a59c8c1199eeb8e041d";
+
+declare module globalThis {
+    let singletonTrafficLabelerConnected: boolean;
+}
+
+export default class TrafficLabeler extends LightningElement {
+    @api internalIps?: string;
+
+    renderedCallback() {}
+
+    connectedCallback(): void {
+        if (!globalThis.singletonTrafficLabelerConnected) {
+            globalThis.singletonTrafficLabelerConnected = true;
+            this.loadClearBitData();
+        } else {
+            console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
+        }
+    }
+
+    async loadClearBitData() {
+        const result = await fetch(
+            `https://reveal.clearbit.com/v1/companies/reveal?authorization=${CLEARBIT_PUBLIC_KEY}`
+        );
+        const json = await result.json();
+        if (json.company.name.toLowerCase().includes("salesforce")) {
+            this.setTrafficType("internal");
+        }
+    }
+
+    async evaluateVPNAddress() {
+        try {
+            const ipifyResult = await fetch(
+                "https://api.ipify.org/?format=json"
+            );
+            const result = await ipifyResult.json();
+
+            const internalIps = this.internalIps?.split(",");
+            let trafficType: "internal" | "external" = "external";
+
+            internalIps?.forEach((value) => {
+                const regex = new RegExp(value);
+                if (regex.exec(result.ip)) {
+                    trafficType = "internal";
+                }
+            });
+
+            this.setTrafficType(trafficType);
+        } catch (error) {
+            console.error("fetch failed ", error);
+        }
+    }
+
+    setTrafficType(trafficType: "internal" | "external") {
+        // @ts-ignore
+        const dataLayer = (window.dataLayer = window.dataLayer || []);
+        dataLayer.push({
+            traffic_type: trafficType
+        });
+    }
+}

package/src/modules/dxUtils/css/css.ts

@@ -17,7 +17,6 @@ const LABEL_TO_DX_VAR: { [key: string]: string } = {
 
 const DEFAULT_BACKGROUND_LEVEL = 95;
 const DEFAULT_COLOR_LEVEL = 40;
-const BROWSER_COLOR_REGEXP = /^(?:#[0-9A-F]{3,8}|rgba?\(.+\))/;
 
 export const colorToDxColors = (
     color?: Color
@@ -41,9 +40,7 @@ export const colorToDxColors = (
 };
 
 export const toDxColor = (color: string) =>
-    ["white", "transparent"].includes(color) || BROWSER_COLOR_REGEXP.test(color)
-        ? color
-        : `var(--dx-g-${color})`;
+    ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;
 
 export const buildStyleColorVariables = ({
     background,

package/src/modules/dxUtils/lwc/lwc.ts

@@ -1,5 +1,3 @@
-import { LightningElement } from "lwc";
-
 export const setContainerInnerHtml = (
     container: HTMLElement,
     markup: string
@@ -9,16 +7,3 @@ export const setContainerInnerHtml = (
         container.innerHTML = markup;
     }
 };
-
-export const reflectBooleanAttribute = <T extends LightningElement>(
-    element: T,
-    attrName: string,
-    value: string | boolean | undefined
-) => {
-    // Reflect to HTML, accommodating the disparate ways HTML and LWC handle boolean attributes
-    if (value !== false) {
-        element.setAttribute(attrName, "");
-    } else {
-        element.removeAttribute(attrName);
-    }
-};

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/src/modules/dx/alert/alert.css

@@ -1,108 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-:host {
-    --dx-c-alert-top: 0;
-    --dx-c-alert-container-align-items: flex-start;
-    --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
-    --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
-    --dx-c-alert-warning-color: rgb(254, 243, 217);
-    --dx-c-alert-danger-color: var(--dx-g-red-vibrant-95);
-    --dx-c-alert-success-accent-color: var(--dx-g-green-vibrant-80);
-    --dx-c-alert-warning-accent-color: var(--dx-g-yellow-vibrant-80);
-    --dx-c-alert-danger-accent-color: var(--dx-g-red-vibrant-50);
-}
-
-.alert-icon {
-    margin-right: var(--dx-g-spacing-md);
-}
-
-.alert-base {
-    padding: var(--dx-c-alert-vertical-padding);
-}
-
-.alert-container {
-    display: flex;
-    flex-direction: column;
-    align-items: var(--dx-c-alert-container-align-items);
-    padding-left: var(--dx-g-global-header-padding-horizontal);
-    padding-right: var(--dx-g-global-header-padding-horizontal);
-    width: 100%;
-    border: none;
-}
-
-.alert-container.alert-type-success {
-    background-color: var(--dx-c-alert-success-color);
-    border-color: var(--dx-c-alert-success-accent-color);
-}
-
-.alert-container.alert-type-warning {
-    background-color: var(--dx-c-alert-warning-color);
-    border-color: var(--dx-c-alert-warning-accent-color);
-}
-
-.alert-container.alert-type-danger {
-    background-color: var(--dx-c-alert-danger-color);
-    border-color: var(--dx-c-alert-danger-accent-color);
-}
-
-.alert-container.alert-variant-accented {
-    border-style: solid;
-    border-width: 0;
-    border-left-width: 4px;
-}
-
-.alert-title-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-}
-
-.alert-title {
-    font-weight: var(--dx-g-font-bold);
-}
-
-dx-button {
-    margin-left: auto;
-}
-
-/*
-    NOTE: Here we are assuming that indicator height won't go beyond 1000px.
-
-    It's one of the suggested way to achieve the expand/collapse animation
-    Ref: https://stackoverflow.com/a/41164095
-
-    Otherwise we need to change the height when user clicks on button
-    Ref: https://stackoverflow.com/a/11837673
-*/
-
-.alert-body {
-    display: block;
-    max-height: 1000px;
-    overflow: hidden;
-    padding-top: var(--dx-g-spacing-smd);
-    transition: max-height 0.25s ease, padding 0.25s ease;
-}
-
-.alert-body-hidden {
-    max-height: 0;
-    padding-top: 0;
-    transition: max-height 0.1s ease-out, padding 0.25s ease-out;
-}
-
-.alert-body a {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.dismissible-icon {
-    margin-left: auto;
-    cursor: pointer;
-}
-
-/* Small Devices */
-@media screen and (max-width: 480px) {
-    .alert-container {
-        padding: var(--dx-c-alert-vertical-padding);
-    }
-}

package/src/modules/dx/alert/alert.html

@@ -1,36 +0,0 @@
-<template>
-    <div class={className} part="container">
-        <div class="alert-title-container">
-            <dx-icon
-                class="alert-icon"
-                symbol={iconName}
-                sprite={iconSprite}
-                size="large"
-                color={iconColor}
-            ></dx-icon>
-            <p class="alert-title dx-text-body-3">{alertTitle}</p>
-            <dx-button
-                if:true={hideable}
-                variant="inline"
-                onclick={onShowHide}
-                aria-label={hideBodyText}
-            >
-                {hideBodyText}
-            </dx-button>
-            <dx-icon
-                class="dismissible-icon"
-                onclick={onDismiss}
-                if:true={dismissible}
-                symbol="close"
-                size="large"
-                color="status-icon-color"
-            ></dx-icon>
-        </div>
-        <!--
-            NOTE: Here we are rendering mark up using lwc:dom & innerHTML
-            option instead of slots because the html markup will come as a
-            property to the component from a configuration
-        -->
-        <span lwc:dom="manual" class={bodyClassName}></span>
-    </div>
-</template>