@ni/ok-components 1.7.0 → 1.8.1

package/dist/esm/fv/sticky-header/index.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import { observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * Displays an alternate header in a sticky overlay after the primary header leaves the viewport.
+ */
+export class FvStickyHeader extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.hasHeader = false;
+        /** @internal */
+        this.hasStickyHeader = false;
+        /** @internal */
+        this.headerIsVisible = true;
+        /** @internal */
+        this.showStickyHeader = false;
+        this.headerVisibility = new Map();
+        this.headerIntersectionObserver = new IntersectionObserver(entries => {
+            this.handleHeaderIntersection(entries);
+        });
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateStickyHeaderContent();
+        this.observeHeader();
+    }
+    /** @internal */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.headerIntersectionObserver.disconnect();
+    }
+    /** @internal */
+    handleHeaderSlotChange() {
+        this.observeHeader();
+    }
+    /** @internal */
+    handleStickyHeaderSlotChange(event) {
+        this.hasStickyHeader = event.target.assignedElements({ flatten: true }).length > 0;
+        this.updateStickyHeaderContent();
+    }
+    /** @internal */
+    handleHeaderIntersection(entries) {
+        entries.forEach(entry => {
+            const hasLeftViewport = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+            this.headerVisibility.set(entry.target, !hasLeftViewport);
+        });
+        this.headerIsVisible = Array.from(this.headerVisibility.values()).some(Boolean);
+        this.updateStickyHeaderContent();
+    }
+    observeHeader() {
+        this.headerIntersectionObserver.disconnect();
+        const headerElements = this.headerSlot.assignedElements({ flatten: true });
+        this.hasHeader = headerElements.length > 0;
+        this.headerIsVisible = true;
+        this.headerVisibility.clear();
+        headerElements.forEach(element => {
+            this.headerVisibility.set(element, true);
+            this.headerIntersectionObserver.observe(element);
+        });
+        this.updateStickyHeaderContent();
+    }
+    updateStickyHeaderContent() {
+        this.hasStickyHeader = this.stickyHeaderSlot.assignedElements({ flatten: true }).length > 0;
+        this.showStickyHeader = this.hasHeader && this.hasStickyHeader && !this.headerIsVisible;
+    }
+}
+__decorate([
+    observable
+], FvStickyHeader.prototype, "hasHeader", void 0);
+__decorate([
+    observable
+], FvStickyHeader.prototype, "hasStickyHeader", void 0);
+__decorate([
+    observable
+], FvStickyHeader.prototype, "headerIsVisible", void 0);
+__decorate([
+    observable
+], FvStickyHeader.prototype, "showStickyHeader", void 0);
+const okFvStickyHeader = FvStickyHeader.compose({
+    baseName: 'fv-sticky-header',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());
+export const fvStickyHeaderTag = 'ok-fv-sticky-header';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/sticky-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/sticky-header/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-sticky-header': FvStickyHeader;\n    }\n}\n\n/**\n * Displays an alternate header in a sticky overlay after the primary header leaves the viewport.\n */\nexport class FvStickyHeader extends FoundationElement {\n    /** @internal */\n    @observable\n    public hasHeader = false;\n\n    /** @internal */\n    @observable\n    public hasStickyHeader = false;\n\n    /** @internal */\n    @observable\n    public headerIsVisible = true;\n\n    /** @internal */\n    @observable\n    public showStickyHeader = false;\n\n    /** @internal */\n    public readonly headerSlot!: HTMLSlotElement;\n\n    /** @internal */\n    public readonly stickyHeaderSlot!: HTMLSlotElement;\n\n    private readonly headerVisibility = new Map<Element, boolean>();\n    private readonly headerIntersectionObserver = new IntersectionObserver(entries => {\n        this.handleHeaderIntersection(entries);\n    });\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.updateStickyHeaderContent();\n        this.observeHeader();\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.headerIntersectionObserver.disconnect();\n    }\n\n    /** @internal */\n    public handleHeaderSlotChange(): void {\n        this.observeHeader();\n    }\n\n    /** @internal */\n    public handleStickyHeaderSlotChange(event: Event): void {\n        this.hasStickyHeader = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n        this.updateStickyHeaderContent();\n    }\n\n    /** @internal */\n    public handleHeaderIntersection(entries: IntersectionObserverEntry[]): void {\n        entries.forEach(entry => {\n            const hasLeftViewport = !entry.isIntersecting && entry.boundingClientRect.top < 0;\n            this.headerVisibility.set(entry.target, !hasLeftViewport);\n        });\n        this.headerIsVisible = Array.from(this.headerVisibility.values()).some(Boolean);\n        this.updateStickyHeaderContent();\n    }\n\n    private observeHeader(): void {\n        this.headerIntersectionObserver.disconnect();\n        const headerElements = this.headerSlot.assignedElements({ flatten: true });\n        this.hasHeader = headerElements.length > 0;\n        this.headerIsVisible = true;\n        this.headerVisibility.clear();\n        headerElements.forEach(element => {\n            this.headerVisibility.set(element, true);\n            this.headerIntersectionObserver.observe(element);\n        });\n        this.updateStickyHeaderContent();\n    }\n\n    private updateStickyHeaderContent(): void {\n        this.hasStickyHeader = this.stickyHeaderSlot.assignedElements({ flatten: true }).length > 0;\n        this.showStickyHeader = this.hasHeader && this.hasStickyHeader && !this.headerIsVisible;\n    }\n}\n\nconst okFvStickyHeader = FvStickyHeader.compose({\n    baseName: 'fv-sticky-header',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());\nexport const fvStickyHeaderTag = 'ok-fv-sticky-header';\n"]}

package/dist/esm/fv/sticky-header/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/sticky-header/styles.js

@@ -0,0 +1,22 @@
+import { css } from '@ni/fast-element';
+import { elevation2BoxShadow, headerBackgroundColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('block')}
+
+    .sticky-header {
+        position: fixed;
+        inset-block-start: 0;
+        inset-inline: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        width: 100%;
+        background-color: var(${headerBackgroundColor.cssCustomProperty});
+        box-shadow: var(${elevation2BoxShadow.cssCustomProperty});
+    }
+
+    .sticky-header[hidden] {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/sticky-header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/sticky-header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;AACzH,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gCASU,qBAAqB,CAAC,iBAAiB;0BAC7C,mBAAmB,CAAC,iBAAiB;;;;;;CAM9D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { elevation2BoxShadow, headerBackgroundColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('block')}\n\n    .sticky-header {\n        position: fixed;\n        inset-block-start: 0;\n        inset-inline: 0;\n        z-index: 1;\n        box-sizing: border-box;\n        width: 100%;\n        background-color: var(${headerBackgroundColor.cssCustomProperty});\n        box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n    }\n\n    .sticky-header[hidden] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/fv/sticky-header/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvStickyHeader } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvStickyHeader, any>;

package/dist/esm/fv/sticky-header/template.js

@@ -0,0 +1,22 @@
+import { html, ref } from '@ni/fast-element';
+export const template = html `
+    <div class="header" part="header">
+        <slot
+            name="header"
+            ${ref('headerSlot')}
+            @slotchange="${x => x.handleHeaderSlotChange()}"
+        ></slot>
+    </div>
+    <div
+        class="sticky-header"
+        part="sticky-header"
+        ?hidden="${x => !x.showStickyHeader}"
+    >
+        <slot
+            name="sticky-header"
+            ${ref('stickyHeaderSlot')}
+            @slotchange="${(x, c) => x.handleStickyHeaderSlotChange(c.event)}"
+        ></slot>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/sticky-header/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/sticky-header/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAG7C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;;cAI9B,GAAG,CAAC,YAAY,CAAC;2BACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,EAAE;;;;;;mBAMvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB;;;;cAI7B,GAAG,CAAC,kBAAkB,CAAC;2BACV,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAK,CAAC;;;CAG3E,CAAC","sourcesContent":["import { html, ref } from '@ni/fast-element';\nimport type { FvStickyHeader } from '.';\n\nexport const template = html<FvStickyHeader>`\n    <div class=\"header\" part=\"header\">\n        <slot\n            name=\"header\"\n            ${ref('headerSlot')}\n            @slotchange=\"${x => x.handleHeaderSlotChange()}\"\n        ></slot>\n    </div>\n    <div\n        class=\"sticky-header\"\n        part=\"sticky-header\"\n        ?hidden=\"${x => !x.showStickyHeader}\"\n    >\n        <slot\n            name=\"sticky-header\"\n            ${ref('stickyHeaderSlot')}\n            @slotchange=\"${(x, c) => x.handleStickyHeaderSlotChange(c.event)}\"\n        ></slot>\n    </div>\n`;\n"]}

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';"]}

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

