@ni/ok-components 1.3.6 → 1.4.0

package/dist/custom-elements.md

@@ -1,10 +1,16 @@
-## class: `ExButton`
+## class: `TsIconDynamic`
 
 ### Superclass
 
-| Name                | Module | Package             |
-| ------------------- | ------ | ------------------- |
-| `FoundationElement` |        | @ni/fast-foundation |
+| Name   | Module | Package                                  |
+| ------ | ------ | ---------------------------------------- |
+| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+
+### Static Methods
+
+| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
+| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
+| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
 
 <hr/>
 
@@ -308,18 +314,85 @@
 
 <hr/>
 
-## class: `TsIconDynamic`
+## class: `ExButton`
 
 ### Superclass
 
-| Name   | Module | Package                                  |
-| ------ | ------ | ---------------------------------------- |
-| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
 
-### Static Methods
+<hr/>
 
-| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
-| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
-| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+## class: `TsTableColumnBreakpoint`
+
+### Superclass
+
+| Name          | Module | Package                                          |
+| ------------- | ------ | ------------------------------------------------ |
+| `TableColumn` |        | @ni/nimble-components/dist/esm/table-column/base |
+
+### Fields
+
+| Name               | Privacy | Type                     | Default                 | Description | Inherited From |
+| ------------------ | ------- | ------------------------ | ----------------------- | ----------- | -------------- |
+| `fieldName`        | public  | `string \| undefined`    |                         |             |                |
+| `menuSlot`         | public  | `string \| undefined`    |                         |             |                |
+| `position`         | public  | `BreakpointMenuPosition` |                         |             |                |
+| `resizingDisabled` |         | `boolean`                | `true`                  |             |                |
+| `pixelWidth`       |         |                          | `singleIconColumnWidth` |             |                |
+| `minPixelWidth`    |         |                          | `singleIconColumnWidth` |             |                |
+
+### Methods
+
+| Name                           | Privacy   | Description                                                       | Parameters                                                                         | Return                   | Inherited From |
+| ------------------------------ | --------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------ | -------------- |
+| `requestBreakpointStateChange` | public    | Programmatically requests a breakpoint state change for a record. | `recordId: string, currentState: BreakpointState, requestedState: BreakpointState` | `void`                   |                |
+| `getColumnInternalsOptions`    | protected |                                                                   |                                                                                    | `ColumnInternalsOptions` |                |
+| `fieldNameChanged`             | protected |                                                                   |                                                                                    | `void`                   |                |
+| `menuSlotChanged`              | protected |                                                                   |                                                                                    | `void`                   |                |
+| `positionChanged`              | protected |                                                                   |                                                                                    | `void`                   |                |
+
+### Attributes
+
+| Name         | Field     | Inherited From |
+| ------------ | --------- | -------------- |
+| `field-name` | fieldName |                |
+| `menu-slot`  | menuSlot  |                |
+| `position`   | position  |                |
+
+<hr/>
+
+## class: `TsTableColumnBreakpointCellView`
+
+### Superclass
+
+| Name            | Module | Package                                                    |
+| --------------- | ------ | ---------------------------------------------------------- |
+| `TableCellView` |        | @ni/nimble-components/dist/esm/table-column/base/cell-view |
+
+### Fields
+
+| Name               | Privacy | Type            | Default | Description                                | Inherited From |
+| ------------------ | ------- | --------------- | ------- | ------------------------------------------ | -------------- |
+| `open`             | public  | `boolean`       | `false` | Specifies whether or not the menu is open. |                |
+| `tabbableChildren` | public  | `HTMLElement[]` |         |                                            |                |
+
+### Methods
+
+| Name                        | Privacy | Description | Parameters                                                              | Return    | Inherited From |
+| --------------------------- | ------- | ----------- | ----------------------------------------------------------------------- | --------- | -------------- |
+| `regionLoadedHandler`       | public  |             |                                                                         | `void`    |                |
+| `regionChanged`             | public  |             | `prev: AnchoredRegion \| undefined, _next: AnchoredRegion \| undefined` | `void`    |                |
+| `buttonChanged`             | public  |             |                                                                         | `void`    |                |
+| `focusoutHandler`           | public  |             | `e: FocusEvent`                                                         | `boolean` |                |
+| `contextMenuKeyDownHandler` | public  |             | `e: KeyboardEvent`                                                      | `boolean` |                |
+| `onContextMenuChange`       | public  |             | `event: Event`                                                          | `void`    |                |
+
+### Attributes
+
+| Name   | Field | Inherited From |
+| ------ | ----- | -------------- |
+| `open` | open  |                |
 
 <hr/>

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

