eschweitzer78/2024-06-10-1200 (#361)

* NSW DS date fixes * NSW DS Date disable picker button when readOnly * IpLwc attribute typo fixed * NSW DS ip-capable card carousel
eschweitzer78 · Jun 10, 2024 · 4bba433 · 4bba433
1 parent 780a48f
commit 4bba433
Show file tree

Hide file tree

Showing 11 changed files with 229 additions and 200 deletions.
diff --git a/sfGpsDs/main/default/lwc/sfGpsDsIpLwc/sfGpsDsIpLwc.js b/sfGpsDs/main/default/lwc/sfGpsDsIpLwc/sfGpsDsIpLwc.js
@@ -134,7 +134,7 @@ export default class SfGpsDsIpLwc extends SfGpsDsLwc {
             this._items = this.mapIpData(data);
           }
 
-          this.didLoadOnce = true;
+          this._didLoadOnce = true;
         } catch (e) {
           this.addError("CK-EX", "Issue getting the content collection.");
           console.log("CK-EX", e);

diff --git a/sfGpsDs/main/default/lwc/sfGpsDsIpLwcOsN/sfGpsDsIpLwcOsN.js b/sfGpsDs/main/default/lwc/sfGpsDsIpLwcOsN/sfGpsDsIpLwcOsN.js
@@ -111,7 +111,7 @@ export default class SfGpsDsIpLwcOsN extends SfGpsDsLwcOsN {
             this._items = this.mapIpData(data);
           }
 
-          this.didLoadOnce = true;
+          this._didLoadOnce = true;
         } catch (e) {
           this.addError("CK-EX", "Issue getting the content collection");
           this._items = [];

diff --git a/...lwc/sfGpsDsAuNswCard/lwc/sfGpsDsAuNswCardCollectionComm/sfGpsDsAuNswCardCollectionComm.js b/...lwc/sfGpsDsAuNswCard/lwc/sfGpsDsAuNswCardCollectionComm/sfGpsDsAuNswCardCollectionComm.js
@@ -61,7 +61,7 @@ export default class SfGpsDsAuNswCardCollectionComm extends SfGpsDsIpLwc {
 
     return data.map((card, index) => ({
       ...card,
-      title: card.headline, // it used to be called headline in v1
+      title: card.title || card.headline, // it used to be called headline in v1
       copy: card.copy ? htmlDecode(card.copy) : null,
       footer: card.footer ? htmlDecode(card.footer) : null,
       index: card.index || `card-${index + 1}`

diff --git a/...ult/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.js b/...ult/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.js
@@ -95,7 +95,6 @@ export default class extends LightningElement {
 
   _itemsOriginal;
   _items;
-  _itemsInit;
   _itemsNb;
 
   @api
@@ -136,6 +135,10 @@ export default class extends LightningElement {
     const value = this._itemsOriginal || [];
     const itemsNb = value.length;
 
+    if (!this._items?.length && value) {
+      this._initialRender = true;
+    }
+
     this._items = value.map((item, index) => ({
       ...item,
       _index: index,
@@ -147,7 +150,6 @@ export default class extends LightningElement {
       _style: {}
     }));
 
-    this._itemsInit = [...this._items];
     this.itemsNb = itemsNb;
   }
 
@@ -607,7 +609,7 @@ export default class extends LightningElement {
   }
 
   emitCarouselActiveItemsEvent() {
-    this.emitCarouselEvents("carousel-active-items", {
+    this.emitCarouselEvents("carouselactiveitems", {
       firstSelectedItem: this.selectedItem,
       visibleItemsNb: this.visibleItemsNb
     });
@@ -705,75 +707,78 @@ export default class extends LightningElement {
     if (this._initialRender) {
       this._initialRender = false;
 
-      const itemStyle = window.getComputedStyle(this.liveFirstItem);
-      const containerStyle = window.getComputedStyle(this.refs.wrapper);
-
-      let itemWidth = parseFloat(itemStyle.getPropertyValue("width"));
-      const itemMargin = (this._itemMargin = parseFloat(
-        itemStyle.getPropertyValue("margin-right")
-      ));
-      const containerPadding = parseFloat(
-        containerStyle.getPropertyValue("padding-left")
-      );
-      let containerWidth = parseFloat(containerStyle.getPropertyValue("width"));
+      if (this._items?.length) {
+        const itemStyle = window.getComputedStyle(this.liveFirstItem);
+        const containerStyle = window.getComputedStyle(this.refs.wrapper);
+        let itemWidth = parseFloat(itemStyle.getPropertyValue("width"));
+        const itemMargin = (this._itemMargin = parseFloat(
+          itemStyle.getPropertyValue("margin-right")
+        ));
+        const containerPadding = parseFloat(
+          containerStyle.getPropertyValue("padding-left")
+        );
+        let containerWidth = parseFloat(
+          containerStyle.getPropertyValue("width")
+        );
 
-      if (!this.itemAutoSize) {
-        this.itemAutoSize = itemWidth;
-      }
+        if (!this.itemAutoSize) {
+          this.itemAutoSize = itemWidth;
+        }
 
-      if (!this.itemOriginalWidth) {
-        this.itemOriginalWidth = itemWidth;
-      } else {
-        itemWidth = this.itemOriginalWidth;
-      }
+        if (!this.itemOriginalWidth) {
+          this.itemOriginalWidth = itemWidth;
+        } else {
+          itemWidth = this.itemOriginalWidth;
+        }
 
-      if (this.itemAutoSize) {
-        this.itemOriginalWidth = parseInt(this.itemAutoSize, 10);
-        itemWidth = this.itemOriginalWidth;
-      }
+        if (this.itemAutoSize) {
+          this.itemOriginalWidth = parseInt(this.itemAutoSize, 10);
+          itemWidth = this.itemOriginalWidth;
+        }
 
-      if (containerWidth < itemWidth) {
-        this.itemOriginalWidth = containerWidth;
-        itemWidth = this.itemOriginalWidth;
-      }
+        if (containerWidth < itemWidth) {
+          this.itemOriginalWidth = containerWidth;
+          itemWidth = this.itemOriginalWidth;
+        }
 
-      this.visibleItemsNb = parseInt(
-        (containerWidth - 2 * containerPadding + itemMargin) /
-          (itemWidth + itemMargin),
-        10
-      );
-      this.itemsWidth = parseFloat(
-        (
+        this.visibleItemsNb = parseInt(
           (containerWidth - 2 * containerPadding + itemMargin) /
-            this.visibleItemsNb -
-          itemMargin
-        ).toFixed(1)
-      );
-      this.containerWidth = (this.itemsWidth + itemMargin) * this.itemsNb;
-      this.translateContainer =
-        0 - (this.itemsWidth + itemMargin) * this.visibleItemsNb;
-      this.totTranslate =
-        0 - this.selectedItem * (this.itemsWidth + itemMargin);
-
-      if (this.itemsNb <= this.visibleItemsNb) {
-        this.totTranslate = 0;
-      }
+            (itemWidth + itemMargin),
+          10
+        );
+        this.itemsWidth = parseFloat(
+          (
+            (containerWidth - 2 * containerPadding + itemMargin) /
+              this.visibleItemsNb -
+            itemMargin
+          ).toFixed(1)
+        );
+        this.containerWidth = (this.itemsWidth + itemMargin) * this.itemsNb;
+        this.translateContainer =
+          0 - (this.itemsWidth + itemMargin) * this.visibleItemsNb;
+        this.totTranslate =
+          0 - this.selectedItem * (this.itemsWidth + itemMargin);
+
+        if (this.itemsNb <= this.visibleItemsNb) {
+          this.totTranslate = 0;
+        }
 
-      /* Install drag behaviour on carousel */
+        /* Install drag behaviour on carousel */
 
-      if (this._drag && window.requestAnimationFrame) {
-        const element = this.refs.carousel;
+        if (this._drag && window.requestAnimationFrame) {
+          const element = this.refs.carousel;
 
-        if (!this._swipeContent) {
-          this._swipeContent = new SwipeContent(element);
-        } else if (this._swipeContent.element !== element) {
-          this._swipeContent.cancelDragging(); // removes event handlers
-          this._swipeContent = new SwipeContent(element);
+          if (!this._swipeContent) {
+            this._swipeContent = new SwipeContent(element);
+          } else if (this._swipeContent.element !== element) {
+            this._swipeContent.cancelDragging(); // removes event handlers
+            this._swipeContent = new SwipeContent(element);
+          }
         }
       }
     }
 
-    if (!this.flexSupported) {
+    if (!this.flexSupported && this._items) {
       this.refs.list.style.width = `${(this.itemsWidth + this._itemMargin) * this.visibleItemsNb * 3}px`;
     }
   }

diff --git a/...GpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.html b/...GpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.html
@@ -5,26 +5,26 @@
   >
   </c-sf-gps-ds-configuration-error>
 
-  <c-sf-gps-ds-au-nsw-card-carousel
-    lwc:elseif={hasItems}
-    accessibility-label={accessibilityLabel}
-    drag={drag}
-    loop={loop}
-    navigation={navigationNavigation}
-    navigation-pagination={navigationPagination}
-    justify-content={justifyContent}
-    items={_items}
-    navigation-class-name={navigationClassName}
-    navigation-item-class-name={navigationItemClassName}
-    pagination-class-name={paginationClassName}
-    class-name={className}
-  >
-  </c-sf-gps-ds-au-nsw-card-carousel>
+  <template lwc:else>
+    <c-sf-gps-ds-spinner lwc:if={_isLoading}> </c-sf-gps-ds-spinner>
 
-  <c-sf-gps-ds-empty
-    lwc:else
-    title="No items."
-    content="Please set the items attribute."
-  >
-  </c-sf-gps-ds-empty>
+    <c-sf-gps-ds-empty lwc:if={isEmpty} title="No matching content">
+    </c-sf-gps-ds-empty>
+
+    <c-sf-gps-ds-au-nsw-card-carousel
+      lwc:else
+      accessibility-label={accessibilityLabel}
+      drag={drag}
+      loop={loop}
+      navigation={navigationNavigation}
+      navigation-pagination={navigationPagination}
+      justify-content={justifyContent}
+      items={_items}
+      navigation-class-name={navigationClassName}
+      navigation-item-class-name={navigationItemClassName}
+      pagination-class-name={paginationClassName}
+      class-name={className}
+    >
+    </c-sf-gps-ds-au-nsw-card-carousel>
+  </template>
 </template>