@salesforcedevs/dx-components 0.53.2 → 0.53.7-loading-img-update

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.53.2",
+    "version": "0.53.7-loading-img-update",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -27,6 +27,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "37bfd27f1580498841761daaeb7da20f5a539d3e"
+    }
 }

package/src/assets/svg/sidebar-item-loading.svg

@@ -1,9 +1,3 @@
-<svg width="100%" height="128" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_581_15739" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="8" width="267" height="112">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C19.5817 8 16 11.5817 16 16C16 20.4183 19.5817 24 24 24H252C256.418 24 260 20.4183 260 16C260 11.5817 256.418 8 252 8H24ZM24 40C19.5817 40 16 43.5817 16 48C16 52.4183 19.5817 56 24 56H213C217.418 56 221 52.4183 221 48C221 43.5817 217.418 40 213 40H24ZM16 80C16 75.5817 19.5817 72 24 72H275C279.418 72 283 75.5817 283 80C283 84.4183 279.418 88 275 88H24C19.5817 88 16 84.4183 16 80ZM24 104C19.5817 104 16 107.582 16 112C16 116.418 19.5817 120 24 120H175C179.418 120 183 116.418 183 112C183 107.582 179.418 104 175 104H24Z" fill="#E5E5E5"/>
-    </mask>
-    <g mask="url(#mask0_581_15739)">
-        <rect width="100%" height="128" fill="#E5E5E5"/>
-    </g>
+<svg width="100%" height="112" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58171 16 7.99999 16H212.24C216.658 16 220.24 12.4183 220.24 8C220.24 3.58172 216.658 0 212.24 0H8ZM8 32C3.58172 32 0 35.5817 0 40C0 44.4183 3.58172 48 8 48H177.037C181.456 48 185.037 44.4183 185.037 40C185.037 35.5817 181.456 32 177.037 32H8ZM0 72C0 67.5817 3.58172 64 8 64H233C237.418 64 241 67.5817 241 72C241 76.4183 237.418 80 233 80H8C3.58172 80 0 76.4183 0 72ZM8 96C3.58172 96 0 99.5817 0 104C0 108.418 3.58172 112 8 112H142.738C147.156 112 150.738 108.418 150.738 104C150.738 99.5817 147.156 96 142.738 96H8Z" fill="#E5E5E5" />
 </svg>

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -4,7 +4,7 @@ dx-card-content {
     --dx-c-body-max-lines: 3;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(body),
     dx-card-content::part(datetime) {
         display: none;

package/src/modules/dx/cardContent/cardContent.css

@@ -26,7 +26,7 @@
 
 /* mobile responsiveness */
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .card-content:not(.dx-card-base_featured) {
         flex-direction: row;
     }

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -12,7 +12,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .badge {
         --badge-size: 56px;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -7,7 +7,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(datetime) {
         display: block;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -16,6 +16,7 @@
             slot="image-badge"
         ></dx-icon-badge>
         <dx-formatted-date-time
+            if:true={datetime}
             slot="datetime"
             day="2-digit"
             month="long"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 
 export default class CardVideoPreview extends LightningElement {
     @api body?: string | null = null;
-    @api datetime!: string;
+    @api datetime?: string;
     @api featured?: boolean = false;
     @api href!: string;
     @api imgAlt?: string;

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

@@ -69,7 +69,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.text > .label {
+.text > .label:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-lg);
 }
 

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

@@ -3,16 +3,16 @@ import cx from "classnames";
 import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
-    @api backgroundColor?: string | null = "transparent";
-    @api dark?: boolean = false;
+    @api backgroundColor: string = "transparent";
+    @api dark: boolean = false;
     @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
-    @api label?: string | null = null;
-    @api subtitle?: string | null = null;
-    @api textAlign?: "center" | "left" = "left";
-    @api title?: string | null = null;
-    @api topGraphic?: boolean = false;
-    @api graphicOverlap?: boolean = false;
-    @api bottomGraphic?: boolean = false;
+    @api label?: string;
+    @api subtitle?: string;
+    @api textAlign: "center" | "left" = "left";
+    @api title?: string;
+    @api topGraphic: boolean = false;
+    @api graphicOverlap: boolean = false;
+    @api bottomGraphic: boolean = false;
 
     private get style(): string {
         return `--dx-c-section-background-color: ${toDxColor(

package/src/modules/dx/treeItem/treeItem.css

@@ -13,6 +13,11 @@ button:focus {
     outline-offset: -1px;
 }
 
+.tree-children-loading {
+    margin: var(--dx-g-spacing-xs) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-md);
+}
+
 @media (max-width: 768px) {
     .tree-children-loading {
         width: 100%;

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -1,3 +1,3 @@
 <template>
-    <div class="video-container"></div>
+    <div class="video-container" lwc:dom="manual"></div>
 </template>

package/src/modules/helpers/card/card.css

@@ -184,18 +184,6 @@ a.dx-card-base:hover dx-card-title {
 
 /* Desktop Only */
 @media screen and (min-width: 1024px) {
-    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
-        align-self: flex-start;
-        flex-shrink: 0;
-        width: 0;
-        height: unset;
-        margin-right: var(--dx-g-card-img-spacing);
-        margin-bottom: unset;
-        padding-top: unset;
-        padding-right: 45%;
-        padding-bottom: 22.5%;
-    }
-
     .dx-card-base_featured dx-card-title {
         --dx-c-card-title-letter-spacing: -0.6px;
         --dx-c-card-title-font-size: 32px;
@@ -216,6 +204,21 @@ a.dx-card-base:hover dx-card-title {
     }
 }
 
+/* Tablet + Desktop Only */
+@media screen and (min-width: 764px) {
+    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
+        align-self: flex-start;
+        flex-shrink: 0;
+        width: 0;
+        height: unset;
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        padding-top: unset;
+        padding-right: 45%;
+        padding-bottom: 22.5%;
+    }
+}
+
 /* Tablet */
 @media screen and (max-width: 1024px) {
     :host {
@@ -223,10 +226,6 @@ a.dx-card-base:hover dx-card-title {
         --dx-g-card-img-spacing: 16px;
     }
 
-    .dx-card-base_borderless-image {
-        min-height: unset;
-    }
-
     /* text resp */
     .dx-text-body-2,
     .dx-text-body-3 {
@@ -256,3 +255,9 @@ a.dx-card-base:hover dx-card-title {
         font-size: var(--dx-g-text-sm);
     }
 }
+
+@media screen and (max-width: 764px) {
+    .dx-card-base_borderless-image {
+        min-height: unset;
+    }
+}

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.