jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-12 20:40:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add inline-arrow option to ha-select & ha-language-picker (#22935)

Browse Source 
* 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>
This commit is contained in:
Wendelin
2024-11-21 15:44:11 +01:00
committed by GitHub
parent 811977b366
commit 6b0afe6ebb
5 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/ha-select.ts
View File

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