From 19fee151d7619e44acc074842d6c362f5a0c8865 Mon Sep 17 00:00:00 2001
From: Vikas Awaghade <67629551+vikas-cldcvr@users.noreply.github.com>
Date: Tue, 12 Dec 2023 18:49:58 +0530
Subject: [PATCH] =?UTF-8?q?FLOW-1004=20FLOW-1005=20f-color-picker=20alignm?=
 =?UTF-8?q?ent=20issue=20fixed=20and=20hea=E2=80=A6=20(#209)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* main FLOW-1004 FLOW-1005 f-color-picker alignment issue fixed and header-input event added in f-table-schema

* FLOW-1004 toogle all rows feature fixed

* FLOW-1004 selectAll row beahvior fixed
---
 packages/flow-core/CHANGELOG.md               |  6 ++++
 packages/flow-core/package.json               |  2 +-
 .../f-color-picker/f-color-picker-global.scss |  2 ++
 .../f-color-picker/f-color-picker.ts          |  2 +-
 packages/flow-table/CHANGELOG.md              |  6 ++++
 packages/flow-table/package.json              |  2 +-
 .../f-table-schema/f-table-schema.ts          | 18 ++++++++++++
 .../src/components/f-table/f-table.ts         |  1 -
 stories/flow-table/f-table-schema.stories.ts  | 29 +++++++++++++++++++
 9 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
index 0368efca3..e4803e25c 100644
--- a/packages/flow-core/CHANGELOG.md
+++ b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.6.2] - 2023-12-12
+
+### Bug fixes
+
+- `f-color-picker` alignment fix when used in row direction with other inputs.
+
 ## [2.6.1] - 2023-12-04
 
 ### Bug fixes
diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
index a04fc5269..be35aa0e2 100644
--- a/packages/flow-core/package.json
+++ b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",
diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker-global.scss b/packages/flow-core/src/components/f-color-picker/f-color-picker-global.scss
index 45585d06e..3d0b159b2 100644
--- a/packages/flow-core/src/components/f-color-picker/f-color-picker-global.scss
+++ b/packages/flow-core/src/components/f-color-picker/f-color-picker-global.scss
@@ -6,4 +6,6 @@ f-color-picker {
 	height: fit-content;
 	max-width: 100%;
 	max-height: 100%;
+	display: inline-flex;
+	vertical-align: top;
 }
diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts
index 6d94427b8..05eadf95a 100644
--- a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts
+++ b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts
@@ -146,7 +146,7 @@ export class FColorPicker extends FRoot {
 	render() {
 		const classes = { focused: this.isOpen, "no-color": this.isValueEmpty };
 		// render empty string, since there no need of any child element
-		return html`<f-div direction="column" gap="x-small" width="hug-content">
+		return html`<f-div direction="column" width="hug-content">
 			<f-form-field>
 				<f-div
 					.width=${this.sizeMap[this.size ?? "medium"]}
diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
index baddf1849..2acfe7261 100644
--- a/packages/flow-table/CHANGELOG.md
+++ b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.2.1] - 2023-12-12
+
+### Improvements
+
+- `f-table-schema` : `@header-input` emitted when checkbox from header is clicked.
+
 ## [2.2.0] - 2023-11-28
 
 ### Minor Changes
diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
index ab8da2ca7..03a476266 100644
--- a/packages/flow-table/package.json
+++ b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "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-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
index 3273da65b..0a2a9e283 100644
--- a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
+++ b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -191,6 +191,8 @@ export class FTableSchema extends FRoot {
 							?sticky-left=${ifDefined(sticky)}
 							?sticky-top=${ifDefined(this.stickyHeader)}
 							@selected-column=${this.handleColumnSelection}
+							@update-row-selection=${(event: CustomEvent<boolean>) =>
+								this.handleHeaderInput(event, columnHeader[1])}
 						>
 							<f-div gap="small" height="100%" width="fit-content">
 								${this.getHeaderCellTemplate(columnHeader[1])}
@@ -449,6 +451,22 @@ export class FTableSchema extends FRoot {
 		}
 	}
 
+	handleHeaderInput(event: CustomEvent<boolean>, headerCell: FTableSchemaHeaderCell) {
+		this.toggleAllRows(event.detail);
+		const toggle = new CustomEvent("header-input", {
+			detail: { value: event.detail, header: headerCell },
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(toggle);
+	}
+
+	toggleAllRows(val: boolean) {
+		this.data.rows.forEach(row => {
+			row.selected = val;
+		});
+	}
+
 	paginate() {
 		if (this.filteredRows.length < this.searchedRows.length) {
 			this.offset += this.max;
diff --git a/packages/flow-table/src/components/f-table/f-table.ts b/packages/flow-table/src/components/f-table/f-table.ts
index 03cc379a0..08290213a 100644
--- a/packages/flow-table/src/components/f-table/f-table.ts
+++ b/packages/flow-table/src/components/f-table/f-table.ts
@@ -213,7 +213,6 @@ export class FTable extends FRoot {
 					} else if (selectedRows.length === rowsWithoutHeader.length) {
 						headerRow.selected = true;
 					} else {
-						headerRow.selected = false;
 						firstCell.checkbox.value = "indeterminate";
 					}
 				}
diff --git a/stories/flow-table/f-table-schema.stories.ts b/stories/flow-table/f-table-schema.stories.ts
index bf3b49e0d..ebe52db92 100644
--- a/stories/flow-table/f-table-schema.stories.ts
+++ b/stories/flow-table/f-table-schema.stories.ts
@@ -452,6 +452,35 @@ export const HeaderSelected = {
 	name: "@header-selected"
 };
 
+export const HeaderInput = {
+	render: () => {
+		const data = getFakeUsers(10, 5);
+		const fieldRef = createRef();
+
+		const handleEvent = (event: CustomEvent) => {
+			if (fieldRef.value) {
+				fieldRef.value.textContent = JSON.stringify(event.detail, undefined, 2);
+			}
+		};
+
+		return html`<f-div direction="column" state="subtle" padding="small" gap="large">
+				<f-text
+					>'header-input' event emitted whenever checkbox is checked/unchecked in header</f-text
+				>
+				<f-table-schema .data=${data} selectable="multiple" @header-input=${handleEvent}>
+				</f-table-schema>
+				<f-divider></f-divider>
+			</f-div>
+			<br />
+			<f-divider></f-divider>
+			<br />
+			<f-text state="secondary">'event.detail' will display here</f-text>
+			<pre ${ref(fieldRef)}></pre> `;
+	},
+
+	name: "@header-input"
+};
+
 export const Sort = {
 	render: () => {
 		const data = getFakeUsers(50, 5);