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

@@ -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/"

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/"

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=""

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;
+      }
     `,
   ];
 }

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/"