npm - @ni/nimble-components - Versions diffs - 29.7.9 → 29.8.1 - Mend

@ni/nimble-components 29.7.9 → 29.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

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

@@ -47,6 +47,7 @@ import './table-column/anchor';
 import './table-column/date-text';
 import './table-column/duration-text';
 import './table-column/mapping';
+import './table-column/menu-button';
 import './table-column/number-text';
 import './table-column/text';
 import './tabs';

package/dist/esm/all-components.js CHANGED Viewed

@@ -47,6 +47,7 @@ import './table-column/anchor';
 import './table-column/date-text';
 import './table-column/duration-text';
 import './table-column/mapping';
+import './table-column/menu-button';
 import './table-column/number-text';
 import './table-column/text';
 import './tabs';

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

	@@ -1 +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,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,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,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,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,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,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,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,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;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC","sourcesContent":["/*\n Import of all the web components available in Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport './anchor';\nimport './anchor-button';\nimport './anchor-menu-item';\nimport './anchor-tab';\nimport './anchor-tabs';\nimport './anchor-tree-item';\nimport './anchored-region';\nimport './banner';\nimport './breadcrumb';\nimport './breadcrumb-item';\nimport './button';\nimport './card';\nimport './card-button';\nimport './checkbox';\nimport './combobox';\nimport './dialog';\nimport './drawer';\nimport './icons/all-icons';\nimport './label-provider/core';\nimport './label-provider/table';\nimport './list-option';\nimport './list-option-group';\nimport './mapping/empty';\nimport './mapping/icon';\nimport './mapping/spinner';\nimport './mapping/text';\nimport './menu';\nimport './menu-button';\nimport './menu-item';\nimport './number-field';\nimport './radio';\nimport './radio-group';\nimport './rich-text/editor';\nimport './rich-text/viewer';\nimport './select';\nimport './spinner';\nimport './switch';\nimport './tab';\nimport './tab-panel';\nimport './table';\nimport './table-column/anchor';\nimport './table-column/date-text';\nimport './table-column/duration-text';\nimport './table-column/mapping';\nimport './table-column/number-text';\nimport './table-column/text';\nimport './tabs';\nimport './tabs-toolbar';\nimport './text-area';\nimport './text-field';\nimport './theme-provider';\nimport './toggle-button';\nimport './toolbar';\nimport './tooltip';\nimport './tree-item';\nimport './tree-view';\nimport './unit/byte';\nimport './unit/volt';\nimport './wafer-map';\n"]}
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,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,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,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,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,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,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,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AACpC,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;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC","sourcesContent":["/*\n Import of all the web components available in Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport './anchor';\nimport './anchor-button';\nimport './anchor-menu-item';\nimport './anchor-tab';\nimport './anchor-tabs';\nimport './anchor-tree-item';\nimport './anchored-region';\nimport './banner';\nimport './breadcrumb';\nimport './breadcrumb-item';\nimport './button';\nimport './card';\nimport './card-button';\nimport './checkbox';\nimport './combobox';\nimport './dialog';\nimport './drawer';\nimport './icons/all-icons';\nimport './label-provider/core';\nimport './label-provider/table';\nimport './list-option';\nimport './list-option-group';\nimport './mapping/empty';\nimport './mapping/icon';\nimport './mapping/spinner';\nimport './mapping/text';\nimport './menu';\nimport './menu-button';\nimport './menu-item';\nimport './number-field';\nimport './radio';\nimport './radio-group';\nimport './rich-text/editor';\nimport './rich-text/viewer';\nimport './select';\nimport './spinner';\nimport './switch';\nimport './tab';\nimport './tab-panel';\nimport './table';\nimport './table-column/anchor';\nimport './table-column/date-text';\nimport './table-column/duration-text';\nimport './table-column/mapping';\nimport './table-column/menu-button';\nimport './table-column/number-text';\nimport './table-column/text';\nimport './tabs';\nimport './tabs-toolbar';\nimport './text-area';\nimport './text-field';\nimport './theme-provider';\nimport './toggle-button';\nimport './toolbar';\nimport './tooltip';\nimport './tree-item';\nimport './tree-view';\nimport './unit/byte';\nimport './unit/volt';\nimport './wafer-map';\n"]}

package/dist/esm/menu-button/testing/menu-button.pageobject.d.ts CHANGED Viewed

@@ -28,6 +28,10 @@ export declare class MenuButtonPageObject {
      * @returns The trimmed text that is slotted into the menu button.
      */
     getLabelText(): string;
+    /**
+     * @returns Whether or not the menu button is focused.
+     */
+    isFocused(): boolean;
     /**
      * @internal
      * Focuses and clicks the menu button.
@@ -53,4 +57,12 @@ export declare class MenuButtonPageObject {
      * Presses the Arrow Down key on the menu button.
      */
     pressArrowDownKey(): void;
+    /**
+     * @internal
+     */
+    getTitle(): string;
+    /**
+     * @internal
+     */
+    dispatchEvent(event: Event): void;
 }

package/dist/esm/menu-button/testing/menu-button.pageobject.js CHANGED Viewed

@@ -49,6 +49,12 @@ export class MenuButtonPageObject {
     getLabelText() {
         return this.menuButtonElement.textContent?.trim() ?? '';
     }
+    /**
+     * @returns Whether or not the menu button is focused.
+     */
+    isFocused() {
+        return this.menuButtonElement.shadowRoot?.activeElement !== null;
+    }
     /**
      * @internal
      * Focuses and clicks the menu button.
@@ -64,6 +70,8 @@ export class MenuButtonPageObject {
      * Presses the Enter key on the menu button.
      */
     pressEnterKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keypress', {
             key: keyEnter
         });
@@ -74,6 +82,8 @@ export class MenuButtonPageObject {
      * Presses the Space key on the menu button.
      */
     pressSpaceKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keypress', {
             key: keySpace
         });
@@ -84,6 +94,8 @@ export class MenuButtonPageObject {
      * Presses the Arrow Up key on the menu button.
      */
     pressArrowUpKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keydown', {
             key: keyArrowUp
         });
@@ -94,10 +106,24 @@ export class MenuButtonPageObject {
      * Presses the Arrow Down key on the menu button.
      */
     pressArrowDownKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keydown', {
             key: keyArrowDown
         });
         this.menuButtonElement.toggleButton.dispatchEvent(event);
     }
+    /**
+     * @internal
+     */
+    getTitle() {
+        return this.menuButtonElement.title;
+    }
+    /**
+     * @internal
+     */
+    dispatchEvent(event) {
+        this.menuButtonElement.dispatchEvent(event);
+    }
 }
 //# sourceMappingURL=menu-button.pageobject.js.map

