lightning-base-components 1.21.3-alpha → 1.21.5-alpha

package/src/lightning/inputAddress/inputAddress.js

@@ -31,6 +31,7 @@ const FIELD_TYPE = {
     TEXTAREA: 'textarea',
     INPUT: 'input',
     PICKLIST: 'combobox',
+    LOOKUP_ADDRESS: 'address',
 };
 
 const i18n = {
@@ -57,6 +58,13 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
      */
     @api streetLabel;
 
+    /**
+     * The label for the subpremise field.
+     * Visible only when using show-compact-address-lookup.
+     * @type {string}
+     */
+    @api subpremiseLabel;
+
     /**
      * The label for the city field.
      * @type {string}
@@ -87,6 +95,13 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
      */
     @api streetPlaceholder;
 
+    /**
+     * The placeholder for the subpremise field.
+     * Visible only when using show-compact-address-lookup.
+     * @type {string}
+     */
+    @api subpremisePlaceholder;
+
     /**
      * The placeholder for the city field.
      * @type {string}
@@ -155,6 +170,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     @track _fieldLevelHelp;
     @track _variant;
     @track _street = '';
+    @track _subpremise = '';
     @track _city = '';
     @track _province = '';
     @track _country = '';
@@ -186,7 +202,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * The value for the street field.
-     * Maximum length is 255 characters.
+     * Maximum length is 255 characters when rendered as a textarea.
+     * Maximum length is 80 characters when rendered as an input (when using show-compact-address-lookup).
      * @type {string}
      *
      */
@@ -198,6 +215,19 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         this._street = value;
     }
 
+    /**
+     * The value for the subpremise field.
+     * Maximum length is 80 characters.
+     * @type {string}
+     */
+    @api
+    get subpremise() {
+        return this._subpremise;
+    }
+    set subpremise(value) {
+        this._subpremise = value;
+    }
+
     /**
      * The value for the city field.
      * Maximum length is 40 characters.
@@ -280,6 +310,21 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         this._showAddressLookup = normalizeBoolean(value);
     }
 
+    /**
+     * If present, the street field is rendered as two separate inputs instead of a single textarea.
+     * In addition, the search field is no longer rendered as a separate input and its functionality
+     * is moved to the street field.
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get showCompactAddress() {
+        return this._showCompactAddress;
+    }
+    set showCompactAddress(value) {
+        this._showCompactAddress = normalizeBoolean(value);
+    }
+
     /**
      * If present, the address fields are read-only and cannot be edited.
      * @type {boolean}
@@ -424,6 +469,10 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         return this.disabled || this.readOnly;
     }
 
+    get addressLabelRequired() {
+        return this.addressLabel && this.required;
+    }
+
     get i18n() {
         return i18n;
     }
@@ -444,6 +493,10 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         reflectAttribute(this, 'variant', this.variant);
     }
 
+    get showCompactAddressLookup() {
+        return this._showAddressLookup && this._showCompactAddress;
+    }
+
     get computedFieldsetClass() {
         return classSet(
             'slds-form-element slds-form-element_compound slds-form-element_address'
@@ -473,6 +526,18 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                 maxlength: 255,
                 type: FIELD_TYPE.TEXTAREA,
             },
+            addressLine1: {
+                autocomplete: 'address-line1',
+                name: 'street',
+                maxlength: 80,
+                type: FIELD_TYPE.LOOKUP_ADDRESS,
+            },
+            addressLine2: {
+                autocomplete: 'address-line2',
+                name: 'subpremise',
+                maxlength: 80,
+                type: FIELD_TYPE.INPUT,
+            },
             city: {
                 autocomplete: 'address-level2',
                 name: 'city',
@@ -508,12 +573,21 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         const hasCountryPicklist =
             this.fieldsTypeMeta.country.type === FIELD_TYPE.PICKLIST;
         const [langCode, countryCode] = this.locale.split('-');
-        return getInputOrder(langCode, countryCode, hasCountryPicklist);
+        return getInputOrder(
+            langCode,
+            countryCode,
+            hasCountryPicklist,
+            this._showCompactAddress
+        );
     }
 
     get requiredFields() {
         const [langCode, countryCode] = this.locale.split('-');
-        return getRequiredFields(langCode, countryCode);
+        return getRequiredFields(
+            langCode,
+            countryCode,
+            this._showCompactAddress
+        );
     }
 
     get fieldsMeta() {
@@ -554,6 +628,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                     isInput: type === FIELD_TYPE.INPUT,
                     isPicklist: type === FIELD_TYPE.PICKLIST,
                     isTextArea: type === FIELD_TYPE.TEXTAREA,
+                    isLookupAddress: type === FIELD_TYPE.LOOKUP_ADDRESS,
                     value: value,
                     options: this.getFieldOptions(name),
                     required: this.required && !!required,
@@ -586,6 +661,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         const address = evt.detail.address || {};
 
         this.street = address.street || '';
+        this.subpremise = address.subpremise || '';
         this.city = address.city || '';
         this.province = address.state || '';
 
@@ -636,6 +712,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                 bubbles: true,
                 detail: {
                     street: this.street,
+                    subpremise: this.subpremise,
                     city: this.city,
                     province: this.province,
                     country: this.country,

package/src/lightning/inputLocation/__docs__/inputLocation.md

@@ -81,7 +81,3 @@ The `change` event properties are as follows.
 | bubbles    | true  | This event bubbles up through the DOM.                                                                    |
 | cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
 | composed   | true  | This event propagates outside of the component in which it was dispatched.                                |
-
-#### Source Code
-
-`lightning-input-location` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.