@ni/ok-components 1.2.1 → 1.3.0

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

@@ -0,0 +1,49 @@
+import { css } from '@ni/fast-element';
+import { 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;
+
+    @layer base {
+        ${display('block')}
+
+        .summary-panel {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            align-items: flex-start;
+            column-gap: ${standardPadding};
+        }
+
+        .summary-item-container {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: stretch;
+            gap: ${standardPadding};
+            min-width: 0;
+        }
+
+        .summary-item-container:empty {
+            display: none;
+        }
+
+        .edit-items-button {
+            align-self: start;
+            justify-self: end;
+        }
+
+        ::slotted(*) {
+            flex: 0 0 auto;
+        }
+    }
+
+    @layer hover {}
+
+    @layer focusVisible {}
+
+    @layer active {}
+
+    @layer disabled {}
+
+    @layer top {}
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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`;"]}

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

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

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

@@ -0,0 +1,29 @@
+import { html, 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">
+            <slot @slotchange="${x => x.handleItemsSlotChange()}"></slot>
+        </div>
+        ${when(x => x.showEditItemsButton, html `
+            <${buttonTag}
+                class="edit-items-button"
+                part="edit-items-button"
+                appearance="${ButtonAppearance.ghost}"
+                content-hidden
+                title="${x => x.editItemsButtonLabel}"
+                aria-label="${x => x.editItemsButtonLabel}"
+                @click="${x => {
+    x.handleEditItemsClick();
+    return true;
+}}"
+            >
+                ${x => x.editItemsButtonLabel}
+                <${iconCogTag} slot="start"></${iconCogTag}>
+            </${buttonTag}>
+        `)}
+    </section>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +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`;"]}

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

@@ -0,0 +1,23 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import { type FvSummaryPanelTileTextPosition as FvSummaryPanelTileTextPositionType } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-summary-panel-tile': FvSummaryPanelTile;
+    }
+}
+/**
+ * A clickable summary tile for displaying a large value with a compact label.
+ */
+export declare class FvSummaryPanelTile extends FoundationElement {
+    count: string;
+    label: string;
+    legacyStyle: boolean;
+    selected: boolean;
+    textPosition: FvSummaryPanelTileTextPositionType;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    legacyStyleChanged(): void;
+    private syncLegacyStyleAttribute;
+}
+export declare const fvSummaryPanelTileTag = "ok-fv-summary-panel-tile";

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

