@ni/nimble-components 34.10.0 → 34.10.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.
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
2
2
  import { DesignSystem } from '@ni/fast-foundation';
3
3
  import { observable, volatile } from '@ni/fast-element';
4
4
  import { TableCellView } from '../../base/cell-view';
5
- import { template } from './templates';
5
+ import { template } from './template';
6
6
  import { styles } from './styles';
7
7
  import { cellViewMenuSlotName } from '../types';
8
8
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAQhD;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,aAGlD;IAHD;;QAUI,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAiD/B,CAAC;IA/CG,gBAAgB;IAEhB,IAAW,cAAc;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IACpC,CAAC;IAED,IAAoB,gBAAgB;QAChC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;IACT,wBAAwB,CAC3B,KAA+C;QAE/C,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC;QACvD,IAAI,kBAAkB,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YAC9C,MAAM,WAAW,GAAmC;gBAChD,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,oBAAoB,EAAE;iBAC3D;aACJ,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,gBAAgB;IACT,qBAAqB;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAC/E,CAAC;IACL,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,gBAAgB;IACT,iBAAiB,CAAC,CAAQ;QAC7B,0EAA0E;QAC1E,gCAAgC;QAChC,CAAC,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;CACJ;AAjDU;IADN,UAAU;kEACgB;AAI3B;IADC,QAAQ;mEAGR;AA6CL,MAAM,kBAAkB,GAAG,6BAA6B,CAAC,OAAO,CAAC;IAC7D,QAAQ,EAAE,oCAAoC;IAC9C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,2CAA2C,CAAC","sourcesContent":["import { DesignSystem } from '@ni/fast-foundation';\nimport { observable, volatile } from '@ni/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport type {\n TableColumnMenuButtonCellRecord,\n TableColumnMenuButtonColumnConfig\n} from '..';\nimport { template } from './templates';\nimport { styles } from './styles';\nimport type { MenuButton } from '../../../menu-button';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport type { CellViewSlotRequestEventDetail } from '../../../table/types';\nimport { cellViewMenuSlotName } from '../types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-menu-button-cell-view': TableColumnMenuButtonCellView;\n }\n}\n\n/**\n * The cell view base class for displaying a string field as a menu button.\n */\nexport class TableColumnMenuButtonCellView extends TableCellView<\n TableColumnMenuButtonCellRecord,\n TableColumnMenuButtonColumnConfig\n> {\n /** @internal */\n public menuButton?: MenuButton;\n\n /** @internal */\n public valueSpan?: HTMLSpanElement;\n\n /** @internal */\n @observable\n public hasOverflow = false;\n\n /** @internal */\n @volatile\n public get showMenuButton(): boolean {\n return !!this.cellRecord?.value;\n }\n\n public override get tabbableChildren(): HTMLElement[] {\n if (this.showMenuButton) {\n return [this.menuButton!];\n }\n return [];\n }\n\n /** @internal */\n public onMenuButtonBeforeToggle(\n event: CustomEvent<MenuButtonToggleEventDetail>\n ): boolean {\n const configuredSlotName = this.columnConfig?.menuSlot;\n if (configuredSlotName && event.detail.newState) {\n const eventDetail: CellViewSlotRequestEventDetail = {\n slots: [\n { name: configuredSlotName, slot: cellViewMenuSlotName }\n ]\n };\n this.$emit('cell-view-slots-request', eventDetail);\n }\n return true;\n }\n\n /** @internal */\n public onMenuButtonMouseOver(): void {\n if (this.valueSpan) {\n this.hasOverflow = this.valueSpan.offsetWidth < this.valueSpan.scrollWidth;\n }\n }\n\n /** @internal */\n public onMenuButtonMouseOut(): void {\n this.hasOverflow = false;\n }\n\n /** @internal */\n public onMenuButtonClick(e: Event): void {\n // Stop propagation of the click event to prevent clicking the menu button\n // from affecting row selection.\n e.stopPropagation();\n }\n}\n\nconst menuButtonCellView = TableColumnMenuButtonCellView.compose({\n baseName: 'table-column-menu-button-cell-view',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());\nexport const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAQhD;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,aAGlD;IAHD;;QAUI,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAiD/B,CAAC;IA/CG,gBAAgB;IAEhB,IAAW,cAAc;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IACpC,CAAC;IAED,IAAoB,gBAAgB;QAChC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;IACT,wBAAwB,CAC3B,KAA+C;QAE/C,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC;QACvD,IAAI,kBAAkB,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YAC9C,MAAM,WAAW,GAAmC;gBAChD,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,oBAAoB,EAAE;iBAC3D;aACJ,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,gBAAgB;IACT,qBAAqB;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAC/E,CAAC;IACL,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,gBAAgB;IACT,iBAAiB,CAAC,CAAQ;QAC7B,0EAA0E;QAC1E,gCAAgC;QAChC,CAAC,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;CACJ;AAjDU;IADN,UAAU;kEACgB;AAI3B;IADC,QAAQ;mEAGR;AA6CL,MAAM,kBAAkB,GAAG,6BAA6B,CAAC,OAAO,CAAC;IAC7D,QAAQ,EAAE,oCAAoC;IAC9C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,2CAA2C,CAAC","sourcesContent":["import { DesignSystem } from '@ni/fast-foundation';\nimport { observable, volatile } from '@ni/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport type {\n TableColumnMenuButtonCellRecord,\n TableColumnMenuButtonColumnConfig\n} from '..';\nimport { template } from './template';\nimport { styles } from './styles';\nimport type { MenuButton } from '../../../menu-button';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport type { CellViewSlotRequestEventDetail } from '../../../table/types';\nimport { cellViewMenuSlotName } from '../types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-table-column-menu-button-cell-view': TableColumnMenuButtonCellView;\n }\n}\n\n/**\n * The cell view base class for displaying a string field as a menu button.\n */\nexport class TableColumnMenuButtonCellView extends TableCellView<\n TableColumnMenuButtonCellRecord,\n TableColumnMenuButtonColumnConfig\n> {\n /** @internal */\n public menuButton?: MenuButton;\n\n /** @internal */\n public valueSpan?: HTMLSpanElement;\n\n /** @internal */\n @observable\n public hasOverflow = false;\n\n /** @internal */\n @volatile\n public get showMenuButton(): boolean {\n return !!this.cellRecord?.value;\n }\n\n public override get tabbableChildren(): HTMLElement[] {\n if (this.showMenuButton) {\n return [this.menuButton!];\n }\n return [];\n }\n\n /** @internal */\n public onMenuButtonBeforeToggle(\n event: CustomEvent<MenuButtonToggleEventDetail>\n ): boolean {\n const configuredSlotName = this.columnConfig?.menuSlot;\n if (configuredSlotName && event.detail.newState) {\n const eventDetail: CellViewSlotRequestEventDetail = {\n slots: [\n { name: configuredSlotName, slot: cellViewMenuSlotName }\n ]\n };\n this.$emit('cell-view-slots-request', eventDetail);\n }\n return true;\n }\n\n /** @internal */\n public onMenuButtonMouseOver(): void {\n if (this.valueSpan) {\n this.hasOverflow = this.valueSpan.offsetWidth < this.valueSpan.scrollWidth;\n }\n }\n\n /** @internal */\n public onMenuButtonMouseOut(): void {\n this.hasOverflow = false;\n }\n\n /** @internal */\n public onMenuButtonClick(e: Event): void {\n // Stop propagation of the click event to prevent clicking the menu button\n // from affecting row selection.\n e.stopPropagation();\n }\n}\n\nconst menuButtonCellView = TableColumnMenuButtonCellView.compose({\n baseName: 'table-column-menu-button-cell-view',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());\nexport const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';\n"]}
@@ -21,4 +21,4 @@ export const template = html `
21
21
  </${menuButtonTag}>
22
22
  `)}
