From 0e233929c0075110afb22e7205318d465ddb8e80 Mon Sep 17 00:00:00 2001
From: Deepak Kumar <deepak.kumar852182@gmail.com>
Date: Fri, 8 Dec 2023 12:36:30 +0530
Subject: [PATCH 1/2] add disabled option support

---
 src/multi-select/index.html                    | 3 ++-
 src/multi-select/style.scss                    | 5 +++++
 src/multi-select/tp-multi-select-select-all.ts | 2 +-
 src/multi-select/tp-multi-select.ts            | 8 ++++++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/multi-select/index.html b/src/multi-select/index.html
index 19d7d14..db3490a 100644
--- a/src/multi-select/index.html
+++ b/src/multi-select/index.html
@@ -71,6 +71,7 @@
 				<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>
 				<tp-multi-select-option value="jane" label="Jane">Jane</tp-multi-select-option>
+				<tp-multi-select-option value="deepak" label="Deepak" disabled="yes">Deepak</tp-multi-select-option>
 			</tp-multi-select-options>
 		</tp-multi-select>
 
@@ -102,7 +103,7 @@
 				<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>
 				<tp-multi-select-option value="jane" label="Jane">Jane</tp-multi-select-option>
 				<tp-multi-select-option value="jack" label="Jack">Jack</tp-multi-select-option>
-				<tp-multi-select-option value="jill" label="Jill">Jill</tp-multi-select-option>
+				<tp-multi-select-option value="jill" label="Jill" disabled="yes">Jill</tp-multi-select-option>
 			</tp-multi-select-options>
 		</tp-multi-select>
 	</main>
diff --git a/src/multi-select/style.scss b/src/multi-select/style.scss
index ab51158..6f57c31 100644
--- a/src/multi-select/style.scss
+++ b/src/multi-select/style.scss
@@ -34,6 +34,11 @@ tp-multi-select-option {
 	&[hidden="yes"] {
 		display: none;
 	}
+
+	&[disabled="yes"] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 }
 
 tp-multi-select-placeholder {
diff --git a/src/multi-select/tp-multi-select-select-all.ts b/src/multi-select/tp-multi-select-select-all.ts
index 20661bf..488ec0e 100644
--- a/src/multi-select/tp-multi-select-select-all.ts
+++ b/src/multi-select/tp-multi-select-select-all.ts
@@ -26,7 +26,7 @@ export class TPMultiSelectSelectAllElement extends HTMLElement {
 			return;
 		}
 
-		if ( options.length === multiSelect.value.length ) {
+		if ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes').length === multiSelect.value.length ) {
 			this.setAttribute( 'selected', 'yes' );
 			this.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';
 		} else {
diff --git a/src/multi-select/tp-multi-select.ts b/src/multi-select/tp-multi-select.ts
index 10c945a..fbcac5f 100644
--- a/src/multi-select/tp-multi-select.ts
+++ b/src/multi-select/tp-multi-select.ts
@@ -247,7 +247,9 @@ export class TPMultiSelectElement extends HTMLElement {
 		// Select all options.
 		const styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value="${ value }"]` );
 		styledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			option.setAttribute( 'selected', 'yes' );
+			if ( 'yes' !== option.getAttribute( 'disabled' )) {
+				option.setAttribute( 'selected', 'yes' );
+			}
 		} );
 
 		// Search stuff.
@@ -271,7 +273,9 @@ export class TPMultiSelectElement extends HTMLElement {
 	selectAll(): void {
 		const styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );
 		styledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			option.setAttribute( 'selected', 'yes' );
+			if ( 'yes' !== option.getAttribute( 'disabled' )) {
+				option.setAttribute( 'selected', 'yes' );
+			}
 		} );
 
 		this.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );

From 07f4457f8611dcb3f37539f2eef5cb2898710735 Mon Sep 17 00:00:00 2001
From: Deepak Kumar <deepak.kumar852182@gmail.com>
Date: Mon, 11 Dec 2023 12:24:26 +0530
Subject: [PATCH 2/2] fix linting errors

---
 src/multi-select/tp-multi-select-select-all.ts | 2 +-
 src/multi-select/tp-multi-select.ts            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/multi-select/tp-multi-select-select-all.ts b/src/multi-select/tp-multi-select-select-all.ts
index 488ec0e..bbd0f85 100644
--- a/src/multi-select/tp-multi-select-select-all.ts
+++ b/src/multi-select/tp-multi-select-select-all.ts
@@ -26,7 +26,7 @@ export class TPMultiSelectSelectAllElement extends HTMLElement {
 			return;
 		}
 
-		if ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes').length === multiSelect.value.length ) {
+		if ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {
 			this.setAttribute( 'selected', 'yes' );
 			this.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';
 		} else {
diff --git a/src/multi-select/tp-multi-select.ts b/src/multi-select/tp-multi-select.ts
index fbcac5f..581a172 100644
--- a/src/multi-select/tp-multi-select.ts
+++ b/src/multi-select/tp-multi-select.ts
@@ -247,7 +247,7 @@ export class TPMultiSelectElement extends HTMLElement {
 		// Select all options.
 		const styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value="${ value }"]` );
 		styledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			if ( 'yes' !== option.getAttribute( 'disabled' )) {
+			if ( 'yes' !== option.getAttribute( 'disabled' ) ) {
 				option.setAttribute( 'selected', 'yes' );
 			}
 		} );
@@ -273,7 +273,7 @@ export class TPMultiSelectElement extends HTMLElement {
 	selectAll(): void {
 		const styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );
 		styledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			if ( 'yes' !== option.getAttribute( 'disabled' )) {
+			if ( 'yes' !== option.getAttribute( 'disabled' ) ) {
 				option.setAttribute( 'selected', 'yes' );
 			}
 		} );