@@ -1,5 +1,5 @@
 import { css } from '@ni/fast-element';
-import { standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { mediumPadding, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import { display } from '../../utilities/style/display';
 export const styles = css `
     @layer base, hover, focusVisible, active, disabled, top;
@@ -26,6 +26,25 @@ export const styles = css `
             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;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,6DAA6D,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;;;0BAMA,eAAe;;;;;;;mBAOtB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('block')}\n\n        .summary-panel {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) auto;\n            align-items: flex-start;\n            column-gap: ${standardPadding};\n        }\n\n        .summary-item-container {\n            display: flex;\n            flex-wrap: wrap;\n            align-items: stretch;\n            gap: ${standardPadding};\n            min-width: 0;\n        }\n\n        .summary-item-container:empty {\n            display: none;\n        }\n\n        .edit-items-button {\n            align-self: start;\n            justify-self: end;\n        }\n\n        ::slotted(*) {\n            flex: 0 0 auto;\n        }\n    }\n\n    @layer hover {}\n\n    @layer focusVisible {}\n\n    @layer active {}\n\n    @layer disabled {}\n\n    @layer top {}\n`;"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;;;0BAMA,eAAe;;;;;;;mBAOtB,eAAe;;;;;;;;;;;;;mBAaf,aAAa;4BACJ,eAAe,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC5D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    mediumPadding,\n    smallPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('block')}\n\n        .summary-panel {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) auto;\n            align-items: flex-start;\n            column-gap: ${standardPadding};\n        }\n\n        .summary-item-container {\n            display: flex;\n            flex-wrap: wrap;\n            align-items: stretch;\n            gap: ${standardPadding};\n            min-width: 0;\n        }\n\n        .summary-item-container:empty {\n            display: none;\n        }\n\n        :host([size='compact']) .summary-item-container {\n            flex-wrap: nowrap;\n            box-sizing: border-box;\n            overflow-x: auto;\n            overflow-y: hidden;\n            gap: ${mediumPadding};\n            padding: calc(${standardPadding} - ${smallPadding});\n            scrollbar-width: none;\n        }\n\n        :host([size='compact']) .summary-item-container.has-overflow {\n            -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);\n            mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);\n        }\n\n        :host([size='compact']) .summary-item-container::-webkit-scrollbar {\n            display: none;\n        }\n\n        .edit-items-button {\n            align-self: start;\n            justify-self: end;\n        }\n\n        ::slotted(*) {\n            flex: 0 0 auto;\n        }\n    }\n\n    @layer hover {}\n\n    @layer focusVisible {}\n\n    @layer active {}\n\n    @layer disabled {}\n\n    @layer top {}\n`;"]}

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