23
23
  `;
24
- //# sourceMappingURL=templates.js.map
24
+ //# sourceMappingURL=template.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA+B;MACrD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,CAA+B;WAC1D,aAAa;cACV,GAAG,CAAC,YAAY,CAAC;0BACL,gBAAgB,CAAC,KAAK;6BACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;0BAC5F,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;yBAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;sBAChC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;oBACxC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAEjD,GAAG,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK;eACrE,wBAAwB,iBAAiB,wBAAwB;;0BAEtD,oBAAoB;YAClC,aAAa;KACpB,CAAC;CACL,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport type { TableColumnMenuButtonCellView } from '.';\nimport { menuButtonTag } from '../../../menu-button';\nimport {\n ButtonAppearance,\n type MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';\nimport { cellViewMenuSlotName } from '../types';\n\nexport const template = html<TableColumnMenuButtonCellView>`\n ${when(x => x.showMenuButton, html<TableColumnMenuButtonCellView>`\n <${menuButtonTag}\n ${ref('menuButton')}\n appearance=\"${ButtonAppearance.ghost}\"\n @beforetoggle=\"${(x, c) => x.onMenuButtonBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n @mouseover=\"${x => x.onMenuButtonMouseOver()}\"\n @mouseout=\"${x => x.onMenuButtonMouseOut()}\"\n @click=\"${(x, c) => x.onMenuButtonClick(c.event)}\"\n title=${x => (x.hasOverflow ? x.cellRecord!.value : null)}\n >\n <span ${ref('valueSpan')} class=\"value-label\">${x => x.cellRecord!.value}</span>\n <${iconArrowExpanderDownTag} slot=\"end\"></${iconArrowExpanderDownTag}>\n\n <slot name=\"${cellViewMenuSlotName}\" slot=\"menu\"></slot>\n </${menuButtonTag}>\n `)}\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "34.10.0",
3
+ "version": "34.10.1",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run generate-scss",
@@ -1 +0,0 @@
1
- {"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA+B;MACrD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,CAA+B;WAC1D,aAAa;cACV,GAAG,CAAC,YAAY,CAAC;0BACL,gBAAgB,CAAC,KAAK;6BACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;0BAC5F,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;yBAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;sBAChC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;oBACxC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAEjD,GAAG,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK;eACrE,wBAAwB,iBAAiB,wBAAwB;;0BAEtD,oBAAoB;YAClC,aAAa;KACpB,CAAC;CACL,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport type { TableColumnMenuButtonCellView } from '.';\nimport { menuButtonTag } from '../../../menu-button';\nimport {\n ButtonAppearance,\n type MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';\nimport { cellViewMenuSlotName } from '../types';\n\nexport const template = html<TableColumnMenuButtonCellView>`\n ${when(x => x.showMenuButton, html<TableColumnMenuButtonCellView>`\n <${menuButtonTag}\n ${ref('menuButton')}\n appearance=\"${ButtonAppearance.ghost}\"\n @beforetoggle=\"${(x, c) => x.onMenuButtonBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n @mouseover=\"${x => x.onMenuButtonMouseOver()}\"\n @mouseout=\"${x => x.onMenuButtonMouseOut()}\"\n @click=\"${(x, c) => x.onMenuButtonClick(c.event)}\"\n title=${x => (x.hasOverflow ? x.cellRecord!.value : null)}\n >\n <span ${ref('valueSpan')} class=\"value-label\">${x => x.cellRecord!.value}</span>\n <${iconArrowExpanderDownTag} slot=\"end\"></${iconArrowExpanderDownTag}>\n\n <slot name=\"${cellViewMenuSlotName}\" slot=\"menu\"></slot>\n </${menuButtonTag}>\n `)}\n`;\n"]}