FLOW-967 chevron reference added in f-trow (#201)

ollionorg · Nov 28, 2023 · 503d40b · 503d40b
1 parent 9c5c501
commit 503d40b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.0.8] - 2023-11-28
+
+### Improvements
+
+- `f-trow` : `chevron` reference added to trigger click externally using JS.
+
 ## [2.0.7] - 2023-11-20
 
 ### Improvements

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-trow/f-trow.ts b/packages/flow-table/src/components/f-trow/f-trow.ts
@@ -1,7 +1,7 @@
 import { html, PropertyValueMap, unsafeCSS } from "lit";
 import { property, query } from "lit/decorators.js";
 
-import { FDiv, FIcon, FRoot, flowElement } from "@cldcvr/flow-core";
+import { FDiv, FIcon, FRoot, flowElement, FIconButton } from "@cldcvr/flow-core";
 import { FTcell } from "../f-tcell/f-tcell";
 import eleStyle from "./f-trow.scss?inline";
 import globalStyle from "./f-trow-global.scss?inline";
@@ -62,6 +62,8 @@ export class FTrow extends FRoot {
 	@query("slot[name='details']")
 	detailsSlotElement!: HTMLSlotElement;
 
+	chevron: FIconButton | undefined;
+
 	render() {
 		return html`<slot
 				@slotchange=${this.propogateProps}
@@ -132,12 +134,12 @@ export class FTrow extends FRoot {
 			}
 			chevronCell.expandIcon = true;
 			chevronCell.expandIconPosition = this.expandIconPosition as FTrowChevronPosition;
-			const chevron = chevronCell.chevron;
-			if (chevron) {
+			this.chevron = chevronCell.chevron;
+			if (this.chevron) {
 				if (this.open) {
-					chevron.icon = "i-chevron-up";
+					this.chevron.icon = "i-chevron-up";
 				} else {
-					chevron.icon = "i-chevron-down";
+					this.chevron.icon = "i-chevron-down";
 				}
 			}
 		}