@@ -1,10 +1,15 @@
-import { html, when } from '@ni/fast-element';
+import { html, ref, when } from '@ni/fast-element';
 import { buttonTag } from '@ni/nimble-components/dist/esm/button';
 import { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';
 import { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';
 export const template = 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 `

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAGtE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;iCAGX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;;UAErD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAI,CAAgB;eAChD,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;;yBAE3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;8BACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;0BAC/B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACzB,OAAO,IAAI,CAAC;AAChB,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;mBAC1B,UAAU,mBAAmB,UAAU;gBAC1C,SAAS;SAChB,CAAC;;CAET,CAAC","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';\nimport { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';\nimport type { FvSummaryPanel } from '.';\n\nexport const template = html<FvSummaryPanel>`\n    <section class=\"summary-panel\" part=\"panel\">\n        <div class=\"summary-item-container\" part=\"items\">\n            <slot @slotchange=\"${x => x.handleItemsSlotChange()}\"></slot>\n        </div>\n        ${when(x => x.showEditItemsButton, html<FvSummaryPanel>`\n            <${buttonTag}\n                class=\"edit-items-button\"\n                part=\"edit-items-button\"\n                appearance=\"${ButtonAppearance.ghost}\"\n                content-hidden\n                title=\"${x => x.editItemsButtonLabel}\"\n                aria-label=\"${x => x.editItemsButtonLabel}\"\n                @click=\"${x => {\n                    x.handleEditItemsClick();\n                    return true;\n                }}\"\n            >\n                ${x => x.editItemsButtonLabel}\n                <${iconCogTag} slot=\"start\"></${iconCogTag}>\n            </${buttonTag}>\n        `)}\n    </section>\n`;"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAGtE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;cAG9B,GAAG,CAAC,cAAc,CAAC;;;uBAGV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;;iCAEhB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;;UAErD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAI,CAAgB;eAChD,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;;yBAE3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;8BACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;0BAC/B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACzB,OAAO,IAAI,CAAC;AAChB,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;mBAC1B,UAAU,mBAAmB,UAAU;gBAC1C,SAAS;SAChB,CAAC;;CAET,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';\nimport { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';\nimport type { FvSummaryPanel } from '.';\n\nexport const template = html<FvSummaryPanel>`\n    <section class=\"summary-panel\" part=\"panel\">\n        <div\n            ${ref('summaryItems')}\n            class=\"summary-item-container\"\n            part=\"items\"\n            @scroll=\"${x => x.handleItemsScroll()}\"\n        >\n            <slot @slotchange=\"${x => x.handleItemsSlotChange()}\"></slot>\n        </div>\n        ${when(x => x.showEditItemsButton, html<FvSummaryPanel>`\n            <${buttonTag}\n                class=\"edit-items-button\"\n                part=\"edit-items-button\"\n                appearance=\"${ButtonAppearance.ghost}\"\n                content-hidden\n                title=\"${x => x.editItemsButtonLabel}\"\n                aria-label=\"${x => x.editItemsButtonLabel}\"\n                @click=\"${x => {\n                    x.handleEditItemsClick();\n                    return true;\n                }}\"\n            >\n                ${x => x.editItemsButtonLabel}\n                <${iconCogTag} slot=\"start\"></${iconCogTag}>\n            </${buttonTag}>\n        `)}\n    </section>\n`;"]}

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

