@shoper/phoenix_design_system 1.2.0-4 → 1.2.0-5

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

@@ -0,0 +1 @@
+{"version":3,"file":"input_stepper.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/input_stepper/input_stepper.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+export declare const INPUT_STEPPER_EVENT_NAMES: {
+    readonly change: "inputStepper.change";
+    readonly valueChanged: "inputStepper.valueChanged";
+};
+export declare const DISPLAY_INPUT_EVENT_NAMES: {
+    readonly change: "displayInput.change";
+};
+export declare const INPUT_STEPPER_ACTION_TYPES: {
+    readonly increment: "increment";
+    readonly decrement: "decrement";
+};

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_constants.js

@@ -0,0 +1,12 @@
+export const INPUT_STEPPER_EVENT_NAMES = {
+    change: 'inputStepper.change',
+    valueChanged: 'inputStepper.valueChanged'
+};
+export const DISPLAY_INPUT_EVENT_NAMES = {
+    change: 'displayInput.change'
+};
+export const INPUT_STEPPER_ACTION_TYPES = {
+    increment: 'increment',
+    decrement: 'decrement'
+};
+//# sourceMappingURL=input_stepper_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input_stepper_constants.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/input_stepper/input_stepper_constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACrC,MAAM,EAAE,qBAAqB;IAC7B,YAAY,EAAE,2BAA2B;CACnC,CAAC;AAEX,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACrC,MAAM,EAAE,qBAAqB;CACvB,CAAC;AAEX,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACtC,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;CAChB,CAAC"}

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

@@ -0,0 +1,3 @@
+import { Any } from 'ts-toolbelt';
+import { INPUT_STEPPER_ACTION_TYPES } from './input_stepper_constants';
+export declare type TInputStepperAction = Any.Keys<typeof INPUT_STEPPER_ACTION_TYPES>;

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_types.js

@@ -0,0 +1,3 @@
+import 'ts-toolbelt';
+import './input_stepper_constants';
+//# sourceMappingURL=input_stepper_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input_stepper_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/input_stepper/input_stepper_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2C,2BAA2B,CAAC"}

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

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import type { TInputStepperAction } from './input_stepper_types';
+export declare class HStepperActionButton extends PhoenixLightLitElement {
+    action: TInputStepperAction;
+    constructor();
+    connectedCallback(): void;
+    private _dispatchChangeEvent;
+}

package/build/esm/packages/phoenix/src/components/form/input_stepper/stepper_action_button.js

@@ -0,0 +1,35 @@
+import { __decorate, __metadata } from "tslib";
+import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { property } from 'lit/decorators';
+import { INPUT_STEPPER_EVENT_NAMES } from './input_stepper_constants';
+let HStepperActionButton = class HStepperActionButton extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchChangeEvent = () => {
+            const unitaryValueChangeEvent = new CustomEvent(INPUT_STEPPER_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    action: this.action
+                }
+            });
+            this.dispatchEvent(unitaryValueChangeEvent);
+        };
+        new BtnController(this, this._dispatchChangeEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchChangeEvent);
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'action', reflect: true }),
+    __metadata("design:type", String)
+], HStepperActionButton.prototype, "action", void 0);
+HStepperActionButton = __decorate([
+    phoenixCustomElement('h-stepper-action-button'),
+    __metadata("design:paramtypes", [])
+], HStepperActionButton);
+export { HStepperActionButton };
+//# sourceMappingURL=stepper_action_button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper_action_button.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/input_stepper/stepper_action_button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAItE,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,sBAAsB;IAI5D;QACI,KAAK,EAAE,CAAC;QASJ,yBAAoB,GAAG,GAAS,EAAE;YACtC,MAAM,uBAAuB,GAAG,IAAI,WAAW,CAAC,yBAAyB,CAAC,MAAM,EAAE;gBAC9E,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE;oBACJ,MAAM,EAAE,IAAI,CAAC,MAAM;iBACtB;aACJ,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAChD,CAAC,CAAC;QAhBE,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACvD,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC9D,CAAC;CAWJ,CAAA;AArBG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;oDACnC;AAFnB,oBAAoB;IADhC,oBAAoB,CAAC,yBAAyB,CAAC;;GACnC,oBAAoB,CAuBhC;SAvBY,oBAAoB"}

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

