@ni/ok-components 1.6.9 → 1.8.0

package/dist/all-components-bundle.js

@@ -19024,6 +19024,10 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       name: 'hashtag_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m7.76 14 .752-2.914H6.045L5.299 14H3.532l.746-2.914H2v-1.72h2.712l.701-2.807H2.947v-1.72h2.91L6.567 2h1.766l-.71 2.838h2.46L10.8 2h1.768l-.717 2.838H14v1.72h-2.599l-.706 2.807h2.374v1.72h-2.807L9.501 14ZM6.447 9.392h2.506l.72-2.85H7.167Z" class="cls-1"/></svg>`,
   };
+  const headset16X16 = {
+      name: 'headset_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 7.75v2c0 .28-.22.5-.5.5h-.01c-.52 1.58-1.75 3.55-4.63 3.87-.05.22-.24.39-.48.39h-1c-.28 0-.5-.22-.5-.5v-.5c0-.28.22-.5.5-.5h1c.23 0 .41.15.47.36 1.77-.22 2.81-1.16 3.41-2.18-.09.02-.17.05-.26.05h-.5c-.28 0-.5-.22-.5-.5v-4c0-.28.22-.5.5-.5h.5c.55 0 1 .45 1 1h.16c0-.57-.08-1.44-.41-2.3a.73.73 0 0 1-.93-.39c-.05-.1-1-2.06-3.82-2.06S4.22 4.47 4.18 4.55c-.17.36-.58.52-.95.38-.33.87-.4 1.74-.4 2.31h.16c0-.55.45-1 1-1h.5c.28 0 .5.22.5.5v4c0 .28-.22.5-.5.5h-.5c-.55 0-1-.45-1-1h-.5c-.28 0-.5-.22-.5-.5v-2c0-.1.04-.19.09-.27-.03-.71.03-2.08.69-3.36.01-.06.01-.12.04-.18C2.86 3.81 4.16.98 8 .98s5.13 2.83 5.19 2.95c.04.08.05.17.06.25.62 1.25.69 2.58.67 3.29.05.08.08.16.08.26z"/></svg>`,
+  };
   const home16X16 = {
       name: 'home_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.988 2 2.5 9H4v5h3v-3h2v3h3V9h1.5z" class="cls-1"/></svg>`,
@@ -19196,6 +19200,10 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       name: 'pot_with_lid_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 4V2H5v2H2v1h12V4ZM6 4V3h4v1Zm-4 9h1v1h10v-1h1V6H2Z" class="cls-1"/></svg>`,
   };
+  const powerCog16X16 = {
+      name: 'power_cog_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 8H7V2h2zm5 .37c0-.08.01-.16.01-.24 0-1.86-.84-3.52-2.17-4.62L10.8 5.27c.58.57.98 1.3 1.13 2.13.79.12 1.49.46 2.06.96Zm-9.99-.24c0-1.1.45-2.1 1.17-2.82L4.16 3.54a6 6 0 0 0-2.15 4.6c0 3.31 2.69 6 6 6 .15 0 .31-.01.46-.02-.53-.55-.9-1.25-1.04-2.04a3.99 3.99 0 0 1-3.42-3.94Zm9.72 3.56.62.26-.46 1.11-.62-.26c-.14.18-.3.34-.47.47l.26.62-1.11.46-.26-.62c-.11.02-.22.02-.33.02s-.22 0-.34-.02l-.26.62-1.11-.46.26-.62c-.18-.14-.34-.3-.47-.47l-.62.26-.46-1.11.62-.26c-.03-.22-.03-.44 0-.67l-.62-.26.46-1.11.62.26c.14-.18.3-.34.47-.47l-.26-.62 1.11-.46.26.62c.11-.02.22-.02.33-.02s.23 0 .34.02l.26-.62 1.11.46-.26.62c.18.14.34.3.47.47l.62-.26.46 1.11-.62.26c.03.22.03.45 0 .67m-1.99-1.27a1.1 1.1 0 0 0-.38-.08c-.39 0-.76.23-.92.62a1.008 1.008 0 0 0 .92 1.39 1.004 1.004 0 0 0 .38-1.93" class="cls-1"/></svg>`,
+  };
   const print = {
       name: 'print',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.55 10.6H8V10h2.25zm-5.3.4-.5 1h6.5l-.5-1zM14 11h-1l1 2v1H2v-1l1-2H2V6l1-2h1V2h8v2h1l1 2zM5 5h6V3H5zm8 8-2-4H5l-2 4zm0-6h-1v1h1z" class="cls-1"/></svg>`,
@@ -19408,9 +19416,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       name: 'user_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.004 2a2.18 2.18 0 0 1 2.184 2.182v1.09c.647 0 .378.932 0 1.455a4 4 0 0 1-.335.364 9 9 0 0 1-.31.742l.208 1.076h.437l2.75 1.527A2.15 2.15 0 0 1 14 12.291V14H2v-1.673a2.16 2.16 0 0 1 1.063-1.869l2.758-1.55h.437l.21-1.068a9 9 0 0 1-.312-.749 4 4 0 0 1-.335-.364c-.378-.523-.647-1.454 0-1.454v-1.09A2.18 2.18 0 0 1 8.004 2" class="cls-1"/></svg>`,
   };
