@ni/ok-components 1.7.0 → 1.8.0

package/dist/custom-elements.json

@@ -67,6 +67,124 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/accordion-item/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
+          "name": "FvAccordionItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "FvAccordionItemAppearance"
+              },
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "header"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "FvAccordionItemAppearance"
+              },
+              "fieldName": "appearance"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvAccordionItemTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-accordion-item'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvAccordionItem",
+          "declaration": {
+            "name": "FvAccordionItem",
+            "module": "src/fv/accordion-item/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvAccordionItemTag",
+          "declaration": {
+            "name": "fvAccordionItemTag",
+            "module": "src/fv/accordion-item/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/accordion-item/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FvAccordionItemAppearance",
+          "type": {
+            "text": "{\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n}"
+          },
+          "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvAccordionItemAppearance",
+          "declaration": {
+            "name": "FvAccordionItemAppearance",
+            "module": "src/fv/accordion-item/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/card/index.ts",
@@ -690,124 +808,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/fv/accordion-item/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
-          "name": "FvAccordionItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "header",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "FvAccordionItemAppearance"
-              },
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "header",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "header"
-            },
-            {
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "expanded"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "FvAccordionItemAppearance"
-              },
-              "fieldName": "appearance"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@ni/fast-foundation"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "fvAccordionItemTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'ok-fv-accordion-item'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FvAccordionItem",
-          "declaration": {
-            "name": "FvAccordionItem",
-            "module": "src/fv/accordion-item/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "fvAccordionItemTag",
-          "declaration": {
-            "name": "fvAccordionItemTag",
-            "module": "src/fv/accordion-item/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/fv/accordion-item/types.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "FvAccordionItemAppearance",
-          "type": {
-            "text": "{\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n}"
-          },
-          "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FvAccordionItemAppearance",
-          "declaration": {
-            "name": "FvAccordionItemAppearance",
-            "module": "src/fv/accordion-item/types.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/fv/master-detail-list/index.ts",
@@ -1750,6 +1750,14 @@
               "privacy": "public",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "editItemsButtonLabel",
@@ -1759,9 +1767,39 @@
               "privacy": "public",
               "default": "'Configure'"
             },
+            {
+              "kind": "field",
+              "name": "summaryItemsResizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ResizeObserver(() => this.updateOverflow())"
+            },
             {
               "kind": "method",
-              "name": "syncTileLegacyStyle",
+              "name": "observeSummaryItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateOverflow",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncTileAttributes",
               "privacy": "private",
               "return": {
                 "type": {
@@ -1795,6 +1833,13 @@
               "default": "false",
               "fieldName": "legacyStyle"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "fieldName": "size"
+            },
             {
               "name": "edit-items-button-label",
               "type": {
@@ -1819,6 +1864,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "FvSummaryPanelSize",
+          "declaration": {
+            "name": "FvSummaryPanelSize",
+            "module": "./types"
+          }
+        },
         {
           "kind": "js",
           "name": "FvSummaryPanel",
@@ -1837,6 +1890,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/summary-panel/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FvSummaryPanelSize",
+          "type": {
+            "text": "{\n    default: 'default',\n    compact: 'compact'\n}"
+          },
+          "default": "{ default: 'default', compact: 'compact' }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvSummaryPanelSize",
+          "declaration": {
+            "name": "FvSummaryPanelSize",
+            "module": "src/fv/summary-panel/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/summary-panel-tile/index.ts",
@@ -1873,6 +1950,14 @@
               "privacy": "public",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -1926,6 +2011,13 @@
               "default": "false",
               "fieldName": "legacyStyle"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "fieldName": "size"
+            },
             {
               "name": "selected",
               "type": {

package/dist/custom-elements.md

@@ -8,6 +8,32 @@
 
 <hr/>
 
+## class: `FvAccordionItem`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name         | Privacy | Type                        | Default | Description | Inherited From |
+| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
+| `header`     | public  | `string`                    | `''`    |             |                |
+| `expanded`   | public  | `boolean`                   | `false` |             |                |
+| `appearance` | public  | `FvAccordionItemAppearance` |         |             |                |
+
+### Attributes
+
+| Name         | Field      | Inherited From |
+| ------------ | ---------- | -------------- |
+| `header`     | header     |                |
+| `expanded`   | expanded   |                |
+| `appearance` | appearance |                |
+
+<hr/>
+
 ## class: `FvCard`
 
 ### Superclass
@@ -110,32 +136,6 @@
 
 <hr/>
 
-## class: `FvAccordionItem`
-
-### Superclass
-
-| Name                | Module | Package             |
-| ------------------- | ------ | ------------------- |
-| `FoundationElement` |        | @ni/fast-foundation |
-
-### Fields
-
-| Name         | Privacy | Type                        | Default | Description | Inherited From |
-| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
-| `header`     | public  | `string`                    | `''`    |             |                |
-| `expanded`   | public  | `boolean`                   | `false` |             |                |
-| `appearance` | public  | `FvAccordionItemAppearance` |         |             |                |
-
-### Attributes
-
-| Name         | Field      | Inherited From |
-| ------------ | ---------- | -------------- |
-| `header`     | header     |                |
-| `expanded`   | expanded   |                |
-| `appearance` | appearance |                |
-
-<hr/>
-
 ## class: `FvMasterDetailList`
 
 ### Superclass
@@ -318,11 +318,12 @@
 
 ### Fields
 
-| Name                   | Privacy | Type      | Default       | Description | Inherited From |
-| ---------------------- | ------- | --------- | ------------- | ----------- | -------------- |
-| `showEditItemsButton`  | public  | `boolean` | `false`       |             |                |
-| `legacyStyle`          | public  | `boolean` | `false`       |             |                |
-| `editItemsButtonLabel` | public  | `string`  | `'Configure'` |             |                |
+| Name                   | Privacy | Type                     | Default       | Description | Inherited From |
+| ---------------------- | ------- | ------------------------ | ------------- | ----------- | -------------- |
+| `showEditItemsButton`  | public  | `boolean`                | `false`       |             |                |
+| `legacyStyle`          | public  | `boolean`                | `false`       |             |                |
+| `size`                 | public  | `FvSummaryPanelSizeType` |               |             |                |
+| `editItemsButtonLabel` | public  | `string`                 | `'Configure'` |             |                |
 
 ### Events
 
@@ -336,6 +337,7 @@
 | ------------------------- | -------------------- | -------------- |
 | `show-edit-items-button`  | showEditItemsButton  |                |
 | `legacy-style`            | legacyStyle          |                |
+| `size`                    | size                 |                |
 | `edit-items-button-label` | editItemsButtonLabel |                |
 
 <hr/>
@@ -355,6 +357,7 @@
 | `count`        | public  | `string`                             | `''`    |             |                |
 | `label`        | public  | `string`                             | `''`    |             |                |
 | `legacyStyle`  | public  | `boolean`                            | `false` |             |                |
+| `size`         | public  | `FvSummaryPanelSizeType`             |         |             |                |
 | `selected`     | public  | `boolean`                            | `false` |             |                |
 | `textPosition` | public  | `FvSummaryPanelTileTextPositionType` |         |             |                |
 
@@ -365,6 +368,7 @@
 | `count`         | count        |                |
 | `label`         | label        |                |
 | `legacy-style`  | legacyStyle  |                |
+| `size`          | size         |                |
 | `selected`      | selected     |                |
 | `text-position` | textPosition |                |
 

package/dist/esm/fv/summary-panel/index.d.ts

@@ -1,6 +1,8 @@
 import { FoundationElement } from '@ni/fast-foundation';
 import '@ni/nimble-components/dist/esm/button';
 import '@ni/nimble-components/dist/esm/icons/cog';
+import { type FvSummaryPanelSize as FvSummaryPanelSizeType } from './types';
+export { FvSummaryPanelSize } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'ok-fv-summary-panel': FvSummaryPanel;
@@ -12,15 +14,30 @@ declare global {
 export declare class FvSummaryPanel extends FoundationElement {
     showEditItemsButton: boolean;
     legacyStyle: boolean;
+    size: FvSummaryPanelSizeType;
+    /** @internal */
+    hasOverflow: boolean;
+    /** @internal */
+    readonly summaryItems: HTMLElement;
     editItemsButtonLabel: string;
+    private readonly summaryItemsResizeObserver;
+    constructor();
     /** @internal */
     connectedCallback(): void;
     /** @internal */
+    disconnectedCallback(): void;
+    /** @internal */
     legacyStyleChanged(): void;
     /** @internal */
+    sizeChanged(): void;
+    /** @internal */
     handleEditItemsClick(): void;
     /** @internal */
     handleItemsSlotChange(): void;
-    private syncTileLegacyStyle;
+    /** @internal */
+    handleItemsScroll(): void;
+    private observeSummaryItems;
+    private updateOverflow;
+    private syncTileAttributes;
 }
 export declare const fvSummaryPanelTag = "ok-fv-summary-panel";

package/dist/esm/fv/summary-panel/index.js

@@ -1,29 +1,49 @@
 import { __decorate } from "tslib";
-import { attr } from '@ni/fast-element';
+import { attr, observable } from '@ni/fast-element';
 import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
 import '@ni/nimble-components/dist/esm/button';
 import '@ni/nimble-components/dist/esm/icons/cog';
 import { styles } from './styles';
 import { template } from './template';
+import { FvSummaryPanelSize } from './types';
+export { FvSummaryPanelSize } from './types';
 /**
  * A layout container for summary tiles with an optional edit-items affordance.
  */
 export 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 */
@@ -35,9 +55,31 @@ export class FvSummaryPanel extends FoundationElement {
     }
     /** @internal */
     handleItemsSlotChange() {
-        this.syncTileLegacyStyle();
+        this.syncTileAttributes();
+        this.observeSummaryItems();
+    }
+    /** @internal */
+    handleItemsScroll() {
+        this.updateOverflow();
     }
-    syncTileLegacyStyle() {
+    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;
@@ -48,6 +90,12 @@ export class FvSummaryPanel extends FoundationElement {
             else {
                 element.removeAttribute('legacy-style');
             }
+            if (this.size === FvSummaryPanelSize.compact) {
+                element.setAttribute('size', FvSummaryPanelSize.compact);
+            }
+            else {
+                element.removeAttribute('size');
+            }
         }
     }
 }
@@ -57,6 +105,12 @@ __decorate([
 __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);

package/dist/esm/fv/summary-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB;IAArD;;QAEW,wBAAmB,GAAG,KAAK,CAAC;QAG5B,gBAAW,GAAG,KAAK,CAAC;QAGpB,yBAAoB,GAAG,WAAW,CAAC;IAyC9C,CAAC;IAvCG,gBAAgB;IACA,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACnC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE;YAC7C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC,CAAC;IACR,CAAC;IAED,gBAAgB;IACT,qBAAqB;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACvB,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;YACtG,IAAI,OAAO,CAAC,SAAS,KAAK,0BAA0B,EAAE,CAAC;gBACnD,SAAS;YACb,CAAC;YAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YAC7C,CAAC;iBAAM,CAAC;gBACJ,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC;QACL,CAAC;IACL,CAAC;CACJ;AA/CU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2DAC5B;AAG5B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAGpB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC;4DACL;AA2C9C,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC;IAC5C,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,iBAAiB,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport '@ni/nimble-components/dist/esm/button';\nimport '@ni/nimble-components/dist/esm/icons/cog';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-summary-panel': FvSummaryPanel;\n    }\n}\n\n/**\n * A layout container for summary tiles with an optional edit-items affordance.\n */\nexport class FvSummaryPanel extends FoundationElement {\n    @attr({ attribute: 'show-edit-items-button', mode: 'boolean' })\n    public showEditItemsButton = false;\n\n    @attr({ attribute: 'legacy-style', mode: 'boolean' })\n    public legacyStyle = false;\n\n    @attr({ attribute: 'edit-items-button-label' })\n    public editItemsButtonLabel = 'Configure';\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncTileLegacyStyle();\n    }\n\n    /** @internal */\n    public legacyStyleChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.syncTileLegacyStyle();\n        }\n    }\n\n    /** @internal */\n    public handleEditItemsClick(): void {\n        this.dispatchEvent(new CustomEvent('edit-items', {\n            bubbles: true,\n            composed: true\n        }));\n    }\n\n    /** @internal */\n    public handleItemsSlotChange(): void {\n        this.syncTileLegacyStyle();\n    }\n\n    private syncTileLegacyStyle(): void {\n        for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {\n            if (element.localName !== 'ok-fv-summary-panel-tile') {\n                continue;\n            }\n\n            if (this.legacyStyle) {\n                element.setAttribute('legacy-style', '');\n            } else {\n                element.removeAttribute('legacy-style');\n            }\n        }\n    }\n}\n\nconst okFvSummaryPanel = FvSummaryPanel.compose({\n    baseName: 'fv-summary-panel',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());\nexport const fvSummaryPanelTag = 'ok-fv-summary-panel';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport '@ni/nimble-components/dist/esm/button';\nimport '@ni/nimble-components/dist/esm/icons/cog';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { FvSummaryPanelSize, type FvSummaryPanelSize as FvSummaryPanelSizeType } from './types';\n\nexport { FvSummaryPanelSize } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-summary-panel': FvSummaryPanel;\n    }\n}\n\n/**\n * A layout container for summary tiles with an optional edit-items affordance.\n */\nexport class FvSummaryPanel extends FoundationElement {\n    @attr({ attribute: 'show-edit-items-button', mode: 'boolean' })\n    public showEditItemsButton = false;\n\n    @attr({ attribute: 'legacy-style', mode: 'boolean' })\n    public legacyStyle = false;\n\n    @attr\n    public size: FvSummaryPanelSizeType = FvSummaryPanelSize.default;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public readonly summaryItems!: HTMLElement;\n\n    @attr({ attribute: 'edit-items-button-label' })\n    public editItemsButtonLabel = 'Configure';\n\n    private readonly summaryItemsResizeObserver: ResizeObserver;\n\n    public constructor() {\n        super();\n        this.summaryItemsResizeObserver = new ResizeObserver(() => this.updateOverflow());\n    }\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncTileAttributes();\n        this.observeSummaryItems();\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.summaryItemsResizeObserver.disconnect();\n    }\n\n    /** @internal */\n    public legacyStyleChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.syncTileAttributes();\n            this.updateOverflow();\n        }\n    }\n\n    /** @internal */\n    public sizeChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.syncTileAttributes();\n            this.updateOverflow();\n        }\n    }\n\n    /** @internal */\n    public handleEditItemsClick(): void {\n        this.dispatchEvent(new CustomEvent('edit-items', {\n            bubbles: true,\n            composed: true\n        }));\n    }\n\n    /** @internal */\n    public handleItemsSlotChange(): void {\n        this.syncTileAttributes();\n        this.observeSummaryItems();\n    }\n\n    /** @internal */\n    public handleItemsScroll(): void {\n        this.updateOverflow();\n    }\n\n    private observeSummaryItems(): void {\n        this.summaryItemsResizeObserver.disconnect();\n        this.summaryItemsResizeObserver.observe(this.summaryItems);\n        for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {\n            this.summaryItemsResizeObserver.observe(element);\n        }\n        this.updateOverflow();\n    }\n\n    private updateOverflow(): void {\n        const maxScrollDistance = this.summaryItems.scrollWidth - this.summaryItems.clientWidth;\n        const scrollPosition = getComputedStyle(this.summaryItems).direction === 'rtl'\n            ? Math.abs(this.summaryItems.scrollLeft)\n            : this.summaryItems.scrollLeft;\n        this.hasOverflow = this.size === FvSummaryPanelSize.compact\n            && maxScrollDistance - scrollPosition > 0;\n        this.summaryItems.classList.toggle('has-overflow', this.hasOverflow);\n    }\n\n    private syncTileAttributes(): void {\n        for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {\n            if (element.localName !== 'ok-fv-summary-panel-tile') {\n                continue;\n            }\n\n            if (this.legacyStyle) {\n                element.setAttribute('legacy-style', '');\n            } else {\n                element.removeAttribute('legacy-style');\n            }\n\n            if (this.size === FvSummaryPanelSize.compact) {\n                element.setAttribute('size', FvSummaryPanelSize.compact);\n            } else {\n                element.removeAttribute('size');\n            }\n        }\n    }\n}\n\nconst okFvSummaryPanel = FvSummaryPanel.compose({\n    baseName: 'fv-summary-panel',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());\nexport const fvSummaryPanelTag = 'ok-fv-summary-panel';"]}