@shoper/phoenix_design_system 1.1.8 → 1.2.0-2

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

@@ -0,0 +1,29 @@
+export declare const FILE_ITEM_CSS_CLASSES: {
+    readonly file: "file";
+    readonly fileName: "file__name";
+    readonly fileRemoveButton: "file__remove-button";
+};
+export declare const FILE_ITEM_EVENT_NAMES: {
+    readonly removed: "fileItemRemoved";
+};
+export declare type TFileItemConstructorOptions = {
+    name: string;
+    containerId: string;
+    removeButtonText: string;
+    removeButtonIconName?: string;
+};
+export declare const FILE_PICKER_CONTROL_CSS_CLASSES: {
+    readonly filePicker: "file-picker";
+    readonly filePickerDisabled: "file-picker_disabled";
+    readonly filePickerRequired: "file-picker_required";
+    readonly filePickerError: "file-picker_error";
+    readonly filePickerHasValue: "file-picker_has-value";
+    readonly filePickerInput: "file-picker__input";
+    readonly filePickerLabel: "file-picker__label";
+};
+export declare const FILE_PICKER_LABEL_EVENT_NAMES: {
+    readonly filePickerLabelClicked: "filePickerLabelClicked";
+};
+export declare const FILE_PICKER_ICON_CSS_CLASSES: {
+    readonly filePickerIcon: "file-picker-icon";
+};

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.js

@@ -0,0 +1,29 @@
+const baseFileItemClass = 'file';
+const FILE_ITEM_CSS_CLASSES = {
+    file: baseFileItemClass,
+    fileName: `${baseFileItemClass}__name`,
+    fileRemoveButton: `${baseFileItemClass}__remove-button`
+};
+const FILE_ITEM_EVENT_NAMES = {
+    removed: 'fileItemRemoved'
+};
+const baseFilePickerControlClass = 'file-picker';
+const FILE_PICKER_CONTROL_CSS_CLASSES = {
+    filePicker: baseFilePickerControlClass,
+    filePickerDisabled: `${baseFilePickerControlClass}_disabled`,
+    filePickerRequired: `${baseFilePickerControlClass}_required`,
+    filePickerError: `${baseFilePickerControlClass}_error`,
+    filePickerHasValue: `${baseFilePickerControlClass}_has-value`,
+    filePickerInput: `${baseFilePickerControlClass}__input`,
+    filePickerLabel: `${baseFilePickerControlClass}__label`
+};
+const FILE_PICKER_LABEL_EVENT_NAMES = {
+    filePickerLabelClicked: 'filePickerLabelClicked'
+};
+const baseFilePickerIconClass = 'file-picker-icon';
+const FILE_PICKER_ICON_CSS_CLASSES = {
+    filePickerIcon: baseFilePickerIconClass
+};
+
+export { FILE_ITEM_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES, FILE_PICKER_LABEL_EVENT_NAMES };
+//# sourceMappingURL=file_picker_constants.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HFilePickerLabel extends PhoenixLightLitElement {
+    controlId: string;
+    labelText: string;
+    labelIconName: string;
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    private _dispatchClickEvent;
+}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js

@@ -0,0 +1,55 @@
+import { __decorate, __metadata } from "tslib";
+import { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES, FILE_PICKER_LABEL_EVENT_NAMES } from './file_picker_constants';
+import { html, nothing } from 'lit';
+import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
+import { ICON_CSS_CLASSES } from '@phoenixRoot/components/icon/icon_constants';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { property } from 'lit/decorators';
+let HFilePickerLabel = class HFilePickerLabel extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickEvent = () => {
+            this.dispatchEvent(new CustomEvent(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClicked, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchClickEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    render() {
+        super.render();
+        return html `<label class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${this.controlId}">
+            ${this.labelIconName
+            ? html `<h-icon
+                      class="${ICON_CSS_CLASSES.icon} ${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
+                      icon-name=${this.labelIconName}
+                  />`
+            : nothing}
+            ${this.labelText}
+        </label>`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'control-id', reflect: true }),
+    __metadata("design:type", String)
+], HFilePickerLabel.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-text' }),
+    __metadata("design:type", String)
+], HFilePickerLabel.prototype, "labelText", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-icon-name' }),
+    __metadata("design:type", String)
+], HFilePickerLabel.prototype, "labelIconName", void 0);
+HFilePickerLabel = __decorate([
+    phoenixCustomElement('h-file-picker-label'),
+    __metadata("design:paramtypes", [])
+], HFilePickerLabel);
+export { HFilePickerLabel };
+//# sourceMappingURL=file_picker_label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file_picker_label.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/file_picker/file_picker_label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,+BAA+B,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AACvI,OAAO,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,sBAAsB;IAYxD;QACI,KAAK,EAAE,CAAC;QA2BJ,wBAAmB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,6BAA6B,CAAC,sBAAsB,EAAE;gBAClE,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;QACN,CAAC,CAAC;QA/BE,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC5E,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAEM,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAES,MAAM;QACZ,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,OAAO,IAAI,CAAA,iBAAiB,+BAA+B,CAAC,eAAe,UAAU,IAAI,CAAC,SAAS;cAC7F,IAAI,CAAC,aAAa;YAChB,CAAC,CAAC,IAAI,CAAA;+BACS,gBAAgB,CAAC,IAAI,IAAI,4BAA4B,CAAC,cAAc;kCACjE,IAAI,CAAC,aAAa;qBAC/B;YACL,CAAC,CAAC,OAAO;cACX,IAAI,CAAC,SAAS;iBACX,CAAC;IACd,CAAC;CASJ,CAAA;AA7CG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;mDAC1C;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;;mDAC3B;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;;uDAC5B;AARpB,gBAAgB;IAD5B,oBAAoB,CAAC,qBAAqB,CAAC;;GAC/B,gBAAgB,CA+C5B;SA/CY,gBAAgB"}

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

