@designcrowd/library.brand-page 5.18.2 → 5.18.3-actionable-buttons-2

package/src/brand-page-maker/constants/i18n/constants.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "modern",
     "uniqueDisplayName": "unique",
     "allFontStylesDisplayName": "All font styles",
+    "searchFontsPlaceholder": "Search fonts",
+    "noFontsFoundMessage": "No fonts found",
     "settingsSaveSuccessMessage": "Settings saved successfully"
   }
 }

package/src/brand-page-maker/constants/i18n/constants.pt-BR.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "moderno",
     "uniqueDisplayName": "único",
     "allFontStylesDisplayName": "Todos os estilos de fonte",
+    "searchFontsPlaceholder": "Pesquisar fontes",
+    "noFontsFoundMessage": "Não foram encontradas fontes",
     "settingsSaveSuccessMessage": "Definições salvas com sucesso"
   }
 }

package/src/brand-page-maker/constants/i18n/constants.pt-PT.json

@@ -12,6 +12,8 @@
     "modernDisplayName": "moderno",
     "uniqueDisplayName": "único",
     "allFontStylesDisplayName": "Todos os estilos de letra",
+    "searchFontsPlaceholder": "Procurar tipos de letra",
+    "noFontsFoundMessage": "Nenhum tipo de letra encontrado",
     "settingsSaveSuccessMessage": "Definições guardadas com sucesso"
   }
 }

package/src/bundles/bundled-translations.de-DE.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "modern",
     "uniqueDisplayName": "einzigartig",
     "allFontStylesDisplayName": "Alle Schriftstile",
