DEV: adds support for lang attribute in select-kit (#11741)

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -58,6 +58,7 @@ export default Component.extend(
     multiSelect: false,
     labelProperty: null,
     titleProperty: null,
+    langProperty: null,
 
     init() {
       this._super(...arguments);
@@ -79,6 +80,7 @@ export default Component.extend(
           nameProperty: this.nameProperty,
           labelProperty: this.labelProperty,
           titleProperty: this.titleProperty,
+          langProperty: this.langProperty,
           options: EmberObject.create(),
 
           isLoading: false,

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js

@@ -5,6 +5,7 @@ import UtilsMixin from "select-kit/mixins/utils";
 import { guidFor } from "@ember/object/internals";
 import layout from "select-kit/templates/components/select-kit/select-kit-row";
 import { makeArray } from "discourse-common/lib/helpers";
+import { reads } from "@ember/object/computed";
 
 export default Component.extend(UtilsMixin, {
   layout,
@@ -18,6 +19,7 @@ export default Component.extend(UtilsMixin, {
     "rowName:data-name",
     "ariaLabel:aria-label",
     "guid:data-guid",
+    "rowLang:lang",
   ],
   classNameBindings: [
     "isHighlighted",
@@ -47,6 +49,8 @@ export default Component.extend(UtilsMixin, {
     return guidFor(this.item);
   }),
 
+  lang: reads("item.lang"),
+
   ariaLabel: computed("item.ariaLabel", "title", function () {
     return this.getProperty(this.item, "ariaLabel") || this.title;
   }),
@@ -82,6 +86,7 @@ export default Component.extend(UtilsMixin, {
       rowValue: this.getValue(this.item),
       rowLabel: this.getProperty(this.item, "labelProperty"),
       rowTitle: this.getProperty(this.item, "titleProperty"),
+      rowLang: this.getProperty(this.item, "langProperty"),
     });
   },
 

app/assets/javascripts/select-kit/addon/components/selected-name.js

@@ -3,12 +3,16 @@ import Component from "@ember/component";
 import UtilsMixin from "select-kit/mixins/utils";
 import layout from "select-kit/templates/components/selected-name";
 import { makeArray } from "discourse-common/lib/helpers";
+import { reads } from "@ember/object/computed";
 
 export default Component.extend(UtilsMixin, {
   tagName: "",
   layout,
   name: null,
   value: null,
+  headerTitle: null,
+  headerLang: null,
+  headerLabel: null,
 
   @action
   onSelectedNameClick() {
@@ -25,12 +29,15 @@ export default Component.extend(UtilsMixin, {
     this.setProperties({
       headerLabel: this.getProperty(this.item, "labelProperty"),
       headerTitle: this.getProperty(this.item, "titleProperty"),
+      headerLang: this.getProperty(this.item, "langProperty"),
       name: this.getName(this.item),
       value:
         this.item === this.selectKit.noneItem ? null : this.getValue(this.item),
     });
   },
 
+  lang: reads("headerLang"),
+
   ariaLabel: computed("item", "sanitizedTitle", function () {
     return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
   }),