@ni/ok-components 1.2.1 → 1.3.1

package/dist/esm/fv/split-button-anchor/index.js

@@ -0,0 +1,146 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { FvSplitButtonAnchorAppearance, FvSplitButtonAnchorAppearanceVariant } from './types';
+/**
+ * A split button with an anchor-backed primary action and a secondary expandable menu surface.
+ */
+export class FvSplitButtonAnchor extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.label = 'Primary function';
+        this.href = '';
+        this.target = '';
+        this.rel = '';
+        this.download = '';
+        this.disabled = false;
+        this.open = false;
+        this.appearance = FvSplitButtonAnchorAppearance.outline;
+        this.appearanceVariant = FvSplitButtonAnchorAppearanceVariant.default;
+        this.documentClickHandler = (event) => {
+            if (!this.open) {
+                return;
+            }
+            if (!event.composedPath().includes(this)) {
+                this.setOpen(false);
+            }
+        };
+        this.keydownHandler = (event) => {
+            if (event.key === 'Escape') {
+                this.setOpen(false);
+            }
+        };
+        this.menuChangeHandler = () => {
+            this.handleMenuChange();
+        };
+    }
+    /** @internal */
+    disabledChanged() {
+        if (this.disabled) {
+            this.setOpen(false);
+        }
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.documentClickHandler);
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    /** @internal */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.documentClickHandler);
+        document.removeEventListener('keydown', this.keydownHandler);
+        super.disconnectedCallback();
+    }
+    /** @internal */
+    handlePrimaryClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('trigger', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** @internal */
+    handleToggleClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.setOpen(!this.open);
+    }
+    /** @internal */
+    handleMenuChange() {
+        this.setOpen(false);
+    }
+    /** @internal */
+    regionChanged(prev, _next) {
+        if (prev) {
+            prev.removeEventListener('change', this.menuChangeHandler);
+        }
+        if (this.region) {
+            this.region.anchorElement = this.splitButtonContainer ?? this;
+            this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
+        }
+    }
+    /** @internal */
+    splitButtonContainerChanged() {
+        if (this.region) {
+            this.region.anchorElement = this.splitButtonContainer ?? this;
+        }
+    }
+    setOpen(nextOpen) {
+        if (this.open === nextOpen) {
+            return;
+        }
+        this.open = nextOpen;
+        this.dispatchEvent(new CustomEvent('toggle', {
+            bubbles: true,
+            composed: true,
+            detail: { open: this.open }
+        }));
+    }
+}
+__decorate([
+    attr
+], FvSplitButtonAnchor.prototype, "label", void 0);
+__decorate([
+    attr
+], FvSplitButtonAnchor.prototype, "href", void 0);
+__decorate([
+    attr
+], FvSplitButtonAnchor.prototype, "target", void 0);
+__decorate([
+    attr
+], FvSplitButtonAnchor.prototype, "rel", void 0);
+__decorate([
+    attr
+], FvSplitButtonAnchor.prototype, "download", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvSplitButtonAnchor.prototype, "disabled", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvSplitButtonAnchor.prototype, "open", void 0);
+__decorate([
+    attr()
+], FvSplitButtonAnchor.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'appearance-variant' })
+], FvSplitButtonAnchor.prototype, "appearanceVariant", void 0);
+__decorate([
+    observable
+], FvSplitButtonAnchor.prototype, "splitButtonContainer", void 0);
+__decorate([
+    observable
+], FvSplitButtonAnchor.prototype, "region", void 0);
+const okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({
+    baseName: 'fv-split-button-anchor',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());
+export const fvSplitButtonAnchorTag = 'ok-fv-split-button-anchor';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/split-button-anchor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    FvSplitButtonAnchorAppearance,\n    type FvSplitButtonAnchorAppearance as FvSplitButtonAnchorAppearanceType,\n    FvSplitButtonAnchorAppearanceVariant,\n    type FvSplitButtonAnchorAppearanceVariant as FvSplitButtonAnchorAppearanceVariantType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-split-button-anchor': FvSplitButtonAnchor;\n    }\n}\n\n/**\n * A split button with an anchor-backed primary action and a secondary expandable menu surface.\n */\nexport class FvSplitButtonAnchor extends FoundationElement {\n    @attr\n    public label = 'Primary function';\n\n    @attr\n    public href = '';\n\n    @attr\n    public target = '';\n\n    @attr\n    public rel = '';\n\n    @attr\n    public download = '';\n\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    @attr()\n    public appearance: FvSplitButtonAnchorAppearanceType = FvSplitButtonAnchorAppearance.outline;\n\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: FvSplitButtonAnchorAppearanceVariantType = FvSplitButtonAnchorAppearanceVariant.default;\n\n    /** @internal */\n    @observable\n    public splitButtonContainer?: HTMLDivElement;\n\n    /** @internal */\n    @observable\n    public region?: AnchoredRegion;\n\n    /** @internal */\n    public disabledChanged(): void {\n        if (this.disabled) {\n            this.setOpen(false);\n        }\n    }\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        document.addEventListener('click', this.documentClickHandler);\n        document.addEventListener('keydown', this.keydownHandler);\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        document.removeEventListener('click', this.documentClickHandler);\n        document.removeEventListener('keydown', this.keydownHandler);\n        super.disconnectedCallback();\n    }\n\n    /** @internal */\n    public handlePrimaryClick(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('trigger', {\n            bubbles: true,\n            composed: true\n        }));\n    }\n\n    /** @internal */\n    public handleToggleClick(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.setOpen(!this.open);\n    }\n\n    /** @internal */\n    public handleMenuChange(): void {\n        this.setOpen(false);\n    }\n\n    /** @internal */\n    public regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void {\n        if (prev) {\n            prev.removeEventListener('change', this.menuChangeHandler);\n        }\n        if (this.region) {\n            this.region.anchorElement = this.splitButtonContainer ?? this;\n            this.region.addEventListener('change', this.menuChangeHandler, { capture: true });\n        }\n    }\n\n    /** @internal */\n    public splitButtonContainerChanged(): void {\n        if (this.region) {\n            this.region.anchorElement = this.splitButtonContainer ?? this;\n        }\n    }\n\n    private readonly documentClickHandler = (event: Event): void => {\n        if (!this.open) {\n            return;\n        }\n\n        if (!event.composedPath().includes(this)) {\n            this.setOpen(false);\n        }\n    };\n\n    private readonly keydownHandler = (event: KeyboardEvent): void => {\n        if (event.key === 'Escape') {\n            this.setOpen(false);\n        }\n    };\n\n    private readonly menuChangeHandler = (): void => {\n        this.handleMenuChange();\n    };\n\n    private setOpen(nextOpen: boolean): void {\n        if (this.open === nextOpen) {\n            return;\n        }\n\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('toggle', {\n            bubbles: true,\n            composed: true,\n            detail: { open: this.open }\n        }));\n    }\n}\n\nconst okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({\n    baseName: 'fv-split-button-anchor',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());\nexport const fvSplitButtonAnchorTag = 'ok-fv-split-button-anchor';"]}

package/dist/esm/fv/split-button-anchor/styles.d.ts

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

package/dist/esm/fv/split-button-anchor/styles.js

@@ -0,0 +1,228 @@
+import { css } from '@ni/fast-element';
+import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonAccentBlockFontColor, buttonAccentOutlineFontColor, buttonBorderAccentOutlineColor, buttonFillAccentColor, buttonFillPrimaryColor, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, buttonPrimaryFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, 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('inline-block')}
+
+        :host {
+            --ni-private-ok-fv-split-button-anchor-background-image: none;
+            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;
+            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;
+            --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);
+            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};
+            position: relative;
+            height: ${controlHeight};
+            vertical-align: middle;
+        }
+
+        :host([appearance='ghost']) {
+            --ni-private-ok-fv-split-button-anchor-border: transparent;
+        }
+
+        :host([appearance='block']) {
+            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
+                rgba(${borderRgbPartialColor}, 0.1),
+                rgba(${borderRgbPartialColor}, 0.1)
+            );
+            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);
+            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
+        }
+
+        :host([appearance='outline'][appearance-variant='primary']) {
+            --ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});
+        }
+
+        :host([appearance='outline'][appearance-variant='accent']) {
+            --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};
+            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};
+        }
+
+        :host([appearance='block'][appearance-variant='primary']) {
+            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
+                ${buttonFillPrimaryColor},
+                ${buttonFillPrimaryColor}
+            );
+            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};
+            --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};
+        }
+
+        :host([appearance='block'][appearance-variant='accent']) {
+            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
+                ${buttonFillAccentColor},
+                ${buttonFillAccentColor}
+            );
+            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};
+            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};
+        }
+
+        .split-button-container {
+            position: relative;
+            display: inline-flex;
+            align-items: stretch;
+            height: 100%;
+        }
+
+        .split-button-primary,
+        .split-button-toggle {
+            appearance: none;
+            position: relative;
+            z-index: 0;
+            height: 100%;
+            box-sizing: border-box;
+            margin: 0;
+            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);
+            background-color: transparent;
+            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);
+            color: var(--ni-private-ok-fv-split-button-anchor-color);
+            fill: currentcolor;
+            font: ${buttonLabelFont};
+            cursor: pointer;
+            outline: none;
+            transition:
+                box-shadow ${smallDelay} ease-in-out,
+                border-color ${smallDelay} ease-in-out,
+                background-size ${smallDelay} ease-in-out;
+        }
+
+        .split-button-primary {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 ${standardPadding};
+            border-inline-end-color: transparent;
+            white-space: nowrap;
+            text-decoration: none;
+        }
+
+        .split-button-primary::before,
+        .split-button-toggle::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            outline: 0px solid transparent;
+            outline-offset: -3px;
+            transition: outline ${smallDelay} ease-in-out;
+        }
+
+        .split-button-toggle {
+            width: ${controlHeight};
+            min-width: ${controlHeight};
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);
+            margin-inline-start: calc(-1 * ${borderWidth});
+        }
+
+        .split-button-toggle > * {
+            color: currentColor;
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+
+        .split-button-primary-disabled {
+            cursor: default;
+        }
+
+        :host([appearance='ghost']) .split-button-primary,
+        :host([appearance='ghost']) .split-button-toggle {
+            border-color: transparent;
+            box-shadow: none;
+        }
+
+        slot[name='menu']::slotted(*) {
+            min-width: 100%;
+            margin: 4px 0 0;
+        }
+    }
+
+    @layer hover {
+        .split-button-primary:hover,
+        .split-button-toggle:hover {
+            border-color: ${borderHoverColor};
+            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
+            z-index: 1;
+        }
+
+        :host([appearance='ghost']) .split-button-primary:hover,
+        :host([appearance='ghost']) .split-button-toggle:hover {
+            border-color: ${borderHoverColor};
+            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+        }
+    }
+
+    @layer focusVisible {
+        .split-button-primary:focus-visible,
+        .split-button-toggle:focus-visible {
+            border-color: ${borderHoverColor};
+            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
+            z-index: 1;
+        }
+
+        .split-button-primary:focus-visible::before,
+        .split-button-toggle:focus-visible::before {
+            outline: ${borderWidth} solid ${borderHoverColor};
+        }
+
+        :host([appearance='ghost']) .split-button-primary:focus-visible,
+        :host([appearance='ghost']) .split-button-toggle:focus-visible {
+            border-color: ${borderHoverColor};
+            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+        }
+    }
+
+    @layer active {
+        .split-button-primary:active,
+        .split-button-toggle:active,
+        :host([open]) .split-button-toggle {
+            border-color: ${borderHoverColor};
+            box-shadow: none;
+            background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});
+            background-size: calc(100% - 2px) calc(100% - 2px);
+        }
+
+        :host([appearance='block']) .split-button-primary:active,
+        :host([appearance='block']) .split-button-toggle:active,
+        :host([appearance='block'][open]) .split-button-toggle {
+            background-size: calc(100% - 4px) calc(100% - 4px);
+        }
+
+        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
+        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,
+        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {
+            color: ${buttonAccentOutlineFontColor};
+        }
+    }
+
+    @layer disabled {
+        :host([disabled]) {
+            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};
+        }
+
+        :host([disabled][appearance='outline']) {
+            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);
+        }
+
+        :host([disabled]) .split-button-primary,
+        :host([disabled]) .split-button-toggle {
+            cursor: default;
+            box-shadow: none;
+        }
+
+        :host([disabled][appearance='ghost']) .split-button-primary,
+        :host([disabled][appearance='ghost']) .split-button-toggle {
+            border-color: transparent;
+        }
+    }
+
+    @layer top {}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/split-button-anchor/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,EAC9B,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,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,cAAc,CAAC;;;;;;kEAMiC,qBAAqB;4DAC3B,oBAAoB;;sBAE1D,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;kEAEsB,qBAAqB;;;;;iEAKtB,qBAAqB;;;;6DAIzB,8BAA8B;4DAC/B,4BAA4B;;;;;kBAKtE,sBAAsB;kBACtB,sBAAsB;;6DAEqB,sBAAsB;4DACvB,sBAAsB;;;;;kBAKhE,qBAAqB;kBACrB,qBAAqB;;6DAEsB,qBAAqB;4DACtB,0BAA0B;;;;;;;;;;;;;;;;;;sBAkBhE,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;yBAOnB,eAAe;;;;;;;;;;;;;;kCAcN,UAAU;;;;qBAIvB,aAAa;yBACT,aAAa;;;;;6CAKO,WAAW;;;;;cAK1C,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;4BAsBb,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;uBAOxC,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;4BAQnC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;;;;;;;;;qBAalE,4BAA4B;;;;;;4DAMW,4BAA4B;;;;kEAItB,qBAAqB;;;;;;;;;;;;;;;;CAgBtF,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonAccentBlockFontColor,\n    buttonAccentOutlineFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonFillAccentColor,\n    buttonFillPrimaryColor,\n    buttonLabelDisabledFontColor,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonPrimaryFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\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('inline-block')}\n\n        :host {\n            --ni-private-ok-fv-split-button-anchor-background-image: none;\n            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;\n            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;\n            --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};\n            position: relative;\n            height: ${controlHeight};\n            vertical-align: middle;\n        }\n\n        :host([appearance='ghost']) {\n            --ni-private-ok-fv-split-button-anchor-border: transparent;\n        }\n\n        :host([appearance='block']) {\n            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n                rgba(${borderRgbPartialColor}, 0.1),\n                rgba(${borderRgbPartialColor}, 0.1)\n            );\n            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);\n            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);\n        }\n\n        :host([appearance='outline'][appearance-variant='primary']) {\n            --ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});\n        }\n\n        :host([appearance='outline'][appearance-variant='accent']) {\n            --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};\n        }\n\n        :host([appearance='block'][appearance-variant='primary']) {\n            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n                ${buttonFillPrimaryColor},\n                ${buttonFillPrimaryColor}\n            );\n            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};\n        }\n\n        :host([appearance='block'][appearance-variant='accent']) {\n            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n                ${buttonFillAccentColor},\n                ${buttonFillAccentColor}\n            );\n            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};\n        }\n\n        .split-button-container {\n            position: relative;\n            display: inline-flex;\n            align-items: stretch;\n            height: 100%;\n        }\n\n        .split-button-primary,\n        .split-button-toggle {\n            appearance: none;\n            position: relative;\n            z-index: 0;\n            height: 100%;\n            box-sizing: border-box;\n            margin: 0;\n            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);\n            background-color: transparent;\n            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);\n            background-position: center;\n            background-repeat: no-repeat;\n            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);\n            color: var(--ni-private-ok-fv-split-button-anchor-color);\n            fill: currentcolor;\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            outline: none;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n        }\n\n        .split-button-primary {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 0 ${standardPadding};\n            border-inline-end-color: transparent;\n            white-space: nowrap;\n            text-decoration: none;\n        }\n\n        .split-button-primary::before,\n        .split-button-toggle::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            pointer-events: none;\n            outline: 0px solid transparent;\n            outline-offset: -3px;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .split-button-toggle {\n            width: ${controlHeight};\n            min-width: ${controlHeight};\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);\n            margin-inline-start: calc(-1 * ${borderWidth});\n        }\n\n        .split-button-toggle > * {\n            color: currentColor;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        .split-button-primary-disabled {\n            cursor: default;\n        }\n\n        :host([appearance='ghost']) .split-button-primary,\n        :host([appearance='ghost']) .split-button-toggle {\n            border-color: transparent;\n            box-shadow: none;\n        }\n\n        slot[name='menu']::slotted(*) {\n            min-width: 100%;\n            margin: 4px 0 0;\n        }\n    }\n\n    @layer hover {\n        .split-button-primary:hover,\n        .split-button-toggle:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);\n            z-index: 1;\n        }\n\n        :host([appearance='ghost']) .split-button-primary:hover,\n        :host([appearance='ghost']) .split-button-toggle:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .split-button-primary:focus-visible,\n        .split-button-toggle:focus-visible {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);\n            z-index: 1;\n        }\n\n        .split-button-primary:focus-visible::before,\n        .split-button-toggle:focus-visible::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n        }\n\n        :host([appearance='ghost']) .split-button-primary:focus-visible,\n        :host([appearance='ghost']) .split-button-toggle:focus-visible {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer active {\n        .split-button-primary:active,\n        .split-button-toggle:active,\n        :host([open]) .split-button-toggle {\n            border-color: ${borderHoverColor};\n            box-shadow: none;\n            background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        :host([appearance='block']) .split-button-primary:active,\n        :host([appearance='block']) .split-button-toggle:active,\n        :host([appearance='block'][open]) .split-button-toggle {\n            background-size: calc(100% - 4px) calc(100% - 4px);\n        }\n\n        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,\n        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,\n        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {\n            color: ${buttonAccentOutlineFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};\n        }\n\n        :host([disabled][appearance='outline']) {\n            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);\n        }\n\n        :host([disabled]) .split-button-primary,\n        :host([disabled]) .split-button-toggle {\n            cursor: default;\n            box-shadow: none;\n        }\n\n        :host([disabled][appearance='ghost']) .split-button-primary,\n        :host([disabled][appearance='ghost']) .split-button-toggle {\n            border-color: transparent;\n        }\n    }\n\n    @layer top {}\n`;"]}

package/dist/esm/fv/split-button-anchor/template.d.ts

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

package/dist/esm/fv/split-button-anchor/template.js

@@ -0,0 +1,64 @@
+import { html, ref, when } from '@ni/fast-element';
+import { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';
+import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
+export const template = html `
+    <div
+        class="split-button-container"
+        ${ref('splitButtonContainer')}
+    >
+        ${when(x => !x.disabled && x.href.length > 0, html `
+                <a
+                    class="split-button-primary"
+                    href="${x => x.href}"
+                    target="${x => x.target || undefined}"
+                    rel="${x => x.rel || undefined}"
+                    download="${x => x.download || undefined}"
+                    @click="${x => {
+    x.handlePrimaryClick();
+    return true;
+}}"
+                >
+                    ${x => x.label}
+                </a>
+            `)}
+        ${when(x => x.disabled || x.href.length === 0, html `
+                <span
+                    class="split-button-primary split-button-primary-disabled"
+                    aria-disabled="${x => x.disabled}"
+                >
+                    ${x => x.label}
+                </span>
+            `)}
+        <button
+            class="split-button-toggle"
+            type="button"
+            ?disabled="${x => x.disabled}"
+            aria-label="${x => `More actions for ${x.label}`}"
+            aria-expanded="${x => x.open}"
+            aria-haspopup="menu"
+            @click="${x => {
+    x.handleToggleClick();
+    return true;
+}}"
+        >
+            <${iconArrowExpanderDownTag}></${iconArrowExpanderDownTag}>
+        </button>
+    </div>
+    ${when(x => x.open, html `
+            <${anchoredRegionTag}
+                fixed-placement
+                auto-update-mode="auto"
+                horizontal-inset
+                horizontal-positioning-mode="dynamic"
+                vertical-positioning-mode="locktodefault"
+                vertical-default-position="bottom"
+                horizontal-scaling="anchor"
+                ${ref('region')}
+            >
+                <span part="menu">
+                    <slot name="menu"></slot>
+                </span>
+            </${anchoredRegionTag}>
+        `)}
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/split-button-anchor/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAqB;;;UAGvC,GAAG,CAAC,sBAAsB,CAAC;;UAE3B,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,IAAI,CAAqB;;;4BAGT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,SAAS;2BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS;gCAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,SAAS;8BAC9B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC;;sBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;aAErB,CACJ;UACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EACtC,IAAI,CAAqB;;;qCAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;sBAE9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;aAErB,CACJ;;;;yBAIgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;0BACd,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE;6BAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;sBAElB,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtB,OAAO,IAAI,CAAC;AAChB,CAAC;;eAEE,wBAAwB,MAAM,wBAAwB;;;MAG/D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAqB;eAClB,iBAAiB;;;;;;;;kBAQd,GAAG,CAAC,QAAQ,CAAC;;;;;gBAKf,iBAAiB;SACxB,CACJ;CACJ,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport type { FvSplitButtonAnchor } from '.';\n\nexport const template = html<FvSplitButtonAnchor>`\n    <div\n        class=\"split-button-container\"\n        ${ref('splitButtonContainer')}\n    >\n        ${when(\n            x => !x.disabled && x.href.length > 0,\n            html<FvSplitButtonAnchor>`\n                <a\n                    class=\"split-button-primary\"\n                    href=\"${x => x.href}\"\n                    target=\"${x => x.target || undefined}\"\n                    rel=\"${x => x.rel || undefined}\"\n                    download=\"${x => x.download || undefined}\"\n                    @click=\"${x => {\n                        x.handlePrimaryClick();\n                        return true;\n                    }}\"\n                >\n                    ${x => x.label}\n                </a>\n            `\n        )}\n        ${when(\n            x => x.disabled || x.href.length === 0,\n            html<FvSplitButtonAnchor>`\n                <span\n                    class=\"split-button-primary split-button-primary-disabled\"\n                    aria-disabled=\"${x => x.disabled}\"\n                >\n                    ${x => x.label}\n                </span>\n            `\n        )}\n        <button\n            class=\"split-button-toggle\"\n            type=\"button\"\n            ?disabled=\"${x => x.disabled}\"\n            aria-label=\"${x => `More actions for ${x.label}`}\"\n            aria-expanded=\"${x => x.open}\"\n            aria-haspopup=\"menu\"\n            @click=\"${x => {\n                x.handleToggleClick();\n                return true;\n            }}\"\n        >\n            <${iconArrowExpanderDownTag}></${iconArrowExpanderDownTag}>\n        </button>\n    </div>\n    ${when(\n        x => x.open,\n        html<FvSplitButtonAnchor>`\n            <${anchoredRegionTag}\n                fixed-placement\n                auto-update-mode=\"auto\"\n                horizontal-inset\n                horizontal-positioning-mode=\"dynamic\"\n                vertical-positioning-mode=\"locktodefault\"\n                vertical-default-position=\"bottom\"\n                horizontal-scaling=\"anchor\"\n                ${ref('region')}\n            >\n                <span part=\"menu\">\n                    <slot name=\"menu\"></slot>\n                </span>\n            </${anchoredRegionTag}>\n        `\n    )}\n`;"]}

