Shipping Address Modal¶
The <shipping-address-modal> webcomponent is used to render a modal containing a shipping address of a customer.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
address |
Address | null | The address of a user that should be used to fill the default values of a form inside the modal |
API¶
API of a <shipping-address-modal> is basically the same as this of a h-modal webcomponent. The only difference is that the open method of this webcomponent dispatches the shippingAddressModal.opened event with the Event Bus.
open(): void¶
Opens modal and dispatches the shippingAddressModal.opened event.
const shippingAddressModal = document.querySelector('shipping-address-modal');
shippingAddressModal.open();
Event Bus events¶
This webcomponent emits the following events with the Event Bus:
Example¶
<shipping-address-modal>
<h-modal hidden>
<h-portal hidden disabled to="modals">
<div class="modal-wrapper">
<div tabindex="0"></div>
<div class="modal" role="dialog">
<div class="modal__container">
<h-modal-header class="modal__header">
<b class="font_semibold">Dane do zamówienia</b>
<h-modal-close class="btn btn_icon" tabindex="0" role="button">
<h-icon icon-name="icon-x" role="button" size="xl" clickable>
<svg class="icon icon_xl icon_clickable">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
</svg>
</h-icon>
</h-modal-close>
</h-modal-header>
<h-modal-body class="modal__body">
<shipping-address-form>
<reactive-form>
<form id="form-de50be63-16bd-4c28-9b50-7629d96507aa" novalidate>
<control-connector class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="first-name-34d9fc05-6605-485a-b053-18889ae44090">Imię</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="firstname" controlid="first-name-34d9fc05-6605-485a-b053-18889ae44090" class="input">
<h-input-control class="input__control">
<input id="first-name-34d9fc05-6605-485a-b053-18889ae44090" name="firstname" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="last-name-4dd9d0c8-afa7-4fde-9a32-505af04ee693">Nazwisko</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="lastname" controlid="last-name-4dd9d0c8-afa7-4fde-9a32-505af04ee693" class="input">
<h-input-control class="input__control">
<input id="last-name-4dd9d0c8-afa7-4fde-9a32-505af04ee693" name="lastname" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label" for="company-name-02056286-0ec9-4d19-8b59-5b52aefd5eed">Nazwa firmy</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="companyName" controlid="company-name-02056286-0ec9-4d19-8b59-5b52aefd5eed" class="input">
<h-input-control class="input__control">
<input id="company-name-02056286-0ec9-4d19-8b59-5b52aefd5eed" name="companyName" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="phone-1a9c0c5a-4044-454f-8c80-cef00ed69e53">Numer telefonu</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="phone" controlid="phone-1a9c0c5a-4044-454f-8c80-cef00ed69e53" class="input">
<h-input-control type="tel" class="input__control">
<input id="phone-1a9c0c5a-4044-454f-8c80-cef00ed69e53" name="phone" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="country-907fc6e0-941b-45ea-9e93-529f2d8cbbc9">Kraj</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<shipping-address-country-select>
<h-select class="select select_with-search" control-name="countryId" control-id="country-7e708929-c162-4589-9846-207e8ee1abc3">
<h-dropdown content-width="full" name="countryId" offset="2" direction="bottom-center">
<h-dropdown-toggler class="dropdown__toggler" name="countryId" tabindex="0" role="button" aria-expanded="false">
<h-select-toggler class="select-toggler" role="textbox" slot="toggler">
<span class="select-toggler__placeholder">Wybierz</span>
<h-icon icon-name="icon-chevron-down">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
</svg>
</h-icon>
</h-select-toggler>
</h-dropdown-toggler>
<h-portal hidden disabled to="dropdown-portal">
<h-dropdown-content class="select__content dropdown__content" name="countryId" role="menu">
<h-select-close-btn class="select__close-mobile-btn" role="menuitem" aria-label="close select" tabindex="0">
<h-icon icon-name="icon-x" size="l">
<svg class="icon icon_l">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
</svg>
</h-icon>
</h-select-close-btn>
<div class="select__label" role="menuitem">
<span class="select-toggler__placeholder">Wybierz</span>
</div>
<h-select-search class="select__search select-search" role="menuitem" value="">
<h-icon icon-name="icon-search" class="select-search__icon">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</h-icon>
<input type="text" role="search" aria-autocomplete="list" autocomplete="false" placeholder="Szukaj" class="select-search__input">
</h-select-search>
<h-options role="menuitem" tabindex="0" class="select__options">
<h-option value="62" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Algieria</h-option-content>
</h-option>
</h-options>
<div role="menuitem"></div>
</h-dropdown-content>
</h-portal>
</h-dropdown>
</h-select>
</shipping-address-country-select>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="street-a254a83f-0574-480c-93f1-eafe2c453c39">Ulica, numer budynku i lokalu</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="street" controlid="street-a254a83f-0574-480c-93f1-eafe2c453c39" class="input">
<h-input-control class="input__control">
<input id="street-a254a83f-0574-480c-93f1-eafe2c453c39" name="street" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="postal-code-63577fde-0677-4848-8419-6d965effd454">Kod pocztowy</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element control__element_half">
<h-input controlname="postalCode" controlid="postal-code-63577fde-0677-4848-8419-6d965effd454" class="input">
<h-input-control mask="__-___" pattern="^(\d{2})(-)(\d{3})$" valid-pattern="00-000" class="input__control">
<input id="postal-code-63577fde-0677-4848-8419-6d965effd454" name="postalCode" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="city-375bca1b-de81-4154-a1fd-8eb51805ac78">Miasto</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="city" controlid="city-375bca1b-de81-4154-a1fd-8eb51805ac78" class="input">
<h-input-control class="input__control">
<input id="city-375bca1b-de81-4154-a1fd-8eb51805ac78" name="city" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
</form>
</reactive-form>
</shipping-address-form>
</h-modal-body>
<h-modal-footer class="modal__footer">
<button class="btn btn_secondary">
Anuluj
</button>
<button class="btn btn_primary">
Zapisz dane
</button>
</h-modal-footer>
</div>
</div>
<div tabindex="0"></div>
</div>
</h-portal>
</h-modal>
</shipping-address-modal>