@descope-ui/descope-address-field 0.0.1

package/src/component/descope-address-field-internal/AddressFieldInternal.js

@@ -0,0 +1,139 @@
+import { createBaseInputClass } from '@descope-ui/common/base-classes';
+import {
+  getComponentName,
+  forwardAttrs,
+  syncAttrs,
+} from '@descope-ui/common/components-helpers';
+import { connectorMixin } from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+import { GoogleMapsConnector, RadarConnector } from '../../connectors';
+
+export const componentName = getComponentName('address-field-internal');
+
+const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
+const RADAR_CONNECTOR_TEMPLATE = 'radar';
+
+const CONNECTOR_CLASSES = {
+  [GOOGLE_MAPS_CONNECTOR_TEMPLATE]: GoogleMapsConnector,
+  [RADAR_CONNECTOR_TEMPLATE]: RadarConnector,
+};
+
+const BaseInputClass = createBaseInputClass({
+  componentName,
+  baseSelector: '',
+});
+const initConnectorAttrs = ['public-api-key'];
+const observedAttrs = [...initConnectorAttrs];
+
+class RawAddressFieldInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], observedAttrs);
+  }
+
+  get errorMsgValueMissing() {
+    return (
+      this.getAttribute('data-errormessage-value-missing') ||
+      this.defaultErrorMsgValueMissing
+    );
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+        user-select: none;
+        max-width: 100%;
+      }
+
+      :host ::slotted {
+        padding: 0;
+      }
+    </style>
+    <div>
+      <descope-autocomplete-field></descope-autocomplete-field>
+    </div>
+    `;
+
+    this.autocompleteField = this.querySelector('descope-autocomplete-field');
+  }
+
+  get value() {
+    return this.autocompleteField.value;
+  }
+
+  set value(val) {
+    this.autocompleteField.value = val;
+  }
+
+  focus() {
+    this.autocompleteField.focus();
+  }
+
+  init() {
+    // This event listener needs to be placed before the super.init() call
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.autocompleteField.focus();
+    });
+
+    super.init?.();
+    this.initAutocomplete();
+  }
+
+  initAutocomplete() {
+    forwardAttrs(this, this.autocompleteField, {
+      includeAttrs: [
+        'size',
+        'bordered',
+        'label',
+        'label-type',
+        'placeholder',
+        'disabled',
+        'readonly',
+        'required',
+        'full-width',
+        'helper-text',
+        'error-message',
+        'default-value',
+        'data-errormessage-value-missing',
+        'st-host-direction',
+        'allow-custom-value',
+        'min-search-length',
+        'st-error-message-icon',
+        'st-error-message-icon-size',
+        'st-error-message-icon-padding',
+      ],
+    });
+    // This is required since when we remove the invalid attribute from the autocomplete field,
+    // we want to reflect the change in the address field component
+    syncAttrs(this, this.autocompleteField, { includeAttrs: ['invalid'] });
+
+    // Bind the connector fetch results fn to the autocomplete field
+    this.autocompleteField.fetchResults = this.fetchConnectorResults.bind(this);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (initConnectorAttrs.includes(attrName)) {
+        this.initializeConnector();
+      }
+    }
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    return { valid: true };
+  }
+}
+
+export const AddressFieldInternal = compose(
+  connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
+)(RawAddressFieldInternal);

package/src/component/descope-address-field-internal/index.js

@@ -0,0 +1,3 @@
+import { AddressFieldInternal, componentName } from './AddressFieldInternal';
+
+customElements.define(componentName, AddressFieldInternal);

package/src/component/index.js

@@ -0,0 +1,9 @@
+import '@vaadin/custom-field';
+import '@descope-ui/descope-autocomplete-field';
+import './descope-address-field-internal';
+
+import { componentName, AddressFieldClass } from './AddressFieldClass';
+
+customElements.define(componentName, AddressFieldClass);
+
+export { AddressFieldClass, componentName };

package/src/connectors/google.js

@@ -0,0 +1,119 @@
+/* global google */
+
+import {
+  createBaseConnectorClass,
+  CONNECTOR_ERRORS,
+} from '@descope-ui/common/base-classes';
+import { initGoogleMapsLoader } from './googleScriptInit';
+
+export class GoogleMapsConnector extends createBaseConnectorClass() {
+  #autocompleteService = null;
+
+  #initializationPromise = null;
+
+  constructor(getAttribute) {
+    super(getAttribute);
+    // Start initialization but don't block constructor
+    this.#initializationPromise = this.#initializeAutocompleteService();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getRequiredParams() {
+    return ['public-api-key'];
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getOptionalParams() {
+    return [
+      {
+        key: 'includedPrimaryTypes',
+        attribute: 'address-types',
+      },
+      {
+        key: 'language',
+        attribute: 'address-language',
+      },
+      {
+        key: 'region',
+        attribute: 'address-region',
+      },
+    ];
+  }
+
+  async #initializeAutocompleteService() {
+    const apiKey = this.getAttribute('public-api-key');
+    if (this.#autocompleteService || !apiKey) {
+      return;
+    }
+
+    try {
+      initGoogleMapsLoader(apiKey);
+
+      const { AutocompleteSuggestion } =
+        await google.maps.importLibrary('places');
+      this.#autocompleteService = AutocompleteSuggestion;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Failed to initialize Google Maps Autocomplete service:',
+        error,
+      );
+      throw error;
+    }
+  }
+
+  async _fetchResults(query) {
+    if (!query?.trim()) {
+      return { results: [] };
+    }
+
+    try {
+      await this.#initializationPromise;
+
+      const request = {
+        input: query,
+      };
+
+      // Add optional parameters
+      this.getOptionalParams().forEach(({ attribute, key, defaultValue }) => {
+        const value = this.getAttribute(attribute) || defaultValue;
+        if (value) {
+          if (key === 'includedPrimaryTypes') {
+            request[key] = value
+              .split(',')
+              .map((type) => type.trim())
+              .filter(Boolean);
+          } else {
+            request[key] = value;
+          }
+        }
+      });
+
+      const { suggestions } =
+        await this.#autocompleteService.fetchAutocompleteSuggestions(request);
+      return this.#parseResponse(suggestions);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Google Maps Places Autocomplete failed:', error);
+      return { results: [], error: CONNECTOR_ERRORS.FETCH_RESULTS_ERROR };
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #parseResponse(suggestions) {
+    if (!suggestions?.length) {
+      return { results: [] };
+    }
+
+    return {
+      results: suggestions.map((suggestion) => {
+        const prediction = suggestion.placePrediction;
+        return {
+          id: prediction.placeId,
+          label: prediction.text.text,
+          value: prediction.text.text,
+        };
+      }),
+    };
+  }
+}

package/src/connectors/googleScriptInit.js

@@ -0,0 +1,12 @@
+export const initGoogleMapsLoader = (apiKey) => {
+  if (window.google?.maps) {
+    return;
+  }
+
+  /* eslint-disable */
+  // prettier-ignore
+  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+    key: apiKey,
+  });
+  /* eslint-enable */
+};

package/src/connectors/index.js

@@ -0,0 +1,2 @@
+export { GoogleMapsConnector } from './google';
+export { RadarConnector } from './radar';

package/src/connectors/radar.js

@@ -0,0 +1,100 @@
+import {
+  createBaseConnectorClass,
+  CONNECTOR_ERRORS,
+} from '@descope-ui/common/base-classes';
+
+const RADAR_AUTOCOMPLETE_URL = 'https://api.radar.io/v1/search/autocomplete';
+
+export class RadarConnector extends createBaseConnectorClass() {
+  // eslint-disable-next-line class-methods-use-this
+  getRequiredParams() {
+    return ['public-api-key'];
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getOptionalParams() {
+    return [
+      {
+        key: 'layers',
+        attribute: 'address-types',
+      },
+      {
+        key: 'limit',
+        attribute: 'address-limit',
+      },
+      {
+        key: 'lang',
+        attribute: 'address-language',
+      },
+      {
+        key: 'countryCode',
+        attribute: 'address-region',
+      },
+    ];
+  }
+
+  async _fetchResults(query) {
+    if (!query?.trim()) {
+      return { results: [] };
+    }
+
+    const apiKey = this.getAttribute('public-api-key');
+    const params = new URLSearchParams({
+      query: query.trim(),
+    });
+
+    // Add optional parameters
+    this.getOptionalParams().forEach(({ attribute, key, defaultValue }) => {
+      const value = this.getAttribute(attribute) || defaultValue;
+      if (value) {
+        if (key === 'layers' || key === 'countryCode') {
+          params.append(
+            key,
+            value
+              .split(',')
+              .map((type) => type.trim())
+              .filter(Boolean)
+              .join(','),
+          );
+        } else {
+          params.append(key, value);
+        }
+      }
+    });
+
+    try {
+      const response = await fetch(
+        `${RADAR_AUTOCOMPLETE_URL}?${params.toString()}`,
+        {
+          headers: {
+            Authorization: apiKey,
+          },
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`Radar API returned ${response.status}`);
+      }
+
+      const data = await response.json();
+      return this.#parseResponse(data);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Radar Places Autocomplete failed:', error);
+      return { results: [], error: CONNECTOR_ERRORS.FETCH_RESULTS_ERROR };
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #parseResponse(data) {
+    if (!data?.addresses?.length) {
+      return { results: [] };
+    }
+    return {
+      results: data.addresses.map((address) => ({
+        label: address.formattedAddress,
+        value: address.formattedAddress,
+      })),
+    };
+  }
+}

package/src/theme.js

@@ -0,0 +1,16 @@
+import { AddressFieldClass } from './component/AddressFieldClass';
+import { refs } from '@descope-ui/theme-input-wrapper';
+
+const vars = AddressFieldClass.cssVarList;
+
+const addressField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default addressField;
+export { vars };

package/stories/descope-address-field.stories.js

@@ -0,0 +1,166 @@
+import { componentName } from '../src/component';
+import { withForm } from '@descope-ui/common/sb-helpers';
+import { createBaseConnectorClass } from '@descope-ui/common/base-classes';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+} from '@descope-ui/common/sb-controls';
+import { MockConnector, MOCK_CONNECTOR_TEMPLATE } from './mockConnector';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  'default-value': defaultValue,
+  'full-width': fullWidth,
+  'label-type': labelType,
+  'data-errormessage-value-missing': customErrorMessage,
+  'allow-custom-value': allowCustomValue,
+  'min-search-length': minSearchLength,
+  'connector-template': connectorTemplate,
+  'public-api-key': apiKey,
+  'address-types': addressTypes,
+  'address-language': addressLanguage,
+  'address-region': addressRegion,
+  'address-limit': addressLimit,
+  errorMsgIcon,
+}) => {
+  const addMockConnectorScript = `
+  <script>
+    const createBaseConnectorClass = ${createBaseConnectorClass};
+    setTimeout(() => {
+      const addressField = document.querySelector("descope-address-field");
+      if (addressField) {
+        addressField.connectorClasses = {
+          ...addressField.connectorClasses,
+          "${MOCK_CONNECTOR_TEMPLATE}": ${MockConnector}
+        };
+        addressField.setAttribute("connector-template", "${MOCK_CONNECTOR_TEMPLATE}");
+      }
+    }, 0);
+  </script>`;
+
+  return withForm(`
+      <descope-address-field
+        size="${size}"
+        bordered="${bordered}"
+        label="${label || ''}"
+        label-type="${labelType || ''}"
+        disabled="${disabled || false}"
+        placeholder="${placeholder || ''}"
+        readonly="${readonly || false}"
+        required="${required || false}"
+        full-width="${fullWidth || false}"
+        st-host-direction="${direction ?? ''}"
+        default-value="${defaultValue || ''}"
+        data-errormessage-value-missing="${customErrorMessage || ''}"
+        allow-custom-value="${allowCustomValue || false}"
+        min-search-length="${minSearchLength || ''}"
+        connector-template="${
+          connectorTemplate !== MOCK_CONNECTOR_TEMPLATE ? connectorTemplate : ''
+        }"
+        public-api-key="${apiKey || ''}"
+        address-types="${addressTypes || ''}"
+        address-language="${addressLanguage || ''}"
+        address-region="${addressRegion || ''}"
+        address-limit="${addressLimit || ''}"
+        ${errorMsgIcon ? errorMessageIconAttrs : ''}
+      ></descope-address-field>
+      ${connectorTemplate === MOCK_CONNECTOR_TEMPLATE ? addMockConnectorScript : ''}
+  `);
+};
+
+export default {
+  component: componentName,
+  title: 'descope-address-field',
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    'min-search-length': {
+      name: 'Min Search Length',
+      control: { type: 'number' },
+    },
+    'allow-custom-value': {
+      name: 'Allow Custom Value',
+      control: { type: 'boolean' },
+    },
+    'connector-template': {
+      name: 'Connector Template',
+      control: { type: 'text' },
+    },
+    'public-api-key': {
+      name: 'API Key',
+      control: { type: 'text' },
+    },
+    'address-types': {
+      name: 'Address Types',
+      control: { type: 'text' },
+    },
+    'address-language': {
+      name: 'Language',
+      control: { type: 'text' },
+    },
+    'address-region': {
+      name: 'Region',
+      control: { type: 'text' },
+    },
+    'address-limit': {
+      name: 'Address Limit',
+      control: { type: 'number' },
+    },
+    ...errorMessageIconControl,
+    'default-value': {
+      name: 'Default Value',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  bordered: true,
+  size: 'md',
+  'connector-template': MOCK_CONNECTOR_TEMPLATE,
+};
+
+export const GoogleMapsPlaces = Template.bind({});
+
+GoogleMapsPlaces.args = {
+  ...Default.args,
+  'connector-template': 'google-maps-places',
+  'public-api-key': '',
+};
+
+export const Radar = Template.bind({});
+
+Radar.args = {
+  ...Default.args,
+  'connector-template': 'radar',
+  'public-api-key': '',
+};

package/stories/mockConnector.js

@@ -0,0 +1,82 @@
+import { createBaseConnectorClass } from '@descope-ui/common/base-classes';
+export const MOCK_CONNECTOR_TEMPLATE = 'mock-connector';
+
+export class MockConnector extends createBaseConnectorClass() {
+  get mockAddresses() {
+    return [
+      {
+        id: 'mock-1',
+        address: '123 Mock Street, Mock City, MC 12345',
+      },
+      {
+        id: 'mock-2',
+        address: '456 Test Avenue, Mock Town, TT 67890',
+      },
+      {
+        id: 'mock-3',
+        address: '789 Sample Boulevard, Mock City, DC 54321',
+      },
+      {
+        id: 'mock-4',
+        address: '321 Example Lane, Mock Valley, TV 98765',
+      },
+      {
+        id: 'mock-5',
+        address: '5511 Test Lane, Test Valley, TV 98765',
+      },
+    ];
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getRequiredParams() {
+    return [];
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async _fetchResults(query) {
+    let lowerQuery = query?.toLowerCase();
+    if (!lowerQuery || !lowerQuery.trim()) {
+      return {
+        results: [],
+      };
+    }
+    return new Promise((resolve, reject) => {
+      const results = [...this.mockAddresses];
+      // Add dynamic address at the start if query doesn't start with "no"
+      if (!lowerQuery.startsWith('no')) {
+        results.unshift({
+          id: 'mock-dynamic',
+          address: `${query} Custom Road, Sample City, SC 54321`,
+        });
+      }
+
+      let responseDelay = 100 + Math.random() * 200;
+      if (lowerQuery.startsWith('loading')) {
+        responseDelay = 5000;
+      } else if (lowerQuery.startsWith('fast')) {
+        responseDelay = 0;
+        lowerQuery = lowerQuery.replace('fast', '');
+      }
+
+      if (lowerQuery.startsWith('error')) {
+        setTimeout(() => {
+          reject(new Error('something went wrong'));
+        }, responseDelay);
+      } else {
+        setTimeout(() => {
+          resolve({
+            results: results
+              .filter((result) =>
+                result.address.toLowerCase().includes(lowerQuery),
+              )
+              .map((result) => ({
+                id: result.id,
+                label: result.address,
+                value: result.address,
+              })),
+          });
+        }, responseDelay);
+      }
+    });
+  }
+}