@@ -1 +1,2 @@
 import './icon-dynamic';
+import './table-column/breakpoint';

package/dist/esm/ts/all-ts.js

@@ -1,2 +1,3 @@
 import './icon-dynamic';
+import './table-column/breakpoint';
 //# sourceMappingURL=all-ts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"all-ts.js","sourceRoot":"","sources":["../../../src/ts/all-ts.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC","sourcesContent":["import './icon-dynamic';\n"]}
+{"version":3,"file":"all-ts.js","sourceRoot":"","sources":["../../../src/ts/all-ts.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,2BAA2B,CAAC","sourcesContent":["import './icon-dynamic';\nimport './table-column/breakpoint';\n"]}

package/dist/esm/ts/table-column/breakpoint/cell-view/index.d.ts

@@ -0,0 +1,73 @@
+import { TableCellView } from '@ni/nimble-components/dist/esm/table-column/base/cell-view';
+import type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';
+import { type MenuButtonPosition as BreakpointMenuPosition } from '@ni/nimble-components/dist/esm/menu-button/types';
+import { BreakpointState } from '../types';
+import type { TsTableColumnBreakpointCellRecord, TsTableColumnBreakpointColumnConfig } from '..';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-ts-table-column-breakpoint-cell-view': TsTableColumnBreakpointCellView;
+    }
+}
+/**
+ * Cell view for the breakpoint column that renders a clickable breakpoint indicator.
+ */
+export declare class TsTableColumnBreakpointCellView extends TableCellView<TsTableColumnBreakpointCellRecord, TsTableColumnBreakpointColumnConfig> {
+    private static readonly menuKeyAlias;
+    private static readonly contextMenuKeyAlias;
+    /** @internal */
+    button?: HTMLButtonElement;
+    /**
+     * Specifies whether or not the menu is open.
+     */
+    open: boolean;
+    /** @internal */
+    readonly region?: AnchoredRegion;
+    /** @internal */
+    readonly slottedMenus?: HTMLElement[];
+    private focusLastItemWhenOpened;
+    /** @internal */
+    private readonly breakpointEnabledString;
+    /** @internal */
+    private readonly breakpointDisabledString;
+    /** @internal */
+    private readonly breakpointHitString;
+    /** @internal */
+    private readonly breakpointConditionalString;
+    /** @internal */
+    private readonly breakpointHitDisabledString;
+    /** @internal */
+    private readonly breakpointAddString;
+    /** @internal */
+    private readonly breakpointRemoveString;
+    /** @internal */
+    get currentState(): BreakpointState;
+    /** @internal */
+    get tooltipText(): string;
+    /** @internal */
+    get ariaLabelText(): string;
+    /** @internal */
+    get menuPosition(): BreakpointMenuPosition;
+    get tabbableChildren(): HTMLElement[];
+    /** @internal */
+    onButtonClick(event: Event): void;
+    /** @internal */
+    onContextMenu(event: Event): void;
+    /** @internal */
+    onKeyDown(event: KeyboardEvent): boolean;
+    regionLoadedHandler(): void;
+    regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
+    buttonChanged(): void;
+    focusoutHandler(e: FocusEvent): boolean;
+    contextMenuKeyDownHandler(e: KeyboardEvent): boolean;
+    onContextMenuChange(event: Event): void;
+    private getMenu;
+    private isSlotElement;
+    private focusMenu;
+    private focusLastMenuItem;
+    private emitToggle;
+    private requestContextMenu;
+    private openMenuFromColumnSlot;
+    private readonly menuChangeHandler;
+    private getRequestedStateFromEvent;
+}
+export declare const tsTableColumnBreakpointCellViewTag = "ok-ts-table-column-breakpoint-cell-view";

