@descope-ui/descope-address-field 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.4](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-address-field-0.0.3...@descope-ui/descope-address-field-0.0.4) (2025-03-03)
+
+### Dependency Updates
+
+* `@descope-ui/common` updated to version `0.0.7`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.7`
+* `@descope-ui/descope-autocomplete-field` updated to version `0.0.5`
+## [0.0.3](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-address-field-0.0.2...@descope-ui/descope-address-field-0.0.3) (2025-03-03)
+
+### Dependency Updates
+
+* `@descope-ui/common` updated to version `0.0.6`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.6`
+* `@descope-ui/descope-autocomplete-field` updated to version `0.0.4`
 ## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-address-field-0.0.1...@descope-ui/descope-address-field-0.0.2) (2025-02-26)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-address-field",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@vaadin/custom-field": "24.3.4",
-    "@descope-ui/common": "0.0.5",
-    "@descope-ui/theme-input-wrapper": "0.0.5",
-    "@descope-ui/descope-autocomplete-field": "0.0.3"
+    "@descope-ui/common": "0.0.7",
+    "@descope-ui/theme-input-wrapper": "0.0.7",
+    "@descope-ui/descope-autocomplete-field": "0.0.5"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/AddressFieldClass.js

@@ -11,7 +11,6 @@ import {
   syncAttrs,
 } from '@descope-ui/common/components-helpers';
 import { compose } from '@descope-ui/common/utils';
-import { AutocompleteFieldClass } from '@descope-ui/descope-autocomplete-field/class';
 import { componentName as descopeInternalComponentName } from './descope-address-field-internal/AddressFieldInternal';
 
 export const componentName = getComponentName('address-field');
@@ -128,6 +127,17 @@ export const AddressFieldClass = compose(
     line-height: unset;
     width: 100%;
   }
+
+  ${descopeInternalComponentName} {
+    display: inline-block;
+    box-sizing: border-box;
+    user-select: none;
+    max-width: 100%;
+  }
+
+  ${descopeInternalComponentName} ::slotted {
+    padding: 0;
+  }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label'],
     componentName,

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

@@ -41,18 +41,6 @@ class RawAddressFieldInternal extends BaseInputClass {
     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>

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

@@ -1,6 +1,5 @@
 import { componentName } from '../src/component';
 import { withForm } from '@descope-ui/common/sb-helpers';
-import { createBaseConnectorClass } from '@descope-ui/common/base-classes';
 import {
   labelControl,
   placeholderControl,
@@ -41,22 +40,8 @@ const Template = ({
   '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(`
+  return `
       <descope-address-field
         size="${size}"
         bordered="${bordered}"
@@ -72,9 +57,8 @@ const Template = ({
         data-errormessage-value-missing="${customErrorMessage || ''}"
         allow-custom-value="${allowCustomValue || false}"
         min-search-length="${minSearchLength || ''}"
-        connector-template="${
-          connectorTemplate !== MOCK_CONNECTOR_TEMPLATE ? connectorTemplate : ''
-        }"
+        connector-template="${connectorTemplate !== MOCK_CONNECTOR_TEMPLATE ? connectorTemplate : ''
+    }"
         public-api-key="${apiKey || ''}"
         address-types="${addressTypes || ''}"
         address-language="${addressLanguage || ''}"
@@ -82,13 +66,30 @@ const Template = ({
         address-limit="${addressLimit || ''}"
         ${errorMsgIcon ? errorMessageIconAttrs : ''}
       ></descope-address-field>
-      ${connectorTemplate === MOCK_CONNECTOR_TEMPLATE ? addMockConnectorScript : ''}
-  `);
+  `;
 };
 
 export default {
   component: componentName,
   title: 'descope-address-field',
+  decorators: [(story, { args }) => {
+    if (args['connector-template'] === MOCK_CONNECTOR_TEMPLATE) {
+      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);
+          }
+      });
+    }
+
+    return story();
+  },
+  withForm
+],
   argTypes: {
     ...labelControl,
     ...placeholderControl,