@@ -0,0 +1,5 @@
+export declare const FvSummaryPanelSize: {
+    readonly default: "default";
+    readonly compact: "compact";
+};
+export type FvSummaryPanelSize = (typeof FvSummaryPanelSize)[keyof typeof FvSummaryPanelSize];

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

@@ -0,0 +1,5 @@
+export const FvSummaryPanelSize = {
+    default: 'default',
+    compact: 'compact'
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACZ,CAAC","sourcesContent":["export const FvSummaryPanelSize = {\n    default: 'default',\n    compact: 'compact'\n} as const;\n\nexport type FvSummaryPanelSize = (typeof FvSummaryPanelSize)[keyof typeof FvSummaryPanelSize];"]}

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

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@ni/fast-foundation';
+import { type FvSummaryPanelSize as FvSummaryPanelSizeType } from '../summary-panel/types';
 import { type FvSummaryPanelTileTextPosition as FvSummaryPanelTileTextPositionType } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,6 +13,7 @@ export declare class FvSummaryPanelTile extends FoundationElement {
     count: string;
     label: string;
     legacyStyle: boolean;
+    size: FvSummaryPanelSizeType;
     selected: boolean;
     textPosition: FvSummaryPanelTileTextPositionType;
     /** @internal */

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

@@ -3,6 +3,7 @@ import { attr } from '@ni/fast-element';
 import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
+import { FvSummaryPanelSize } from '../summary-panel/types';
 import { FvSummaryPanelTileTextPosition } from './types';
 /**
  * A clickable summary tile for displaying a large value with a compact label.
@@ -13,6 +14,7 @@ export class FvSummaryPanelTile extends FoundationElement {
         this.count = '';
         this.label = '';
         this.legacyStyle = false;
+        this.size = FvSummaryPanelSize.default;
         this.selected = false;
         this.textPosition = FvSummaryPanelTileTextPosition.beside;
     }
@@ -43,6 +45,9 @@ __decorate([
 __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);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACH,8BAA8B,EAEjC,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;IAAzD;;QAEW,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAuC,8BAA8B,CAAC,MAAM,CAAC;IAoBpG,CAAC;IAlBG,gBAAgB;IACA,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAEO,wBAAwB;QAC5B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;CACJ;AAhCU;IADN,IAAI;iDACa;AAGX;IADN,IAAI;iDACa;AAGX;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAC1B;AAGpB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDACF;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;wDAC2D;AAsBpG,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACpD,QAAQ,EAAE,uBAAuB;IACjC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,qBAAqB,GAAG,0BAA0B,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    FvSummaryPanelTileTextPosition,\n    type FvSummaryPanelTileTextPosition as FvSummaryPanelTileTextPositionType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-summary-panel-tile': FvSummaryPanelTile;\n    }\n}\n\n/**\n * A clickable summary tile for displaying a large value with a compact label.\n */\nexport class FvSummaryPanelTile extends FoundationElement {\n    @attr\n    public count = '';\n\n    @attr\n    public label = '';\n\n    @attr({ attribute: 'legacy-style', mode: 'boolean' })\n    public legacyStyle = false;\n\n    @attr({ mode: 'boolean' })\n    public selected = false;\n\n    @attr({ attribute: 'text-position' })\n    public textPosition: FvSummaryPanelTileTextPositionType = FvSummaryPanelTileTextPosition.beside;\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncLegacyStyleAttribute();\n    }\n\n    /** @internal */\n    public legacyStyleChanged(): void {\n        this.syncLegacyStyleAttribute();\n    }\n\n    private syncLegacyStyleAttribute(): void {\n        if (this.legacyStyle) {\n            this.setAttribute('legacy-style', '');\n        } else {\n            this.removeAttribute('legacy-style');\n        }\n    }\n}\n\nconst okFvSummaryPanelTile = FvSummaryPanelTile.compose({\n    baseName: 'fv-summary-panel-tile',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());\nexport const fvSummaryPanelTileTag = 'ok-fv-summary-panel-tile';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAqD,MAAM,wBAAwB,CAAC;AAC/G,OAAO,EACH,8BAA8B,EAEjC,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;IAAzD;;QAEW,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,KAAK,CAAC;QAGpB,SAAI,GAA2B,kBAAkB,CAAC,OAAO,CAAC;QAG1D,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAuC,8BAA8B,CAAC,MAAM,CAAC;IAoBpG,CAAC;IAlBG,gBAAgB;IACA,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAEO,wBAAwB;QAC5B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;CACJ;AAnCU;IADN,IAAI;iDACa;AAGX;IADN,IAAI;iDACa;AAGX;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAC1B;AAGpB;IADN,IAAI;gDAC4D;AAG1D;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDACF;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;wDAC2D;AAsBpG,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACpD,QAAQ,EAAE,uBAAuB;IACjC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,qBAAqB,GAAG,0BAA0B,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { FvSummaryPanelSize, type FvSummaryPanelSize as FvSummaryPanelSizeType } from '../summary-panel/types';\nimport {\n    FvSummaryPanelTileTextPosition,\n    type FvSummaryPanelTileTextPosition as FvSummaryPanelTileTextPositionType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-summary-panel-tile': FvSummaryPanelTile;\n    }\n}\n\n/**\n * A clickable summary tile for displaying a large value with a compact label.\n */\nexport class FvSummaryPanelTile extends FoundationElement {\n    @attr\n    public count = '';\n\n    @attr\n    public label = '';\n\n    @attr({ attribute: 'legacy-style', mode: 'boolean' })\n    public legacyStyle = false;\n\n    @attr\n    public size: FvSummaryPanelSizeType = FvSummaryPanelSize.default;\n\n    @attr({ mode: 'boolean' })\n    public selected = false;\n\n    @attr({ attribute: 'text-position' })\n    public textPosition: FvSummaryPanelTileTextPositionType = FvSummaryPanelTileTextPosition.beside;\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncLegacyStyleAttribute();\n    }\n\n    /** @internal */\n    public legacyStyleChanged(): void {\n        this.syncLegacyStyleAttribute();\n    }\n\n    private syncLegacyStyleAttribute(): void {\n        if (this.legacyStyle) {\n            this.setAttribute('legacy-style', '');\n        } else {\n            this.removeAttribute('legacy-style');\n        }\n    }\n}\n\nconst okFvSummaryPanelTile = FvSummaryPanelTile.compose({\n    baseName: 'fv-summary-panel-tile',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());\nexport const fvSummaryPanelTileTag = 'ok-fv-summary-panel-tile';"]}

package/dist/esm/fv/summary-panel-tile/styles.js

@@ -77,6 +77,24 @@ export const styles = css `
             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 {

package/dist/esm/fv/summary-panel-tile/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,mBAAmB,EACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;qCAWI,UAAU;;;4DAGa,gBAAgB;;;;;;;;;;;uCAWrC,UAAU;;;;gCAIjB,eAAe;;;+BAGhB,UAAU;+BACV,UAAU;;;;;;mBAMtB,aAAa;sBACV,YAAY,SAAS,YAAY,MAAM,eAAe;oBACxD,QAAQ;;;;;;mBAMT,YAAY;;;;;qBAKV,mBAAmB;;;;;;;;6BAQX,aAAa;;;;;;;;;;;;;;;;oCAgBN,gBAAgB;;;;;;;;;;;;;;;;8BAgBtB,mBAAmB,CAAC,iBAAiB;;;;;sBAK7C,mBAAmB,CAAC,iBAAiB;4BAC/B,gBAAgB;;;;8BAId,mBAAmB,CAAC,iBAAiB;;;;4BAIvC,gBAAgB;;;;;;;;gCAQZ,gBAAgB;;;;;;;;;;;;;;;CAe/C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    borderHoverColor,\n    cardBorderColor,\n    elevation2BoxShadow,\n    largePadding,\n    mediumPadding,\n    smallPadding,\n    smallDelay,\n    standardPadding,\n    titlePlus2FontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            min-width: max-content;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile {\n            position: relative;\n            border-radius: 8px;\n            overflow: clip;\n            box-shadow: none;\n            transition: box-shadow ${smallDelay} ease-in-out;\n            --ni-private-card-button-background-hover-color: transparent;\n            --ni-private-card-button-background-active-color: transparent;\n            --ni-private-card-button-border-active-color: ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            box-sizing: border-box;\n            border: 2px solid transparent;\n            border-radius: inherit;\n            pointer-events: none;\n            transition: border-color ${smallDelay} ease-in-out;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::part(control) {\n            border: 2px solid ${cardBorderColor};\n            border-radius: 8px;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                border-width ${smallDelay} ease-in-out;\n        }\n\n        .summary-panel-tile-content {\n            display: flex;\n            align-items: center;\n            gap: ${mediumPadding};\n            margin: ${largePadding} calc(${largePadding} + ${standardPadding});\n            font: ${bodyFont};\n        }\n\n        .summary-panel-tile-content.under {\n            flex-direction: column;\n            align-items: center;\n            gap: ${smallPadding};\n            text-align: center;\n        }\n\n        .count {\n            color: ${titlePlus2FontColor};\n            font-size: 32px;\n            font-weight: 400;\n            line-height: 40px;\n            white-space: nowrap;\n        }\n\n        .summary-panel-tile-content.beside .count {\n            padding-right: ${mediumPadding};\n        }\n\n        .summary-panel-tile-content.under .count {\n            padding-right: 0;\n        }\n\n        .label {\n            font-weight: 600;\n            text-transform: uppercase;\n            white-space: nowrap;\n        }\n    }\n\n    @layer hover {\n        :host(:not([legacy-style])) .summary-panel-tile:hover {\n            box-shadow: 0 0 0 2px ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::part(control):hover {\n            border-color: transparent;\n        }\n    }\n\n    @layer focusVisible {}\n\n    @layer active {\n        :host(:not([legacy-style])) .summary-panel-tile:active {\n            box-shadow: none;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected] {\n            box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]:hover {\n            box-shadow:\n                var(${elevation2BoxShadow.cssCustomProperty}),\n                0 0 0 2px ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]:active {\n            box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile:active::after {\n            border-color: ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::part(control):active {\n            border: 2px solid transparent;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control) {\n            border: 2px solid ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):hover {\n            border: 2px solid transparent;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):active {\n            border: 2px solid transparent;\n        }\n    }\n\n    @layer disabled {}\n\n    @layer top {}\n`;"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,mBAAmB,EACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;qCAWI,UAAU;;;4DAGa,gBAAgB;;;;;;;;;;;uCAWrC,UAAU;;;;gCAIjB,eAAe;;;+BAGhB,UAAU;+BACV,UAAU;;;;;;mBAMtB,aAAa;sBACV,YAAY,SAAS,YAAY,MAAM,eAAe;oBACxD,QAAQ;;;;;;mBAMT,YAAY;;;;;qBAKV,mBAAmB;;;;;;;;6BAQX,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAkCN,gBAAgB;;;;;;;;;;;;;;;;8BAgBtB,mBAAmB,CAAC,iBAAiB;;;;;sBAK7C,mBAAmB,CAAC,iBAAiB;4BAC/B,gBAAgB;;;;8BAId,mBAAmB,CAAC,iBAAiB;;;;4BAIvC,gBAAgB;;;;;;;;gCAQZ,gBAAgB;;;;;;;;;;;;;;;CAe/C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    borderHoverColor,\n    cardBorderColor,\n    elevation2BoxShadow,\n    largePadding,\n    mediumPadding,\n    smallPadding,\n    smallDelay,\n    standardPadding,\n    titlePlus2FontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            min-width: max-content;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile {\n            position: relative;\n            border-radius: 8px;\n            overflow: clip;\n            box-shadow: none;\n            transition: box-shadow ${smallDelay} ease-in-out;\n            --ni-private-card-button-background-hover-color: transparent;\n            --ni-private-card-button-background-active-color: transparent;\n            --ni-private-card-button-border-active-color: ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            box-sizing: border-box;\n            border: 2px solid transparent;\n            border-radius: inherit;\n            pointer-events: none;\n            transition: border-color ${smallDelay} ease-in-out;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::part(control) {\n            border: 2px solid ${cardBorderColor};\n            border-radius: 8px;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                border-width ${smallDelay} ease-in-out;\n        }\n\n        .summary-panel-tile-content {\n            display: flex;\n            align-items: center;\n            gap: ${mediumPadding};\n            margin: ${largePadding} calc(${largePadding} + ${standardPadding});\n            font: ${bodyFont};\n        }\n\n        .summary-panel-tile-content.under {\n            flex-direction: column;\n            align-items: center;\n            gap: ${smallPadding};\n            text-align: center;\n        }\n\n        .count {\n            color: ${titlePlus2FontColor};\n            font-size: 32px;\n            font-weight: 400;\n            line-height: 40px;\n            white-space: nowrap;\n        }\n\n        .summary-panel-tile-content.beside .count {\n            padding-right: ${mediumPadding};\n        }\n\n        .summary-panel-tile-content.under .count {\n            padding-right: 0;\n        }\n\n        .label {\n            font-weight: 600;\n            text-transform: uppercase;\n            white-space: nowrap;\n        }\n\n        :host([size='compact']) .summary-panel-tile-content {\n            gap: 6px;\n            margin: 10px 14px;\n        }\n\n        :host([size='compact']) .count {\n            font-size: 24px;\n            line-height: normal;\n        }\n\n        :host([size='compact']) .summary-panel-tile-content.beside .count {\n            padding-right: 0;\n        }\n\n        :host([size='compact']) .label {\n            font-size: 11px;\n        }\n    }\n\n    @layer hover {\n        :host(:not([legacy-style])) .summary-panel-tile:hover {\n            box-shadow: 0 0 0 2px ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::part(control):hover {\n            border-color: transparent;\n        }\n    }\n\n    @layer focusVisible {}\n\n    @layer active {\n        :host(:not([legacy-style])) .summary-panel-tile:active {\n            box-shadow: none;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected] {\n            box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]:hover {\n            box-shadow:\n                var(${elevation2BoxShadow.cssCustomProperty}),\n                0 0 0 2px ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]:active {\n            box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile:active::after {\n            border-color: ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile::part(control):active {\n            border: 2px solid transparent;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control) {\n            border: 2px solid ${borderHoverColor};\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):hover {\n            border: 2px solid transparent;\n        }\n\n        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):active {\n            border: 2px solid transparent;\n        }\n    }\n\n    @layer disabled {}\n\n    @layer top {}\n`;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",