# sc-compact-address



<!-- Auto Generated Below -->


## Properties

| Property       | Attribute  | Description           | Type                                                                                                                                                                                                                                                                                                                                                                            | Default                                                                                                                                                                                                 |
| -------------- | ---------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `address`      | --         | The address.          | `{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }` | `{     country: null,     city: null,     line_1: null,     line_2: null,     postal_code: null,     state: null,   }`                                                                                  |
| `label`        | `label`    | Label for the address | `string`                                                                                                                                                                                                                                                                                                                                                                        | `__('Country or region', 'surecart')`                                                                                                                                                                   |
| `loading`      | `loading`  | Is this loading       | `boolean`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`                                                                                                                                                                                             |
| `names`        | --         |                       | `{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }` | `{     country: 'shipping_country',     city: 'shipping_city',     line_1: 'shipping_line_1',     line_2: 'shipping_line_2',     postal_code: 'shipping_postal_code',     state: 'shipping_state',   }` |
| `placeholders` | --         | Placeholders          | `{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }` | `{     country: '',     postal_code: '',     state: '',   }`                                                                                                                                            |
| `required`     | `required` | Is this required?     | `boolean`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`                                                                                                                                                                                             |


## Events

| Event             | Description           | Type                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `scChangeAddress` | Address change event. | `CustomEvent<{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }>` |
| `scInputAddress`  | Address input event.  | `CustomEvent<{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }>` |


## Methods

### `reportValidity() => Promise<boolean>`



#### Returns

Type: `Promise<boolean>`




## Shadow Parts

| Part                     | Description                                    |
| ------------------------ | ---------------------------------------------- |
| `"base"`                 | The elements base wrapper.                     |
| `"block-ui"`             | The block ui base component.                   |
| `"block-ui__content"`    | The block ui content (spinner).                |
| `"caret"`                | The select box caret.                          |
| `"control"`              |                                                |
| `"empty"`                | The select empty message.                      |
| `"form-control"`         | The form control wrapper.                      |
| `"help-text"`            | Help text that describes how to use the input. |
| `"input"`                | The html input element.                        |
| `"input__base"`          | The inputs base element.                       |
| `"label"`                | The input label.                               |
| `"menu__base"`           | The select menu base.                          |
| `"panel"`                | The select box panel.                          |
| `"search__base"`         | The select search base.                        |
| `"search__form-control"` | The select search form control.                |
| `"search__input"`        | The select search input.                       |
| `"select__base"`         | The select boxes base element.                 |
| `"spinner__base"`        | The select spinner base.                       |
| `"trigger"`              | The select box trigger.                        |


## Dependencies

### Used by

 - [sc-order-shipping-address](../../controllers/checkout-form/order-shipping-address)

### Depends on

- [sc-form-control](../form-control)
- [sc-select](../select)
- [sc-input](../input)
- [sc-block-ui](../block-ui)

### Graph
```mermaid
graph TD;
  sc-compact-address --> sc-form-control
  sc-compact-address --> sc-select
  sc-compact-address --> sc-input
  sc-compact-address --> sc-block-ui
  sc-form-control --> sc-tooltip
  sc-select --> sc-icon
  sc-select --> sc-menu-label
  sc-select --> sc-menu-item
  sc-select --> sc-form-control
  sc-select --> sc-dropdown
  sc-select --> sc-input
  sc-select --> sc-spinner
  sc-select --> sc-menu
  sc-input --> sc-form-control
  sc-block-ui --> sc-spinner
  sc-order-shipping-address --> sc-compact-address
  style sc-compact-address fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