+    "searchFontsPlaceholder": "Schriftarten durchsuchen",
+    "noFontsFoundMessage": "Keine Schriftarten gefunden",
     "settingsSaveSuccessMessage": "Einstellungen wurden erfolgreich gespeichert"
   },
   "converter": {

package/src/bundles/bundled-translations.es-ES.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "moderna",
     "uniqueDisplayName": "única",
     "allFontStylesDisplayName": "Todos los estilos de fuente",
+    "searchFontsPlaceholder": "Busca fuentes",
+    "noFontsFoundMessage": "No se encontraron fuentes",
     "settingsSaveSuccessMessage": "La configuración se ha guardado correctamente"
   },
   "converter": {

package/src/bundles/bundled-translations.fr-CA.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "Moderne",
     "uniqueDisplayName": "Unique",
     "allFontStylesDisplayName": "Tous les styles de police",
+    "searchFontsPlaceholder": "Rechercher des polices",
+    "noFontsFoundMessage": "Aucune police trouvée",
     "settingsSaveSuccessMessage": "Paramètres enregistrés avec succès"
   },
   "converter": {

package/src/bundles/bundled-translations.fr-FR.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "Moderne",
     "uniqueDisplayName": "Unique",
     "allFontStylesDisplayName": "Tous les styles de police",
+    "searchFontsPlaceholder": "Rechercher des polices",
+    "noFontsFoundMessage": "Aucune police trouvée",
     "settingsSaveSuccessMessage": "Paramètres enregistrés avec succès"
   },
   "converter": {

package/src/bundles/bundled-translations.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "modern",
     "uniqueDisplayName": "unique",
     "allFontStylesDisplayName": "All font styles",
+    "searchFontsPlaceholder": "Search fonts",
+    "noFontsFoundMessage": "No fonts found",
     "settingsSaveSuccessMessage": "Settings saved successfully"
   },
   "converter": {

package/src/bundles/bundled-translations.pt-BR.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "moderno",
     "uniqueDisplayName": "único",
     "allFontStylesDisplayName": "Todos os estilos de fonte",
+    "searchFontsPlaceholder": "Pesquisar fontes",
+    "noFontsFoundMessage": "Não foram encontradas fontes",
     "settingsSaveSuccessMessage": "Definições salvas com sucesso"
   },
   "converter": {

package/src/bundles/bundled-translations.pt-PT.json

@@ -1230,6 +1230,8 @@
     "modernDisplayName": "moderno",
     "uniqueDisplayName": "único",
     "allFontStylesDisplayName": "Todos os estilos de letra",
+    "searchFontsPlaceholder": "Procurar tipos de letra",
+    "noFontsFoundMessage": "Nenhum tipo de letra encontrado",
     "settingsSaveSuccessMessage": "Definições guardadas com sucesso"
   },
   "converter": {

package/src/plugins/google-maps-plugin/google-maps-plugin.ts

@@ -10,7 +10,6 @@ const DELAY_MS = 100;
 const MAP_MODE_PLACE = 'place';
 const SCRIPT_TAG_NAME = 'SCRIPT';
 
-export const PLACE_CHANGED = 'place_changed';
 export const PLACE_ID_QUERY_PREFIX = 'place_id:';
 
 export interface GoogleMapsPluginOptions {
@@ -24,6 +23,11 @@ export interface GetEmbedGoogleMapsOptions {
   readonly locale?: string;
 }
 
+export interface AddressDetails {
+  readonly formattedAddress: string;
+  readonly placeId: string;
+}
+
 export class GoogleMapsPlugin {
   private initialised = false;
   private initialising = false;
@@ -51,23 +55,30 @@ export class GoogleMapsPlugin {
 
       const url = this.getGoogleScriptUrl();
 
-      let googleMapsScript: HTMLScriptElement | undefined;
-
-      googleMapsScript = Array.from(document.head.children).find(
+      const existingScript = Array.from(document.head.children).find(
         (c): c is HTMLScriptElement =>
           c.tagName.toUpperCase() === SCRIPT_TAG_NAME &&
           c.hasAttribute('src') &&
           c.getAttribute('src') === url,
       );
 
-      if (googleMapsScript) {
-        return;
+      if (!existingScript) {
+        document.head.appendChild(this.createGoogleMapsScriptElement(url));
       }
 
-      googleMapsScript = this.createGoogleMapsScriptElement(url);
-      document.head.appendChild(googleMapsScript);
-
-      while (typeof google !== 'object') {
+      // Wait for the specific class we use. The `places` library loads eagerly
+      // via the `libraries=places` script param, so the new Places classes are
+      // on the `google.maps.places` namespace once ready. We avoid
+      // `importLibrary` (absent in some hosts that already loaded Maps).
+      //
+      // `typeof google === 'undefined'` must be checked first and on its own:
+      // `typeof` only suppresses ReferenceError for a bare identifier, so
+      // touching `google.maps` while `google` is still undeclared (before the
+      // script executes) throws "google is not defined".
+      while (
+        typeof google === 'undefined' ||
+        typeof google.maps?.places?.PlaceAutocompleteElement !== 'function'
+      ) {
         await delayInMS(DELAY_MS);
       }
 
@@ -77,23 +88,52 @@ export class GoogleMapsPlugin {
     }
   }
 
-  async createAutoCompleteWidget(
-    input: HTMLInputElement,
-    options?: google.maps.places.AutocompleteOptions,
-  ): Promise<google.maps.places.Autocomplete> {
+  private async getPlacesLibrary(): Promise<google.maps.PlacesLibrary> {
     await this.initialise();
 
     while (!this.initialised) {
       await delayInMS(DELAY_MS);
     }
 
-    const autoComplete = new google.maps.places.Autocomplete(input, options);
+    return google.maps.places as unknown as google.maps.PlacesLibrary;
+  }
+
+  /**
+   * Creates Google's official Places Autocomplete widget (new Places API).
+   * It renders its own input + dropdown with built-in icons, formatting,
+   * keyboard/a11y support and the required "Powered by Google" attribution,
+   * and manages session tokens internally. Listen for `gmp-select` to read the
+   * chosen prediction, then pass it to {@link fetchAddressDetails}.
+   */
+  async createPlaceAutocompleteElement(
+    options?: google.maps.places.PlaceAutocompleteElementOptions,
+  ): Promise<google.maps.places.PlaceAutocompleteElement> {
+    const { PlaceAutocompleteElement } = await this.getPlacesLibrary();
+
+    return new PlaceAutocompleteElement({
+      requestedLanguage: this._options.locale,
+      ...options,
+    });
+  }
+
+  async fetchAddressDetails(
+    prediction: google.maps.places.PlacePrediction,
+  ): Promise<AddressDetails | undefined> {
+    const place = prediction.toPlace();
 
     // NOTE: additional fields may incur a charge, check before adding a new field
     // See https://developers.google.com/maps/billing-and-pricing/pricing#basic-data for more information
-    autoComplete.setFields(['formatted_address', 'place_id']);
+    // The widget's session token is included automatically on this first fetch.
+    await place.fetchFields({ fields: ['formattedAddress', 'id'] });
+
+    if (!place.formattedAddress || !place.id) {
+      return undefined;
+    }
 
-    return autoComplete;
+    return {
+      formattedAddress: place.formattedAddress,
+      placeId: place.id,
+    };
   }
 
   private createGoogleMapsScriptElement(url: string): HTMLScriptElement {
@@ -109,7 +149,7 @@ export class GoogleMapsPlugin {
   }
 
   private getGoogleScriptUrl(): string {
-    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places`;
+    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places&loading=async`;
 
     return this._options.locale
       ? `${baseUrl}&language=${this._options.locale}`

package/src/shared/content-settings/components/google-address-field/GoogleAddressField.vue

@@ -1,24 +1,157 @@
 <template>
   <div data-component="google-address-field" class="tw-w-full">
-    <input
-      ref="pacinput"
-      :placeholder="googleAddressFieldTr('addressPlaceholder')"
-      class="tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner tw-border-grayscale-500 focus:tw-border-grayscale-600 tw-rounded tw-py-2"
-    />
-    <p v-if="isErrorVisible" class="tw-text-error-500 tw-text-sm tw-mt-2">
+    <div ref="containerEl" data-test-address-autocomplete />
+    <p
+      v-if="errorMessage && !isValid"
+      class="tw-text-error-500 tw-text-sm tw-mt-2"
+    >
       {{ errorMessage }}
     </p>
   </div>
 </template>
-<script>
-import AddressFieldMixin from './GoogleAddressField.mixin.ts';
-import { googleAddressFieldTr } from '@src/composables/useTranslate';
-
-export default {
-  components: {},
-  mixins: [AddressFieldMixin],
-  setup() {
-    return { googleAddressFieldTr };
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+} from 'vue';
+import type { PropType } from 'vue';
+import type { Address } from '@brand-page';
+import type { ContentItemFieldSettings } from '../../models';
+import {
+  getCurrentLocale,
+  googleAddressFieldTr,
+} from '@src/composables/useTranslate';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: Object as PropType<Address>,
+    required: false,
+    default: undefined,
   },
+  settings: {
+    type: Object as PropType<ContentItemFieldSettings>,
+    required: true,
+  },
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [
+    payload: { id: string; name: string; type: 'map'; value: Address },
+  ];
+}>();
+
+const gmap = getCurrentInstance()!.appContext.config.globalProperties.$gmap;
+
+const containerEl = ref<HTMLElement>();
+const errorMessage = computed(() => props.settings?.errorMessage);
+const isValid = computed(() => props.settings?.isValid);
+
+let element: google.maps.places.PlaceAutocompleteElement | undefined;
+
+const handleSelect = async (
+  prediction: google.maps.places.PlacePrediction,
+): Promise<void> => {
+  const details = await gmap.fetchAddressDetails(prediction);
+
+  if (!details) {
+    return;
+  }
+
+  emit('update:modelValue', {
+    id: props.id,
+    name: props.name,
+    type: 'map',
+    value: details,
+  });
 };
+
+// Typed as Event so the same reference is removable; the runtime payload is a
+// PlacePredictionSelectEvent.
+const onSelect = (event: Event): void => {
+  const { placePrediction } =
+    event as google.maps.places.PlacePredictionSelectEvent;
+
+  void handleSelect(placePrediction);
+};
+
+// Same classes as the shared content-settings text input, applied to the
+// widget's host element so it matches our other fields across all brand themes
+// (the grayscale tokens resolve per theme — no hardcoded colours). The widget's
+// own `:host` border is lower priority than these document-level utilities.
+const HOST_INPUT_CLASSES = [
+  'tw-block',
+  'tw-w-full',
+  'tw-box-border',
+  'tw-bg-white',
+  'tw-text-base',
+  'tw-text-grayscale-600',
+  'tw-border',
+  'tw-border-solid',
+  'tw-border-grayscale-500',
+  'focus-within:tw-border-grayscale-600',
+  'tw-rounded',
+  'tw-px-4',
+  'tw-py-2',
+  'tw-shadow-inner',
+  'tw-transition-colors',
+  'tw-duration-300',
+  'tw-ease-out',
+];
+
+onMounted(async () => {
+  element = await gmap.createPlaceAutocompleteElement({
+    value: props.value?.formattedAddress ?? '',
+    placeholder: googleAddressFieldTr('addressPlaceholder'),
+    requestedLanguage: getCurrentLocale(),
+    // Drop the widget's built-in search icon and clear button for a plain
+    // input that matches our design system.
+    noInputIcon: true,
+    noClearButton: true,
+  });
+
+  element.classList.add(...HOST_INPUT_CLASSES);
+  element.addEventListener('gmp-select', onSelect);
+  containerEl.value?.appendChild(element);
+});
+
+onBeforeUnmount(() => {
+  element?.removeEventListener('gmp-select', onSelect);
+});
 </script>
+<style>
+/* The widget renders its own input inside a closed shadow DOM. We style the box
+   on the host via Tailwind classes (see HOST_INPUT_CLASSES) and normalise the
+   exposed parts here:
+   - force the light theme (the widget otherwise follows the OS color-scheme and
+     renders dark inside our always-light panel);
+   - make the inner input inherit the host's font/colour and drop its own
+     padding (the host provides px-4/py-2);
+   - hide the widget's focus-ring so focus is shown by the host border darkening,
+     matching our other inputs. */
+[data-component='google-address-field'] gmp-place-autocomplete {
+  color-scheme: light;
+}
+
+[data-component='google-address-field'] gmp-place-autocomplete::part(input) {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+[data-component='google-address-field']
+  gmp-place-autocomplete::part(focus-ring) {
+  display: none;
+}
+</style>

package/src/shared/font-family-selector/FontPicker.vue

@@ -27,6 +27,33 @@
       }"
     >
       <div :class="{ 'tw-px-4 tw-py-3': !panelOnly }">
+        <div
+          class="tw-mb-3 tw-flex tw-h-10 tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-solid tw-border-grayscale-500 tw-bg-white tw-px-3"
+        >
+          <Icon
+            name="search"
+            size="sm"
+            class="tw-shrink-0 tw-text-grayscale-600"
+          />
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="SEARCH_FONTS_PLACEHOLDER"
+            :aria-label="SEARCH_FONTS_PLACEHOLDER"
+            data-test-tag="font-search-input"
+            class="tw-min-w-0 tw-flex-auto tw-border-0 tw-bg-transparent tw-p-0 tw-text-base tw-text-secondary-500 tw-outline-none placeholder:tw-text-grayscale-600 placeholder:tw-opacity-50"
+            @focus="closeCategoryMenu"
+            @keydown.enter.prevent.stop="onSearchEnter"
+            @keydown.esc="onSearchEscape"
+          />
+          <Icon
+            v-show="searchQuery"
+            name="close"
+            size="sm"
+            class="tw-shrink-0 tw-cursor-pointer tw-text-grayscale-600"
+            @click="searchQuery = ''"
+          />
+        </div>
         <Dropdown
           ref="categoryDropdownRef"
           class="tw-w-full tw-pb-3"
@@ -50,9 +77,16 @@
           ref="fontListRef"
           class="font-list tw-max-h-[340px] tw-overflow-y-auto"
         >
+          <div
+            v-if="!filteredFontOptions.length"
+            class="tw-py-3 tw-text-center tw-text-sm tw-text-secondary-200"
+          >
+            {{ NO_FONTS_FOUND_MESSAGE }}
+          </div>
           <DropdownItem
             v-for="option in filteredFontOptions"
             :key="option.key"
+            class="font-list-item"
             :data-test-font="option.key"
             @click="onFontClick(option)"
           >
@@ -116,8 +150,11 @@ const emit = defineEmits<{
 const categoryDropdownRef = ref<InstanceType<typeof Dropdown> | null>(null);
 const fontListRef = ref<HTMLElement | null>(null);
 const isPanelOpen = ref(false);
+const searchQuery = ref('');
 
 const ALL_FONT_STYLES_LABEL = constantsTr('allFontStylesDisplayName');
+const SEARCH_FONTS_PLACEHOLDER = constantsTr('searchFontsPlaceholder');
+const NO_FONTS_FOUND_MESSAGE = constantsTr('noFontsFoundMessage');
 
 const fontCategories = computed(() => Object.values(FONT_FAMILY_CATEGORIES()));
 
@@ -147,11 +184,26 @@ const sortedFontOptions = computed(() =>
   ),
 );
 
+// Normalize each font name once (query-independent) so the per-keystroke
+// filter only does a cheap substring check.
+const searchableFontOptions = computed(() =>
+  sortedFontOptions.value.map((option) => ({
+    option,
+    searchName: stripQuotes(FONT_FAMILY_CONFIGS[option.key].name).toLowerCase(),
+  })),
+);
+
 const filteredFontOptions = computed(() => {
-  if (!selectedCategory.value) return sortedFontOptions.value;
-  return sortedFontOptions.value.filter((option) =>
-    option.categories.includes(selectedCategory.value!),
-  );
+  const query = searchQuery.value.trim().toLowerCase();
+  return searchableFontOptions.value
+    .filter(({ option, searchName }) => {
+      const matchesCategory =
+        !selectedCategory.value ||
+        option.categories.includes(selectedCategory.value);
+      const matchesQuery = !query || searchName.includes(query);
+      return matchesCategory && matchesQuery;
+    })
+    .map(({ option }) => option);
 });
 
 function scrollToSelectedFont(): void {
@@ -174,6 +226,7 @@ function scrollToSelectedFont(): void {
 watch(isPanelOpen, (open) => {
   if (open) {
     selectedCategory.value = null;
+    searchQuery.value = '';
     scrollToSelectedFont();
   }
 });
@@ -183,6 +236,7 @@ watch(fontListRef, (list, _old, onCleanup) => {
   const observer = new IntersectionObserver((entries) => {
     if (entries[0].isIntersecting) {
       selectedCategory.value = null;
+      searchQuery.value = '';
       scrollToSelectedFont();
     }
   });
@@ -204,11 +258,32 @@ function onSelectCategory(category: FontFamilyCategory | null): void {
   scrollToSelectedFont();
 }
 
+// Close the category list when the user engages the search field (BP-5732).
+function closeCategoryMenu(): void {
+  categoryDropdownRef.value?.hideMenu();
+}
+
 function onFontClick(option: StyleTextFontFamilyOption): void {
   closePanel();
   emit('on-select', option);
 }
 
+// Enter selects the first match (same path as clicking it).
+function onSearchEnter(): void {
+  const [firstOption] = filteredFontOptions.value;
+  if (firstOption) onFontClick(firstOption);
+}
+
+// Escape clears the query first; a second Escape closes the panel
+// (sidebar mode — the RTE dropdown handles its own dismissal).
+function onSearchEscape(): void {
+  if (searchQuery.value) {
+    searchQuery.value = '';
+  } else {
+    closePanel();
+  }
+}
+
 defineExpose({ hideMenu: closePanel });
 </script>
 <style scoped>
@@ -220,4 +295,16 @@ defineExpose({ hideMenu: closePanel });
 .font-list::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera */
 }
+
+/*
+ * Skip layout + paint for off-screen rows. Each row renders an inline-SVG
+ * preview; with ~130 rows this defers the bulk of the open-time cost to
+ * only the visible window. Rows are uniform height, so the intrinsic-size
+ * estimate keeps the scrollbar and scrollToSelectedFont accurate. Nodes
+ * stay in the DOM, so find-in-page / a11y / selectors are unaffected.
+ */
+.font-list-item {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 36px;
+}
 </style>