@@ -0,0 +1,59 @@
+import { __decorate } from "tslib";
+import { attr } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { FvSummaryPanelTileTextPosition } from './types';
+/**
+ * A clickable summary tile for displaying a large value with a compact label.
+ */
+export class FvSummaryPanelTile extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.count = '';
+        this.label = '';
+        this.legacyStyle = false;
+        this.selected = false;
+        this.textPosition = FvSummaryPanelTileTextPosition.beside;
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncLegacyStyleAttribute();
+    }
+    /** @internal */
+    legacyStyleChanged() {
+        this.syncLegacyStyleAttribute();
+    }
+    syncLegacyStyleAttribute() {
+        if (this.legacyStyle) {
+            this.setAttribute('legacy-style', '');
+        }
+        else {
+            this.removeAttribute('legacy-style');
+        }
+    }
+}
+__decorate([
+    attr
+], FvSummaryPanelTile.prototype, "count", void 0);
+__decorate([
+    attr
+], FvSummaryPanelTile.prototype, "label", void 0);
+__decorate([
+    attr({ attribute: 'legacy-style', mode: 'boolean' })
+], FvSummaryPanelTile.prototype, "legacyStyle", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvSummaryPanelTile.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: 'text-position' })
+], FvSummaryPanelTile.prototype, "textPosition", void 0);
+const okFvSummaryPanelTile = FvSummaryPanelTile.compose({
+    baseName: 'fv-summary-panel-tile',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());
+export const fvSummaryPanelTileTag = 'ok-fv-summary-panel-tile';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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';"]}

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

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

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

@@ -0,0 +1,138 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, borderHoverColor, cardBorderColor, elevation2BoxShadow, largePadding, mediumPadding, smallPadding, smallDelay, standardPadding, titlePlus2FontColor } 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;
+
+    @layer base {
+        ${display('inline-block')}
+
+        :host {
+            min-width: max-content;
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile {
+            position: relative;
+            border-radius: 8px;
+            overflow: clip;
+            box-shadow: none;
+            transition: box-shadow ${smallDelay} ease-in-out;
+            --ni-private-card-button-background-hover-color: transparent;
+            --ni-private-card-button-background-active-color: transparent;
+            --ni-private-card-button-border-active-color: ${borderHoverColor};
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            box-sizing: border-box;
+            border: 2px solid transparent;
+            border-radius: inherit;
+            pointer-events: none;
+            transition: border-color ${smallDelay} ease-in-out;
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile::part(control) {
+            border: 2px solid ${cardBorderColor};
+            border-radius: 8px;
+            transition:
+                border-color ${smallDelay} ease-in-out,
+                border-width ${smallDelay} ease-in-out;
+        }
+
+        .summary-panel-tile-content {
+            display: flex;
+            align-items: center;
+            gap: ${mediumPadding};
+            margin: ${largePadding} calc(${largePadding} + ${standardPadding});
+            font: ${bodyFont};
+        }
+
+        .summary-panel-tile-content.under {
+            flex-direction: column;
+            align-items: center;
+            gap: ${smallPadding};
+            text-align: center;
+        }
+
+        .count {
+            color: ${titlePlus2FontColor};
+            font-size: 32px;
+            font-weight: 400;
+            line-height: 40px;
+            white-space: nowrap;
+        }
+
+        .summary-panel-tile-content.beside .count {
+            padding-right: ${mediumPadding};
+        }
+
+        .summary-panel-tile-content.under .count {
+            padding-right: 0;
+        }
+
+        .label {
+            font-weight: 600;
+            text-transform: uppercase;
+            white-space: nowrap;
+        }
+    }
+
+    @layer hover {
+        :host(:not([legacy-style])) .summary-panel-tile:hover {
+            box-shadow: 0 0 0 2px ${borderHoverColor};
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile::part(control):hover {
+            border-color: transparent;
+        }
+    }
+
+    @layer focusVisible {}
+
+    @layer active {
+        :host(:not([legacy-style])) .summary-panel-tile:active {
+            box-shadow: none;
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile[selected] {
+            box-shadow: var(${elevation2BoxShadow.cssCustomProperty});
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile[selected]:hover {
+            box-shadow:
+                var(${elevation2BoxShadow.cssCustomProperty}),
+                0 0 0 2px ${borderHoverColor};
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile[selected]:active {
+            box-shadow: var(${elevation2BoxShadow.cssCustomProperty});
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile:active::after {
+            border-color: ${borderHoverColor};
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile::part(control):active {
+            border: 2px solid transparent;
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control) {
+            border: 2px solid ${borderHoverColor};
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):hover {
+            border: 2px solid transparent;
+        }
+
+        :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):active {
+            border: 2px solid transparent;
+        }
+    }
+
+    @layer disabled {}
+
+    @layer top {}
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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`;"]}

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

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

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

@@ -0,0 +1,14 @@
+import { html } from '@ni/fast-element';
+import { cardButtonTag } from '@ni/nimble-components/dist/esm/card-button';
+export const template = html `
+    <${cardButtonTag}
+        class="summary-panel-tile"
+        ?selected="${x => x.selected}"
+    >
+        <div class="summary-panel-tile-content ${x => x.textPosition}">
+            <div class="count">${x => x.count}</div>
+            <div class="label">${x => x.label}</div>
+        </div>
+    </${cardButtonTag}>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAG3E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAoB;OACzC,aAAa;;qBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;iDAEa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;iCACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;iCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;QAErC,aAAa;CACpB,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport { cardButtonTag } from '@ni/nimble-components/dist/esm/card-button';\nimport type { FvSummaryPanelTile } from '.';\n\nexport const template = html<FvSummaryPanelTile>`\n    <${cardButtonTag}\n        class=\"summary-panel-tile\"\n        ?selected=\"${x => x.selected}\"\n    >\n        <div class=\"summary-panel-tile-content ${x => x.textPosition}\">\n            <div class=\"count\">${x => x.count}</div>\n            <div class=\"label\">${x => x.label}</div>\n        </div>\n    </${cardButtonTag}>\n`;"]}

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

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

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

@@ -0,0 +1,5 @@
+export const FvSummaryPanelTileTextPosition = {
+    beside: 'beside',
+    under: 'under'
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACR,CAAC","sourcesContent":["export const FvSummaryPanelTileTextPosition = {\n    beside: 'beside',\n    under: 'under'\n} as const;\n\nexport type FvSummaryPanelTileTextPosition = (typeof FvSummaryPanelTileTextPosition)[keyof typeof FvSummaryPanelTileTextPosition];"]}

package/package.json

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