> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mastermindcms.com/llms.txt
> Use this file to discover all available pages before exploring further.

# msm-cdek-widget

> Web-компонент msm-cdek-widget.

`msm-cdek-widget` — web-компонент на Lit.

## Назначение

Позволяет выбрать способ/адрес доставки и генерирует события для обновления заказа.

## Пример

```html theme={null}
<msm-cdek-widget order-id="ORDER_ID"></msm-cdek-widget>
```

## Атрибуты / свойства

| Имя             | Тип     | По умолчанию | Примечания |
| --------------- | ------- | ------------ | ---------- |
| `delivery-type` | string  | `"door"`     |            |
| `order-id`      | string  | -            |            |
| `checked`       | boolean | -            |            |
| `disabled`      | boolean | -            |            |
| `required`      | boolean | -            |            |

## События

| Событие                   | detail                                                  | Когда |
| ------------------------- | ------------------------------------------------------- | ----- |
| `msm-delivery-calculated` | `prices`, `address`                                     |       |
| `msm-address-selected`    | `type`, `deliveryAmount`, `shippingAddress`, `metaInfo` |       |

### Пример

```html theme={null}
<msm-cdek-widget order-id="ORDER_ID">
</msm-cdek-widget>

<script>
  const el = document.querySelector("msm-cdek-widget");
  el.addEventListener("msm-delivery-calculated", (e) => {
    console.log(e.detail);
  });

  el.addEventListener("msm-address-selected", (e) => {
    console.log(e.detail);
  });

</script>
```

## CSS parts

* `base`
* `label`

## Слоты

Документированных слотов нет.

## Методы

* `validate()`

## Примечания

* Geolocation is only requested on HTTPS pages (browser limitation).
* Custom events bubble.