+  const userHeadset16X16 = {
+      name: 'user_headset_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m13.35 13.45-2.79-1.65h-.51l-.2-1.04c.92-.11 1.63-.44 2.05-1.02.07-.1.12-.2.18-.31h.03c.32 0 1.18-.26 1.18-.59V6.49c0-.26-.52-.47-.91-.55-.14-.81-.46-1.89-1.26-2.73C10.35 2.41 9.3 2 8 2s-2.45.42-3.22 1.25C4 4.08 3.71 5.14 3.59 5.94c-.38.09-.88.3-.88.55v2.35c0 .32.85.59 1.18.59h.59V5.9h-.13c.12-.67.38-1.51.98-2.15.63-.67 1.53-1.01 2.68-1.01s1.96.33 2.59.98c.62.64.91 1.5 1.04 2.18h-.1v3.52s0 .02-.02.03c-.32.44-.87.7-1.58.81.09-.2.17-.39.25-.6.16-.16.32-.33.39-.43.44-.62.76-1.71 0-1.71V6.24a2.57 2.57 0 1 0-5.14 0v1.28c-.76 0-.44 1.09 0 1.71.08.1.23.27.39.43.11.3.23.6.37.88l-.25 1.26h-.51l-2.8 1.68c-.24.14-.44.33-.61.53h11.98c-.18-.21-.38-.41-.63-.55zm-4.84-2.04c-.44 0-.8-.36-.8-.8s.36-.8.8-.8.8.36.8.8-.36.8-.8.8"/></svg>`,
+  };
   const userHelmetSafety16X16 = {
       name: 'user_helmet_safety_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 11.95c.9 0 1.72-.31 2.39-.83V14H5.62v-2.88c.66.52 1.49.83 2.39.83Zm3.19-1.31h-.1V14H14v-.48c0-1.59-1.26-2.89-2.81-2.89ZM2 13.52V14h2.91v-3.36h-.1C3.26 10.64 2 11.93 2 13.53Zm6-2.29c1.78 0 3.22-1.48 3.22-3.31V7.4H4.78v.52c0 1.82 1.44 3.31 3.22 3.31m4-4.42v-.73h-.8a3.29 3.29 0 0 0-1.79-2.61v1.8h-.7V3H7.3v2.27h-.7v-1.8a3.28 3.28 0 0 0-1.79 2.61H4v.73h8.01Z" class="cls-1"/></svg>`,
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 14h-2v-1.35l1.32.78c.27.16.49.34.68.58Zm-3.96-2.21-.24-1.26c.14-.28.25-.57.36-.87.16-.16.32-.32.39-.43.44-.61.76-1.71 0-1.71V7h1.65l-.84-.76c-.06-.62-.29-2.2-.65-2.7-.32-.44-.75-.8-1.23-1.04v1.89h-.74V2.01H7.26v2.38h-.74V2.5c-.48.24-.91.6-1.23 1.04-.37.5-.59 2.09-.65 2.7L3.8 7h1.62v.52c-.76 0-.44 1.09 0 1.71.08.1.23.26.39.43.11.3.23.6.37.88l-.25 1.25h-.51l-.43.25V14h6v-1.94l-.45-.27h-.51Zm-7.38 1.63c-.26.16-.47.35-.66.58h2v-1.37z" class="cls-1"/></svg>`,
   };
   const watch16X16 = {
       name: 'watch_16_x_16',
@@ -25387,6 +25399,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-hashtag', IconHashtag);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'headset' icon
+   */
+  class IconHeadset extends IconSvg {
+      constructor() {
+          super(headset16X16);
+      }
+  }
+  registerIconSvg('icon-headset', IconHeadset);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -25898,6 +25922,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-pot-with-lid', IconPotWithLid);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'powerCog' icon
+   */
+  class IconPowerCog extends IconSvg {
+      constructor() {
+          super(powerCog16X16);
+      }
+  }
+  registerIconSvg('icon-power-cog', IconPowerCog);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -26514,6 +26550,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-user', IconUser);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'userHeadset' icon
+   */
+  class IconUserHeadset extends IconSvg {
+      constructor() {
+          super(userHeadset16X16);
+      }
+  }
+  registerIconSvg('icon-user-headset', IconUserHeadset);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -108352,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;
@@ -108375,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 `
@@ -108398,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 */
@@ -108428,9 +108523,31 @@ focus outline in that case.
       }
       /** @internal */
       handleItemsSlotChange() {
-          this.syncTileLegacyStyle();
+          this.syncTileAttributes();
+          this.observeSummaryItems();
+      }
+      /** @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);
       }
-      syncTileLegacyStyle() {
+      syncTileAttributes() {
           for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {
               if (element.localName !== 'ok-fv-summary-panel-tile') {
                   continue;
@@ -108441,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');
+              }
           }
       }
   }
@@ -108450,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);
@@ -108536,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 {
@@ -108619,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;
       }
@@ -108649,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);