@ni/nimble-components 18.3.7 → 18.4.1

package/dist/esm/all-components.d.ts

@@ -8,6 +8,7 @@ import './anchor-button';
 import './anchor-tab';
 import './anchor-tabs';
 import './anchored-region';
+import './banner';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

package/dist/esm/all-components.js

@@ -8,6 +8,7 @@ import './anchor-button';
 import './anchor-tab';
 import './anchor-tabs';
 import './anchored-region';
+import './banner';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/banner/index.d.ts

@@ -0,0 +1,52 @@
+import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+import { BannerSeverity } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-banner': Banner;
+    }
+}
+/**
+ * A nimble-styled notification banner for persistent messages.
+ */
+export declare class Banner extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * Whether the banner is visible or not
+     */
+    open: boolean;
+    /**
+     * @public
+     * @description
+     * Severity of the banner's message
+     */
+    severity: BannerSeverity;
+    /**
+     * @public
+     * @description
+     * Whether the banner title is hidden
+     */
+    titleHidden: boolean;
+    /**
+     * @public
+     * @description
+     * Hides the dismiss button
+     */
+    preventDismiss: boolean;
+    /**
+     * @public
+     * @description
+     * Label (not visible) for the dismiss button
+     */
+    dismissButtonLabel?: string;
+    /**
+     * @internal
+     */
+    openChanged(): void;
+    /**
+     * @internal
+     */
+    dismissBanner(): void;
+}
+export interface Banner extends ARIAGlobalStatesAndProperties {
+}

package/dist/esm/banner/index.js

