add select all support

src/multi-select/README.md

@@ -58,6 +58,7 @@ const value = multiSelect.value;
 		</tp-multi-select-search>
 	</tp-multi-select-field>
 	<tp-multi-select-options>
+		<tp-multi-select-select-all select-text="Select All" unselect-text="Un-Select All">Select All</tp-multi-select-select-all>
 		<tp-multi-select-option value="priya" label="Priya">Priya</tp-multi-select-option>
 		<tp-multi-select-option value="varun" label="Varun">Varun</tp-multi-select-option>
 		<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>

src/multi-select/index.html

@@ -36,14 +36,20 @@
 			border: 1px solid #000;
 		}
 
+		tp-multi-select-select-all,
 		tp-multi-select-option {
 			cursor: pointer;
 		}
 
+		tp-multi-select-select-all {
+			border-bottom: 1px solid #000;
+		}
+
 		tp-multi-select-option + tp-multi-select-option {
 			border-top: 1px solid #000;
 		}
 
+		tp-multi-select-select-all[selected="yes"]::after,
 		tp-multi-select-option[selected="yes"]::after {
 			content: " ✓";
 		}
@@ -90,6 +96,7 @@
 				</tp-multi-select-search>
 			</tp-multi-select-field>
 			<tp-multi-select-options>
+				<tp-multi-select-select-all select-text="Select All" unselect-text="Un-Select All">Select All</tp-multi-select-select-all>
 				<tp-multi-select-option value="priya" label="Priya">Priya</tp-multi-select-option>
 				<tp-multi-select-option value="varun" label="Varun">Varun</tp-multi-select-option>
 				<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>

src/multi-select/index.ts

@@ -15,6 +15,7 @@ import { TPMultiSelectOptionElement } from './tp-multi-select-option';
 import { TPMultiSelectSearchElement } from './tp-multi-select-search';
 import { TPMultiSelectPillElement } from './tp-multi-select-pill';
 import { TPMultiSelectPillsElement } from './tp-multi-select-pills';
+import { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';
 
 /**
  * Register Components.
@@ -28,3 +29,4 @@ customElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );
 customElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );
 customElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );
 customElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );
+customElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );

src/multi-select/style.scss

@@ -65,3 +65,7 @@ tp-multi-select-search {
 tp-multi-select-pills {
 	display: inline-block;
 }
+
+tp-multi-select-select-all {
+	display: block;
+}

src/multi-select/tp-multi-select-select-all.ts

@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies.
+ */
+import { TPMultiSelectElement } from './tp-multi-select';
+import { TPMultiSelectOptionElement } from './tp-multi-select-option';
+
+/**
+ * TP Multi Select Select All.
+ */
+export class TPMultiSelectSelectAllElement extends HTMLElement {
+	/**
+	 * Connected callback.
+	 */
+	connectedCallback(): void {
+		this.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );
+		this.addEventListener( 'click', this.toggleSelectAll.bind( this ) );
+	}
+
+	/**
+	 * Handle value changed.
+	 */
+	handleValueChanged(): void {
+		const multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );
+		const options: NodeListOf<TPMultiSelectOptionElement> | null | undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );
+		if ( ! multiSelect || ! options ) {
+			return;
+		}
+
+		if ( options.length === multiSelect.value.length ) {
+			this.setAttribute( 'selected', 'yes' );
+			this.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';
+		} else {
+			this.removeAttribute( 'selected' );
+			this.innerHTML = this.getAttribute( 'select-text' ) ?? '';
+		}
+	}
+
+	/**
+	 * Toggle select all.
+	 */
+	toggleSelectAll(): void {
+		const multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );
+		if ( ! multiSelect ) {
+			return;
+		}
+
+		if ( 'yes' !== this.getAttribute( 'selected' ) ) {
+			multiSelect.selectAll();
+		} else {
+			multiSelect.unSelectAll();
+		}
+	}
+}