@shoper/phoenix_design_system 1.0.3 → 1.1.0-1

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -38,6 +38,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _toggleScroll;
     private _closeDropdownOnEscape;
     private _handleForwardFocus;
+    private _handleFocusOnNextElement;
     private _focusOnNextElementAfterToggler;
     private _handleBackwardFocus;
     private _hoverToggle;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js

@@ -3,14 +3,14 @@ import { state } from 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { html } from 'lit-html';
-import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { property } from '@lit/reactive-element/decorators.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
+import { html } from 'lit-html';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_TOGGLER_NAME, DROPDOWN_CONTENT_NAME } from './dropdown_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
+import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import throttle_1 from '../../../../../external/lodash/throttle.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
@@ -45,6 +45,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
         };
         this.show = async () => {
+            if (this.opened)
+                return;
             return new Promise((resolve) => {
                 var _a, _b;
                 (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
@@ -89,25 +91,29 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             }
             await this.hide();
         };
-        this.hide = async (ev) => new Promise((resolve) => {
-            var _a;
-            if (ev && ev.detail.name !== this.name)
+        this.hide = async (ev) => {
+            if (!this.opened)
                 return;
-            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
-            const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
-            window.requestAnimationFrame(() => {
-                var _a, _b;
-                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
-                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                setTimeout(() => {
-                    var _a;
-                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                    this.opened = false;
-                    this._dispatchHideDropdownEvent();
-                    resolve();
-                }, transitionDuration);
+            return new Promise((resolve) => {
+                var _a;
+                if (ev && ev.detail.name !== this.name)
+                    return;
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+                const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+                window.requestAnimationFrame(() => {
+                    var _a, _b;
+                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
+                    (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                        this.opened = false;
+                        this._dispatchHideDropdownEvent();
+                        resolve();
+                    }, transitionDuration);
+                });
             });
-        });
+        };
         this._dispatchHideDropdownEvent = () => {
             const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hidden, {
                 bubbles: true
@@ -134,13 +140,16 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             await this.hide();
         };
         this._handleForwardFocus = async (ev) => {
-            const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent);
+            if (!this.opened || ev.shiftKey)
+                return;
+            const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
             const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
-            const isActiveElementLastFocusableElement = document.activeElement === this._lastFocusableElement;
+            const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
+            const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
             if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
-                this._focusOnNextElementAfterToggler(ev);
+                this._handleFocusOnNextElement(ev);
         };
-        this._focusOnNextElementAfterToggler = async (ev) => {
+        this._handleFocusOnNextElement = async (ev) => {
             ev.preventDefault();
             const $focusableElements = UiDomUtils.getFocusableElements(document.body);
             const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
@@ -149,10 +158,18 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     return currentElement;
                 return null;
             });
-            if ($nextElementToFocus)
-                $nextElementToFocus.focus();
             await this._hideDropdownsSequentially();
             await this.hide();
+            this._focusOnNextElementAfterToggler($nextElementToFocus);
+        };
+        this._focusOnNextElementAfterToggler = ($elementToFocus) => {
+            var _a;
+            const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
+            if (isTogglerLastChildOfPreviousDropdown) {
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
         };
         this._handleBackwardFocus = async (ev) => {
             var _a;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js

@@ -18,10 +18,7 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
     }
     render() {
         super.render();
-        return html `
-            <div role="dialog">${this.getSlot('content')}</div>
-            <div tabindex="0" aria-hidden="true"></div>
-        `;
+        return html ` <div role="dialog">${this.getSlot('content')}</div> `;
     }
 };
 __decorate([

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts

@@ -7,6 +7,7 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
     toggleOnHover: boolean;
     constructor();
     connectedCallback(): void;
+    private _dispatchToggleDropdownEventWithKeyboard;
     private _dispatchToggleDropdownEvent;
     private _handleFocusToOpenedDropdown;
     disconnectedCallback(): void;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { BtnController } from '../../controllers/btn_controller.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_CSS_CLASS } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
@@ -12,9 +12,12 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         super();
         this.name = '';
         this.toggleOnHover = false;
+        this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
+            ev.stopImmediatePropagation();
+            this._dispatchToggleDropdownEvent(ev);
+        };
         this._dispatchToggleDropdownEvent = (ev) => {
             ev.preventDefault();
-            ev.stopImmediatePropagation();
             const toggleDropdownEvent = new CustomEvent(DROPDOWN_EVENTS.toggle, {
                 bubbles: true
             });
@@ -38,7 +41,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this._btnController = new BtnController(this, this._dispatchToggleDropdownEvent);
+        this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
         this._$dropdown = this.parentElement;
         if (this._$dropdown.isOpened)
             this._toggleElementAriaController = new ToggleElementAriaController({

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import classnames from '../../../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
 
 let HCheckbox = class HCheckbox extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js

@@ -1,10 +1,10 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { property } from '@lit/reactive-element/decorators.js';
+import { html } from 'lit-html';
 import { createRef, ref } from 'lit-html/directives/ref.js';
-import classnames from '../../../../external/classnames/index.js';
+import classnames from '../../../../../../external/classnames/index.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { CHECKBOX_CONTROL_EVENTS, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.d.ts

@@ -6,9 +6,8 @@ export declare class HColorSwatchesControl extends PhoenixLightLitElement {
     disabled: boolean;
     required: boolean;
     error: boolean;
-    selectedColors: string | undefined;
+    selectedColors: string[];
     connectedCallback(): void;
     private _setupEvents;
-    private _serializeArrayOfColors;
-    protected render(): TemplateResult;
+    protected render(): TemplateResult | void;
 }

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js

@@ -1,14 +1,19 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators';
+import { ArrayUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import classnames from '../../../../../../external/classnames/index.js';
 import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
-import classnames from '../../../../external/classnames/index.js';
 import { COLOR_SWATCHES_CONTROL_CSS_CLASSES } from './color_swatches_control_constants.js';
 import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
 
 let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedColors = [];
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
@@ -23,21 +28,14 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
     _setupEvents() {
         this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
             const eventValue = event.detail.colors;
-            this.selectedColors = Array.isArray(eventValue) ? this._serializeArrayOfColors(eventValue) : eventValue;
+            this.selectedColors = eventValue ? ArrayUtils.makeAsArray(eventValue) : [];
         });
     }
-    _serializeArrayOfColors(colors) {
-        return colors.reduce((colorPrev, colorCurr) => {
-            return colorPrev ? `${colorPrev}, ${colorCurr}` : colorCurr;
-        }, '');
-    }
     render() {
+        if (!this.selectedColors.length)
+            return;
         return html `
-            <h-input-control
-                controlName="${this.controlName}"
-                type="${INPUT_CONTROL_TYPES.hidden}"
-                value="${this.selectedColors}"
-            ></h-input-control>
+            ${this.selectedColors.map((color) => html ` <input name="${this.controlName}" type="${INPUT_CONTROL_TYPES.hidden}" value="${color}" /> `)}
         `;
     }
 };
@@ -63,7 +61,7 @@ __decorate([
 ], HColorSwatchesControl.prototype, "error", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
+    __metadata("design:type", Array)
 ], HColorSwatchesControl.prototype, "selectedColors", void 0);
 HColorSwatchesControl = __decorate([
     phoenixCustomElement('h-color-swatches-control')

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_consumer_controller.js

@@ -1,8 +1,8 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { ContextConsumerController } from '../../../../core/context/context_consumer_controller.js';
-import { FORM_CONTROL_CONTEXTS } from './control_props_sync_controller_constants.js';
 import { Observer } from '../../../../core/classes/observer/observer.js';
+import { FORM_CONTROL_CONTEXTS } from './control_props_sync_controller_constants.js';
 
 var _ControlPropsSyncConsumerController_host, _ControlPropsSyncConsumerController_contextConsumer, _ControlPropsSyncConsumerController_basePropsObservable, _ControlPropsSyncConsumerController_propsObserver, _ControlPropsSyncConsumerController_onPropsUpdated;
 class ControlPropsSyncConsumerController {

package/build/esm/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_provider_controller.js

@@ -1,8 +1,8 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../../../external/tslib/tslib.es6.js';
 import 'lit';
+import { BehaviorSubject } from '../../../../core/classes/behavior_subject/behavior_subject.js';
 import { ContextProviderController } from '../../../../core/context/context_provider_controller.js';
 import { BASE_FORM_CONTROL_PROPS, FORM_CONTROL_CONTEXTS } from './control_props_sync_controller_constants.js';
-import { BehaviorSubject } from '../../../../core/classes/behavior_subject/behavior_subject.js';
 
 var _ControlPropsSyncProviderController_host, _ControlPropsSyncProviderController_controlPropsProvider, _ControlPropsSyncProviderController_propsObservable, _ControlPropsSyncProviderController_propsToSync;
 class ControlPropsSyncProviderController {

package/build/esm/packages/phoenix/src/components/form/input/input.js

@@ -2,10 +2,10 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import classnames from '../../../../../../external/classnames/index.js';
 import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../external/classnames/index.js';
 
 let HInput = class HInput extends PhoenixLightLitElement {
     constructor() {

package/build/esm/packages/phoenix/src/components/form/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/input/input_icon.js

@@ -3,8 +3,8 @@ import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { ICON_CSS_CLASSES } from '../../icon/icon_constants.js';
+import { INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 
 let HInputIcon = class HInputIcon extends PhoenixLightLitElement {
     connectedCallback() {

package/build/esm/packages/phoenix/src/components/form/radio/radio.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import classnames from '../../../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
 import { RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
 

package/build/esm/packages/phoenix/src/components/form/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts

@@ -0,0 +1,11 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HOption extends PhoenixLightLitElement {
+    value: string;
+    selected: boolean;
+    disabled: boolean;
+    hidden: boolean;
+    private _btnController;
+    connectedCallback(): void;
+    private _setupEvents;
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js

@@ -0,0 +1,55 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
+import { property } from '@lit/reactive-element/decorators.js';
+import { SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { BtnController } from '../../../../../controllers/btn_controller/btn_controller.js';
+import { SELECT_OPTION_CSS_CLASSES } from './select_option_constants.js';
+
+let HOption = class HOption extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchClickedEvent = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent(SELECT_OPTION_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: this
+                }
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+        this.classList.add(SELECT_OPTION_CSS_CLASSES.selectOption);
+        this.setAttribute('role', 'option');
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], HOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "hidden", void 0);
+HOption = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.option)
+], HOption);
+
+export { HOption };
+//# sourceMappingURL=select_option.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SELECT_OPTION_CSS_CLASSES: {
+    readonly selectOption: "select-option";
+    readonly selectOptionContent: "select-option__content";
+};

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_constants.js

@@ -0,0 +1,8 @@
+const selectOption = 'select-option';
+const SELECT_OPTION_CSS_CLASSES = {
+    selectOption: selectOption,
+    selectOptionContent: `${selectOption}__content`
+};
+
+export { SELECT_OPTION_CSS_CLASSES };
+//# sourceMappingURL=select_option_constants.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HSelectOptionContent extends PhoenixLightLitElement {
+    connectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.js

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
+import { SELECT_OPTION_CSS_CLASSES } from '@phoenixRoot/components/form/select/components/option/select_option_constants';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+let HSelectOptionContent = class HSelectOptionContent extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SELECT_OPTION_CSS_CLASSES.selectOptionContent);
+    }
+};
+HSelectOptionContent = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent)
+], HSelectOptionContent);
+export { HSelectOptionContent };
+//# sourceMappingURL=select_option_content.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_option_content.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/components/option/select_option_content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,+BAA+B,EAAE,MAAM,4EAA4E,CAAC;AAC7H,OAAO,EAAE,yBAAyB,EAAE,MAAM,+EAA+E,CAAC;AAC1H,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAG/G,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,sBAAsB;IACrD,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,CAAC;IACtE,CAAC;CACJ,CAAA;AANY,oBAAoB;IADhC,oBAAoB,CAAC,+BAA+B,CAAC,aAAa,CAAC;GACvD,oBAAoB,CAMhC;SANY,oBAAoB"}

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts

@@ -0,0 +1,7 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
+export declare class HSelectSearch extends PhoenixLightLitElement {
+    value: string;
+    private _handleInputChange;
+    protected render(): TemplateResult;
+}

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js

@@ -0,0 +1,48 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
+import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import debounce_1 from '../../../../../../../../external/lodash/debounce.js';
+import { SELECT_SEARCH_CSS_CLASSES } from './select_search_constants.js';
+
+let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this._handleInputChange = debounce_1(({ target }) => {
+            this.value = target.value;
+            this.dispatchEvent(new CustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
+                bubbles: true,
+                detail: target.value
+            }));
+        }, 200);
+    }
+    render() {
+        return html `
+            <div class=${SELECT_SEARCH_CSS_CLASSES.selectSearch}>
+                <h-icon icon-name="icon-search" class=${SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
+                <input
+                    class=${SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
+                    type="text"
+                    role="search"
+                    .value=${this.value}
+                    aria-autocomplete="list"
+                    autocomplete="false"
+                    @input=${this._handleInputChange}
+                />
+            </div>
+        `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], HSelectSearch.prototype, "value", void 0);
+HSelectSearch = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.search)
+], HSelectSearch);
+
+export { HSelectSearch };
+//# sourceMappingURL=select_search.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search_constants.d.ts

@@ -0,0 +1,5 @@
+export declare const SELECT_SEARCH_CSS_CLASSES: {
+    readonly selectSearch: "select-search";
+    readonly selectSearchIcon: "select-search__icon";
+    readonly selectSearchInput: "select-search__input";
+};

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search_constants.js

@@ -0,0 +1,9 @@
+const baseClass = 'select-search';
+const SELECT_SEARCH_CSS_CLASSES = {
+    selectSearch: baseClass,
+    selectSearchIcon: `${baseClass}__icon`,
+    selectSearchInput: `${baseClass}__input`
+};
+
+export { SELECT_SEARCH_CSS_CLASSES };
+//# sourceMappingURL=select_search_constants.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.d.ts

@@ -0,0 +1,6 @@
+import { TemplateResult } from 'lit-html';
+import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class SelectCloseBtn extends PhoenixLightLitElement {
+    connectedCallback(): void;
+    render(): TemplateResult;
+}