From 6b0afe6ebb31d414515d530541d745c865d2aa26 Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:44:11 +0100
Subject: [PATCH] Add inline-arrow option to ha-select & ha-language-picker
 (#22935)

* Add inline-arrow option to ha-select & use it in some language pickers

* Update src/components/ha-language-picker.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 landing-page/src/ha-landing-page.ts  |  1 +
 src/auth/ha-authorize.ts             |  1 +
 src/components/ha-language-picker.ts |  3 +++
 src/components/ha-select.ts          | 30 ++++++++++++++++++++++++++++
 src/onboarding/ha-onboarding.ts      |  1 +
 5 files changed, 36 insertions(+)

diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts
index 34ac09f434..7c5f058b15 100644
--- a/landing-page/src/ha-landing-page.ts
+++ b/landing-page/src/ha-landing-page.ts
@@ -66,6 +66,7 @@ class HaLandingPage extends LandingPageBaseElement {
           .label=${""}
           nativeName
           @value-changed=${this._languageChanged}
+          inlineArrow
         ></ha-language-picker>
         <a
           href="https://www.home-assistant.io/getting-started/onboarding/"
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index 7da3c57e58..030019eba6 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -204,6 +204,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           .label=${""}
           nativeName
           @value-changed=${this._languageChanged}
+          inlineArrow
         ></ha-language-picker>
         <a
           href="https://www.home-assistant.io/docs/authentication/"
diff --git a/src/components/ha-language-picker.ts b/src/components/ha-language-picker.ts
index ee641865b2..d475f1eda8 100644
--- a/src/components/ha-language-picker.ts
+++ b/src/components/ha-language-picker.ts
@@ -31,6 +31,8 @@ export class HaLanguagePicker extends LitElement {
 
   @property({ type: Boolean }) public noSort = false;
 
+  @property({ type: Boolean }) public inlineArrow = false;
+
   @state() _defaultLanguages: string[] = [];
 
   @query("ha-select") private _select!: HaSelect;
@@ -144,6 +146,7 @@ export class HaLanguagePicker extends LitElement {
         @closed=${stopPropagation}
         fixedMenuPosition
         naturalMenuWidth
+        .inlineArrow=${this.inlineArrow}
       >
         ${languageOptions.length === 0
           ? html`<ha-list-item value=""
diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts
index 6a78155694..96ea190fcf 100644
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@@ -14,6 +14,8 @@ export class HaSelect extends SelectBase {
 
   @property({ type: Boolean, reflect: true }) public clearable = false;
 
+  @property({ type: Boolean }) public inlineArrow = false;
+
   protected override render() {
     return html`
       ${super.render()}
@@ -42,6 +44,31 @@ export class HaSelect extends SelectBase {
     window.addEventListener("translations-updated", this._translationsUpdated);
   }
 
+  protected async firstUpdated() {
+    super.firstUpdated();
+
+    if (this.inlineArrow) {
+      this.shadowRoot
+        ?.querySelector(".mdc-select__selected-text-container")
+        ?.classList.add("inline-arrow");
+    }
+  }
+
+  protected updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("inlineArrow")) {
+      const textContainerElement = this.shadowRoot?.querySelector(
+        ".mdc-select__selected-text-container"
+      );
+      if (this.inlineArrow) {
+        textContainerElement?.classList.add("inline-arrow");
+      } else {
+        textContainerElement?.classList.remove("inline-arrow");
+      }
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener(
@@ -114,6 +141,9 @@ export class HaSelect extends SelectBase {
         inset-inline-end: 28px;
         direction: var(--direction);
       }
+      .inline-arrow {
+        flex-grow: 0;
+      }
     `,
   ];
 }
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index 29d500480b..2a0677dfe0 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -142,6 +142,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
           .label=${""}
           nativeName
           @value-changed=${this._languageChanged}
+          inlineArrow
         ></ha-language-picker>
         <a
           href="https://www.home-assistant.io/getting-started/onboarding/"