@shoper/phoenix_design_system 0.27.1 → 0.28.0-1

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

@@ -1,10 +1,9 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 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 { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_CSS_CLASS } from './dropdown_constants.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
+import { DROPDOWN_EVENTS, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
 let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
@@ -20,37 +19,19 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
             });
             this.dispatchEvent(toggleDropdownEvent);
         };
-        this._handleFocusToOpenedDropdown = async (ev) => {
-            if (ev.target !== this)
-                return;
-            const isOpened = this._$dropdown.isOpened();
-            if (!isOpened)
-                return;
-            const $dropdownContent = document.querySelector(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
-            if (!$dropdownContent)
-                return;
-            ev.preventDefault();
-            UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
-        };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${DROPDOWN_TOGGLER_CSS_CLASS} ${this.className}`;
     }
     connectedCallback() {
-        var _a;
         super.connectedCallback();
         this._btnController = new BtnController(this, this._dispatchToggleDropdownEvent);
-        this._$dropdown = this.parentElement;
+        const dropdown = this.parentElement;
         this._toggleElementAriaController = new ToggleElementAriaController({
             host: this,
-            initialAriaExpandedValue: this._$dropdown.isOpened()
+            initialAriaExpandedValue: !!(dropdown === null || dropdown === void 0 ? void 0 : dropdown.getAttribute(DROPDOWN_OPENED_ATTRIBUTE_NAME))
         });
-        this.toggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute('toggleOnHover')) !== null;
+        this.toggleOnHover = (dropdown === null || dropdown === void 0 ? void 0 : dropdown.getAttribute('toggleOnHover')) !== null;
         this.addEventListener('click', this._dispatchToggleDropdownEvent);
-        document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
     }
 };
 __decorate([

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;"}
+{"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;"}

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

@@ -9,7 +9,6 @@ export interface IDropdown {
     show(): void;
     hide(): void;
     toggle(): void;
-    isOpened(): boolean;
 }
 export declare type TDropdownHideEvent = Event & {
     detail: {

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

@@ -4,8 +4,8 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.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';
+import classnames from '../../../../../../external/classnames/index.js';
 
 let HCheckbox = class HCheckbox extends PhoenixLightLitElement {
     constructor() {

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;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/checkbox/checkbox_content.js

@@ -3,9 +3,9 @@ import { html, nothing } 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 { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_SLOTS } from './checkbox_constants.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_CSS_CLASSES, CHECKBOX_SLOTS } from './checkbox_constants.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 
 let HCheckboxContent = class HCheckboxContent extends PhoenixLightLitElement {

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

@@ -1,13 +1,13 @@
 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 { CHECKBOX_CONTROL_EVENTS, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
+import classnames from '../../../../../../external/classnames/index.js';
 import { createRef, ref } from 'lit-html/directives/ref.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';
 
 let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {
     constructor() {

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 { 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';
+import classnames from '../../../../../../external/classnames/index.js';
+import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.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;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;"}

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

@@ -4,8 +4,8 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.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 classnames from '../../../../../../external/classnames/index.js';
 import { RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
 
 let HRadio = class HRadio extends PhoenixLightLitElement {

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;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;"}

package/build/esm/packages/phoenix/src/components/form/select/control/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;
+}

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_close_btn.js

@@ -0,0 +1,23 @@
+import { __decorate } from "tslib";
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { html } from 'lit-html';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/control/components/select_components_constatns';
+let SelectCloseBtn = class SelectCloseBtn extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'presentation');
+    }
+    render() {
+        return html `<button aria-label="close select">
+            ${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
+            ? this.getSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
+            : html `<icon iconName="icon-x"></icon>`}
+        </button> `;
+    }
+};
+SelectCloseBtn = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.closeBtn)
+], SelectCloseBtn);
+export { SelectCloseBtn };
+//# sourceMappingURL=select_close_btn.js.map

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_close_btn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_close_btn.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/control/components/select_close_btn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EACH,qCAAqC,EACrC,+BAA+B,EAClC,MAAM,oFAAoF,CAAC;AAG5F,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAC/C,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC9C,CAAC;IAEM,MAAM;QACT,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACjD,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA,iCAAiC;mBACpC,CAAC;IAChB,CAAC;CACJ,CAAA;AAdY,cAAc;IAD1B,oBAAoB,CAAC,+BAA+B,CAAC,QAAQ,CAAC;GAClD,cAAc,CAc1B;SAdY,cAAc"}

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

@@ -0,0 +1,19 @@
+export declare const SELECT_OPTION_EVENT_NAMES: {
+    readonly clicked: "selectOption.clicked";
+};
+export declare const SELECT_OPTIONS_EVENT_NAMES: {
+    readonly clicked: "selectOptions.clicked";
+};
+export declare const SELECT_SEARCH_EVENT_NAMES: {
+    readonly search: "selectSearch.search";
+};
+export declare const SELECT_RELATED_COMPONENTS_NAMES: {
+    readonly option: "h-option";
+    readonly options: "h-select-options";
+    readonly optionContent: "h-option-content";
+    readonly input: "h-select-input";
+    readonly closeBtn: "h-select-close-btn";
+    readonly search: "h-select-search";
+};
+export declare const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = "content";
+export declare const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = "placeholder";

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_components_constatns.js

@@ -0,0 +1,21 @@
+const SELECT_OPTION_EVENT_NAMES = {
+    clicked: 'selectOption.clicked'
+};
+const SELECT_OPTIONS_EVENT_NAMES = {
+    clicked: 'selectOptions.clicked'
+};
+const SELECT_SEARCH_EVENT_NAMES = {
+    search: 'selectSearch.search'
+};
+const SELECT_RELATED_COMPONENTS_NAMES = {
+    option: 'h-option',
+    options: 'h-select-options',
+    optionContent: 'h-option-content',
+    input: 'h-select-input',
+    closeBtn: 'h-select-close-btn',
+    search: 'h-select-search'
+};
+const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
+
+export { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES, SELECT_SEARCH_EVENT_NAMES };
+//# sourceMappingURL=select_components_constatns.js.map

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

@@ -0,0 +1,4 @@
+import { HOption } from "./select_option";
+export declare type TSelectOptionClickedEvent = CustomEvent<{
+    $option: HOption;
+}>;

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_components_types.js

@@ -0,0 +1,2 @@
+import '@phoenixRoot/components/form/select/control/components/select_option';
+//# sourceMappingURL=select_components_types.js.map

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_components_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_components_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/control/components/select_components_types.ts"],"names":[],"mappings":"AAAA,OAAwB,sEAAsE,CAAC"}

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

@@ -0,0 +1,13 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { SelectOption } from "../model/select_option";
+import { TemplateResult } from 'lit-html';
+import { BehaviorSubject } from "../../../../../core/classes/behavior_subject/behavior_subject";
+export declare class HSelectInput extends PhoenixLightLitElement {
+    selectedOptions$: BehaviorSubject<SelectOption[]> | null;
+    isMultiselect: boolean;
+    private _contextConsumer;
+    connectedCallback(): void;
+    private _subscribeObserver;
+    private _dispatchOptionDeselect;
+    render(): TemplateResult | undefined;
+}

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_input.js

@@ -0,0 +1,64 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { state } 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_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
+import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../select_control_constants.js';
+import { html } from 'lit-html';
+import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
+import { observe } from '../../../../../directives/observable_directive.js';
+
+let HSelectInput = class HSelectInput extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._contextConsumer = new ContextConsumerController(this);
+        this._dispatchOptionDeselect = (option) => {
+            this.dispatchEvent(new CustomEvent(SELECT_EVENT_NAMES.deselectOption, {
+                detail: option.value,
+                bubbles: true
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('slot', SELECT_SLOT_NAMES.input);
+        this.setAttribute('role', 'textbox');
+        this._subscribeObserver();
+    }
+    async _subscribeObserver() {
+        this.isMultiselect = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.isMultiselect));
+        this.selectedOptions$ = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.selectedOptions$));
+    }
+    render() {
+        if (!this.selectedOptions$)
+            return;
+        return html `
+            ${observe(this.selectedOptions$, (selectOptions) => {
+            var _a;
+            if (!selectOptions.length)
+                return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
+            return this.isMultiselect
+                ? html `${selectOptions.map((option) => html `<h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
+                              ${option.content}
+
+                              <h-tag-remove-button>x</h-tag-remove-button>
+                          </h-tag>`)}`
+                : selectOptions[0].content;
+        })}
+        `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSelectInput.prototype, "selectedOptions$", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], HSelectInput.prototype, "isMultiselect", void 0);
+HSelectInput = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.input)
+], HSelectInput);
+
+export { HSelectInput };
+//# sourceMappingURL=select_input.js.map

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_input.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/control/components/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/control/components/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';
+
+let HOption = class HOption extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.disabled = false;
+        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.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/control/components/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/control/components/select_options.d.ts

@@ -0,0 +1,5 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HSelectOptions extends PhoenixLightLitElement {
+    constructor();
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_options.js

@@ -0,0 +1,29 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+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 { SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
+
+let HSelectOptions = class HSelectOptions extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = ({ detail }) => {
+            this.dispatchEvent(new CustomEvent(SELECT_OPTIONS_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: detail.$option
+                }
+            }));
+        };
+        this.setAttribute('role', 'listbox');
+        UiDomUtils.makeNavigable(this);
+        this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+    }
+};
+HSelectOptions = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.options),
+    __metadata("design:paramtypes", [])
+], HSelectOptions);
+
+export { HSelectOptions };
+//# sourceMappingURL=select_options.js.map

package/build/esm/packages/phoenix/src/components/form/select/control/components/select_options.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;"}

package/build/esm/packages/phoenix/src/components/form/select/control/components/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/control/components/select_search.js

@@ -0,0 +1,41 @@
+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';
+
+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 `<input
+            type="text"
+            role="search"
+            .value=${this.value}
+            aria-autocomplete="list"
+            autocomplete="false"
+            @input=${this._handleInputChange}
+        />`;
+    }
+};
+__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/control/components/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;"}