package/dist/esm/fv/split-button-anchor/types.d.ts

@@ -0,0 +1,12 @@
+export declare const FvSplitButtonAnchorAppearance: {
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+    readonly block: "block";
+};
+export type FvSplitButtonAnchorAppearance = (typeof FvSplitButtonAnchorAppearance)[keyof typeof FvSplitButtonAnchorAppearance];
+export declare const FvSplitButtonAnchorAppearanceVariant: {
+    readonly default: "default";
+    readonly primary: "primary";
+    readonly accent: "accent";
+};
+export type FvSplitButtonAnchorAppearanceVariant = (typeof FvSplitButtonAnchorAppearanceVariant)[keyof typeof FvSplitButtonAnchorAppearanceVariant];

package/dist/esm/fv/split-button-anchor/types.js

@@ -0,0 +1,11 @@
+export const FvSplitButtonAnchorAppearance = {
+    outline: 'outline',
+    ghost: 'ghost',
+    block: 'block'
+};
+export const FvSplitButtonAnchorAppearanceVariant = {
+    default: 'default',
+    primary: 'primary',
+    accent: 'accent'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv/split-button-anchor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,6BAA6B,GAAG;IACzC,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAChD,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACV,CAAC","sourcesContent":["export const FvSplitButtonAnchorAppearance = {\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n} as const;\n\nexport type FvSplitButtonAnchorAppearance = (typeof FvSplitButtonAnchorAppearance)[keyof typeof FvSplitButtonAnchorAppearance];\n\nexport const FvSplitButtonAnchorAppearanceVariant = {\n    default: 'default',\n    primary: 'primary',\n    accent: 'accent'\n} as const;\n\nexport type FvSplitButtonAnchorAppearanceVariant = (typeof FvSplitButtonAnchorAppearanceVariant)[keyof typeof FvSplitButtonAnchorAppearanceVariant];"]}

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

@@ -0,0 +1,26 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import '@ni/nimble-components/dist/esm/button';
+import '@ni/nimble-components/dist/esm/icons/cog';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-summary-panel': FvSummaryPanel;
+    }
+}
+/**
+ * A layout container for summary tiles with an optional edit-items affordance.
+ */
+export declare class FvSummaryPanel extends FoundationElement {
+    showEditItemsButton: boolean;
+    legacyStyle: boolean;
+    editItemsButtonLabel: string;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    legacyStyleChanged(): void;
+    /** @internal */
+    handleEditItemsClick(): void;
+    /** @internal */
+    handleItemsSlotChange(): void;
+    private syncTileLegacyStyle;
+}
+export declare const fvSummaryPanelTag = "ok-fv-summary-panel";

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

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { attr } 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';
+/**
+ * A layout container for summary tiles with an optional edit-items affordance.
+ */
+export class FvSummaryPanel extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.showEditItemsButton = false;
+        this.legacyStyle = false;
+        this.editItemsButtonLabel = 'Configure';
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncTileLegacyStyle();
+    }
+    /** @internal */
+    legacyStyleChanged() {
+        if (this.$fastController.isConnected) {
+            this.syncTileLegacyStyle();
+        }
+    }
+    /** @internal */
+    handleEditItemsClick() {
+        this.dispatchEvent(new CustomEvent('edit-items', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** @internal */
+    handleItemsSlotChange() {
+        this.syncTileLegacyStyle();
+    }
+    syncTileLegacyStyle() {
+        for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {
+            if (element.localName !== 'ok-fv-summary-panel-tile') {
+                continue;
+            }
+            if (this.legacyStyle) {
+                element.setAttribute('legacy-style', '');
+            }
+            else {
+                element.removeAttribute('legacy-style');
+            }
+        }
+    }
+}
+__decorate([
+    attr({ attribute: 'show-edit-items-button', mode: 'boolean' })
+], FvSummaryPanel.prototype, "showEditItemsButton", void 0);
+__decorate([
+    attr({ attribute: 'legacy-style', mode: 'boolean' })
+], FvSummaryPanel.prototype, "legacyStyle", void 0);
+__decorate([
+    attr({ attribute: 'edit-items-button-label' })
+], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
+const okFvSummaryPanel = FvSummaryPanel.compose({
+    baseName: 'fv-summary-panel',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());
+export const fvSummaryPanelTag = 'ok-fv-summary-panel';
+//# sourceMappingURL=index.js.map

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

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

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

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