@@ -1,5 +1,4 @@
 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;
@@ -10,7 +9,7 @@ export declare class HOption extends PhoenixLightLitElement {
     connectedCallback(): void;
     private _setupEvents;
     private _dispatchClickedEvent;
-    updated(changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _addSelectedIcon;
     private _removeSelectedIcon;
 }

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

@@ -5,7 +5,6 @@ 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() {
@@ -34,10 +33,12 @@ let HOption = class HOption extends PhoenixLightLitElement {
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('selected'))
-            this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        switch (name) {
+            case '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;"}
+{"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;"}

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;
-    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;
+    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;
     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);
     }
-    toggle(option) {
-        option.selected ? this.deselect(option) : this.select(option);
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     }
-    remove(optionValue) {
+    removeOption(optionValue) {
         const options = this.options$.getValue();
         if (!options)
             return;
         this.options$.notify(options.filter((option) => option.value !== optionValue));
     }
-    add(option, position) {
+    addOption(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)]);
     }
-    replace(options) {
+    replaceOptions(options) {
         this.options$.notify(options);
     }
-    deselectAll() {
+    deselectOptions() {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    deselect(option) {
+    deselectOption(option) {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    filter(value) {
+    filterOptions(value) {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
@@ -68,16 +68,16 @@ class BaseSelectController {
         filtered.forEach((option) => {
             option.hidden = false;
         });
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    requestUpdate() {
+    requestOptionsUpdate() {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
         this.options$.notify([...selectOptions]);
         this.host.requestUpdate();
     }
-    getOption(selectValue) {
+    getSelectOption(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 {
-    toggle(option: SelectOption): void;
-    select(option: SelectOption): void;
-    deselect(option: SelectOption): void;
+    toggleOption(option: SelectOption): void;
+    selectOption(option: SelectOption): void;
+    deselectOption(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 {
-    toggle(option) {
-        option.selected ? this.deselect(option) : this.select(option);
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     }
-    select(option) {
+    selectOption(option) {
         option.selected = true;
         this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    deselect(option) {
+    deselectOption(option) {
         option.selected = false;
         this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
 }
 

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 {
-    select(option: SelectOption): void;
+    selectOption(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 {
-    select(option) {
+    selectOption(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.requestUpdate();
+        this.requestOptionsUpdate();
     }
 }
 

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

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

@@ -1,25 +1,14 @@
 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;
-    controlId: string;
-    multiple: boolean;
+    multiselect: 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;
@@ -44,16 +33,14 @@ 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;
-    add(option: SelectOption, position?: number): void;
+    addOption(option: SelectOption, position?: number): void;
     removeOption(optionValue: string): void;
-    replace(options: SelectOption[]): void;
+    replaceOptions(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_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 { 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,10 +26,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
         var _a;
         super();
-        this.multiple = false;
+        this.multiselect = false;
         this.opened = false;
         this.offset = 2;
-        this.type = SELECT_TYPES.select;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = createRef();
@@ -42,11 +41,10 @@ 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.getOption(event.detail);
+            const selectedOption = this._selectController.getSelectOption(event.detail);
             if (!selectedOption)
                 return;
-            this._selectController.deselect(selectedOption);
-            this._dispatchChangeEvent();
+            this._selectController.deselectOption(selectedOption);
         };
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
@@ -61,11 +59,16 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
             });
         };
         this._handleOptionClicked = (event) => {
-            this._selectOption(event.detail.$option.value);
+            const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
+            if (!selectedOption)
+                return;
+            this._selectController.toggleOption(selectedOption);
+            if (!this.multiselect)
+                this._closeSelect();
         };
         this._handleDropdownHidden = () => {
             this._searchValue = '';
@@ -78,11 +81,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._clearOptions = () => {
-            this._selectController.deselectAll();
-            this._dispatchChangeEvent();
-        };
-        this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change'));
+            this._selectController.deselectOptions();
         };
         this._handleResize = debounce_1(() => {
             this._closeSelect();
@@ -91,39 +90,6 @@ 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);
@@ -150,9 +116,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
-        this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
+        this._selectController = this.multiselect ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
-        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
+        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
         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);
@@ -196,38 +162,29 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const { value, selected } = option;
         const $option = SelectControlUtils.createHTMLOption(option);
         if (selected)
-            $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+            $option.setAttribute(this.multiselect ? '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.filter(this._searchValue);
+            this._selectController.filterOptions(this._searchValue);
     }
-    add(option, position) {
-        this._selectController.add(option, position);
+    addOption(option, position) {
+        this._selectController.addOption(option, position);
     }
     removeOption(optionValue) {
-        this._selectController.remove(optionValue);
+        this._selectController.removeOption(optionValue);
     }
-    replace(options) {
-        this._selectController.replace(options);
+    replaceOptions(options) {
+        this._selectController.replaceOptions(options);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -257,7 +214,6 @@ 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}
@@ -297,7 +253,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               </p>
                           </div>`
             : nothing}
-                    ${this.multiple && this._selectController.selectedOptionsCount >= 1
+                    ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
@@ -321,17 +277,13 @@ HSelect._components = {
     toggler: HSelectToggler
 };
 __decorate([
-    property({ type: String, attribute: 'control-name' }),
+    property({ type: String }),
     __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, "multiple", void 0);
+], HSelect.prototype, "multiselect", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
@@ -348,14 +300,6 @@ __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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}