package/dist/esm/ts/table-column/breakpoint/cell-view/index.js

@@ -0,0 +1,305 @@
+import { __decorate } from "tslib";
+import { DesignSystem } from '@ni/fast-foundation';
+import { TableCellView } from '@ni/nimble-components/dist/esm/table-column/base/cell-view';
+import { attr, observable } from '@ni/fast-element';
+import { MenuButtonPosition } from '@ni/nimble-components/dist/esm/menu-button/types';
+import { template } from './template';
+import { styles } from './styles';
+import { BreakpointState, breakpointCellViewMenuSlotName, breakpointMenuItemStateAttributeName } from '../types';
+/**
+ * Cell view for the breakpoint column that renders a clickable breakpoint indicator.
+ */
+export class TsTableColumnBreakpointCellView extends TableCellView {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specifies whether or not the menu is open.
+         */
+        this.open = false;
+        this.focusLastItemWhenOpened = false;
+        /** @internal */
+        this.breakpointEnabledString = 'Breakpoint enabled';
+        /** @internal */
+        this.breakpointDisabledString = 'Breakpoint disabled';
+        /** @internal */
+        this.breakpointHitString = 'Breakpoint hit';
+        /** @internal */
+        this.breakpointConditionalString = 'Conditional breakpoint';
+        /** @internal */
+        this.breakpointHitDisabledString = 'Breakpoint hit (disabled)';
+        /** @internal */
+        this.breakpointAddString = 'Add breakpoint';
+        /** @internal */
+        this.breakpointRemoveString = 'Remove breakpoint';
+        this.menuChangeHandler = () => {
+            this.open = false;
+            this.button?.focus();
+        };
+    }
+    /** @internal */
+    get currentState() {
+        const value = this.cellRecord?.value;
+        if (value && Object.values(BreakpointState).includes(value)) {
+            return value;
+        }
+        return BreakpointState.off;
+    }
+    /** @internal */
+    get tooltipText() {
+        if (this.currentState === BreakpointState.off) {
+            return this.breakpointAddString;
+        }
+        return this.breakpointRemoveString;
+    }
+    /** @internal */
+    get ariaLabelText() {
+        switch (this.currentState) {
+            case BreakpointState.enabled:
+                return this.breakpointEnabledString;
+            case BreakpointState.disabled:
+                return this.breakpointDisabledString;
+            case BreakpointState.hit:
+                return this.breakpointHitString;
+            case BreakpointState.conditional:
+                return this.breakpointConditionalString;
+            case BreakpointState.hitDisabled:
+                return this.breakpointHitDisabledString;
+            default:
+                return this.breakpointAddString;
+        }
+    }
+    /** @internal */
+    get menuPosition() {
+        return this.columnConfig?.position ?? MenuButtonPosition.auto;
+    }
+    get tabbableChildren() {
+        if (this.button) {
+            return [this.button];
+        }
+        return [];
+    }
+    /** @internal */
+    onButtonClick(event) {
+        event.stopPropagation();
+        const oldState = this.currentState;
+        const newState = oldState === BreakpointState.off
+            ? BreakpointState.enabled
+            : BreakpointState.off;
+        this.emitToggle(oldState, newState);
+    }
+    /** @internal */
+    onContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.requestContextMenu();
+    }
+    /** @internal */
+    onKeyDown(event) {
+        if ((event.key === 'F10' && event.shiftKey)
+            || event.key === TsTableColumnBreakpointCellView.menuKeyAlias
+            || (event.key === TsTableColumnBreakpointCellView.contextMenuKeyAlias)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.requestContextMenu();
+            return false;
+        }
+        if (event.key === 'F9' || ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'b')) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.onButtonClick(event);
+            return false;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.focusLastItemWhenOpened = false;
+            this.requestContextMenu();
+            return false;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.focusLastItemWhenOpened = true;
+            this.requestContextMenu();
+            return false;
+        }
+        return true;
+    }
+    regionLoadedHandler() {
+        if (this.focusLastItemWhenOpened) {
+            this.focusLastItemWhenOpened = false;
+            this.focusLastMenuItem();
+        }
+        else {
+            this.focusMenu();
+        }
+    }
+    regionChanged(prev, _next) {
+        if (prev) {
+            prev.removeEventListener('change', this.menuChangeHandler, { capture: true });
+        }
+        if (this.region) {
+            this.region.anchorElement = this.button ?? this;
+            this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
+        }
+    }
+    buttonChanged() {
+        if (this.region) {
+            this.region.anchorElement = this.button ?? this;
+        }
+    }
+    focusoutHandler(e) {
+        if (!this.open) {
+            return true;
+        }
+        const focusTarget = e.relatedTarget;
+        if (!this.contains(focusTarget)
+            && !this.region?.contains(focusTarget)
+            && !this.getMenu()?.contains(focusTarget)) {
+            this.open = false;
+            return false;
+        }
+        return true;
+    }
+    contextMenuKeyDownHandler(e) {
+        switch (e.key) {
+            case 'Escape':
+                this.open = false;
+                this.button?.focus();
+                return false;
+            default:
+                return true;
+        }
+    }
+    onContextMenuChange(event) {
+        const requestedState = this.getRequestedStateFromEvent(event);
+        if (!requestedState) {
+            return;
+        }
+        const detail = {
+            recordId: this.recordId,
+            requestedState,
+            currentState: this.currentState
+        };
+        this.$emit('breakpoint-column-state-change-requested', detail);
+    }
+    getMenu() {
+        if (!this.slottedMenus || this.slottedMenus.length === 0) {
+            return undefined;
+        }
+        let currentItem = this.slottedMenus[0];
+        while (currentItem) {
+            if (currentItem.getAttribute('role') === 'menu') {
+                return currentItem;
+            }
+            if (this.isSlotElement(currentItem)) {
+                const firstNode = currentItem.assignedNodes()[0];
+                if (firstNode instanceof HTMLElement) {
+                    currentItem = firstNode;
+                }
+                else {
+                    currentItem = undefined;
+                }
+            }
+            else {
+                return undefined;
+            }
+        }
+        return undefined;
+    }
+    isSlotElement(element) {
+        return element?.nodeName === 'SLOT';
+    }
+    focusMenu() {
+        this.getMenu()?.focus();
+    }
+    focusLastMenuItem() {
+        const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');
+        if (menuItems && menuItems.length > 0) {
+            const lastMenuItem = menuItems[menuItems.length - 1];
+            lastMenuItem.focus();
+        }
+    }
+    emitToggle(oldState, newState) {
+        const detail = {
+            recordId: this.recordId,
+            newState,
+            oldState
+        };
+        this.$emit('breakpoint-column-toggle', detail);
+    }
+    requestContextMenu() {
+        this.openMenuFromColumnSlot();
+    }
+    openMenuFromColumnSlot() {
+        const configuredSlotName = this.columnConfig?.menuSlot;
+        if (!configuredSlotName) {
+            return;
+        }
+        const eventDetail = {
+            slots: [
+                {
+                    name: configuredSlotName,
+                    slot: breakpointCellViewMenuSlotName
+                }
+            ]
+        };
+        this.$emit('cell-view-slots-request', eventDetail);
+        this.open = true;
+    }
+    getRequestedStateFromEvent(event) {
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            return undefined;
+        }
+        const stateElement = target.closest(`[${breakpointMenuItemStateAttributeName}]`);
+        if (!stateElement) {
+            return undefined;
+        }
+        const requestedState = stateElement.getAttribute(breakpointMenuItemStateAttributeName);
+        if (requestedState && Object.values(BreakpointState).includes(requestedState)) {
+            return requestedState;
+        }
+        return undefined;
+    }
+}
+TsTableColumnBreakpointCellView.menuKeyAlias = 'Menu';
+TsTableColumnBreakpointCellView.contextMenuKeyAlias = 'ContextMenu';
+__decorate([
+    attr({ mode: 'boolean' })
+], TsTableColumnBreakpointCellView.prototype, "open", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "region", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "slottedMenus", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointEnabledString", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointDisabledString", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointHitString", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointConditionalString", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointHitDisabledString", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointAddString", void 0);
+__decorate([
+    observable
+], TsTableColumnBreakpointCellView.prototype, "breakpointRemoveString", void 0);
+const tsTableColumnBreakpointCellView = TsTableColumnBreakpointCellView.compose({
+    baseName: 'ts-table-column-breakpoint-cell-view',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(tsTableColumnBreakpointCellView());
+export const tsTableColumnBreakpointCellViewTag = 'ok-ts-table-column-breakpoint-cell-view';
+//# sourceMappingURL=index.js.map

package/dist/esm/ts/table-column/breakpoint/cell-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ts/table-column/breakpoint/cell-view/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem } from '@ni/fast-foundation';\nimport { TableCellView } from '@ni/nimble-components/dist/esm/table-column/base/cell-view';\nimport { attr, observable } from '@ni/fast-element';\nimport type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { MenuButtonPosition, type MenuButtonPosition as BreakpointMenuPosition } from '@ni/nimble-components/dist/esm/menu-button/types';\nimport type { CellViewSlotRequestEventDetail } from '@ni/nimble-components/dist/esm/table/types';\nimport { template } from './template';\nimport { styles } from './styles';\nimport {\n    BreakpointState,\n    breakpointCellViewMenuSlotName,\n    breakpointMenuItemStateAttributeName,\n    type BreakpointToggleEventDetail,\n    type BreakpointStateChangeRequestedEventDetail\n} from '../types';\nimport type { TsTableColumnBreakpointCellRecord, TsTableColumnBreakpointColumnConfig } from '..';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-ts-table-column-breakpoint-cell-view': TsTableColumnBreakpointCellView;\n    }\n}\n\n/**\n * Cell view for the breakpoint column that renders a clickable breakpoint indicator.\n */\nexport class TsTableColumnBreakpointCellView extends TableCellView<\n    TsTableColumnBreakpointCellRecord,\n    TsTableColumnBreakpointColumnConfig\n> {\n    private static readonly menuKeyAlias = 'Menu';\n\n    private static readonly contextMenuKeyAlias = 'ContextMenu';\n\n    /** @internal */\n    public button?: HTMLButtonElement;\n\n    /**\n     * Specifies whether or not the menu is open.\n     */\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    /** @internal */\n    @observable\n    public readonly region?: AnchoredRegion;\n\n    /** @internal */\n    @observable\n    public readonly slottedMenus?: HTMLElement[];\n\n    private focusLastItemWhenOpened = false;\n\n    /** @internal */\n    @observable\n    private readonly breakpointEnabledString = 'Breakpoint enabled';\n\n    /** @internal */\n    @observable\n    private readonly breakpointDisabledString = 'Breakpoint disabled';\n\n    /** @internal */\n    @observable\n    private readonly breakpointHitString = 'Breakpoint hit';\n\n    /** @internal */\n    @observable\n    private readonly breakpointConditionalString = 'Conditional breakpoint';\n\n    /** @internal */\n    @observable\n    private readonly breakpointHitDisabledString = 'Breakpoint hit (disabled)';\n\n    /** @internal */\n    @observable\n    private readonly breakpointAddString = 'Add breakpoint';\n\n    /** @internal */\n    @observable\n    private readonly breakpointRemoveString = 'Remove breakpoint';\n\n    /** @internal */\n    public get currentState(): BreakpointState {\n        const value = this.cellRecord?.value;\n        if (value && Object.values(BreakpointState).includes(value as BreakpointState)) {\n            return value as BreakpointState;\n        }\n        return BreakpointState.off;\n    }\n\n    /** @internal */\n    public get tooltipText(): string {\n        if (this.currentState === BreakpointState.off) {\n            return this.breakpointAddString;\n        }\n        return this.breakpointRemoveString;\n    }\n\n    /** @internal */\n    public get ariaLabelText(): string {\n        switch (this.currentState) {\n            case BreakpointState.enabled:\n                return this.breakpointEnabledString;\n            case BreakpointState.disabled:\n                return this.breakpointDisabledString;\n            case BreakpointState.hit:\n                return this.breakpointHitString;\n            case BreakpointState.conditional:\n                return this.breakpointConditionalString;\n            case BreakpointState.hitDisabled:\n                return this.breakpointHitDisabledString;\n            default:\n                return this.breakpointAddString;\n        }\n    }\n\n    /** @internal */\n    public get menuPosition(): BreakpointMenuPosition {\n        return this.columnConfig?.position ?? MenuButtonPosition.auto;\n    }\n\n    public override get tabbableChildren(): HTMLElement[] {\n        if (this.button) {\n            return [this.button];\n        }\n        return [];\n    }\n\n    /** @internal */\n    public onButtonClick(event: Event): void {\n        event.stopPropagation();\n        const oldState = this.currentState;\n        const newState = oldState === BreakpointState.off\n            ? BreakpointState.enabled\n            : BreakpointState.off;\n        this.emitToggle(oldState, newState);\n    }\n\n    /** @internal */\n    public onContextMenu(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.requestContextMenu();\n    }\n\n    /** @internal */\n    public onKeyDown(event: KeyboardEvent): boolean {\n        if ((event.key === 'F10' && event.shiftKey)\n            || event.key === TsTableColumnBreakpointCellView.menuKeyAlias\n            || (event.key === TsTableColumnBreakpointCellView.contextMenuKeyAlias)) {\n            event.preventDefault();\n            event.stopPropagation();\n            this.requestContextMenu();\n            return false;\n        }\n\n        if (event.key === 'F9' || ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'b')) {\n            event.preventDefault();\n            event.stopPropagation();\n            this.onButtonClick(event);\n            return false;\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.focusLastItemWhenOpened = false;\n            this.requestContextMenu();\n            return false;\n        }\n\n        if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.focusLastItemWhenOpened = true;\n            this.requestContextMenu();\n            return false;\n        }\n\n        return true;\n    }\n\n    public regionLoadedHandler(): void {\n        if (this.focusLastItemWhenOpened) {\n            this.focusLastItemWhenOpened = false;\n            this.focusLastMenuItem();\n        } else {\n            this.focusMenu();\n        }\n    }\n\n    public regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void {\n        if (prev) {\n            prev.removeEventListener('change', this.menuChangeHandler, { capture: true });\n        }\n\n        if (this.region) {\n            this.region.anchorElement = this.button ?? this;\n            this.region.addEventListener('change', this.menuChangeHandler, { capture: true });\n        }\n    }\n\n    public buttonChanged(): void {\n        if (this.region) {\n            this.region.anchorElement = this.button ?? this;\n        }\n    }\n\n    public focusoutHandler(e: FocusEvent): boolean {\n        if (!this.open) {\n            return true;\n        }\n\n        const focusTarget = e.relatedTarget as HTMLElement;\n        if (\n            !this.contains(focusTarget)\n            && !this.region?.contains(focusTarget)\n            && !this.getMenu()?.contains(focusTarget)\n        ) {\n            this.open = false;\n            return false;\n        }\n\n        return true;\n    }\n\n    public contextMenuKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case 'Escape':\n                this.open = false;\n                this.button?.focus();\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public onContextMenuChange(event: Event): void {\n        const requestedState = this.getRequestedStateFromEvent(event);\n        if (!requestedState) {\n            return;\n        }\n\n        const detail: BreakpointStateChangeRequestedEventDetail = {\n            recordId: this.recordId!,\n            requestedState,\n            currentState: this.currentState\n        };\n        this.$emit('breakpoint-column-state-change-requested', detail);\n    }\n\n    private getMenu(): HTMLElement | undefined {\n        if (!this.slottedMenus || this.slottedMenus.length === 0) {\n            return undefined;\n        }\n\n        let currentItem: HTMLElement | undefined = this.slottedMenus[0];\n        while (currentItem) {\n            if (currentItem.getAttribute('role') === 'menu') {\n                return currentItem;\n            }\n\n            if (this.isSlotElement(currentItem)) {\n                const firstNode = currentItem.assignedNodes()[0];\n                if (firstNode instanceof HTMLElement) {\n                    currentItem = firstNode;\n                } else {\n                    currentItem = undefined;\n                }\n            } else {\n                return undefined;\n            }\n        }\n\n        return undefined;\n    }\n\n    private isSlotElement(\n        element: HTMLElement | undefined\n    ): element is HTMLSlotElement {\n        return element?.nodeName === 'SLOT';\n    }\n\n    private focusMenu(): void {\n        this.getMenu()?.focus();\n    }\n\n    private focusLastMenuItem(): void {\n        const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');\n        if (menuItems && menuItems.length > 0) {\n            const lastMenuItem = menuItems[menuItems.length - 1] as HTMLElement;\n            lastMenuItem.focus();\n        }\n    }\n\n    private emitToggle(\n        oldState: BreakpointState,\n        newState: BreakpointState\n    ): void {\n        const detail: BreakpointToggleEventDetail = {\n            recordId: this.recordId!,\n            newState,\n            oldState\n        };\n        this.$emit('breakpoint-column-toggle', detail);\n    }\n\n    private requestContextMenu(): void {\n        this.openMenuFromColumnSlot();\n    }\n\n    private openMenuFromColumnSlot(): void {\n        const configuredSlotName = this.columnConfig?.menuSlot;\n        if (!configuredSlotName) {\n            return;\n        }\n\n        const eventDetail: CellViewSlotRequestEventDetail = {\n            slots: [\n                {\n                    name: configuredSlotName,\n                    slot: breakpointCellViewMenuSlotName\n                }\n            ]\n        };\n        this.$emit('cell-view-slots-request', eventDetail);\n        this.open = true;\n    }\n\n    private readonly menuChangeHandler = (): void => {\n        this.open = false;\n        this.button?.focus();\n    };\n\n    private getRequestedStateFromEvent(event: Event): BreakpointState | undefined {\n        const target = event.target;\n        if (!(target instanceof HTMLElement)) {\n            return undefined;\n        }\n\n        const stateElement = target.closest(`[${breakpointMenuItemStateAttributeName}]`);\n        if (!stateElement) {\n            return undefined;\n        }\n\n        const requestedState = stateElement.getAttribute(breakpointMenuItemStateAttributeName);\n        if (requestedState && Object.values(BreakpointState).includes(requestedState as BreakpointState)) {\n            return requestedState as BreakpointState;\n        }\n\n        return undefined;\n    }\n}\n\nconst tsTableColumnBreakpointCellView = TsTableColumnBreakpointCellView.compose({\n    baseName: 'ts-table-column-breakpoint-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('ok').register(tsTableColumnBreakpointCellView());\nexport const tsTableColumnBreakpointCellViewTag = 'ok-ts-table-column-breakpoint-cell-view';\n"]}

package/dist/esm/ts/table-column/breakpoint/cell-view/styles.d.ts

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

package/dist/esm/ts/table-column/breakpoint/cell-view/styles.js

@@ -0,0 +1,48 @@
+import { css } from '@ni/fast-element';
+import { display } from '@ni/nimble-components/dist/esm/utilities/style/display';
+import { borderHoverColor, borderWidth, iconSize, } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .breakpoint-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        outline-offset: -1px;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .breakpoint-button:focus-visible {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    .breakpoint-button svg {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .breakpoint-button.state-off > * {
+        opacity: 0;
+    }
+
+    .breakpoint-button.state-off:hover > *,
+    .breakpoint-button.state-off:focus-visible > * {
+        opacity: 1;
+    }
+
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/ts/table-column/breakpoint/cell-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/ts/table-column/breakpoint/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,wDAAwD,CAAC;AACjF,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,QAAQ,GACX,MAAM,6DAA6D,CAAC;AAErE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;iBAmBX,QAAQ;kBACP,QAAQ;;;;4BAIE,WAAW,WAAW,gBAAgB;;;;;iBAKjD,QAAQ;kBACP,QAAQ;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '@ni/nimble-components/dist/esm/utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    iconSize,\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n\n    .breakpoint-button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        padding: 0;\n        margin: 0;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        outline-offset: -1px;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .breakpoint-button:focus-visible {\n        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    .breakpoint-button svg {\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .breakpoint-button.state-off > * {\n        opacity: 0;\n    }\n\n    .breakpoint-button.state-off:hover > *,\n    .breakpoint-button.state-off:focus-visible > * {\n        opacity: 1;\n    }\n\n`;\n"]}

package/dist/esm/ts/table-column/breakpoint/cell-view/template.d.ts

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