@ni/ok-components 1.7.0 → 1.8.0

package/dist/all-components-bundle.js

@@ -108400,6 +108400,25 @@ focus outline in that case.
             display: none;
         }
 
+        :host([size='compact']) .summary-item-container {
+            flex-wrap: nowrap;
+            box-sizing: border-box;
+            overflow-x: auto;
+            overflow-y: hidden;
+            gap: ${mediumPadding};
+            padding: calc(${standardPadding} - ${smallPadding});
+            scrollbar-width: none;
+        }
+
+        :host([size='compact']) .summary-item-container.has-overflow {
+            -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
+            mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
+        }
+
+        :host([size='compact']) .summary-item-container::-webkit-scrollbar {
+            display: none;
+        }
+
         .edit-items-button {
             align-self: start;
             justify-self: end;
@@ -108423,7 +108442,12 @@ focus outline in that case.
 
   const template$6 = html `
     <section class="summary-panel" part="panel">
-        <div class="summary-item-container" part="items">
+        <div
+            ${ref('summaryItems')}
+            class="summary-item-container"
+            part="items"
+            @scroll="${x => x.handleItemsScroll()}"
+        >
             <slot @slotchange="${x => x.handleItemsSlotChange()}"></slot>
         </div>
         ${when(x => x.showEditItemsButton, html `
@@ -108446,25 +108470,48 @@ focus outline in that case.
     </section>
 `;
 
+  const FvSummaryPanelSize = {
+      default: 'default',
+      compact: 'compact'
+  };
+
   /**
    * A layout container for summary tiles with an optional edit-items affordance.
    */
   class FvSummaryPanel extends FoundationElement {
       constructor() {
-          super(...arguments);
+          super();
           this.showEditItemsButton = false;
           this.legacyStyle = false;
+          this.size = FvSummaryPanelSize.default;
+          /** @internal */
+          this.hasOverflow = false;
           this.editItemsButtonLabel = 'Configure';
+          this.summaryItemsResizeObserver = new ResizeObserver(() => this.updateOverflow());
       }
       /** @internal */
       connectedCallback() {
           super.connectedCallback();
-          this.syncTileLegacyStyle();
+          this.syncTileAttributes();
+          this.observeSummaryItems();
+      }
+      /** @internal */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.summaryItemsResizeObserver.disconnect();
       }
       /** @internal */
       legacyStyleChanged() {
           if (this.$fastController.isConnected) {
-              this.syncTileLegacyStyle();
+              this.syncTileAttributes();
+              this.updateOverflow();
+          }
+      }
+      /** @internal */
+      sizeChanged() {
+          if (this.$fastController.isConnected) {
+              this.syncTileAttributes();
+              this.updateOverflow();
           }
       }
       /** @internal */
@@ -108476,9 +108523,31 @@ focus outline in that case.
       }
       /** @internal */
       handleItemsSlotChange() {
-          this.syncTileLegacyStyle();
+          this.syncTileAttributes();
+          this.observeSummaryItems();
       }
-      syncTileLegacyStyle() {
+      /** @internal */
+      handleItemsScroll() {
+          this.updateOverflow();
+      }
+      observeSummaryItems() {
+          this.summaryItemsResizeObserver.disconnect();
+          this.summaryItemsResizeObserver.observe(this.summaryItems);
+          for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {
+              this.summaryItemsResizeObserver.observe(element);
+          }
+          this.updateOverflow();
+      }
+      updateOverflow() {
+          const maxScrollDistance = this.summaryItems.scrollWidth - this.summaryItems.clientWidth;
+          const scrollPosition = getComputedStyle(this.summaryItems).direction === 'rtl'
+              ? Math.abs(this.summaryItems.scrollLeft)
+              : this.summaryItems.scrollLeft;
+          this.hasOverflow = this.size === FvSummaryPanelSize.compact
+              && maxScrollDistance - scrollPosition > 0;
+          this.summaryItems.classList.toggle('has-overflow', this.hasOverflow);
+      }
+      syncTileAttributes() {
           for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {
               if (element.localName !== 'ok-fv-summary-panel-tile') {
                   continue;
@@ -108489,6 +108558,12 @@ focus outline in that case.
               else {
                   element.removeAttribute('legacy-style');
               }
+              if (this.size === FvSummaryPanelSize.compact) {
+                  element.setAttribute('size', FvSummaryPanelSize.compact);
+              }
+              else {
+                  element.removeAttribute('size');
+              }
           }
       }
   }
@@ -108498,6 +108573,12 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'legacy-style', mode: 'boolean' })
   ], FvSummaryPanel.prototype, "legacyStyle", void 0);
+  __decorate([
+      attr
+  ], FvSummaryPanel.prototype, "size", void 0);
+  __decorate([
+      observable
+  ], FvSummaryPanel.prototype, "hasOverflow", void 0);
   __decorate([
       attr({ attribute: 'edit-items-button-label' })
   ], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
@@ -108584,6 +108665,24 @@ focus outline in that case.
             text-transform: uppercase;
             white-space: nowrap;
         }
+
+        :host([size='compact']) .summary-panel-tile-content {
+            gap: 6px;
+            margin: 10px 14px;
+        }
+
+        :host([size='compact']) .count {
+            font-size: 24px;
+            line-height: normal;
+        }
+
+        :host([size='compact']) .summary-panel-tile-content.beside .count {
+            padding-right: 0;
+        }
+
+        :host([size='compact']) .label {
+            font-size: 11px;
+        }
     }
 
     @layer hover {
@@ -108667,6 +108766,7 @@ focus outline in that case.
           this.count = '';
           this.label = '';
           this.legacyStyle = false;
+          this.size = FvSummaryPanelSize.default;
           this.selected = false;
           this.textPosition = FvSummaryPanelTileTextPosition.beside;
       }
@@ -108697,6 +108797,9 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'legacy-style', mode: 'boolean' })
   ], FvSummaryPanelTile.prototype, "legacyStyle", void 0);
+  __decorate([
+      attr
+  ], FvSummaryPanelTile.prototype, "size", void 0);
   __decorate([
       attr({ mode: 'boolean' })
   ], FvSummaryPanelTile.prototype, "selected", void 0);