@ni/ok-components 1.3.7 → 1.4.0
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.
- package/dist/all-components-bundle.js +938 -434
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3574 -3443
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +569 -33
- package/dist/custom-elements.md +85 -12
- package/dist/esm/ts/all-ts.d.ts +1 -0
- package/dist/esm/ts/all-ts.js +1 -0
- package/dist/esm/ts/all-ts.js.map +1 -1
- package/dist/esm/ts/table-column/breakpoint/cell-view/index.d.ts +73 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/index.js +305 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/index.js.map +1 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/styles.d.ts +1 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/styles.js +48 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/styles.js.map +1 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/template.d.ts +2 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/template.js +55 -0
- package/dist/esm/ts/table-column/breakpoint/cell-view/template.js.map +1 -0
- package/dist/esm/ts/table-column/breakpoint/index.d.ts +36 -0
- package/dist/esm/ts/table-column/breakpoint/index.js +101 -0
- package/dist/esm/ts/table-column/breakpoint/index.js.map +1 -0
- package/dist/esm/ts/table-column/breakpoint/template.d.ts +2 -0
- package/dist/esm/ts/table-column/breakpoint/template.js +8 -0
- package/dist/esm/ts/table-column/breakpoint/template.js.map +1 -0
- package/dist/esm/ts/table-column/breakpoint/testing/ts-table-column-breakpoint.pageobject.d.ts +23 -0
- package/dist/esm/ts/table-column/breakpoint/testing/ts-table-column-breakpoint.pageobject.js +69 -0
- package/dist/esm/ts/table-column/breakpoint/testing/ts-table-column-breakpoint.pageobject.js.map +1 -0
- package/dist/esm/ts/table-column/breakpoint/types.d.ts +32 -0
- package/dist/esm/ts/table-column/breakpoint/types.js +16 -0
- package/dist/esm/ts/table-column/breakpoint/types.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { html, ref, when, slotted } from '@ni/fast-element';
|
|
2
|
+
import { iconBreakpointConditionalTag } from '@ni/spright-components/dist/esm/icons/breakpoint-conditional';
|
|
3
|
+
import { iconBreakpointDisabledTag } from '@ni/spright-components/dist/esm/icons/breakpoint-disabled';
|
|
4
|
+
import { iconBreakpointHitTag } from '@ni/spright-components/dist/esm/icons/breakpoint-hit';
|
|
5
|
+
import { iconBreakpointHitDisabledTag } from '@ni/spright-components/dist/esm/icons/breakpoint-hit-disabled';
|
|
6
|
+
import { iconBreakpointEnabledTag } from '@ni/spright-components/dist/esm/icons/breakpoint-enabled';
|
|
7
|
+
import { iconBreakpointHoverTag } from '@ni/spright-components/dist/esm/icons/breakpoint-hover';
|
|
8
|
+
import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
|
|
9
|
+
import { MenuButtonPosition } from '@ni/nimble-components/dist/esm/menu-button/types';
|
|
10
|
+
import { BreakpointState, breakpointCellViewMenuSlotName } from '../types';
|
|
11
|
+
export const template = html `
|
|
12
|
+
<template
|
|
13
|
+
?open="${x => x.open}"
|
|
14
|
+
@focusout="${(x, c) => x.focusoutHandler(c.event)}"
|
|
15
|
+
>
|
|
16
|
+
<button
|
|
17
|
+
${ref('button')}
|
|
18
|
+
part="button"
|
|
19
|
+
class="breakpoint-button state-${x => x.currentState}"
|
|
20
|
+
@click="${(x, c) => x.onButtonClick(c.event)}"
|
|
21
|
+
@contextmenu="${(x, c) => x.onContextMenu(c.event)}"
|
|
22
|
+
@keydown="${(x, c) => x.onKeyDown(c.event)}"
|
|
23
|
+
aria-label="${x => x.ariaLabelText}"
|
|
24
|
+
title="${x => x.tooltipText}"
|
|
25
|
+
${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
|
|
26
|
+
tabindex="-1"
|
|
27
|
+
>
|
|
28
|
+
${when(x => x.currentState === BreakpointState.off, html `<${iconBreakpointHoverTag} />`)}
|
|
29
|
+
${when(x => x.currentState === BreakpointState.enabled, html `<${iconBreakpointEnabledTag} />`)}
|
|
30
|
+
${when(x => x.currentState === BreakpointState.disabled, html `<${iconBreakpointDisabledTag} />`)}
|
|
31
|
+
${when(x => x.currentState === BreakpointState.hit, html `<${iconBreakpointHitTag} />`)}
|
|
32
|
+
${when(x => x.currentState === BreakpointState.conditional, html `<${iconBreakpointConditionalTag} />`)}
|
|
33
|
+
${when(x => x.currentState === BreakpointState.hitDisabled, html `<${iconBreakpointHitDisabledTag} />`)}
|
|
34
|
+
</button>
|
|
35
|
+
${when(x => x.open, html `
|
|
36
|
+
<${anchoredRegionTag}
|
|
37
|
+
fixed-placement="true"
|
|
38
|
+
auto-update-mode="auto"
|
|
39
|
+
horizontal-inset="true"
|
|
40
|
+
horizontal-positioning-mode="dynamic"
|
|
41
|
+
vertical-positioning-mode="${x => (x.menuPosition === MenuButtonPosition.auto ? 'dynamic' : 'locktodefault')}"
|
|
42
|
+
vertical-default-position="${x => (x.menuPosition === MenuButtonPosition.above ? 'top' : 'bottom')}"
|
|
43
|
+
@loaded="${x => x.regionLoadedHandler()}"
|
|
44
|
+
@change="${(x, c) => x.onContextMenuChange(c.event)}"
|
|
45
|
+
@keydown="${(x, c) => x.contextMenuKeyDownHandler(c.event)}"
|
|
46
|
+
${ref('region')}
|
|
47
|
+
>
|
|
48
|
+
<span part="menu">
|
|
49
|
+
<slot name="${breakpointCellViewMenuSlotName}" ${slotted({ property: 'slottedMenus' })}></slot>
|
|
50
|
+
</span>
|
|
51
|
+
</${anchoredRegionTag}>
|
|
52
|
+
`)}
|
|
53
|
+
</template>
|
|
54
|
+
`;
|
|
55
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../../src/ts/table-column/breakpoint/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,4BAA4B,EAAE,MAAM,8DAA8D,CAAC;AAC5G,OAAO,EAAE,yBAAyB,EAAE,MAAM,2DAA2D,CAAC;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,EAAE,4BAA4B,EAAE,MAAM,+DAA+D,CAAC;AAC7G,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAC;AAChG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAC;AAG3E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAiC;;iBAE5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;cAGzD,GAAG,CAAC,QAAQ,CAAC;;6CAEkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;sBAC1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;4BAC5B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;wBACtC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAsB,CAAC;0BAC7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;qBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;cACzB,EAAE,CAAC,+DAA+D;;;cAGlE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,eAAe,CAAC,GAAG,EAAE,IAAI,CAAA,IAAI,sBAAsB,KAAK,CAAC;cACtF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,eAAe,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,wBAAwB,KAAK,CAAC;cAC5F,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,eAAe,CAAC,QAAQ,EAAE,IAAI,CAAA,IAAI,yBAAyB,KAAK,CAAC;cAC9F,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,eAAe,CAAC,GAAG,EAAE,IAAI,CAAA,IAAI,oBAAoB,KAAK,CAAC;cACpF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,eAAe,CAAC,WAAW,EAAE,IAAI,CAAA,IAAI,4BAA4B,KAAK,CAAC;cACpG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,eAAe,CAAC,WAAW,EAAE,IAAI,CAAA,IAAI,4BAA4B,KAAK,CAAC;;kBAEhG,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAiC;uBAC9B,iBAAiB;;;;;qDAKa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;qDAC/E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,KAAK,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;mCACvF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;mCAC5B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC;oCACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAsB,CAAC;0BACzE,GAAG,CAAC,QAAQ,CAAC;;;0CAGG,8BAA8B,KAAK,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;;wBAE1F,iBAAiB;iBACxB,CACJ;;CAEZ,CAAC","sourcesContent":["import { html, ref, when, slotted } from '@ni/fast-element';\nimport { iconBreakpointConditionalTag } from '@ni/spright-components/dist/esm/icons/breakpoint-conditional';\nimport { iconBreakpointDisabledTag } from '@ni/spright-components/dist/esm/icons/breakpoint-disabled';\nimport { iconBreakpointHitTag } from '@ni/spright-components/dist/esm/icons/breakpoint-hit';\nimport { iconBreakpointHitDisabledTag } from '@ni/spright-components/dist/esm/icons/breakpoint-hit-disabled';\nimport { iconBreakpointEnabledTag } from '@ni/spright-components/dist/esm/icons/breakpoint-enabled';\nimport { iconBreakpointHoverTag } from '@ni/spright-components/dist/esm/icons/breakpoint-hover';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { MenuButtonPosition } from '@ni/nimble-components/dist/esm/menu-button/types';\nimport { BreakpointState, breakpointCellViewMenuSlotName } from '../types';\nimport type { TsTableColumnBreakpointCellView } from '.';\n\nexport const template = html<TsTableColumnBreakpointCellView>`\n <template\n ?open=\"${x => x.open}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n >\n <button\n ${ref('button')}\n part=\"button\"\n class=\"breakpoint-button state-${x => x.currentState}\"\n @click=\"${(x, c) => x.onButtonClick(c.event)}\"\n @contextmenu=\"${(x, c) => x.onContextMenu(c.event)}\"\n @keydown=\"${(x, c) => x.onKeyDown(c.event as KeyboardEvent)}\"\n aria-label=\"${x => x.ariaLabelText}\"\n title=\"${x => x.tooltipText}\"\n ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}\n tabindex=\"-1\"\n >\n ${when(x => x.currentState === BreakpointState.off, html`<${iconBreakpointHoverTag} />`)}\n ${when(x => x.currentState === BreakpointState.enabled, html`<${iconBreakpointEnabledTag} />`)}\n ${when(x => x.currentState === BreakpointState.disabled, html`<${iconBreakpointDisabledTag} />`)}\n ${when(x => x.currentState === BreakpointState.hit, html`<${iconBreakpointHitTag} />`)}\n ${when(x => x.currentState === BreakpointState.conditional, html`<${iconBreakpointConditionalTag} />`)}\n ${when(x => x.currentState === BreakpointState.hitDisabled, html`<${iconBreakpointHitDisabledTag} />`)}\n </button>\n ${when(\n x => x.open,\n html<TsTableColumnBreakpointCellView>`\n <${anchoredRegionTag}\n fixed-placement=\"true\"\n auto-update-mode=\"auto\"\n horizontal-inset=\"true\"\n horizontal-positioning-mode=\"dynamic\"\n vertical-positioning-mode=\"${x => (x.menuPosition === MenuButtonPosition.auto ? 'dynamic' : 'locktodefault')}\"\n vertical-default-position=\"${x => (x.menuPosition === MenuButtonPosition.above ? 'top' : 'bottom')}\"\n @loaded=\"${x => x.regionLoadedHandler()}\"\n @change=\"${(x, c) => x.onContextMenuChange(c.event)}\"\n @keydown=\"${(x, c) => x.contextMenuKeyDownHandler(c.event as KeyboardEvent)}\"\n ${ref('region')}\n >\n <span part=\"menu\">\n <slot name=\"${breakpointCellViewMenuSlotName}\" ${slotted({ property: 'slottedMenus' })}></slot>\n </span>\n </${anchoredRegionTag}>\n `\n )}\n </template>\n`;\n"]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { TableStringField } from '@ni/nimble-components/dist/esm/table/types';
|
|
2
|
+
import type { ColumnInternalsOptions } from '@ni/nimble-components/dist/esm/table-column/base/models/column-internals';
|
|
3
|
+
import { TableColumn } from '@ni/nimble-components/dist/esm/table-column/base';
|
|
4
|
+
import { type MenuButtonPosition as BreakpointMenuPosition } from '@ni/nimble-components/dist/esm/menu-button/types';
|
|
5
|
+
import { BreakpointState } from './types';
|
|
6
|
+
export type TsTableColumnBreakpointCellRecord = TableStringField<'value'>;
|
|
7
|
+
export interface TsTableColumnBreakpointColumnConfig {
|
|
8
|
+
menuSlot?: string;
|
|
9
|
+
position?: BreakpointMenuPosition;
|
|
10
|
+
}
|
|
11
|
+
declare global {
|
|
12
|
+
interface HTMLElementTagNameMap {
|
|
13
|
+
'ok-ts-table-column-breakpoint': TsTableColumnBreakpoint;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* A table column that displays a breakpoint indicator with toggle functionality.
|
|
18
|
+
*/
|
|
19
|
+
export declare class TsTableColumnBreakpoint extends TableColumn<TsTableColumnBreakpointColumnConfig> {
|
|
20
|
+
fieldName?: string;
|
|
21
|
+
menuSlot?: string;
|
|
22
|
+
position: BreakpointMenuPosition;
|
|
23
|
+
constructor();
|
|
24
|
+
/** @internal */
|
|
25
|
+
onDelegatedEvent(e: Event): void;
|
|
26
|
+
/**
|
|
27
|
+
* Programmatically requests a breakpoint state change for a record.
|
|
28
|
+
*/
|
|
29
|
+
requestBreakpointStateChange(recordId: string, currentState: BreakpointState, requestedState: BreakpointState): void;
|
|
30
|
+
protected getColumnInternalsOptions(): ColumnInternalsOptions;
|
|
31
|
+
protected fieldNameChanged(): void;
|
|
32
|
+
protected menuSlotChanged(): void;
|
|
33
|
+
protected positionChanged(): void;
|
|
34
|
+
private updateColumnConfig;
|
|
35
|
+
}
|
|
36
|
+
export declare const tsTableColumnBreakpointTag = "ok-ts-table-column-breakpoint";
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { DesignSystem } from '@ni/fast-foundation';
|
|
3
|
+
import { attr } from '@ni/fast-element';
|
|
4
|
+
import { singleIconColumnWidth } from '@ni/nimble-components/dist/esm/table-column/base/types';
|
|
5
|
+
import { ColumnValidator } from '@ni/nimble-components/dist/esm/table-column/base/models/column-validator';
|
|
6
|
+
import { TableColumn } from '@ni/nimble-components/dist/esm/table-column/base';
|
|
7
|
+
import { styles } from '@ni/nimble-components/dist/esm/table-column/base/styles';
|
|
8
|
+
import { MenuButtonPosition } from '@ni/nimble-components/dist/esm/menu-button/types';
|
|
9
|
+
import { BreakpointState } from './types';
|
|
10
|
+
import { breakpointCellViewMenuSlotName } from './types';
|
|
11
|
+
import { tsTableColumnBreakpointCellViewTag } from './cell-view';
|
|
12
|
+
import { template } from './template';
|
|
13
|
+
/**
|
|
14
|
+
* A table column that displays a breakpoint indicator with toggle functionality.
|
|
15
|
+
*/
|
|
16
|
+
export class TsTableColumnBreakpoint extends TableColumn {
|
|
17
|
+
constructor() {
|
|
18
|
+
super();
|
|
19
|
+
this.position = MenuButtonPosition.auto;
|
|
20
|
+
// Breakpoint columns are icon-only and should remain fixed-size and non-resizable.
|
|
21
|
+
this.columnInternals.resizingDisabled = true;
|
|
22
|
+
this.columnInternals.pixelWidth = singleIconColumnWidth;
|
|
23
|
+
this.columnInternals.minPixelWidth = singleIconColumnWidth;
|
|
24
|
+
}
|
|
25
|
+
/** @internal */
|
|
26
|
+
onDelegatedEvent(e) {
|
|
27
|
+
e.stopImmediatePropagation();
|
|
28
|
+
const event = e;
|
|
29
|
+
if (event.detail.originalEvent.type === 'breakpoint-column-toggle') {
|
|
30
|
+
const originalEvent = event.detail.originalEvent;
|
|
31
|
+
const detail = {
|
|
32
|
+
...originalEvent.detail,
|
|
33
|
+
recordId: event.detail.recordId
|
|
34
|
+
};
|
|
35
|
+
this.$emit('breakpoint-column-toggle', detail);
|
|
36
|
+
}
|
|
37
|
+
else if (event.detail.originalEvent.type === 'breakpoint-column-state-change-requested') {
|
|
38
|
+
const originalEvent = event.detail.originalEvent;
|
|
39
|
+
const detail = {
|
|
40
|
+
...originalEvent.detail,
|
|
41
|
+
recordId: event.detail.recordId
|
|
42
|
+
};
|
|
43
|
+
this.$emit('breakpoint-column-state-change-requested', detail);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Programmatically requests a breakpoint state change for a record.
|
|
48
|
+
*/
|
|
49
|
+
requestBreakpointStateChange(recordId, currentState, requestedState) {
|
|
50
|
+
const detail = {
|
|
51
|
+
recordId,
|
|
52
|
+
currentState,
|
|
53
|
+
requestedState
|
|
54
|
+
};
|
|
55
|
+
this.$emit('breakpoint-column-state-change-requested', detail);
|
|
56
|
+
}
|
|
57
|
+
getColumnInternalsOptions() {
|
|
58
|
+
return {
|
|
59
|
+
cellRecordFieldNames: ['value'],
|
|
60
|
+
cellViewTag: tsTableColumnBreakpointCellViewTag,
|
|
61
|
+
delegatedEvents: ['breakpoint-column-toggle', 'breakpoint-column-state-change-requested'],
|
|
62
|
+
slotNames: [breakpointCellViewMenuSlotName],
|
|
63
|
+
validator: new ColumnValidator([])
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
fieldNameChanged() {
|
|
67
|
+
this.columnInternals.dataRecordFieldNames = [this.fieldName];
|
|
68
|
+
this.columnInternals.operandDataRecordFieldName = this.fieldName;
|
|
69
|
+
}
|
|
70
|
+
menuSlotChanged() {
|
|
71
|
+
this.updateColumnConfig();
|
|
72
|
+
}
|
|
73
|
+
positionChanged() {
|
|
74
|
+
this.updateColumnConfig();
|
|
75
|
+
}
|
|
76
|
+
updateColumnConfig() {
|
|
77
|
+
this.columnInternals.columnConfig = {
|
|
78
|
+
menuSlot: this.menuSlot,
|
|
79
|
+
position: this.position
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
__decorate([
|
|
84
|
+
attr({ attribute: 'field-name' })
|
|
85
|
+
], TsTableColumnBreakpoint.prototype, "fieldName", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
attr({ attribute: 'menu-slot' })
|
|
88
|
+
], TsTableColumnBreakpoint.prototype, "menuSlot", void 0);
|
|
89
|
+
__decorate([
|
|
90
|
+
attr
|
|
91
|
+
], TsTableColumnBreakpoint.prototype, "position", void 0);
|
|
92
|
+
const tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({
|
|
93
|
+
baseName: 'ts-table-column-breakpoint',
|
|
94
|
+
template,
|
|
95
|
+
styles
|
|
96
|
+
});
|
|
97
|
+
DesignSystem.getOrCreate()
|
|
98
|
+
.withPrefix('ok')
|
|
99
|
+
.register(tsTableColumnBreakpoint());
|
|
100
|
+
export const tsTableColumnBreakpointTag = 'ok-ts-table-column-breakpoint';
|
|
101
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ts/table-column/breakpoint/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem } from '@ni/fast-foundation';\nimport { attr } from '@ni/fast-element';\nimport type { TableStringField } from '@ni/nimble-components/dist/esm/table/types';\nimport type { ColumnInternalsOptions } from '@ni/nimble-components/dist/esm/table-column/base/models/column-internals';\nimport { singleIconColumnWidth } from '@ni/nimble-components/dist/esm/table-column/base/types';\nimport { ColumnValidator } from '@ni/nimble-components/dist/esm/table-column/base/models/column-validator';\nimport { TableColumn } from '@ni/nimble-components/dist/esm/table-column/base';\nimport { styles } from '@ni/nimble-components/dist/esm/table-column/base/styles';\nimport type { DelegatedEventEventDetails } from '@ni/nimble-components/dist/esm/table-column/base/types';\nimport { MenuButtonPosition, type MenuButtonPosition as BreakpointMenuPosition } from '@ni/nimble-components/dist/esm/menu-button/types';\nimport {\n BreakpointState,\n type BreakpointToggleEventDetail,\n type BreakpointStateChangeRequestedEventDetail\n} from './types';\nimport { breakpointCellViewMenuSlotName } from './types';\nimport { tsTableColumnBreakpointCellViewTag } from './cell-view';\nimport { template } from './template';\n\nexport type TsTableColumnBreakpointCellRecord = TableStringField<'value'>;\n\nexport interface TsTableColumnBreakpointColumnConfig {\n menuSlot?: string;\n position?: BreakpointMenuPosition;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-ts-table-column-breakpoint': TsTableColumnBreakpoint;\n }\n}\n\n/**\n * A table column that displays a breakpoint indicator with toggle functionality.\n */\nexport class TsTableColumnBreakpoint extends TableColumn<TsTableColumnBreakpointColumnConfig> {\n @attr({ attribute: 'field-name' })\n public fieldName?: string;\n\n @attr({ attribute: 'menu-slot' })\n public menuSlot?: string;\n\n @attr\n public position: BreakpointMenuPosition = MenuButtonPosition.auto;\n\n public constructor() {\n super();\n // Breakpoint columns are icon-only and should remain fixed-size and non-resizable.\n this.columnInternals.resizingDisabled = true;\n this.columnInternals.pixelWidth = singleIconColumnWidth;\n this.columnInternals.minPixelWidth = singleIconColumnWidth;\n }\n\n /** @internal */\n public onDelegatedEvent(e: Event): void {\n e.stopImmediatePropagation();\n\n const event = e as CustomEvent<DelegatedEventEventDetails>;\n\n if (event.detail.originalEvent.type === 'breakpoint-column-toggle') {\n const originalEvent = event.detail.originalEvent as CustomEvent<BreakpointToggleEventDetail>;\n const detail: BreakpointToggleEventDetail = {\n ...originalEvent.detail,\n recordId: event.detail.recordId\n };\n this.$emit('breakpoint-column-toggle', detail);\n } else if (event.detail.originalEvent.type === 'breakpoint-column-state-change-requested') {\n const originalEvent = event.detail.originalEvent as CustomEvent<BreakpointStateChangeRequestedEventDetail>;\n const detail: BreakpointStateChangeRequestedEventDetail = {\n ...originalEvent.detail,\n recordId: event.detail.recordId\n };\n this.$emit('breakpoint-column-state-change-requested', detail);\n }\n }\n\n /**\n * Programmatically requests a breakpoint state change for a record.\n */\n public requestBreakpointStateChange(\n recordId: string,\n currentState: BreakpointState,\n requestedState: BreakpointState\n ): void {\n const detail: BreakpointStateChangeRequestedEventDetail = {\n recordId,\n currentState,\n requestedState\n };\n this.$emit('breakpoint-column-state-change-requested', detail);\n }\n\n protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n return {\n cellRecordFieldNames: ['value'],\n cellViewTag: tsTableColumnBreakpointCellViewTag,\n delegatedEvents: ['breakpoint-column-toggle', 'breakpoint-column-state-change-requested'],\n slotNames: [breakpointCellViewMenuSlotName],\n validator: new ColumnValidator<[]>([])\n };\n }\n\n protected fieldNameChanged(): void {\n this.columnInternals.dataRecordFieldNames = [this.fieldName];\n this.columnInternals.operandDataRecordFieldName = this.fieldName;\n }\n\n protected menuSlotChanged(): void {\n this.updateColumnConfig();\n }\n\n protected positionChanged(): void {\n this.updateColumnConfig();\n }\n\n private updateColumnConfig(): void {\n this.columnInternals.columnConfig = {\n menuSlot: this.menuSlot,\n position: this.position\n };\n }\n}\n\nconst tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({\n baseName: 'ts-table-column-breakpoint',\n template,\n styles\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('ok')\n .register(tsTableColumnBreakpoint());\nexport const tsTableColumnBreakpointTag = 'ok-ts-table-column-breakpoint';\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { html } from '@ni/fast-element';
|
|
2
|
+
import { template as baseTemplate } from '@ni/nimble-components/dist/esm/table-column/base/template';
|
|
3
|
+
export const template = html `
|
|
4
|
+
<template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
|
|
5
|
+
>${baseTemplate}</template
|
|
6
|
+
>
|
|
7
|
+
`;
|
|
8
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/ts/table-column/breakpoint/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,2DAA2D,CAAC;AAGrG,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAyB;kCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC;WAC5D,YAAY;;CAEtB,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport { template as baseTemplate } from '@ni/nimble-components/dist/esm/table-column/base/template';\nimport type { TsTableColumnBreakpoint } from '.';\n\nexport const template = html<TsTableColumnBreakpoint>`\n <template @delegated-event=\"${(x, c) => x.onDelegatedEvent(c.event)}\"\n >${baseTemplate}</template\n >\n`;\n"]}
|
package/dist/esm/ts/table-column/breakpoint/testing/ts-table-column-breakpoint.pageobject.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { TablePageObject } from '@ni/nimble-components/dist/esm/table/testing/table.pageobject';
|
|
2
|
+
import type { TableRecord } from '@ni/nimble-components/dist/esm/table/types';
|
|
3
|
+
import { BreakpointState } from '../types';
|
|
4
|
+
/**
|
|
5
|
+
* Page object for ts-table-column-breakpoint tests.
|
|
6
|
+
*/
|
|
7
|
+
export declare class TsTableColumnBreakpointPageObject<T extends TableRecord> {
|
|
8
|
+
private readonly tablePageObject;
|
|
9
|
+
constructor(tablePageObject: TablePageObject<T>);
|
|
10
|
+
clickBreakpointButton(rowIndex: number, columnIndex: number): void;
|
|
11
|
+
rightClickBreakpointButton(rowIndex: number, columnIndex: number): void;
|
|
12
|
+
focusBreakpointButton(rowIndex: number, columnIndex: number): void;
|
|
13
|
+
pressBreakpointButtonKey(rowIndex: number, columnIndex: number, eventInit: KeyboardEventInit): boolean;
|
|
14
|
+
getBreakpointButtonIconTag(rowIndex: number, columnIndex: number): string;
|
|
15
|
+
getCurrentState(rowIndex: number, columnIndex: number): BreakpointState;
|
|
16
|
+
getTooltipText(rowIndex: number, columnIndex: number): string;
|
|
17
|
+
getTabbableChildrenCount(rowIndex: number, columnIndex: number): number;
|
|
18
|
+
isContextMenuOpen(rowIndex: number, columnIndex: number): boolean;
|
|
19
|
+
pressContextMenuKey(rowIndex: number, columnIndex: number, eventInit: KeyboardEventInit): boolean;
|
|
20
|
+
private getRenderedCellView;
|
|
21
|
+
private getBreakpointButton;
|
|
22
|
+
private getContextMenuRegion;
|
|
23
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
|
|
2
|
+
import { BreakpointState } from '../types';
|
|
3
|
+
import { TsTableColumnBreakpointCellView } from '../cell-view';
|
|
4
|
+
/**
|
|
5
|
+
* Page object for ts-table-column-breakpoint tests.
|
|
6
|
+
*/
|
|
7
|
+
export class TsTableColumnBreakpointPageObject {
|
|
8
|
+
constructor(tablePageObject) {
|
|
9
|
+
this.tablePageObject = tablePageObject;
|
|
10
|
+
}
|
|
11
|
+
clickBreakpointButton(rowIndex, columnIndex) {
|
|
12
|
+
this.getBreakpointButton(rowIndex, columnIndex).click();
|
|
13
|
+
}
|
|
14
|
+
rightClickBreakpointButton(rowIndex, columnIndex) {
|
|
15
|
+
this.getBreakpointButton(rowIndex, columnIndex).dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }));
|
|
16
|
+
}
|
|
17
|
+
focusBreakpointButton(rowIndex, columnIndex) {
|
|
18
|
+
this.getBreakpointButton(rowIndex, columnIndex).focus();
|
|
19
|
+
}
|
|
20
|
+
pressBreakpointButtonKey(rowIndex, columnIndex, eventInit) {
|
|
21
|
+
return this.getBreakpointButton(rowIndex, columnIndex).dispatchEvent(new KeyboardEvent('keydown', {
|
|
22
|
+
bubbles: true,
|
|
23
|
+
...eventInit
|
|
24
|
+
}));
|
|
25
|
+
}
|
|
26
|
+
getBreakpointButtonIconTag(rowIndex, columnIndex) {
|
|
27
|
+
const iconTag = this
|
|
28
|
+
.getBreakpointButton(rowIndex, columnIndex)
|
|
29
|
+
.querySelector(':scope > *')
|
|
30
|
+
?.tagName;
|
|
31
|
+
return iconTag?.toLocaleLowerCase() ?? '';
|
|
32
|
+
}
|
|
33
|
+
getCurrentState(rowIndex, columnIndex) {
|
|
34
|
+
return this.getRenderedCellView(rowIndex, columnIndex).currentState;
|
|
35
|
+
}
|
|
36
|
+
getTooltipText(rowIndex, columnIndex) {
|
|
37
|
+
return this.getRenderedCellView(rowIndex, columnIndex).tooltipText;
|
|
38
|
+
}
|
|
39
|
+
getTabbableChildrenCount(rowIndex, columnIndex) {
|
|
40
|
+
return this.getRenderedCellView(rowIndex, columnIndex).tabbableChildren.length;
|
|
41
|
+
}
|
|
42
|
+
isContextMenuOpen(rowIndex, columnIndex) {
|
|
43
|
+
return this.getContextMenuRegion(rowIndex, columnIndex) !== null;
|
|
44
|
+
}
|
|
45
|
+
pressContextMenuKey(rowIndex, columnIndex, eventInit) {
|
|
46
|
+
const region = this.getContextMenuRegion(rowIndex, columnIndex);
|
|
47
|
+
if (!region) {
|
|
48
|
+
throw new Error(`Expected context menu at cell ${rowIndex},${columnIndex}`);
|
|
49
|
+
}
|
|
50
|
+
return region.dispatchEvent(new KeyboardEvent('keydown', {
|
|
51
|
+
bubbles: true,
|
|
52
|
+
...eventInit
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
55
|
+
getRenderedCellView(rowIndex, columnIndex) {
|
|
56
|
+
return this.tablePageObject.getRenderedCellView(rowIndex, columnIndex);
|
|
57
|
+
}
|
|
58
|
+
getBreakpointButton(rowIndex, columnIndex) {
|
|
59
|
+
const button = this.getRenderedCellView(rowIndex, columnIndex).shadowRoot.querySelector('.breakpoint-button');
|
|
60
|
+
if (!button) {
|
|
61
|
+
throw new Error(`Expected breakpoint button at cell ${rowIndex},${columnIndex}`);
|
|
62
|
+
}
|
|
63
|
+
return button;
|
|
64
|
+
}
|
|
65
|
+
getContextMenuRegion(rowIndex, columnIndex) {
|
|
66
|
+
return this.getRenderedCellView(rowIndex, columnIndex).shadowRoot.querySelector(anchoredRegionTag);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=ts-table-column-breakpoint.pageobject.js.map
|
package/dist/esm/ts/table-column/breakpoint/testing/ts-table-column-breakpoint.pageobject.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ts-table-column-breakpoint.pageobject.js","sourceRoot":"","sources":["../../../../../../src/ts/table-column/breakpoint/testing/ts-table-column-breakpoint.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TablePageObject } from '@ni/nimble-components/dist/esm/table/testing/table.pageobject';\nimport type { TableRecord } from '@ni/nimble-components/dist/esm/table/types';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { BreakpointState } from '../types';\nimport { TsTableColumnBreakpointCellView } from '../cell-view';\n\n/**\n * Page object for ts-table-column-breakpoint tests.\n */\nexport class TsTableColumnBreakpointPageObject<T extends TableRecord> {\n public constructor(private readonly tablePageObject: TablePageObject<T>) {}\n\n public clickBreakpointButton(rowIndex: number, columnIndex: number): void {\n this.getBreakpointButton(rowIndex, columnIndex).click();\n }\n\n public rightClickBreakpointButton(rowIndex: number, columnIndex: number): void {\n this.getBreakpointButton(rowIndex, columnIndex).dispatchEvent(\n new MouseEvent('contextmenu', { bubbles: true })\n );\n }\n\n public focusBreakpointButton(rowIndex: number, columnIndex: number): void {\n this.getBreakpointButton(rowIndex, columnIndex).focus();\n }\n\n public pressBreakpointButtonKey(\n rowIndex: number,\n columnIndex: number,\n eventInit: KeyboardEventInit\n ): boolean {\n return this.getBreakpointButton(rowIndex, columnIndex).dispatchEvent(\n new KeyboardEvent('keydown', {\n bubbles: true,\n ...eventInit\n })\n );\n }\n\n public getBreakpointButtonIconTag(\n rowIndex: number,\n columnIndex: number\n ): string {\n const iconTag = this\n .getBreakpointButton(rowIndex, columnIndex)\n .querySelector(':scope > *')\n ?.tagName;\n return iconTag?.toLocaleLowerCase() ?? '';\n }\n\n public getCurrentState(rowIndex: number, columnIndex: number): BreakpointState {\n return this.getRenderedCellView(rowIndex, columnIndex).currentState;\n }\n\n public getTooltipText(rowIndex: number, columnIndex: number): string {\n return this.getRenderedCellView(rowIndex, columnIndex).tooltipText;\n }\n\n public getTabbableChildrenCount(rowIndex: number, columnIndex: number): number {\n return this.getRenderedCellView(rowIndex, columnIndex).tabbableChildren.length;\n }\n\n public isContextMenuOpen(rowIndex: number, columnIndex: number): boolean {\n return this.getContextMenuRegion(rowIndex, columnIndex) !== null;\n }\n\n public pressContextMenuKey(\n rowIndex: number,\n columnIndex: number,\n eventInit: KeyboardEventInit\n ): boolean {\n const region = this.getContextMenuRegion(rowIndex, columnIndex);\n if (!region) {\n throw new Error(\n `Expected context menu at cell ${rowIndex},${columnIndex}`\n );\n }\n\n return region.dispatchEvent(\n new KeyboardEvent('keydown', {\n bubbles: true,\n ...eventInit\n })\n );\n }\n\n private getRenderedCellView(\n rowIndex: number,\n columnIndex: number\n ): TsTableColumnBreakpointCellView {\n return this.tablePageObject.getRenderedCellView(\n rowIndex,\n columnIndex\n ) as TsTableColumnBreakpointCellView;\n }\n\n private getBreakpointButton(\n rowIndex: number,\n columnIndex: number\n ): HTMLButtonElement {\n const button = this.getRenderedCellView(\n rowIndex,\n columnIndex\n ).shadowRoot!.querySelector<HTMLButtonElement>('.breakpoint-button');\n if (!button) {\n throw new Error(\n `Expected breakpoint button at cell ${rowIndex},${columnIndex}`\n );\n }\n return button;\n }\n\n private getContextMenuRegion(\n rowIndex: number,\n columnIndex: number\n ): HTMLElement | null {\n return this.getRenderedCellView(\n rowIndex,\n columnIndex\n ).shadowRoot!.querySelector(anchoredRegionTag);\n }\n}"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The possible states of a breakpoint indicator.
|
|
3
|
+
*/
|
|
4
|
+
export declare const BreakpointState: {
|
|
5
|
+
readonly off: "off";
|
|
6
|
+
readonly enabled: "enabled";
|
|
7
|
+
readonly disabled: "disabled";
|
|
8
|
+
readonly hit: "hit";
|
|
9
|
+
readonly conditional: "conditional";
|
|
10
|
+
readonly hitDisabled: "hit-disabled";
|
|
11
|
+
};
|
|
12
|
+
export type BreakpointState = (typeof BreakpointState)[keyof typeof BreakpointState];
|
|
13
|
+
/**
|
|
14
|
+
* The event detail for the `breakpoint-column-toggle` event.
|
|
15
|
+
*/
|
|
16
|
+
export interface BreakpointToggleEventDetail {
|
|
17
|
+
recordId: string;
|
|
18
|
+
newState: BreakpointState;
|
|
19
|
+
oldState: BreakpointState;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* The event detail for the `breakpoint-column-state-change-requested` event.
|
|
23
|
+
*/
|
|
24
|
+
export interface BreakpointStateChangeRequestedEventDetail {
|
|
25
|
+
recordId: string;
|
|
26
|
+
requestedState: BreakpointState;
|
|
27
|
+
currentState: BreakpointState;
|
|
28
|
+
}
|
|
29
|
+
/** @internal */
|
|
30
|
+
export declare const breakpointMenuItemStateAttributeName = "data-breakpoint-state";
|
|
31
|
+
/** @internal */
|
|
32
|
+
export declare const breakpointCellViewMenuSlotName = "menu";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The possible states of a breakpoint indicator.
|
|
3
|
+
*/
|
|
4
|
+
export const BreakpointState = {
|
|
5
|
+
off: 'off',
|
|
6
|
+
enabled: 'enabled',
|
|
7
|
+
disabled: 'disabled',
|
|
8
|
+
hit: 'hit',
|
|
9
|
+
conditional: 'conditional',
|
|
10
|
+
hitDisabled: 'hit-disabled'
|
|
11
|
+
};
|
|
12
|
+
/** @internal */
|
|
13
|
+
export const breakpointMenuItemStateAttributeName = 'data-breakpoint-state';
|
|
14
|
+
/** @internal */
|
|
15
|
+
export const breakpointCellViewMenuSlotName = 'menu';
|
|
16
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ts/table-column/breakpoint/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,GAAG,EAAE,KAAK;IACV,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,cAAc;CACrB,CAAC;AAqBX,gBAAgB;AAChB,MAAM,CAAC,MAAM,oCAAoC,GAAG,uBAAuB,CAAC;AAE5E,gBAAgB;AAChB,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC","sourcesContent":["/**\n * The possible states of a breakpoint indicator.\n */\nexport const BreakpointState = {\n off: 'off',\n enabled: 'enabled',\n disabled: 'disabled',\n hit: 'hit',\n conditional: 'conditional',\n hitDisabled: 'hit-disabled'\n} as const;\nexport type BreakpointState = (typeof BreakpointState)[keyof typeof BreakpointState];\n\n/**\n * The event detail for the `breakpoint-column-toggle` event.\n */\nexport interface BreakpointToggleEventDetail {\n recordId: string;\n newState: BreakpointState;\n oldState: BreakpointState;\n}\n\n/**\n * The event detail for the `breakpoint-column-state-change-requested` event.\n */\nexport interface BreakpointStateChangeRequestedEventDetail {\n recordId: string;\n requestedState: BreakpointState;\n currentState: BreakpointState;\n}\n\n/** @internal */\nexport const breakpointMenuItemStateAttributeName = 'data-breakpoint-state';\n\n/** @internal */\nexport const breakpointCellViewMenuSlotName = 'menu';\n"]}
|