@@ -1,4 +1,5 @@
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from '@lit/reactive-element';
 export declare class HOption extends PhoenixLightLitElement {
     value: string;
     selected: boolean;
@@ -9,7 +10,7 @@ export declare class HOption extends PhoenixLightLitElement {
     connectedCallback(): void;
     private _setupEvents;
     private _dispatchClickedEvent;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    updated(changedProperties: PropertyValues): void;
     private _addSelectedIcon;
     private _removeSelectedIcon;
 }

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

@@ -5,6 +5,7 @@ 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';
+import '@lit/reactive-element';
 
 let HOption = class HOption extends PhoenixLightLitElement {
     constructor() {
@@ -33,12 +34,10 @@ let HOption = class HOption extends PhoenixLightLitElement {
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
-    attributeChangedCallback(name, _old, value) {
-        super.attributeChangedCallback(name, _old, value);
-        switch (name) {
-            case 'selected':
-                this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
-        }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('selected'))
+            this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
     }
     _addSelectedIcon() {
         this._$checkedIcon = document.createElement('h-icon');

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

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

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

@@ -13,15 +13,15 @@ export declare abstract class BaseSelectController implements ISelectController,
     constructor({ host }: SelectControllerConstructorOptions);
     private _setupComputedStateObserver;
     private _calculateValuesRelatedToOptions;
-    toggleOption(option: SelectOption): void;
-    abstract selectOption(option: SelectOption): void;
-    removeOption(optionValue: string): void;
-    addOption(option: SelectOption, position?: number): void;
-    replaceOptions(options: SelectOption[]): void;
-    deselectOptions(): void;
-    deselectOption(option: SelectOption): void;
-    filterOptions(value: string): void;
-    protected requestOptionsUpdate(): void;
-    getSelectOption(selectValue: string): SelectOption | undefined;
+    toggle(option: SelectOption): void;
+    abstract select(option: SelectOption): void;
+    remove(optionValue: string): void;
+    add(option: SelectOption, position?: number): void;
+    replace(options: SelectOption[]): void;
+    deselectAll(): void;
+    deselect(option: SelectOption): void;
+    filter(value: string): void;
+    protected requestUpdate(): void;
+    getOption(selectValue: string): SelectOption | undefined;
     hostConnected(): void;
 }

package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js

@@ -25,16 +25,16 @@ class BaseSelectController {
         this._optionsObserver = new Observer(this._calculateValuesRelatedToOptions);
         this.options$.subscribe(this._optionsObserver);
     }
-    toggleOption(option) {
-        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    toggle(option) {
+        option.selected ? this.deselect(option) : this.select(option);
     }
-    removeOption(optionValue) {
+    remove(optionValue) {
         const options = this.options$.getValue();
         if (!options)
             return;
         this.options$.notify(options.filter((option) => option.value !== optionValue));
     }
-    addOption(option, position) {
+    add(option, position) {
         var _a;
         const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         if (position === undefined) {
@@ -44,22 +44,22 @@ class BaseSelectController {
         }
         this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
     }
-    replaceOptions(options) {
+    replace(options) {
         this.options$.notify(options);
     }
-    deselectOptions() {
+    deselectAll() {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    deselectOption(option) {
+    deselect(option) {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    filterOptions(value) {
+    filter(value) {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
@@ -68,16 +68,16 @@ class BaseSelectController {
         filtered.forEach((option) => {
             option.hidden = false;
         });
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    requestOptionsUpdate() {
+    requestUpdate() {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
         this.options$.notify([...selectOptions]);
         this.host.requestUpdate();
     }
-    getSelectOption(selectValue) {
+    getOption(selectValue) {
         var _a;
         return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
     }

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

@@ -1,7 +1,7 @@
 import { SelectOption } from "../model/select_option";
 import { BaseSelectController } from "./base_select_controller";
 export declare class MultiSelectController extends BaseSelectController {
-    toggleOption(option: SelectOption): void;
-    selectOption(option: SelectOption): void;
-    deselectOption(option: SelectOption): void;
+    toggle(option: SelectOption): void;
+    select(option: SelectOption): void;
+    deselect(option: SelectOption): void;
 }

package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js

@@ -1,18 +1,18 @@
 import { BaseSelectController } from './base_select_controller.js';
 
 class MultiSelectController extends BaseSelectController {
-    toggleOption(option) {
-        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    toggle(option) {
+        option.selected ? this.deselect(option) : this.select(option);
     }
-    selectOption(option) {
+    select(option) {
         option.selected = true;
         this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    deselectOption(option) {
+    deselect(option) {
         option.selected = false;
         this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
 }
 

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

@@ -1,5 +1,5 @@
 import { SelectOption } from "../model/select_option";
 import { BaseSelectController } from "./base_select_controller";
 export declare class SelectController extends BaseSelectController {
-    selectOption(option: SelectOption): void;
+    select(option: SelectOption): void;
 }

package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.js

@@ -1,13 +1,13 @@
 import { BaseSelectController } from './base_select_controller.js';
 
 class SelectController extends BaseSelectController {
-    selectOption(option) {
+    select(option) {
         var _a;
         const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         selectedOptions.forEach((option) => (option.selected = false));
         option.selected = true;
         this.selectedOptions$.notify([option]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
 }
 

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

@@ -10,13 +10,13 @@ export interface ISelectController {
     options$: BehaviorSubject<SelectOption[]>;
     visibleOptionsCount: number;
     selectedOptionsCount: number;
-    deselectOptions(): void;
-    deselectOption(option: SelectOption): void;
-    filterOptions(value: string): void;
-    toggleOption(option: SelectOption): void;
-    selectOption(option: SelectOption): void;
-    getSelectOption(selectValue: string): SelectOption | undefined;
-    removeOption(optionValue: string): void;
-    addOption(option: SelectOption, position?: number): void;
-    replaceOptions(options: SelectOption[]): void;
+    deselectAll(): void;
+    deselect(option: SelectOption): void;
+    filter(value: string): void;
+    toggle(option: SelectOption): void;
+    select(option: SelectOption): void;
+    getOption(selectValue: string): SelectOption | undefined;
+    remove(optionValue: string): void;
+    add(option: SelectOption, position?: number): void;
+    replace(options: SelectOption[]): void;
 }

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

@@ -1,14 +1,25 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { HOption } from "./components/option/select_option";
 import { TemplateResult, PropertyValues } from 'lit';
 import { SelectOption } from "./model/select_option";
+import type { TSelectType } from "./select_types";
 export declare class HSelect extends PhoenixLightLitElement {
     private static _components;
     controlName: string;
-    multiselect: boolean;
+    controlId: string;
+    multiple: boolean;
     opened: boolean;
     offset: number;
     error: boolean;
     disabled: boolean;
+    type: TSelectType;
+    required: boolean;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    get selectedOptions(): HOption[];
+    get name(): string;
+    get id(): string;
+    get options(): HOption[];
     private _searchValue;
     private _selectController;
     private _$options;
@@ -33,14 +44,16 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _appendNewHTMLOption;
     private _removeHTMLOptions;
     private _handleOptionClicked;
+    private _selectOption;
     private _handleSearch;
     private _handleDropdownHidden;
     private _closeSelect;
     private _clearOptions;
+    private _dispatchChangeEvent;
     protected update(changedProperties: PropertyValues): void;
-    addOption(option: SelectOption, position?: number): void;
+    add(option: SelectOption, position?: number): void;
     removeOption(optionValue: string): void;
-    replaceOptions(options: SelectOption[]): void;
+    replace(options: SelectOption[]): void;
     disconnectedCallback(): void;
     private _handleResize;
     private _getDropdownContentWidth;

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

@@ -7,7 +7,7 @@ import { property } from '@lit/reactive-element/decorators.js';
 import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME } from './components/select_components_constatns.js';
 import { Observer } from '../../../core/classes/observer/observer.js';
 import { HIcon } from '../../icon/icon.js';
-import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
+import { SELECT_TYPES, SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
 import { observe } from '../../../directives/observable_directive.js';
 import { HSelectToggler } from './components/toggler/select_toggler.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
@@ -26,9 +26,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
         var _a;
         super();
-        this.multiselect = false;
+        this.multiple = false;
         this.opened = false;
         this.offset = 2;
+        this.type = SELECT_TYPES.select;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = createRef();
@@ -41,10 +42,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
         };
         this._handleOptionDeselect = (event) => {
-            const selectedOption = this._selectController.getSelectOption(event.detail);
+            const selectedOption = this._selectController.getOption(event.detail);
             if (!selectedOption)
                 return;
-            this._selectController.deselectOption(selectedOption);
+            this._selectController.deselect(selectedOption);
+            this._dispatchChangeEvent();
         };
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
@@ -59,16 +61,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
             });
         };
         this._handleOptionClicked = (event) => {
-            const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
-            if (!selectedOption)
-                return;
-            this._selectController.toggleOption(selectedOption);
-            if (!this.multiselect)
-                this._closeSelect();
+            this._selectOption(event.detail.$option.value);
         };
         this._handleDropdownHidden = () => {
             this._searchValue = '';
@@ -81,7 +78,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._clearOptions = () => {
-            this._selectController.deselectOptions();
+            this._selectController.deselectAll();
+            this._dispatchChangeEvent();
+        };
+        this._dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('change'));
         };
         this._handleResize = debounce_1(() => {
             this._closeSelect();
@@ -90,6 +91,39 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
         this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
+        if (this.multiple)
+            this.type = SELECT_TYPES.multiple;
+    }
+    get selectedIndex() {
+        const selectedOptions = this._selectController.selectedOptions$.getValue();
+        if (!selectedOptions || selectedOptions.length === 0)
+            return -1;
+        const htmlOptions = Object.values(this._$options);
+        return this.multiple
+            ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
+            : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
+    }
+    set selectedIndex(index) {
+        const option = Object.values(this._$options)[index];
+        if (!option) {
+            this._selectController.deselectAll();
+            return;
+        }
+        this._selectOption(option.value);
+    }
+    get selectedOptions() {
+        var _a;
+        const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
+        return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
+    }
+    get name() {
+        return this.controlName;
+    }
+    get id() {
+        return this.controlId;
+    }
+    get options() {
+        return Object.values(this._$options);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -116,9 +150,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
-        this._selectController = this.multiselect ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
+        this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
-        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
+        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
@@ -162,29 +196,38 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const { value, selected } = option;
         const $option = SelectControlUtils.createHTMLOption(option);
         if (selected)
-            $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+            $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
         this._$options[value] = $option;
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
     }
+    _selectOption(value) {
+        const option = this._selectController.getOption(value);
+        if (!option)
+            return;
+        this._selectController.toggle(option);
+        if (!this.multiple)
+            this._closeSelect();
+        this._dispatchChangeEvent();
+    }
     _handleSearch({ detail }) {
         this._searchValue = detail;
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('_searchValue'))
-            this._selectController.filterOptions(this._searchValue);
+            this._selectController.filter(this._searchValue);
     }
-    addOption(option, position) {
-        this._selectController.addOption(option, position);
+    add(option, position) {
+        this._selectController.add(option, position);
     }
     removeOption(optionValue) {
-        this._selectController.removeOption(optionValue);
+        this._selectController.remove(optionValue);
     }
-    replaceOptions(options) {
-        this._selectController.replaceOptions(options);
+    replace(options) {
+        this._selectController.replace(options);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -214,6 +257,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 
                 <h-dropdown-content
+                    @focusout=${this._dispatchChangeEvent}
                     class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"
                     ${ref(this._$dropdownContent)}
                     name=${this.controlName}
@@ -253,7 +297,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               </p>
                           </div>`
             : nothing}
-                    ${this.multiselect && this._selectController.selectedOptionsCount >= 1
+                    ${this.multiple && this._selectController.selectedOptionsCount >= 1
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
@@ -277,13 +321,17 @@ HSelect._components = {
     toggler: HSelectToggler
 };
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'control-name' }),
     __metadata("design:type", String)
 ], HSelect.prototype, "controlName", void 0);
+__decorate([
+    property({ type: String, attribute: 'control-id' }),
+    __metadata("design:type", String)
+], HSelect.prototype, "controlId", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
-], HSelect.prototype, "multiselect", void 0);
+], HSelect.prototype, "multiple", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
@@ -300,6 +348,14 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSelect.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "required", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select_constants.d.ts

@@ -6,6 +6,10 @@ export declare const SELECT_SLOT_NAMES: {
     readonly content: "content";
     readonly toggler: "toggler";
 };
+export declare const SELECT_TYPES: {
+    readonly select: "select-one";
+    readonly multiple: "select-multiple";
+};
 export declare const SELECT_EVENT_NAMES: {
     readonly selectOption: "selectOption.select";
     readonly deselectOption: "selectOption.deselect";

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

@@ -6,6 +6,10 @@ const SELECT_SLOT_NAMES = {
     content: 'content',
     toggler: 'toggler'
 };
+const SELECT_TYPES = {
+    select: 'select-one',
+    multiple: 'select-multiple'
+};
 const SELECT_EVENT_NAMES = {
     selectOption: 'selectOption.select',
     deselectOption: 'selectOption.deselect'
@@ -32,5 +36,5 @@ const SELECT_CSS_CLASSES = {
     selectLabel: `${baseSelectClass}__label`
 };
 
-export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
+export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES, SELECT_TYPES };
 //# sourceMappingURL=select_constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}