package/dist/esm/menu-button/testing/menu-button.pageobject.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,OAAO,oBAAoB;IAC7B,YAAsC,iBAA6B;QAA7B,sBAAiB,GAAjB,iBAAiB,CAAY;IAAG,CAAC;IAEvE;;OAEG;IACI,MAAM;QACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,QAAQ;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;YACf,OAAO;SACV;QAED,MAAM,kBAAkB,GAAG,iBAAiB,CACxC,IAAI,CAAC,iBAAiB,EACtB,QAAQ,CACX,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,MAAM,kBAAkB,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACI,mBAAmB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;SAC5D;QAED,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAED;;;OAGG;IACI,YAAY;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5D,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gFAAgF;QAChF,0EAA0E;QAC1E,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACzD,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,UAAU;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACI,iBAAiB;QACpB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,YAAY;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;CACJ","sourcesContent":["import {\n keyArrowDown,\n keyArrowUp,\n keyEnter,\n keyEscape,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/tests/component';\n\n/*\n Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n \n This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n /\nexport class MenuButtonPageObject {\n public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n /\n @returns Whether or not the menu is open.\n /\n public isOpen(): boolean {\n return this.menuButtonElement.open;\n }\n\n /\n Opens the menu.\n * @returns A promise that resolves when the menu opens.\n /\n public async openMenu(): Promise<void> {\n if (this.isOpen()) {\n return;\n }\n\n const toggleEventPromise = waitForEventAsync(\n this.menuButtonElement,\n 'toggle'\n );\n this.clickMenuButton();\n await toggleEventPromise;\n }\n\n /\n Closes the menu by pressing Escape.\n * Throws an error if the menu is not open.\n /\n public closeMenuWithEscape(): void {\n if (!this.isOpen()) {\n throw new Error('Cannot close menu when it is not open');\n }\n\n const event = new KeyboardEvent('keydown', {\n key: keyEscape\n });\n this.menuButtonElement.region!.dispatchEvent(event);\n }\n\n /\n Gets the text in the menu button.\n * @returns The trimmed text that is slotted into the menu button.\n /\n public getLabelText(): string {\n return this.menuButtonElement.textContent?.trim() ?? '';\n }\n\n /\n @internal\n * Focuses and clicks the menu button.\n /\n public clickMenuButton(): void {\n // Focus the menu button before calling click() because ordinarily a mouse click\n // would bring focus to the button, but calling click() directly does not.\n this.menuButtonElement.focus();\n this.menuButtonElement.toggleButton!.control.click();\n }\n\n /\n @internal\n * Presses the Enter key on the menu button.\n /\n public pressEnterKey(): void {\n const event = new KeyboardEvent('keypress', {\n key: keyEnter\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Space key on the menu button.\n /\n public pressSpaceKey(): void {\n const event = new KeyboardEvent('keypress', {\n key: keySpace\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Up key on the menu button.\n /\n public pressArrowUpKey(): void {\n const event = new KeyboardEvent('keydown', {\n key: keyArrowUp\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Down key on the menu button.\n */\n public pressArrowDownKey(): void {\n const event = new KeyboardEvent('keydown', {\n key: keyArrowDown\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n}\n"]}
1	+ {"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,OAAO,oBAAoB;IAC7B,YAAsC,iBAA6B;QAA7B,sBAAiB,GAAjB,iBAAiB,CAAY;IAAG,CAAC;IAEvE;;OAEG;IACI,MAAM;QACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,QAAQ;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;YACf,OAAO;SACV;QAED,MAAM,kBAAkB,GAAG,iBAAiB,CACxC,IAAI,CAAC,iBAAiB,EACtB,QAAQ,CACX,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,MAAM,kBAAkB,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACI,mBAAmB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;SAC5D;QAED,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAED;;;OAGG;IACI,YAAY;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5D,CAAC;IAED;;OAEG;IACI,SAAS;QACZ,OAAO,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,aAAa,KAAK,IAAI,CAAC;IACrE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gFAAgF;QAChF,0EAA0E;QAC1E,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACzD,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,UAAU;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACI,iBAAiB;QACpB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,YAAY;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;OAEG;IACI,QAAQ;QACX,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IACxC,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,KAAY;QAC7B,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;CACJ","sourcesContent":["import {\n keyArrowDown,\n keyArrowUp,\n keyEnter,\n keyEscape,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/tests/component';\n\n/*\n Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n \n This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n /\nexport class MenuButtonPageObject {\n public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n /\n @returns Whether or not the menu is open.\n /\n public isOpen(): boolean {\n return this.menuButtonElement.open;\n }\n\n /\n Opens the menu.\n * @returns A promise that resolves when the menu opens.\n /\n public async openMenu(): Promise<void> {\n if (this.isOpen()) {\n return;\n }\n\n const toggleEventPromise = waitForEventAsync(\n this.menuButtonElement,\n 'toggle'\n );\n this.clickMenuButton();\n await toggleEventPromise;\n }\n\n /\n Closes the menu by pressing Escape.\n * Throws an error if the menu is not open.\n /\n public closeMenuWithEscape(): void {\n if (!this.isOpen()) {\n throw new Error('Cannot close menu when it is not open');\n }\n\n const event = new KeyboardEvent('keydown', {\n key: keyEscape\n });\n this.menuButtonElement.region!.dispatchEvent(event);\n }\n\n /\n Gets the text in the menu button.\n * @returns The trimmed text that is slotted into the menu button.\n /\n public getLabelText(): string {\n return this.menuButtonElement.textContent?.trim() ?? '';\n }\n\n /\n @returns Whether or not the menu button is focused.\n /\n public isFocused(): boolean {\n return this.menuButtonElement.shadowRoot?.activeElement !== null;\n }\n\n /\n @internal\n * Focuses and clicks the menu button.\n /\n public clickMenuButton(): void {\n // Focus the menu button before calling click() because ordinarily a mouse click\n // would bring focus to the button, but calling click() directly does not.\n this.menuButtonElement.focus();\n this.menuButtonElement.toggleButton!.control.click();\n }\n\n /\n @internal\n * Presses the Enter key on the menu button.\n /\n public pressEnterKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keypress', {\n key: keyEnter\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Space key on the menu button.\n /\n public pressSpaceKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keypress', {\n key: keySpace\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Up key on the menu button.\n /\n public pressArrowUpKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keydown', {\n key: keyArrowUp\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Down key on the menu button.\n /\n public pressArrowDownKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keydown', {\n key: keyArrowDown\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /\n @internal\n /\n public getTitle(): string {\n return this.menuButtonElement.title;\n }\n\n /\n @internal\n */\n public dispatchEvent(event: Event): void {\n this.menuButtonElement.dispatchEvent(event);\n }\n}\n"]}

package/dist/esm/patterns/button/styles.js CHANGED Viewed

@@ -81,6 +81,10 @@ export const styles = css `
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
+        slot[name='start']::slotted(*) {
+            flex-shrink: 0;
+        }
         :host([content-hidden]) .content {
             ${accessiblyHidden}
         }
@@ -89,6 +93,10 @@ export const styles = css `
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
+        slot[name='end']::slotted(*) {
+            flex-shrink: 0;
+        }
     }
     @layer hover {

package/dist/esm/patterns/button/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;;sBAIV,aAAa;qBACd,oBAAoB;oBACrB,eAAe;;;;cAIrB;AACE;;;;EAIE,CAAC,EACP;;;;;;;;sBAQU,WAAW;;;;;;;;;;;;yBAYR,eAAe;;;6BAGX,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;;;;;;;;;;kCAoBV,UAAU;;;;;;;;;cAS9B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;cAIpD,gBAAgB;;;;;cAKhB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;4BAMtC,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;;;kBAKnD,YAAY;4BACF,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;kBAGnD,YAAY;uBACP,WAAW,UAAU,gBAAgB;;;;;;;;qBAQvC,oBAAoB;4BACb,gBAAgB;;kBAE1B,iBAAiB;kBACjB,iBAAiB;;;;;;;;;;;cAWrB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;qBAU7C,4BAA4B;;;;;;;;;;;;;cAanC,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;CAejE,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG8B,qBAAqB;;;;;;yCAMrB,qBAAqB;;;SAGrD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;SAMF,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;+BAIoB,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;;;;;;;;;0BAWpC,YAAY;;;;;;;;+BAQP,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;SAGrD,CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA,EAAE,CAAC,aAAa,CAC5D,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;oCAGyB,qBAAqB;;;;oCAIrB,8BAA8B;6BACrC,4BAA4B;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;;;;6BAMrD,4BAA4B;;;;;;;;;sBASnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;SAGzE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;0BAIe,sBAAsB;0BACtB,sBAAsB;;6BAEnB,sBAAsB;oCACf,sBAAsB;;;;;0BAKhC,qBAAqB;0BACrB,qBAAqB;;6BAElB,0BAA0B;oCACnB,qBAAqB;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;sBAKtD,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;SAGnE,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, checked, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n ${\n /\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n / ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: border-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n color: ${buttonLabelFontColor};\n border-color: ${borderHoverColor};\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n\n .control:active [part='start'],\n .control:active [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n cursor: default;\n }\n\n :host([disabled]) .control {\n color: ${buttonLabelDisabledFontColor};\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(),\n :host([disabled]) slot[name='end']::slotted() {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer active {\n :host([appearance-variant='accent']) .control:active {\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent'])\n .control:active\n [part='start'],\n :host([appearance-variant='accent'])\n .control:active\n [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='primary']) [part='start'],\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n }\n `\n )\n);\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;;sBAIV,aAAa;qBACd,oBAAoB;oBACrB,eAAe;;;;cAIrB;AACE;;;;EAIE,CAAC,EACP;;;;;;;;sBAQU,WAAW;;;;;;;;;;;;yBAYR,eAAe;;;6BAGX,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;;;;;;;;;;kCAoBV,UAAU;;;;;;;;;cAS9B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;cAQpD,gBAAgB;;;;;cAKhB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;4BAUtC,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;;;kBAKnD,YAAY;4BACF,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;kBAGnD,YAAY;uBACP,WAAW,UAAU,gBAAgB;;;;;;;;qBAQvC,oBAAoB;4BACb,gBAAgB;;kBAE1B,iBAAiB;kBACjB,iBAAiB;;;;;;;;;;;cAWrB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;qBAU7C,4BAA4B;;;;;;;;;;;;;cAanC,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;CAejE,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG8B,qBAAqB;;;;;;yCAMrB,qBAAqB;;;SAGrD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;SAMF,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;+BAIoB,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;;;;;;;;;0BAWpC,YAAY;;;;;;;;+BAQP,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;SAGrD,CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA,EAAE,CAAC,aAAa,CAC5D,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;oCAGyB,qBAAqB;;;;oCAIrB,8BAA8B;6BACrC,4BAA4B;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;;;;6BAMrD,4BAA4B;;;;;;;;;sBASnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;SAGzE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;0BAIe,sBAAsB;0BACtB,sBAAsB;;6BAEnB,sBAAsB;oCACf,sBAAsB;;;;;0BAKhC,qBAAqB;0BACrB,qBAAqB;;6BAElB,0BAA0B;oCACnB,qBAAqB;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;sBAKtD,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;SAGnE,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, checked, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n ${\n /\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n / ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: border-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='start']::slotted() {\n flex-shrink: 0;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='end']::slotted() {\n flex-shrink: 0;\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n color: ${buttonLabelFontColor};\n border-color: ${borderHoverColor};\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n\n .control:active [part='start'],\n .control:active [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n cursor: default;\n }\n\n :host([disabled]) .control {\n color: ${buttonLabelDisabledFontColor};\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(),\n :host([disabled]) slot[name='end']::slotted() {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer active {\n :host([appearance-variant='accent']) .control:active {\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent'])\n .control:active\n [part='start'],\n :host([appearance-variant='accent'])\n .control:active\n [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='primary']) [part='start'],\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n }\n `\n )\n);\n"]}

package/dist/esm/table/components/header/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { TableColumnSortDirection } from '../../types';
+import { TableColumnAlignment, TableColumnSortDirection } from '../../types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-header': TableHeader;
@@ -13,6 +13,7 @@ export declare class TableHeader extends FoundationElement {
     sortDirection: TableColumnSortDirection;
     firstSortedColumn: boolean;
     indicatorsHidden: boolean;
+    alignment: TableColumnAlignment;
     isGrouped: boolean;
     protected sortDirectionChanged(_prev: TableColumnSortDirection | undefined, _next: TableColumnSortDirection): void;
     protected firstSortedColumnChanged(_prev: boolean | undefined, _next: boolean): void;

package/dist/esm/table/components/header/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { attr, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
-import { TableColumnSortDirection } from '../../types';
+import { TableColumnAlignment, TableColumnSortDirection } from '../../types';
 import { styles } from './styles';
 import { template } from './template';
 /**
@@ -14,6 +14,7 @@ export class TableHeader extends FoundationElement {
         this.sortDirection = TableColumnSortDirection.none;
         this.firstSortedColumn = false;
         this.indicatorsHidden = false;
+        this.alignment = TableColumnAlignment.left;
         this.isGrouped = false;
     }
     sortDirectionChanged(_prev, _next) {
@@ -44,6 +45,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'indicators-hidden', mode: 'boolean' })
 ], TableHeader.prototype, "indicatorsHidden", void 0);
+__decorate([
+    observable
+], TableHeader.prototype, "alignment", void 0);
 __decorate([
     observable
 ], TableHeader.prototype, "isGrouped", void 0);

package/dist/esm/table/components/header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/header/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;~~AACvD~~,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QAEW,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAGxE,sBAAiB,GAAG,KAAK,CAAC;QAG1B,qBAAgB,GAAG,KAAK,CAAC;QAGzB,cAAS,GAAG,KAAK,CAAC;IA4B7B,CAAC;IA1Ba,oBAAoB,CAC1B,KAA2C,EAC3C,KAA+B;QAE/B,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,wBAAwB,CAC9B,KAA0B,EAC1B,KAAc;QAEd,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEO,cAAc;QAClB,IACI,CAAC,IAAI,CAAC,iBAAiB;eACpB,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,IAAI,EACzD;YACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE;YAClE,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC/B;aAAM;YACH,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;SAChC;IACL,CAAC;CACJ;~~AArCU~~;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAGxE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDAC3B;AAG1B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qDAC1B;AAGzB;IADN,UAAU;8CACc;AA8B7B,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { TableColumnSortDirection } from '../../types';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-header': TableHeader;\n }\n}\n\n/*\n A styled header that is used within the nimble-table.\n * @internal\n */\nexport class TableHeader extends FoundationElement {\n @attr({ attribute: 'sort-direction' })\n public sortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n @attr({ attribute: 'first-sorted-column', mode: 'boolean' })\n public firstSortedColumn = false;\n\n @attr({ attribute: 'indicators-hidden', mode: 'boolean' })\n public indicatorsHidden = false;\n\n @observable\n public isGrouped = false;\n\n protected sortDirectionChanged(\n _prev: TableColumnSortDirection \| undefined,\n _next: TableColumnSortDirection\n ): void {\n this.updateAriaSort();\n }\n\n protected firstSortedColumnChanged(\n _prev: boolean \| undefined,\n _next: boolean\n ): void {\n this.updateAriaSort();\n }\n\n private updateAriaSort(): void {\n if (\n !this.firstSortedColumn\n \|\| this.sortDirection === TableColumnSortDirection.none\n ) {\n this.ariaSort = null;\n } else if (this.sortDirection === TableColumnSortDirection.ascending) {\n this.ariaSort = 'ascending';\n } else {\n this.ariaSort = 'descending';\n }\n }\n}\n\nconst nimbleTableHeader = TableHeader.compose({\n baseName: 'table-header',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());\nexport const tableHeaderTag = 'nimble-table-header';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/header/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QAEW,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAGxE,sBAAiB,GAAG,KAAK,CAAC;QAG1B,qBAAgB,GAAG,KAAK,CAAC;QAGzB,cAAS,GAAyB,oBAAoB,CAAC,IAAI,CAAC;QAG5D,cAAS,GAAG,KAAK,CAAC;IA4B7B,CAAC;IA1Ba,oBAAoB,CAC1B,KAA2C,EAC3C,KAA+B;QAE/B,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,wBAAwB,CAC9B,KAA0B,EAC1B,KAAc;QAEd,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEO,cAAc;QAClB,IACI,CAAC,IAAI,CAAC,iBAAiB;eACpB,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,IAAI,EACzD;YACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE;YAClE,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC/B;aAAM;YACH,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;SAChC;IACL,CAAC;CACJ;AAxCU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAGxE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDAC3B;AAG1B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qDAC1B;AAGzB;IADN,UAAU;8CACwD;AAG5D;IADN,UAAU;8CACc;AA8B7B,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { TableColumnAlignment, TableColumnSortDirection } from '../../types';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-header': TableHeader;\n }\n}\n\n/*\n A styled header that is used within the nimble-table.\n * @internal\n */\nexport class TableHeader extends FoundationElement {\n @attr({ attribute: 'sort-direction' })\n public sortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n @attr({ attribute: 'first-sorted-column', mode: 'boolean' })\n public firstSortedColumn = false;\n\n @attr({ attribute: 'indicators-hidden', mode: 'boolean' })\n public indicatorsHidden = false;\n\n @observable\n public alignment: TableColumnAlignment = TableColumnAlignment.left;\n\n @observable\n public isGrouped = false;\n\n protected sortDirectionChanged(\n _prev: TableColumnSortDirection \| undefined,\n _next: TableColumnSortDirection\n ): void {\n this.updateAriaSort();\n }\n\n protected firstSortedColumnChanged(\n _prev: boolean \| undefined,\n _next: boolean\n ): void {\n this.updateAriaSort();\n }\n\n private updateAriaSort(): void {\n if (\n !this.firstSortedColumn\n \|\| this.sortDirection === TableColumnSortDirection.none\n ) {\n this.ariaSort = null;\n } else if (this.sortDirection === TableColumnSortDirection.ascending) {\n this.ariaSort = 'ascending';\n } else {\n this.ariaSort = 'descending';\n }\n }\n}\n\nconst nimbleTableHeader = TableHeader.compose({\n baseName: 'table-header',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());\nexport const tableHeaderTag = 'nimble-table-header';\n"]}

package/dist/esm/table/components/header/styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../../utilities/style/display';
-import { borderHoverColor, borderWidth, controlHeight, iconColor, mediumPadding, tableHeaderFont, tableHeaderFontColor } from '../../../theme-provider/design-tokens';
+import { borderHoverColor, borderWidth, controlHeight, iconColor, mediumPadding, smallPadding, tableHeaderFont, tableHeaderFontColor } from '../../../theme-provider/design-tokens';
 import { focusVisible } from '../../../utilities/style/focus';
 export const styles = css `
     ${display('flex')}
@@ -8,15 +8,22 @@ export const styles = css `
     :host {
         height: ${controlHeight};
         align-items: center;
-        padding: 0px ${mediumPadding};
+        padding-left: ${mediumPadding};
+        padding-right: ${smallPadding};
         font: ${tableHeaderFont};
         color: ${tableHeaderFontColor};
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
-        gap: ${mediumPadding};
+        gap: ${smallPadding};
         cursor: default;
     }
+    :host(.right-align) {
+        flex-direction: row-reverse;
+        padding-left: ${smallPadding};
+        padding-right: ${mediumPadding};
+    }
     :host(${focusVisible}) {
         outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
         outline-offset: calc(-2 * ${borderWidth});

package/dist/esm/table/components/header/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;~~uBAER~~,aAAa;~~gBACpB~~,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa~~;;;;YAIhB~~,YAAY;4BACI,WAAW,WAAW,gBAAgB;oCAC9B,WAAW;;;;;;;CAO9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n borderHoverColor,\n borderWidth,\n controlHeight,\n iconColor,\n mediumPadding,\n tableHeaderFont,\n tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n height: ${controlHeight};\n align-items: center;\n padding: ~~0px~~ ${mediumPadding};\n font: ${tableHeaderFont};\n color: ${tableHeaderFontColor};\n ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n text-transform: uppercase;\n gap: ${~~mediumPadding~~};\n cursor: default;\n }\n\n :host(${focusVisible}) {\n outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n outline-offset: calc(-2 * ${borderWidth});\n }\n\n .sort-indicator,\n .grouped-indicator {\n flex: 0 0 auto;\n }\n`;\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,SAAS,EACT,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;wBAEP,aAAa;yBACZ,YAAY;gBACrB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,YAAY;;;;;;wBAMH,YAAY;yBACX,aAAa;;;YAG1B,YAAY;4BACI,WAAW,WAAW,gBAAgB;oCAC9B,WAAW;;;;;;;CAO9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n borderHoverColor,\n borderWidth,\n controlHeight,\n iconColor,\n mediumPadding,\n smallPadding,\n tableHeaderFont,\n tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n height: ${controlHeight};\n align-items: center;\n padding-left: ${mediumPadding};\n padding-right: ${smallPadding};\n font: ${tableHeaderFont};\n color: ${tableHeaderFontColor};\n ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n text-transform: uppercase;\n gap: ${smallPadding};\n cursor: default;\n }\n\n :host(.right-align) {\n flex-direction: row-reverse;\n padding-left: ${smallPadding};\n padding-right: ${mediumPadding};\n }\n\n :host(${focusVisible}) {\n outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n outline-offset: calc(-2 * ${borderWidth});\n }\n\n .sort-indicator,\n .grouped-indicator {\n flex: 0 0 auto;\n }\n`;\n"]}

package/dist/esm/table/components/header/template.js CHANGED Viewed

@@ -2,11 +2,12 @@ import { html, when } from '@microsoft/fast-element';
 import { iconArrowDownTag } from '../../../icons/arrow-down';
 import { iconArrowUpTag } from '../../../icons/arrow-up';
 import { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';
-import { TableColumnSortDirection } from '../../types';
+import { TableColumnAlignment, TableColumnSortDirection } from '../../types';
 import { tableColumnHeaderGroupedLabel, tableColumnHeaderSortedAscendingLabel, tableColumnHeaderSortedDescendingLabel } from '../../../label-provider/table/label-tokens';
 // prettier-ignore
 export const template = html `
     <template role="columnheader"
+        class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
         ${'' /* Prevent header double clicks from selecting text */}
         @mousedown="${(_x, c) => !(c.event.detail > 1)}"

package/dist/esm/table/components/header/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/header/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;~~AACvD~~,OAAO,EACH,6BAA6B,EAC7B,qCAAqC,EACrC,sCAAsC,EACzC,MAAM,4CAA4C,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;;~~qBAEpB~~,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,EAAE,CAAC,sDAAsD;sBAC7C,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,KAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;;;;UAI5D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAa;cAC5C,EAAE,CAAC,iGAAiG;cACpG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE,IAAI,CAAa;mBAC9E,cAAc;;6BAEJ,CAAC,CAAC,EAAE,CAAC,qCAAqC,CAAC,WAAW,CAAC,CAAC,CAAC;;qBAEjE,cAAc;aACtB,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,UAAU,EAAE,IAAI,CAAa;mBAC/E,gBAAgB;;6BAEN,CAAC,CAAC,EAAE,CAAC,sCAAsC,CAAC,WAAW,CAAC,CAAC,CAAC;;qBAElE,gBAAgB;aACxB,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAa;mBACnC,2BAA2B;;6BAEjB,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;;kCAE5C,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;qBAC9D,2BAA2B;aACnC,CAAC;SACL,CAAC;;CAET,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { TableHeader } from '.';\nimport { iconArrowDownTag } from '../../../icons/arrow-down';\nimport { iconArrowUpTag } from '../../../icons/arrow-up';\nimport { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';\nimport { TableColumnSortDirection } from '../../types';\nimport {\n tableColumnHeaderGroupedLabel,\n tableColumnHeaderSortedAscendingLabel,\n tableColumnHeaderSortedDescendingLabel\n} from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableHeader>`\n <template role=\"columnheader\"\n aria-sort=\"${x => x.ariaSort}\"\n ${'' /* Prevent header double clicks from selecting text /}\n @mousedown=\"${(_x, c) => !((c.event as MouseEvent).detail > 1)}\"\n >\n <slot></slot>\n\n ${when(x => !x.indicatorsHidden, html<TableHeader>`\n ${'' / Set aria-hidden=\"true\" on sort indicators because aria-sort is set on the 1st sorted column */}\n ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html<TableHeader>`\n <${iconArrowUpTag}\n class=\"sort-indicator\"\n title=\"${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}\"\n aria-hidden=\"true\"\n ></${iconArrowUpTag}>\n `)}\n ${when(x => x.sortDirection === TableColumnSortDirection.descending, html<TableHeader>`\n <${iconArrowDownTag}\n class=\"sort-indicator\"\n title=\"${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}\"\n aria-hidden=\"true\"\n ></${iconArrowDownTag}>\n `)}\n ${when(x => x.isGrouped, html<TableHeader>`\n <${iconTwoSquaresInBracketsTag}\n class=\"grouped-indicator\"\n title=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n role=\"img\"\n aria-label=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n ></${iconTwoSquaresInBracketsTag}>\n `)}\n `)}\n </template>\n`;\n"]}
1	+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/header/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EACH,6BAA6B,EAC7B,qCAAqC,EACrC,sCAAsC,EACzC,MAAM,4CAA4C,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;;iBAExB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;qBAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,EAAE,CAAC,sDAAsD;sBAC7C,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,KAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;;;;UAI5D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAa;cAC5C,EAAE,CAAC,iGAAiG;cACpG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE,IAAI,CAAa;mBAC9E,cAAc;;6BAEJ,CAAC,CAAC,EAAE,CAAC,qCAAqC,CAAC,WAAW,CAAC,CAAC,CAAC;;qBAEjE,cAAc;aACtB,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,UAAU,EAAE,IAAI,CAAa;mBAC/E,gBAAgB;;6BAEN,CAAC,CAAC,EAAE,CAAC,sCAAsC,CAAC,WAAW,CAAC,CAAC,CAAC;;qBAElE,gBAAgB;aACxB,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAa;mBACnC,2BAA2B;;6BAEjB,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;;kCAE5C,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;qBAC9D,2BAA2B;aACnC,CAAC;SACL,CAAC;;CAET,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { TableHeader } from '.';\nimport { iconArrowDownTag } from '../../../icons/arrow-down';\nimport { iconArrowUpTag } from '../../../icons/arrow-up';\nimport { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';\nimport { TableColumnAlignment, TableColumnSortDirection } from '../../types';\nimport {\n tableColumnHeaderGroupedLabel,\n tableColumnHeaderSortedAscendingLabel,\n tableColumnHeaderSortedDescendingLabel\n} from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableHeader>`\n <template role=\"columnheader\"\n class=\"${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}\"\n aria-sort=\"${x => x.ariaSort}\"\n ${'' /* Prevent header double clicks from selecting text /}\n @mousedown=\"${(_x, c) => !((c.event as MouseEvent).detail > 1)}\"\n >\n <slot></slot>\n\n ${when(x => !x.indicatorsHidden, html<TableHeader>`\n ${'' / Set aria-hidden=\"true\" on sort indicators because aria-sort is set on the 1st sorted column */}\n ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html<TableHeader>`\n <${iconArrowUpTag}\n class=\"sort-indicator\"\n title=\"${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}\"\n aria-hidden=\"true\"\n ></${iconArrowUpTag}>\n `)}\n ${when(x => x.sortDirection === TableColumnSortDirection.descending, html<TableHeader>`\n <${iconArrowDownTag}\n class=\"sort-indicator\"\n title=\"${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}\"\n aria-hidden=\"true\"\n ></${iconArrowDownTag}>\n `)}\n ${when(x => x.isGrouped, html<TableHeader>`\n <${iconTwoSquaresInBracketsTag}\n class=\"grouped-indicator\"\n title=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n role=\"img\"\n aria-label=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n ></${iconTwoSquaresInBracketsTag}>\n `)}\n `)}\n </template>\n`;\n"]}

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

@@ -1,7 +1,7 @@
 import { Notifier } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { TableCellState } from '../../../table-column/base/types';
-import type { TableRecord, TableRowFocusableElements } from '../../types';
+import type { CellViewSlotRequestEventDetail, TableRecord, TableRowFocusableElements } from '../../types';
 import type { TableColumn } from '../../../table-column/base';
 import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
 import type { Checkbox } from '../../../checkbox';
@@ -84,6 +84,7 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     /** @internal */
     getFocusableElements(): TableRowFocusableElements;
     onRowExpandToggle(event?: Event): void;
+    onCellViewSlotsRequest(column: TableColumn, event: CustomEvent<CellViewSlotRequestEventDetail>): void;
     private readonly removeAnimatingClass;
     private emitActionMenuToggleEvent;
     private columnsChanged;

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

@@ -144,6 +144,20 @@ export class TableRow extends FoundationElement {
         this.animationClass = 'animating';
         this.expandIcon?.addEventListener('transitionend', this.removeAnimatingClass);
     }
+    onCellViewSlotsRequest(column, event) {
+        event.stopImmediatePropagation();
+        if (typeof this.recordId !== 'string') {
+            // The recordId is expected to be defined on any row that can be interacted with, but if
+            // it isn't defined, nothing can be done with the request to slot content into the row.
+            return;
+        }
+        const eventDetails = {
+            recordId: this.recordId,
+            columnInternalId: column.columnInternals.uniqueId,
+            slots: event.detail.slots
+        };
+        this.$emit('row-slots-request', eventDetails);
+    }
     emitActionMenuToggleEvent(eventType, menuButtonEventDetail, column) {
         const detail = {
             newState: menuButtonEventDetail.newState,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Notifier,\n Observable,\n attr,\n observable,\n volatile\n} from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableCellState } from '../../../table-column/base/types';\nimport type {\n TableActionMenuToggleEventDetail,\n TableFieldName,\n TableRecord,\n TableRowExpansionToggleEventDetail,\n TableRowFocusableElements,\n TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { TableColumn } from '../../../table-column/base';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport { TableCell, tableCellTag } from '../cell';\nimport {\n ColumnInternals,\n isColumnInternalsProperty\n} from '../../../table-column/base/models/column-internals';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-row': TableRow;\n }\n}\n\n/** Represents a single row (element) in the Table's data /\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TableDataRecord extends TableRecord {}\n\n/\n A styled row that is used within the nimble-table.\n * @internal\n /\nexport class TableRow<\n TDataRecord extends TableDataRecord = TableDataRecord\n> extends FoundationElement {\n @attr({ attribute: 'record-id' })\n public recordId?: string;\n\n @attr({ mode: 'boolean' })\n public selectable = false;\n\n @attr({ mode: 'boolean' })\n public selected = false;\n\n @attr({ attribute: 'hide-selection', mode: 'boolean' })\n public hideSelection = false;\n\n @attr({ mode: 'boolean' })\n public expanded = false;\n\n @observable\n public dataRecord?: TDataRecord;\n\n /\n @internal\n * /\n public columnNotifiers: Notifier[] = [];\n\n @observable\n public columns: TableColumn[] = [];\n\n @observable\n public currentActionMenuColumn?: TableColumn;\n\n @observable\n public nestingLevel = 0;\n\n /\n Row index in the flattened set of all regular and group header rows.\n * Represents the index in table.tableData (TableRowState[]).\n /\n @observable\n public resolvedRowIndex?: number;\n\n @attr({ attribute: 'is-parent-row', mode: 'boolean' })\n public isParentRow = false;\n\n @attr({ attribute: 'menu-open', mode: 'boolean' })\n public menuOpen = false;\n\n @attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })\n public rowOperationGridCellHidden = false;\n\n @attr({ mode: 'boolean' })\n public loading = false;\n\n /\n @internal\n * An array that parallels the `columns` array and contains the indent\n * level of each column's cell.\n * /\n @observable\n public cellIndentLevels: number[] = [];\n\n /\n @internal\n * An array that parallels the `columns` array and contains the cell state\n * of each column's cell.\n * /\n @observable\n public cellStates: (TableCellState \| undefined)[] = [];\n\n /* @internal /\n @observable\n public readonly selectionCheckbox?: Checkbox;\n\n /* @internal /\n public readonly cellContainer!: HTMLSpanElement;\n\n /\n @internal\n /\n public readonly expandIcon?: HTMLElement;\n\n /\n @internal\n /\n @observable\n public animationClass = '';\n\n @volatile\n public get isTopLevelParentRow(): boolean {\n return this.isParentRow && this.nestingLevel === 0;\n }\n\n @volatile\n public get isNestedParent(): boolean {\n return this.isParentRow && this.nestingLevel > 0;\n }\n\n /* @internal /\n @volatile\n public get showSelectionCheckbox(): boolean {\n return this.selectable && !this.hideSelection;\n }\n\n // Programmatically updating the selection state of a checkbox fires the 'change' event.\n // Therefore, selection change events that occur due to programmatically updating\n // the selection checkbox 'checked' value should be ingored.\n // https://github.com/microsoft/fast/issues/5750\n private ignoreSelectionChangeEvents = false;\n\n @volatile\n public override get ariaSelected(): 'true' \| 'false' \| null {\n if (this.selectable) {\n return this.selected ? 'true' : 'false';\n }\n\n return null;\n }\n\n /* @internal /\n public onSelectionCheckboxChange(event: CustomEvent): void {\n if (this.ignoreSelectionChangeEvents) {\n return;\n }\n\n const checkbox = event.target as Checkbox;\n const checked = checkbox.checked;\n this.onSelectionChange(!checked, checked);\n }\n\n /* @internal /\n public onSelectionChange(oldState: boolean, newState: boolean): void {\n this.selected = newState;\n const detail: TableRowSelectionToggleEventDetail = {\n oldState,\n newState\n };\n this.$emit('row-selection-toggle', detail);\n }\n\n /* @internal /\n public onCellActionMenuBeforeToggle(\n event: CustomEvent<MenuButtonToggleEventDetail>,\n column: TableColumn\n ): void {\n this.currentActionMenuColumn = column;\n this.emitActionMenuToggleEvent(\n 'row-action-menu-beforetoggle',\n event.detail,\n column\n );\n }\n\n /* @internal /\n public onCellActionMenuToggle(\n event: CustomEvent<MenuButtonToggleEventDetail>,\n column: TableColumn\n ): void {\n this.menuOpen = event.detail.newState;\n this.emitActionMenuToggleEvent(\n 'row-action-menu-toggle',\n event.detail,\n column\n );\n }\n\n public closeOpenActionMenus(): void {\n if (this.menuOpen) {\n const cellWithMenuOpen = Array.from(\n this.cellContainer.children\n ).find(c => c instanceof TableCell && c.menuOpen) as TableCell;\n if (cellWithMenuOpen?.actionMenuButton?.open) {\n cellWithMenuOpen.actionMenuButton.toggleButton!.control.click();\n }\n }\n }\n\n /* @internal /\n public handleChange(source: unknown, args: unknown): void {\n if (\n source instanceof ColumnInternals\n && typeof args === 'string'\n && (isColumnInternalsProperty(args, 'columnConfig')\n \|\| isColumnInternalsProperty(args, 'dataRecordFieldNames'))\n ) {\n this.updateCellStates();\n }\n }\n\n /* @internal */\n public getFocusableElements(): TableRowFocusableElements {\n return {\n selectionCheckbox: this.showSelectionCheckbox\n ? this.selectionCheckbox\n : undefined,\n cells: Array.from(\n this.cellContainer.querySelectorAll(tableCellTag)\n ).map(cell => ({\n cell,\n actionMenuButton: cell.hasActionMenu\n ? cell.actionMenuButton\n : undefined\n }))\n };\n }\n\n public onRowExpandToggle(event?: Event): void {\n const expandEventDetail: TableRowExpansionToggleEventDetail = {\n oldState: this.expanded,\n newState: !this.expanded,\n recordId: this.recordId!\n };\n this.$emit('row-expand-toggle', expandEventDetail);\n event?.stopImmediatePropagation();\n // To avoid a visual glitch with improper expand/collapse icons performing an\n // animation (due to visual re-use apparently), we apply a class to the\n // contained expand-collapse button temporarily. We use the 'transitionend' event\n // to remove the temporary class and register a function reference as the handler\n // to avoid issues that may result from the 'transitionend' event not firing, as it\n // will never result in multiple event listeners being registered.\n this.animationClass = 'animating';\n this.expandIcon?.addEventListener(\n 'transitionend',\n this.removeAnimatingClass\n );\n }\n\n private readonly removeAnimatingClass = (): void => {\n this.animationClass = '';\n this.expandIcon?.removeEventListener(\n 'transitionend',\n this.removeAnimatingClass\n );\n };\n\n private emitActionMenuToggleEvent(\n eventType: string,\n menuButtonEventDetail: MenuButtonToggleEventDetail,\n column: TableColumn\n ): void {\n const detail: TableActionMenuToggleEventDetail = {\n newState: menuButtonEventDetail.newState,\n oldState: menuButtonEventDetail.oldState,\n recordIds: [this.recordId!],\n columnId: column.columnId\n };\n this.$emit(eventType, detail);\n }\n\n private columnsChanged(): void {\n this.updateCellIndentLevels();\n this.updateCellStates();\n\n this.observeColumns();\n }\n\n private dataRecordChanged(): void {\n this.updateCellStates();\n }\n\n private nestingLevelChanged(): void {\n this.updateCellIndentLevels();\n }\n\n private updateCellIndentLevels(): void {\n this.cellIndentLevels = this.columns.map((_, i) => {\n return i === 0 ? this.nestingLevel : 0;\n });\n }\n\n private removeColumnObservers(): void {\n this.columnNotifiers.forEach(notifier => {\n notifier.unsubscribe(this);\n });\n this.columnNotifiers = [];\n }\n\n private observeColumns(): void {\n this.removeColumnObservers();\n\n this.columnNotifiers = this.columns.map(column => {\n const notifier = Observable.getNotifier(column.columnInternals);\n notifier.subscribe(this);\n return notifier;\n });\n }\n\n private updateCellStates(): void {\n this.cellStates = this.columns.map(column => {\n const fieldNames = column.columnInternals.dataRecordFieldNames;\n let cellState: TableCellState \| undefined;\n if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {\n const cellDataValues = fieldNames.map(\n field => this.dataRecord![field]\n );\n const cellRecord = Object.fromEntries(\n column.columnInternals.cellRecordFieldNames.map((k, j) => [\n k,\n cellDataValues[j]\n ])\n );\n const columnConfig = column.columnInternals.columnConfig;\n cellState = {\n cellRecord,\n columnConfig\n };\n }\n return cellState;\n });\n }\n\n private hasValidFieldNames(\n keys: readonly (TableFieldName \| undefined)[]\n ): keys is TableFieldName[] {\n return keys.every(key => key !== undefined);\n }\n\n private selectedChanged(): void {\n this.setSelectionCheckboxState();\n }\n\n private selectionCheckboxChanged(): void {\n this.setSelectionCheckboxState();\n }\n\n private setSelectionCheckboxState(): void {\n if (this.selectionCheckbox) {\n this.ignoreSelectionChangeEvents = true;\n this.selectionCheckbox.checked = this.selected;\n this.ignoreSelectionChangeEvents = false;\n }\n }\n}\n\nconst nimbleTableRow = TableRow.compose({\n baseName: 'table-row',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());\nexport const tableRowTag = 'nimble-table-row';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Notifier,\n Observable,\n attr,\n observable,\n volatile\n} from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableCellState } from '../../../table-column/base/types';\nimport type {\n CellViewSlotRequestEventDetail,\n RowSlotRequestEventDetail,\n TableActionMenuToggleEventDetail,\n TableFieldName,\n TableRecord,\n TableRowExpansionToggleEventDetail,\n TableRowFocusableElements,\n TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { TableColumn } from '../../../table-column/base';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport { TableCell, tableCellTag } from '../cell';\nimport {\n ColumnInternals,\n isColumnInternalsProperty\n} from '../../../table-column/base/models/column-internals';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-row': TableRow;\n }\n}\n\n/** Represents a single row (element) in the Table's data /\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TableDataRecord extends TableRecord {}\n\n/\n A styled row that is used within the nimble-table.\n * @internal\n /\nexport class TableRow<\n TDataRecord extends TableDataRecord = TableDataRecord\n> extends FoundationElement {\n @attr({ attribute: 'record-id' })\n public recordId?: string;\n\n @attr({ mode: 'boolean' })\n public selectable = false;\n\n @attr({ mode: 'boolean' })\n public selected = false;\n\n @attr({ attribute: 'hide-selection', mode: 'boolean' })\n public hideSelection = false;\n\n @attr({ mode: 'boolean' })\n public expanded = false;\n\n @observable\n public dataRecord?: TDataRecord;\n\n /\n @internal\n * /\n public columnNotifiers: Notifier[] = [];\n\n @observable\n public columns: TableColumn[] = [];\n\n @observable\n public currentActionMenuColumn?: TableColumn;\n\n @observable\n public nestingLevel = 0;\n\n /\n Row index in the flattened set of all regular and group header rows.\n * Represents the index in table.tableData (TableRowState[]).\n /\n @observable\n public resolvedRowIndex?: number;\n\n @attr({ attribute: 'is-parent-row', mode: 'boolean' })\n public isParentRow = false;\n\n @attr({ attribute: 'menu-open', mode: 'boolean' })\n public menuOpen = false;\n\n @attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })\n public rowOperationGridCellHidden = false;\n\n @attr({ mode: 'boolean' })\n public loading = false;\n\n /\n @internal\n * An array that parallels the `columns` array and contains the indent\n * level of each column's cell.\n * /\n @observable\n public cellIndentLevels: number[] = [];\n\n /\n @internal\n * An array that parallels the `columns` array and contains the cell state\n * of each column's cell.\n * /\n @observable\n public cellStates: (TableCellState \| undefined)[] = [];\n\n /* @internal /\n @observable\n public readonly selectionCheckbox?: Checkbox;\n\n /* @internal /\n public readonly cellContainer!: HTMLSpanElement;\n\n /\n @internal\n /\n public readonly expandIcon?: HTMLElement;\n\n /\n @internal\n /\n @observable\n public animationClass = '';\n\n @volatile\n public get isTopLevelParentRow(): boolean {\n return this.isParentRow && this.nestingLevel === 0;\n }\n\n @volatile\n public get isNestedParent(): boolean {\n return this.isParentRow && this.nestingLevel > 0;\n }\n\n /* @internal /\n @volatile\n public get showSelectionCheckbox(): boolean {\n return this.selectable && !this.hideSelection;\n }\n\n // Programmatically updating the selection state of a checkbox fires the 'change' event.\n // Therefore, selection change events that occur due to programmatically updating\n // the selection checkbox 'checked' value should be ingored.\n // https://github.com/microsoft/fast/issues/5750\n private ignoreSelectionChangeEvents = false;\n\n @volatile\n public override get ariaSelected(): 'true' \| 'false' \| null {\n if (this.selectable) {\n return this.selected ? 'true' : 'false';\n }\n\n return null;\n }\n\n /* @internal /\n public onSelectionCheckboxChange(event: CustomEvent): void {\n if (this.ignoreSelectionChangeEvents) {\n return;\n }\n\n const checkbox = event.target as Checkbox;\n const checked = checkbox.checked;\n this.onSelectionChange(!checked, checked);\n }\n\n /* @internal /\n public onSelectionChange(oldState: boolean, newState: boolean): void {\n this.selected = newState;\n const detail: TableRowSelectionToggleEventDetail = {\n oldState,\n newState\n };\n this.$emit('row-selection-toggle', detail);\n }\n\n /* @internal /\n public onCellActionMenuBeforeToggle(\n event: CustomEvent<MenuButtonToggleEventDetail>,\n column: TableColumn\n ): void {\n this.currentActionMenuColumn = column;\n this.emitActionMenuToggleEvent(\n 'row-action-menu-beforetoggle',\n event.detail,\n column\n );\n }\n\n /* @internal /\n public onCellActionMenuToggle(\n event: CustomEvent<MenuButtonToggleEventDetail>,\n column: TableColumn\n ): void {\n this.menuOpen = event.detail.newState;\n this.emitActionMenuToggleEvent(\n 'row-action-menu-toggle',\n event.detail,\n column\n );\n }\n\n public closeOpenActionMenus(): void {\n if (this.menuOpen) {\n const cellWithMenuOpen = Array.from(\n this.cellContainer.children\n ).find(c => c instanceof TableCell && c.menuOpen) as TableCell;\n if (cellWithMenuOpen?.actionMenuButton?.open) {\n cellWithMenuOpen.actionMenuButton.toggleButton!.control.click();\n }\n }\n }\n\n /* @internal /\n public handleChange(source: unknown, args: unknown): void {\n if (\n source instanceof ColumnInternals\n && typeof args === 'string'\n && (isColumnInternalsProperty(args, 'columnConfig')\n \|\| isColumnInternalsProperty(args, 'dataRecordFieldNames'))\n ) {\n this.updateCellStates();\n }\n }\n\n /* @internal */\n public getFocusableElements(): TableRowFocusableElements {\n return {\n selectionCheckbox: this.showSelectionCheckbox\n ? this.selectionCheckbox\n : undefined,\n cells: Array.from(\n this.cellContainer.querySelectorAll(tableCellTag)\n ).map(cell => ({\n cell,\n actionMenuButton: cell.hasActionMenu\n ? cell.actionMenuButton\n : undefined\n }))\n };\n }\n\n public onRowExpandToggle(event?: Event): void {\n const expandEventDetail: TableRowExpansionToggleEventDetail = {\n oldState: this.expanded,\n newState: !this.expanded,\n recordId: this.recordId!\n };\n this.$emit('row-expand-toggle', expandEventDetail);\n event?.stopImmediatePropagation();\n // To avoid a visual glitch with improper expand/collapse icons performing an\n // animation (due to visual re-use apparently), we apply a class to the\n // contained expand-collapse button temporarily. We use the 'transitionend' event\n // to remove the temporary class and register a function reference as the handler\n // to avoid issues that may result from the 'transitionend' event not firing, as it\n // will never result in multiple event listeners being registered.\n this.animationClass = 'animating';\n this.expandIcon?.addEventListener(\n 'transitionend',\n this.removeAnimatingClass\n );\n }\n\n public onCellViewSlotsRequest(\n column: TableColumn,\n event: CustomEvent<CellViewSlotRequestEventDetail>\n ): void {\n event.stopImmediatePropagation();\n if (typeof this.recordId !== 'string') {\n // The recordId is expected to be defined on any row that can be interacted with, but if\n // it isn't defined, nothing can be done with the request to slot content into the row.\n return;\n }\n\n const eventDetails: RowSlotRequestEventDetail = {\n recordId: this.recordId,\n columnInternalId: column.columnInternals.uniqueId,\n slots: event.detail.slots\n };\n this.$emit('row-slots-request', eventDetails);\n }\n\n private readonly removeAnimatingClass = (): void => {\n this.animationClass = '';\n this.expandIcon?.removeEventListener(\n 'transitionend',\n this.removeAnimatingClass\n );\n };\n\n private emitActionMenuToggleEvent(\n eventType: string,\n menuButtonEventDetail: MenuButtonToggleEventDetail,\n column: TableColumn\n ): void {\n const detail: TableActionMenuToggleEventDetail = {\n newState: menuButtonEventDetail.newState,\n oldState: menuButtonEventDetail.oldState,\n recordIds: [this.recordId!],\n columnId: column.columnId\n };\n this.$emit(eventType, detail);\n }\n\n private columnsChanged(): void {\n this.updateCellIndentLevels();\n this.updateCellStates();\n\n this.observeColumns();\n }\n\n private dataRecordChanged(): void {\n this.updateCellStates();\n }\n\n private nestingLevelChanged(): void {\n this.updateCellIndentLevels();\n }\n\n private updateCellIndentLevels(): void {\n this.cellIndentLevels = this.columns.map((_, i) => {\n return i === 0 ? this.nestingLevel : 0;\n });\n }\n\n private removeColumnObservers(): void {\n this.columnNotifiers.forEach(notifier => {\n notifier.unsubscribe(this);\n });\n this.columnNotifiers = [];\n }\n\n private observeColumns(): void {\n this.removeColumnObservers();\n\n this.columnNotifiers = this.columns.map(column => {\n const notifier = Observable.getNotifier(column.columnInternals);\n notifier.subscribe(this);\n return notifier;\n });\n }\n\n private updateCellStates(): void {\n this.cellStates = this.columns.map(column => {\n const fieldNames = column.columnInternals.dataRecordFieldNames;\n let cellState: TableCellState \| undefined;\n if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {\n const cellDataValues = fieldNames.map(\n field => this.dataRecord![field]\n );\n const cellRecord = Object.fromEntries(\n column.columnInternals.cellRecordFieldNames.map((k, j) => [\n k,\n cellDataValues[j]\n ])\n );\n const columnConfig = column.columnInternals.columnConfig;\n cellState = {\n cellRecord,\n columnConfig\n };\n }\n return cellState;\n });\n }\n\n private hasValidFieldNames(\n keys: readonly (TableFieldName \| undefined)[]\n ): keys is TableFieldName[] {\n return keys.every(key => key !== undefined);\n }\n\n private selectedChanged(): void {\n this.setSelectionCheckboxState();\n }\n\n private selectionCheckboxChanged(): void {\n this.setSelectionCheckboxState();\n }\n\n private setSelectionCheckboxState(): void {\n if (this.selectionCheckbox) {\n this.ignoreSelectionChangeEvents = true;\n this.selectionCheckbox.checked = this.selected;\n this.ignoreSelectionChangeEvents = false;\n }\n }\n}\n\nconst nimbleTableRow = TableRow.compose({\n baseName: 'table-row',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());\nexport const tableRowTag = 'nimble-table-row';\n"]}

package/dist/esm/table/components/row/template.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { buttonTag } from '../../../button';
 import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';
 import { spinnerTag } from '../../../spinner';
 import { SpinnerAppearance } from '../../../spinner/types';
+import { uniquifySlotNameForColumn } from '../../models/utilities';
 // prettier-ignore
 export const template = html `
     <template
@@ -75,6 +76,7 @@ export const template = html `
                         action-menu-label="${x => x.actionMenuLabel}"
                         @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
                         @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
+                        @cell-view-slots-request="${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event)}"
                         :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
                     >
@@ -84,6 +86,13 @@ export const template = html `
                                 slot="cellActionMenu"
                             ></slot>
                         `)}
+                        ${repeat(x => x.columnInternals.slotNames, html `
+                            <slot
+                                name="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+                                slot="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+                            ></slot>
+                        `)}
                     </${tableCellTag}>
                 `)}
             `, { recycle: false, positioning: true })}