@salesforcedevs/dw-components 1.3.366 → 1.3.377

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.366",
+    "version": "1.3.377",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/setimmediate": "1.0.4",
         "setimmediate": "1.0.5"
     },
-    "gitHead": "879600edad044c730d365d3737f72f9f5eaec399"
+    "gitHead": "e9a71ae9df89246f57650e112b3feb1894baa986"
 }

package/src/modules/dw/languageSelector/languageSelector.css

@@ -0,0 +1,78 @@
+.language-selector {
+    height: 42px;
+    border-radius: 4px;
+    border: 1px solid var(--dx-g-language-picker-font-color);
+    padding-left: 16px;
+    padding-right: 16px;
+    background-color: var(--dx-g-language-picker-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+.language-selector > span {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--dx-g-language-picker-font-color);
+    user-select: none;
+}
+
+dx-icon {
+    --dx-c-icon-color: var(--dx-g-language-picker-font-color);
+
+    pointer-events: none;
+}
+
+.dropdown-options {
+    color: var(--dx-g-language-picker-font-color);
+    display: flex;
+    flex-direction: column;
+    height: 140px;
+    justify-content: space-between;
+    border-radius: 6px;
+    border: 1px solid var(--dx-g-language-picker-font-color);
+    background-color: var(--dx-g-language-picker-background-color);
+}
+
+.dropdown-options > div:first-child {
+    padding-top: 16px;
+}
+
+.dropdown-options > div {
+    padding-left: 16px;
+    height: 41px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    user-select: none;
+}
+
+.option {
+    color: var(--dx-g-language-picker-option-color);
+}
+
+.option:not(.selected) {
+    padding-left: 40px;
+}
+
+.option:not(.selected):hover {
+    background-color: var(--dx-g-language-picker-option-hover-color);
+    cursor: pointer;
+}
+
+.selected {
+    font-weight: 700;
+    display: flex;
+    padding-left: 16px;
+}
+
+.selected dx-icon {
+    --dx-c-icon-color: var(--dx-g-language-picker-checkmark-color);
+
+    padding-top: 5px;
+    padding-right: 5px;
+}

package/src/modules/dw/languageSelector/languageSelector.html

@@ -1,11 +1,36 @@
 <template>
-    <dx-select
-        lwc:if={visible}
-        options={languages}
-        onchange={handleLanguageChange}
-        placement="bottom-end"
-        value={selectedLanguage}
-        disabled={noTranslationsAvailable}
-        loading={loading}
-    ></dx-select>
+    <dx-popover lwc:if={visible} width="140px">
+        <div class="language-selector" slot="control">
+            <span>{selectedLanguage}</span>
+            <dx-icon
+                sprite="general"
+                symbol="chevron-down"
+                size="medium"
+            ></dx-icon>
+        </div>
+        <div class="dropdown-options" slot="content">
+            <div>{placeholder}</div>
+            <template for:each={languages} for:item="option">
+                <template lwc:if={option.isSelected}>
+                    <div class="option selected" key={option.value}>
+                        <dx-icon
+                            sprite="action"
+                            symbol="approval"
+                            size="medium"
+                        ></dx-icon>
+                        <span>{option.label}</span>
+                    </div>
+                </template>
+                <template lwc:else>
+                    <div
+                        class="option"
+                        key={option.value}
+                        onclick={handleLanguageChange}
+                    >
+                        {option.label}
+                    </div>
+                </template>
+            </template>
+        </div>
+    </dx-popover>
 </template>

package/src/modules/dw/languageSelector/languageSelector.ts

@@ -1,6 +1,6 @@
 import { track as trackClick } from "dxUtils/analytics";
 import { api, LightningElement, track } from "lwc";
-import { SelectOption } from "typings/custom";
+import { Option } from "typings/custom";
 
 const ANALYTICS_INFO = {
     element_title: "Select Language",
@@ -11,21 +11,28 @@ const language_local_names_map: any = {
     japanese: "日本語",
     english: "English"
 };
+const DEFAULT = language_local_names_map.english;
 
-const normalizePostLink = (post: {
-    acf: { language: string };
-    link: string;
-}) => {
+interface ACF {
+    language: string;
+}
+
+interface Post {
+    acf: ACF;
+    link?: string;
+}
+
+const normalizePostLink = (post: Post) => {
     switch (post.acf.language) {
         case "japanese":
-            return post.link.replace("/blogs/", "/jpblogs/");
+            return post.link?.replace("/blogs/", "/jpblogs/");
         default:
             return post.link;
     }
 };
 
 export default class LanguageSelector extends LightningElement {
-    @track languages = [] as SelectOption[];
+    @track languages: Option[] = [];
     selectedLanguage?: string;
     loading = true;
     @api postAcf!: string;
@@ -35,6 +42,7 @@ export default class LanguageSelector extends LightningElement {
 
     generateTranslationOptions = async () => {
         const acf = JSON.parse(this.postAcf);
+        this.selectedLanguage = this.getLanguageOrDefaultIfInvalid({ acf });
 
         try {
             const canonicalId = acf?.canonicalid;
@@ -47,25 +55,18 @@ export default class LanguageSelector extends LightningElement {
                 )
             ).json();
 
-            Object.values(alternatePosts).forEach(
-                (post: { acf: { language: string }; link: string }) => {
-                    const localLanguageName =
-                        language_local_names_map[post.acf.language] ||
-                        language_local_names_map.english;
-                    this._languageMap[localLanguageName] =
-                        normalizePostLink(post);
-                }
-            );
+            Object.values(alternatePosts).forEach((post: Post) => {
+                const localLanguageName =
+                    this.getLanguageOrDefaultIfInvalid(post);
+                this._languageMap[localLanguageName] = normalizePostLink(post);
+            });
 
             this.languages = Object.values(alternatePosts).map((post) => {
+                const language = this.getLanguageOrDefaultIfInvalid(post);
                 return {
-                    value:
-                        language_local_names_map[post.acf.language] ||
-                        language_local_names_map.english,
-                    label:
-                        language_local_names_map[post.acf.language] ||
-                        language_local_names_map.english,
-                    disabled: false
+                    id: language,
+                    label: language,
+                    isSelected: language === this.selectedLanguage
                 };
             });
         } catch (e) {
@@ -73,12 +74,12 @@ export default class LanguageSelector extends LightningElement {
         } finally {
             this.loading = false;
         }
-
-        this.selectedLanguage =
-            language_local_names_map[acf?.language] ||
-            language_local_names_map.english;
     };
 
+    private getLanguageOrDefaultIfInvalid(post: Post) {
+        return language_local_names_map[post.acf.language] || DEFAULT;
+    }
+
     connectedCallback() {
         this.generateTranslationOptions();
     }
@@ -87,8 +88,14 @@ export default class LanguageSelector extends LightningElement {
         return !this.loading && !this.noTranslationsAvailable;
     }
 
-    handleLanguageChange(evt: CustomEvent): void {
-        const selectedLanguage = evt.detail.value;
+    get placeholder() {
+        return this.selectedLanguage === language_local_names_map.english
+            ? "Language"
+            : "言語";
+    }
+
+    handleLanguageChange(evt: Event): void {
+        const selectedLanguage = evt.target.innerHTML;
         const url = this._languageMap[selectedLanguage];
         trackClick(this.template.activeElement!, "custEv_ctaButtonClick", {
             ...ANALYTICS_INFO,