@@ -0,0 +1,73 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { applyMixins, ARIAGlobalStatesAndProperties, DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { BannerSeverity } from './types';
+/**
+ * A nimble-styled notification banner for persistent messages.
+ */
+export class Banner extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * @description
+         * Whether the banner is visible or not
+         */
+        this.open = false;
+        /**
+         * @public
+         * @description
+         * Severity of the banner's message
+         */
+        this.severity = BannerSeverity.default;
+        /**
+         * @public
+         * @description
+         * Whether the banner title is hidden
+         */
+        this.titleHidden = false;
+        /**
+         * @public
+         * @description
+         * Hides the dismiss button
+         */
+        this.preventDismiss = false;
+    }
+    /**
+     * @internal
+     */
+    openChanged() {
+        this.$emit('toggle', { oldState: !this.open, newState: this.open });
+    }
+    /**
+     * @internal
+     */
+    dismissBanner() {
+        this.open = false;
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], Banner.prototype, "open", void 0);
+__decorate([
+    attr()
+], Banner.prototype, "severity", void 0);
+__decorate([
+    attr({ attribute: 'title-hidden', mode: 'boolean' })
+], Banner.prototype, "titleHidden", void 0);
+__decorate([
+    attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+], Banner.prototype, "preventDismiss", void 0);
+__decorate([
+    attr({ attribute: 'dismiss-button-label' })
+], Banner.prototype, "dismissButtonLabel", void 0);
+applyMixins(Banner, ARIAGlobalStatesAndProperties);
+const nimbleBanner = Banner.compose({
+    baseName: 'banner',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
+//# sourceMappingURL=index.js.map

package/dist/esm/banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/banner/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAQzC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,iBAAiB;IAA7C;;QACI;;;;WAIG;QAEI,SAAI,GAAG,KAAK,CAAC;QAEpB;;;;WAIG;QAEI,aAAQ,GAAmB,cAAc,CAAC,OAAO,CAAC;QAEzD;;;;WAIG;QAEI,gBAAW,GAAG,KAAK,CAAC;QAE3B;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;IAuBlC,CAAC;IAbG;;OAEG;IACI,WAAW;QACd,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACxE,CAAC;IAED;;OAEG;IACI,aAAa;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;CACJ;AA/CG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACN;AAQpB;IADC,IAAI,EAAE;wCACkD;AAQzD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAQ3B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAQ9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;kDACT;AAmBvC,WAAW,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AAEnD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/banner/styles.d.ts

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

package/dist/esm/banner/styles.js

@@ -0,0 +1,165 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { BannerFail100DarkUi, Black75, Fail100LightUi, Information100DarkUi, Information100LightUi, Warning100DarkUi, Warning100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { actionRgbPartialColor, applicationBackgroundColor, bodyFont, borderHoverColor, buttonLabelFontColor, controlHeight, controlSlimHeight, fillSelectedColor, iconColor, iconSize, linkActiveFontColor, linkDisabledFontColor, linkFontColor, standardPadding } from '../theme-provider/design-tokens';
+import { Theme } from '../theme-provider/types';
+import { hexToRgbaCssColor } from '../utilities/style/colors';
+import { themeBehavior } from '../utilities/style/theme';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        font: ${bodyFont};
+        font-size: 12.8px;
+        align-items: top;
+        overflow: hidden;
+        color: ${White};
+        ${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
+    }
+
+    :host(:not([open])) {
+        display: none;
+    }
+
+    .container {
+        display: flex;
+        width: 100%;
+    }
+
+    .icon {
+        width: 48px;
+        display: flex;
+        justify-content: center;
+        margin-top: 8px;
+        flex: 0 0 auto;
+    }
+
+    .text {
+        display: inline;
+        margin-top: 7px;
+        margin-bottom: 7px;
+    }
+
+    slot[name='title'] {
+        display: inline;
+        font-weight: bold;
+        padding-right: 8px;
+        white-space: nowrap;
+    }
+
+    :host([title-hidden]) slot[name='title'] {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
+
+    .controls {
+        height: ${controlHeight};
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-start;
+    }
+
+    slot[name='action'] {
+        display: flex;
+        align-content: center;
+        margin-left: ${standardPadding};
+        white-space: nowrap;
+    }
+
+    slot[name='action']::slotted(nimble-anchor) {
+        ${linkFontColor.cssCustomProperty}: ${White};
+        ${linkDisabledFontColor.cssCustomProperty}: ${White};
+        ${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
+        font-size: 12.8px;
+    }
+
+    slot[name='action']::slotted(nimble-button) {
+        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
+        ${buttonLabelFontColor.cssCustomProperty}: ${White};
+        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
+        ${borderHoverColor.cssCustomProperty}: ${White};
+    }
+
+    slot[name='action']::slotted(nimble-button[appearance='outline']) {
+        ${actionRgbPartialColor.cssCustomProperty}: ${White}
+    }
+
+    .dismiss {
+        width: 48px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .dismiss nimble-button {
+        ${controlHeight.cssCustomProperty}: 16px;
+        ${iconSize.cssCustomProperty}: 14px;
+        ${buttonLabelFontColor.cssCustomProperty}: ${White};
+        ${borderHoverColor.cssCustomProperty}: transparent;
+        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
+    }
+
+    .dismiss nimble-button:focus-within {
+        outline: 2px solid ${White};
+    }
+
+    .dismiss nimble-button:hover {
+        background: ${hexToRgbaCssColor(White, 0.2)};
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                background: ${Black75};
+            }
+
+            :host([severity='error']) {
+                background: ${Fail100LightUi};
+            }
+
+            :host([severity='warning']) {
+                background: ${Warning100LightUi};
+            }
+
+            :host([severity='information']) {
+                background: ${Information100LightUi};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                background: ${Black75};
+            }
+
+            :host([severity='error']) {
+                background: ${BannerFail100DarkUi};
+            }
+
+            :host([severity='warning']) {
+                background: ${Warning100DarkUi};
+            }
+
+            :host([severity='information']) {
+                background: ${Information100DarkUi};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                background: ${applicationBackgroundColor};
+            }
+
+            .container {
+                background: ${hexToRgbaCssColor(White, 0.3)};
+            }
+        `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/banner/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAE1D,OAAO,EACH,qBAAqB,EACrB,0BAA0B,EAC1B,QAAQ,EACR,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;iBAIP,KAAK;UACZ,SAAS,CAAC,iBAAiB,KAAK,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkC7D;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;kBAaU,aAAa;;;;;;;;;;;uBAWR,eAAe;;;;;UAK5B,aAAa,CAAC,iBAAiB,KAAK,KAAK;UACzC,qBAAqB,CAAC,iBAAiB,KAAK,KAAK;UACjD,mBAAmB,CAAC,iBAAiB,KAAK,iBAAiB,CACzD,KAAK,EACL,GAAG,CACN;;;;;UAKC,aAAa,CAAC,iBAAiB,KAAK,iBAAiB;UACrD,oBAAoB,CAAC,iBAAiB,KAAK,KAAK;UAChD,iBAAiB,CAAC,iBAAiB,KAAK,iBAAiB,CACvD,KAAK,EACL,GAAG,CACN;UACC,gBAAgB,CAAC,iBAAiB,KAAK,KAAK;;;;UAI5C,qBAAqB,CAAC,iBAAiB,KAAK,KAAK;;;;;;;;;;UAUjD,aAAa,CAAC,iBAAiB;UAC/B,QAAQ,CAAC,iBAAiB;UAC1B,oBAAoB,CAAC,iBAAiB,KAAK,KAAK;UAChD,gBAAgB,CAAC,iBAAiB;UAClC,iBAAiB,CAAC,iBAAiB,KAAK,iBAAiB,CACvD,KAAK,EACL,GAAG,CACN;;;;6BAIoB,KAAK;;;;sBAIZ,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;CAElD,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,cAAc;;;;8BAId,iBAAiB;;;;8BAIjB,qBAAqB;;SAE1C,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,mBAAmB;;;;8BAInB,gBAAgB;;;;8BAIhB,oBAAoB;;SAEzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,0BAA0B;;;;8BAI1B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC"}

package/dist/esm/banner/template.d.ts

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

package/dist/esm/banner/template.js

@@ -0,0 +1,62 @@
+import { html, when } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { Button } from '../button';
+import { IconExclamationMark } from '../icons/exclamation-mark';
+import { IconInfo } from '../icons/info';
+import { IconTriangleFilled } from '../icons/triangle-filled';
+import { IconXmark } from '../icons/xmark';
+import { BannerSeverity } from './types';
+// prettier-ignore
+export const template = html `
+    <div class="container"
+        role="status"
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="titleSlot"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+    >
+        <div class="icon">
+            ${when(x => x.severity === BannerSeverity.error, html `
+                <${DesignSystem.tagFor(IconExclamationMark)}></${DesignSystem.tagFor(IconExclamationMark)}>
+            `)}
+            ${when(x => x.severity === BannerSeverity.warning, html `
+                <${DesignSystem.tagFor(IconTriangleFilled)}></${DesignSystem.tagFor(IconTriangleFilled)}>
+            `)}
+            ${when(x => x.severity === BannerSeverity.information, html `
+                <${DesignSystem.tagFor(IconInfo)}></${DesignSystem.tagFor(IconInfo)}>
+            `)}
+        </div>
+        <div class="text">
+            <slot name="title" id="titleSlot"></slot>
+            <slot></slot>
+        </div>
+        <div class="controls">
+            <slot name="action"></slot>
+            <div class="dismiss">
+                ${when(x => !x.preventDismiss, html `
+                    <${DesignSystem.tagFor(Button)} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
+                        <${DesignSystem.tagFor(IconXmark)} slot="start"></${DesignSystem.tagFor(IconXmark)}>
+                        ${x => x.dismissButtonLabel ?? 'Close'}
+                    </${DesignSystem.tagFor(Button)}>
+                `)}
+            </div>
+        </div>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/banner/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/banner/template.ts"],"names":[],"mappings":"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"}

package/dist/esm/banner/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Severities of banners.
+ * @public
+ */
+export declare const BannerSeverity: {
+    readonly default: undefined;
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly information: "information";
+};
+export declare type BannerSeverity = (typeof BannerSeverity)[keyof typeof BannerSeverity];

package/dist/esm/banner/types.js

@@ -0,0 +1,11 @@
+/**
+ * Severities of banners.
+ * @public
+ */
+export const BannerSeverity = {
+    default: undefined,
+    error: 'error',
+    warning: 'warning',
+    information: 'information'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/banner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/banner/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;CACpB,CAAC"}

package/dist/esm/table/components/cell/index.d.ts

@@ -1,5 +1,6 @@
 import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
 import type { TableCellRecord, TableCellState } from '../../types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -14,6 +15,9 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
     cellState?: TableCellState<TCellRecord>;
     cellTemplate?: ViewTemplate;
     cellStyles?: ElementStyles;
+    hasActionMenu: boolean;
+    menuOpen: boolean;
+    actionMenuLabel?: string;
     /**
      * @internal
      */
@@ -21,6 +25,8 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
     private customCellView?;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    onActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
+    onActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
     protected cellStateChanged(): void;
     protected cellTemplateChanged(): void;
     protected cellStylesChanged(prev?: ElementStyles, next?: ElementStyles): void;

package/dist/esm/table/components/cell/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { defaultExecutionContext, observable } from '@microsoft/fast-element';
+import { attr, defaultExecutionContext, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
@@ -10,6 +10,8 @@ import { template } from './template';
 export class TableCell extends FoundationElement {
     constructor() {
         super(...arguments);
+        this.hasActionMenu = false;
+        this.menuOpen = false;
         this.customCellView = undefined;
     }
     connectedCallback() {
@@ -23,6 +25,13 @@ export class TableCell extends FoundationElement {
             this.customCellView = undefined;
         }
     }
+    onActionMenuBeforeToggle(event) {
+        this.$emit('cell-action-menu-beforetoggle', event.detail);
+    }
+    onActionMenuToggle(event) {
+        this.menuOpen = event.detail.newState;
+        this.$emit('cell-action-menu-toggle', event.detail);
+    }
     cellStateChanged() {
         this.customCellView?.bind(this.cellState, defaultExecutionContext);
     }
@@ -49,6 +58,15 @@ __decorate([
 __decorate([
     observable
 ], TableCell.prototype, "cellStyles", void 0);
+__decorate([
+    attr({ attribute: 'has-action-menu', mode: 'boolean' })
+], TableCell.prototype, "hasActionMenu", void 0);
+__decorate([
+    attr({ attribute: 'menu-open', mode: 'boolean' })
+], TableCell.prototype, "menuOpen", void 0);
+__decorate([
+    attr({ attribute: 'action-menu-label' })
+], TableCell.prototype, "actionMenuLabel", void 0);
 const nimbleTableCell = TableCell.compose({
     baseName: 'table-cell',
     template,

package/dist/esm/table/components/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,uBAAuB,EAGvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAiBY,mBAAc,GAAc,SAAS,CAAC;IA4ClD,CAAC;IA1CmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACnC;IACL,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC;IACvE,CAAC;IAES,mBAAmB;QACzB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;SACL;IACL,CAAC;IAES,iBAAiB,CACvB,IAAoB,EACpB,IAAoB;QAEpB,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SACxC;IACL,CAAC;CACJ;AAzDG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;+CACwB;AAGnC;IADC,UAAU;6CACuB;AAqDtC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,uBAAuB,EAGvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAaW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QAUhB,mBAAc,GAAc,SAAS,CAAC;IAyDlD,CAAC;IAvDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACnC;IACL,CAAC;IAEM,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC;IACvE,CAAC;IAES,mBAAmB;QACzB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;SACL;IACL,CAAC;IAES,iBAAiB,CACvB,IAAoB,EACpB,IAAoB;QAEpB,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SACxC;IACL,CAAC;CACJ;AA/EG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;+CACwB;AAGnC;IADC,UAAU;6CACuB;AAGlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAkEpC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

package/dist/esm/table/components/cell/styles.js

@@ -8,6 +8,9 @@ export const styles = css `
         padding: 0px calc(${standardPadding} / 2);
         align-self: center;
         height: 100%;
+        grid-template-columns: 1fr auto;
+        /* A default value that will be overridden by the row */
+        --ni-private-table-cell-action-menu-display: block;
     }
 
     .cell-content-container {
@@ -15,5 +18,9 @@ export const styles = css `
         display: flex;
         align-items: center;
     }
+
+    .action-menu {
+        display: var(--ni-private-table-cell-action-menu-display);
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/cell/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe;;;;;;;;;;CAU1C,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe;;;;;;;;;;;;;;;;;CAiB1C,CAAC"}

package/dist/esm/table/components/cell/template.js

@@ -1,8 +1,26 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { IconThreeDotsLine } from '../../../icons/three-dots-line';
+import { MenuButton } from '../../../menu-button';
+import { ButtonAppearance } from '../../../menu-button/types';
 // prettier-ignore
 export const template = html `
     <template role="cell">
         <div ${ref('cellContentContainer')} class="cell-content-container"></div>
+
+        ${when(x => x.hasActionMenu, html `
+            <${DesignSystem.tagFor(MenuButton)}
+                content-hidden
+                appearance="${ButtonAppearance.ghost}"
+                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
+                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                class="action-menu"
+            >
+                <${DesignSystem.tagFor(IconThreeDotsLine)} slot="start"></${DesignSystem.tagFor(IconThreeDotsLine)}>
+                ${x => x.actionMenuLabel}
+                <slot name="cellActionMenu" slot="menu"></slot>
+            </${DesignSystem.tagFor(MenuButton)}>
+        `)}
     </template>
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/table/components/cell/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;eAExB,GAAG,CAAC,sBAAsB,CAAC;;CAEzC,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;eAExB,GAAG,CAAC,sBAAsB,CAAC;;UAEhC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;;8BAEhB,gBAAgB,CAAC,KAAK;iCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;2BAC/F,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAiD,CAAC;;;mBAG3F,YAAY,CAAC,MAAM,CAAC,iBAAiB,CAAC,mBAAmB,YAAY,CAAC,MAAM,CAAC,iBAAiB,CAAC;kBAChG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;gBAExB,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;SACtC,CAAC;;CAET,CAAC"}

package/dist/esm/table/components/row/index.d.ts

@@ -1,6 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { TableCellState, TableDataRecord } from '../../types';
 import type { TableColumn } from '../../../table-column/base';
+import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-row': TableRow;
@@ -18,6 +19,11 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     recordId?: string;
     dataRecord?: TDataRecord;
     columns: TableColumn[];
+    currentActionMenuColumn?: TableColumn;
+    menuOpen: boolean;
     get columnStates(): ColumnState[];
+    onCellActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
+    onCellActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
+    private emitToggleEvent;
     private hasValidFieldNames;
 }

package/dist/esm/table/components/row/index.js

@@ -11,6 +11,7 @@ export class TableRow extends FoundationElement {
     constructor() {
         super(...arguments);
         this.columns = [];
+        this.menuOpen = false;
     }
     get columnStates() {
         return this.columns.map(column => {
@@ -34,6 +35,23 @@ export class TableRow extends FoundationElement {
             return { column, cellState };
         });
     }
+    onCellActionMenuBeforeToggle(event, column) {
+        this.currentActionMenuColumn = column;
+        this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
+    }
+    onCellActionMenuToggle(event, column) {
+        this.menuOpen = event.detail.newState;
+        this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
+    }
+    emitToggleEvent(eventType, menuButtonEventDetail, column) {
+        const detail = {
+            newState: menuButtonEventDetail.newState,
+            oldState: menuButtonEventDetail.oldState,
+            recordIds: [this.recordId],
+            columnId: column.columnId
+        };
+        this.$emit(eventType, detail);
+    }
     hasValidFieldNames(keys) {
         return keys.every(key => key !== undefined);
     }
@@ -47,6 +65,12 @@ __decorate([
 __decorate([
     observable
 ], TableRow.prototype, "columns", void 0);
+__decorate([
+    observable
+], TableRow.prototype, "currentActionMenuColumn", void 0);
+__decorate([
+    attr({ attribute: 'menu-open', mode: 'boolean' })
+], TableRow.prototype, "menuOpen", void 0);
 __decorate([
     volatile
 ], TableRow.prototype, "columnStates", null);

package/dist/esm/table/components/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmBtC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAUW,YAAO,GAAkB,EAAE,CAAC;IAmCvC,CAAC;IAhCG,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,uBAAuB,EAAE,CAAC;YACpD,IAAI,SAAyB,CAAC;YAC9B,IAAI,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACxD,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CACjC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,CAAC,CACnC,CAAC;gBACF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtC,CAAC;oBACD,cAAc,CAAC,CAAC,CAAC;iBACpB,CAAC,CACL,CAAC;gBACF,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,CAAC;gBACtD,SAAS,GAAG;oBACR,UAAU;oBACV,YAAY;iBACf,CAAC;aACL;iBAAM;gBACH,SAAS,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;aACpD;YAED,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,kBAAkB,CACtB,IAAoC;QAEpC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChD,CAAC;CACJ;AAzCG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACR;AAGzB;IADC,UAAU;4CACqB;AAGhC;IADC,UAAU;yCACwB;AAGnC;IADC,QAAQ;4CA0BR;AASL,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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"}