@shoper/phoenix_design_system 0.28.0-2 → 0.28.0-3

package/build/esm/packages/phoenix/src/index.js

@@ -2,13 +2,11 @@ export { DEFAULT_SLOT_NAME } from './core/phoenix_light_lit_element/phoenix_ligh
 export { PhoenixLightLitElement } from './core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
 export { BtnController } from './controllers/btn_controller/btn_controller.js';
-export { HOption } from './components/form/select/control/components/select_option.js';
-export { HSelectOptions } from './components/form/select/control/components/select_options.js';
+export { HOption } from './components/form/select/components/option/select_option.js';
+export { HSelectOptions } from './components/form/select/components/select_options.js';
 export { ContextConsumerController } from './core/context/context_consumer_controller.js';
-export { HSelectInput } from './components/form/select/control/components/select_input.js';
+export { HSelectValue } from './components/form/select/components/value/select_value.js';
 export { ContextProviderController } from './core/context/context_provider_controller.js';
-export { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_CONTROL_EVENTS, CHECKBOX_PROPS_TO_SYNC, CHECKBOX_SLOTS } from './components/form/checkbox/checkbox_constants.js';
-export { HSelect } from './components/form/select/select.js';
 export { HPortal } from './components/portal/portal.js';
 export { HPortalTarget } from './components/portal/portal_target.js';
 export { BackdropController } from './components/backdrop/controller/backdrop_controller.js';
@@ -19,7 +17,7 @@ export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
 export { HDropdown } from './components/dropdown/dropdown.js';
 export { HIcon } from './components/icon/icon.js';
-export { HSelectControl } from './components/form/select/control/select_control.js';
+export { HSelect } from './components/form/select/select.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';
 export { HModalBody } from './components/modal/modal_body.js';
@@ -38,6 +36,7 @@ export { HInput } from './components/form/input/input.js';
 export { HInputControl } from './components/form/input/input_control.js';
 export { HInputIcon } from './components/form/input/input_icon.js';
 export { HInputUnit } from './components/form/input/input_unit.js';
+export { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_CONTROL_EVENTS, CHECKBOX_PROPS_TO_SYNC, CHECKBOX_SLOTS } from './components/form/checkbox/checkbox_constants.js';
 export { HCheckbox } from './components/form/checkbox/checkbox.js';
 export { LABEL_CSS_CLASSES } from './components/form/label/label_constants.js';
 export { HCheckboxContent } from './components/form/checkbox/checkbox_content.js';

package/build/esm/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.28.0-2",
+  "version": "0.28.0-3",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",

package/build/cjs/packages/phoenix/src/components/form/select/control/select_control.js

@@ -1,200 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators = require('lit/decorators');
-var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
-var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
-var decorators_js = require('@lit/reactive-element/decorators.js');
-var select_components_constatns = require('./components/select_components_constatns.js');
-var select_control_constants = require('./select_control_constants.js');
-var observer = require('../../../../core/classes/observer/observer.js');
-var observable_directive = require('../../../../directives/observable_directive.js');
-var context_provider_controller = require('../../../../core/context/context_provider_controller.js');
-var ref_js = require('lit-html/directives/ref.js');
-var multi_select_controller = require('./controllers/multi_select_controller.js');
-var select_controller = require('./controllers/select_controller.js');
-var select_search = require('./components/select_search.js');
-var list_box_keyboard_controller = require('../../../../controllers/list_box_controller/list_box_keyboard_controller.js');
-var icon = require('../../../icon/icon.js');
-var select_option_mapper = require('./model/select_option_mapper.js');
-var select_control_utils = require('./select_control_utils.js');
-
-exports.HSelectControl = class HSelectControl extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.multiselect = false;
-        this._searchValue = '';
-        this._$options = {};
-        this._$dropdown = ref_js.createRef();
-        this._$search = ref_js.createRef();
-        this._$optionsList = ref_js.createRef();
-        this._selectContext = new context_provider_controller.ContextProviderController(this);
-        this._handleOptionDeselect = (event) => {
-            const selectedOption = this._selectController.getSelectOption(event.detail);
-            if (!selectedOption)
-                return;
-            this._selectController.deselectOption(selectedOption);
-        };
-        this._updateOptionsView = (options) => {
-            if (options.length < Object.keys(this._$options).length)
-                this._removeHTMLOptions(options.map((option) => option.value));
-            options.forEach((option, index) => {
-                const { selected, value } = option;
-                const $option = this._$options[value];
-                if (!$option) {
-                    this._appendNewHTMLOption(option, index + 1);
-                    return;
-                }
-                select_control_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
-                if (!selected)
-                    return;
-                $option.setAttribute(this.multiselect ? '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._closeSelect = () => {
-            var _a;
-            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
-        };
-        this._clearOptions = () => {
-            this._selectController.deselectOptions();
-        };
-        this._handleDropdownHidden = () => {
-            this._searchValue = '';
-        };
-        const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
-        $options.forEach(($option) => $option.setAttribute('slot', select_control_constants.SELECT_SLOT_NAMES.content));
-    }
-    updated(props) {
-        super.updated(props);
-        if (this._$optionsList.value && !this._listBoxController)
-            this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
-                host: this,
-                $list: this._$optionsList.value
-            });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._selectController = this.multiselect ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
-        this._selectContext.provide(select_control_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
-        this._selectContext.provide(select_control_constants.SELECT_CONTEXTS.isMultiselect, this.multiselect);
-        const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
-        this._selectController.options$.subscribe(new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions)));
-        this._$options = $options.reduce((acc, $option) => {
-            if (acc[$option.value] !== undefined)
-                throw Error('Select options must hava a unique values.');
-            return {
-                ...acc,
-                [$option.value]: $option
-            };
-        }, {});
-        this._selectController.options$.notify($options.map(select_option_mapper.SelectOptionMapper.toModel));
-        this._setupEvents();
-    }
-    _setupEvents() {
-        this.addEventListener(select_control_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
-    }
-    _appendNewHTMLOption(option, position) {
-        const $list = this._$optionsList.value;
-        if (!$list)
-            return;
-        const { value, selected } = option;
-        const $option = select_control_utils.SelectControlUtils.createHTMLOption(option);
-        if (selected)
-            $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
-        this._$options[value] = $option;
-        select_control_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
-    }
-    _removeHTMLOptions(optionsValues) {
-        this._$options = select_control_utils.SelectControlUtils.removeHTMLOption(Object.values(this._$options), optionsValues);
-    }
-    _handleSearch({ detail }) {
-        this._searchValue = detail;
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('_searchValue'))
-            this._selectController.filterOptions(this._searchValue);
-    }
-    addOption(option, position) {
-        this._selectController.addOption(option, position);
-    }
-    removeOption(optionValue) {
-        this._selectController.removeOption(optionValue);
-    }
-    replaceOptions(options) {
-        this._selectController.replaceOptions(options);
-    }
-    render() {
-        var _a;
-        const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
-        return lit.html `
-            <div>
-                <h-dropdown ${ref_js.ref(this._$dropdown)} @dropdown.hidden=${this._handleDropdownHidden} name=${this.controlName}>
-                    <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_control_constants.SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
-
-                    <h-dropdown-content name=${this.controlName}>
-                        <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
-
-                        ${options.length > select_control_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
-            ? lit.html `<h-select-search
-                                  ${ref_js.ref(this._$search)}
-                                  .value=${this._searchValue}
-                                  @selectSearch.search=${this._handleSearch}
-                              ></h-select-search>`
-            : lit.nothing}
-                        ${this.hasSlot(select_control_constants.SELECT_SLOT_NAMES.content)
-            ? lit.html `
-                                  <h-select-options ${ref_js.ref(this._$optionsList)} @selectOptions.clicked=${this._handleOptionClicked}>
-                                      ${this.getSlot(select_control_constants.SELECT_SLOT_NAMES.content)}
-                                  </h-select-options>
-                              `
-            : lit.nothing}
-                        ${!this._selectController.visibleOptionsCount ? lit.html `<p>brak wyników dla ${this._searchValue}</p>` : lit.nothing}
-                        ${this.multiselect && this._selectController.selectedOptionsCount >= 1
-            ? lit.html `
-                                  <section>
-                                      <button @click=${this._clearOptions}>clear</button>
-                                      <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
-                                  </section>
-                              `
-            : lit.nothing}
-                    </h-dropdown-content>
-                </h-dropdown>
-
-                ${observable_directive.observe(this._selectController.selectedOptions$, (selectOptions) => selectOptions.map((option) => lit.html `<input type="hidden" name=${this.controlName} value=${option.value} />`))}
-            </div>
-        `;
-    }
-};
-exports.HSelectControl._components = {
-    search: select_search.HSelectSearch,
-    icon: icon.HIcon
-};
-tslib_es6.__decorate([
-    decorators_js.property({ type: String }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSelectControl.prototype, "controlName", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HSelectControl.prototype, "multiselect", void 0);
-tslib_es6.__decorate([
-    decorators.state(),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSelectControl.prototype, "_searchValue", void 0);
-exports.HSelectControl = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-select-control'),
-    tslib_es6.__metadata("design:paramtypes", [])
-], exports.HSelectControl);
-//# sourceMappingURL=select_control.js.map

package/build/cjs/packages/phoenix/src/components/form/select/control/select_control.js.map

@@ -1 +0,0 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/select/control/select_control_constants.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const SELECT_CONTEXTS = {
-    isMultiselect: 'isMultiselect',
-    selectedOptions$: 'selectedOptions$'
-};
-const SELECT_SLOT_NAMES = {
-    content: 'content',
-    input: 'input'
-};
-const SELECT_EVENT_NAMES = {
-    selectOption: 'selectOption.select',
-    deselectOption: 'selectOption.deselect'
-};
-const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
-
-exports.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
-exports.SELECT_CONTEXTS = SELECT_CONTEXTS;
-exports.SELECT_EVENT_NAMES = SELECT_EVENT_NAMES;
-exports.SELECT_SLOT_NAMES = SELECT_SLOT_NAMES;
-//# sourceMappingURL=select_control_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/control/select_control_constants.js.map

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

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

@@ -1 +0,0 @@
-{"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_types.js

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/controllers/select_controllers_types.js

@@ -1,5 +0,0 @@
-import 'lit';
-import '@phoenixRoot/components/form/select/control/model/select_option';
-import '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
-import '@phoenixRoot/components/form/select/control/select_control';
-//# sourceMappingURL=select_controllers_types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select_controllers_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/control/controllers/select_controllers_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAA6B,iEAAiE,CAAC;AAC/F,OAAgC,6DAA6D,CAAC;AAC9F,OAA+B,4DAA4D,CAAC"}

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

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

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

@@ -1,34 +0,0 @@
-import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import { TemplateResult, PropertyValues } from 'lit';
-import { SelectOption } from "./model/select_option";
-export declare class HSelectControl extends PhoenixLightLitElement {
-    private static _components;
-    controlName: string;
-    multiselect: boolean;
-    private _searchValue;
-    private _selectController;
-    private _$options;
-    private _$dropdown;
-    private _$search;
-    private _$optionsList;
-    private _selectContext;
-    private _listBoxController;
-    constructor();
-    updated(props: PropertyValues): void;
-    connectedCallback(): void;
-    private _setupEvents;
-    private _handleOptionDeselect;
-    private _updateOptionsView;
-    private _appendNewHTMLOption;
-    private _removeHTMLOptions;
-    private _handleOptionClicked;
-    private _handleSearch;
-    private _closeSelect;
-    private _clearOptions;
-    private _handleDropdownHidden;
-    protected update(changedProperties: PropertyValues): void;
-    addOption(option: SelectOption, position?: number): void;
-    removeOption(optionValue: string): void;
-    replaceOptions(options: SelectOption[]): void;
-    protected render(): TemplateResult;
-}

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

@@ -1,198 +0,0 @@
-import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
-import { html, nothing } from 'lit';
-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 { property } from '@lit/reactive-element/decorators.js';
-import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_constatns.js';
-import { SELECT_SLOT_NAMES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_control_constants.js';
-import { Observer } from '../../../../core/classes/observer/observer.js';
-import { observe } from '../../../../directives/observable_directive.js';
-import { ContextProviderController } from '../../../../core/context/context_provider_controller.js';
-import { createRef, ref } from 'lit-html/directives/ref.js';
-import { MultiSelectController } from './controllers/multi_select_controller.js';
-import { SelectController } from './controllers/select_controller.js';
-import { HSelectSearch } from './components/select_search.js';
-import { ListBoxKeyboardController } from '../../../../controllers/list_box_controller/list_box_keyboard_controller.js';
-import { HIcon } from '../../../icon/icon.js';
-import { SelectOptionMapper } from './model/select_option_mapper.js';
-import { SelectControlUtils } from './select_control_utils.js';
-
-let HSelectControl = class HSelectControl extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.multiselect = false;
-        this._searchValue = '';
-        this._$options = {};
-        this._$dropdown = createRef();
-        this._$search = createRef();
-        this._$optionsList = createRef();
-        this._selectContext = new ContextProviderController(this);
-        this._handleOptionDeselect = (event) => {
-            const selectedOption = this._selectController.getSelectOption(event.detail);
-            if (!selectedOption)
-                return;
-            this._selectController.deselectOption(selectedOption);
-        };
-        this._updateOptionsView = (options) => {
-            if (options.length < Object.keys(this._$options).length)
-                this._removeHTMLOptions(options.map((option) => option.value));
-            options.forEach((option, index) => {
-                const { selected, value } = option;
-                const $option = this._$options[value];
-                if (!$option) {
-                    this._appendNewHTMLOption(option, index + 1);
-                    return;
-                }
-                SelectControlUtils.syncHTMLOptionWithModel(option, $option);
-                if (!selected)
-                    return;
-                $option.setAttribute(this.multiselect ? '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._closeSelect = () => {
-            var _a;
-            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
-        };
-        this._clearOptions = () => {
-            this._selectController.deselectOptions();
-        };
-        this._handleDropdownHidden = () => {
-            this._searchValue = '';
-        };
-        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
-        $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
-    }
-    updated(props) {
-        super.updated(props);
-        if (this._$optionsList.value && !this._listBoxController)
-            this._listBoxController = new ListBoxKeyboardController({
-                host: this,
-                $list: this._$optionsList.value
-            });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        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.multiselect);
-        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
-        this._selectController.options$.subscribe(new Observer((selectedOptions) => this._updateOptionsView(selectedOptions)));
-        this._$options = $options.reduce((acc, $option) => {
-            if (acc[$option.value] !== undefined)
-                throw Error('Select options must hava a unique values.');
-            return {
-                ...acc,
-                [$option.value]: $option
-            };
-        }, {});
-        this._selectController.options$.notify($options.map(SelectOptionMapper.toModel));
-        this._setupEvents();
-    }
-    _setupEvents() {
-        this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
-    }
-    _appendNewHTMLOption(option, position) {
-        const $list = this._$optionsList.value;
-        if (!$list)
-            return;
-        const { value, selected } = option;
-        const $option = SelectControlUtils.createHTMLOption(option);
-        if (selected)
-            $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
-        this._$options[value] = $option;
-        SelectControlUtils.appendHTMLOption($option, $list, position);
-    }
-    _removeHTMLOptions(optionsValues) {
-        this._$options = SelectControlUtils.removeHTMLOption(Object.values(this._$options), optionsValues);
-    }
-    _handleSearch({ detail }) {
-        this._searchValue = detail;
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('_searchValue'))
-            this._selectController.filterOptions(this._searchValue);
-    }
-    addOption(option, position) {
-        this._selectController.addOption(option, position);
-    }
-    removeOption(optionValue) {
-        this._selectController.removeOption(optionValue);
-    }
-    replaceOptions(options) {
-        this._selectController.replaceOptions(options);
-    }
-    render() {
-        var _a;
-        const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
-        return html `
-            <div>
-                <h-dropdown ${ref(this._$dropdown)} @dropdown.hidden=${this._handleDropdownHidden} name=${this.controlName}>
-                    <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
-
-                    <h-dropdown-content name=${this.controlName}>
-                        <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
-
-                        ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
-            ? html `<h-select-search
-                                  ${ref(this._$search)}
-                                  .value=${this._searchValue}
-                                  @selectSearch.search=${this._handleSearch}
-                              ></h-select-search>`
-            : nothing}
-                        ${this.hasSlot(SELECT_SLOT_NAMES.content)
-            ? html `
-                                  <h-select-options ${ref(this._$optionsList)} @selectOptions.clicked=${this._handleOptionClicked}>
-                                      ${this.getSlot(SELECT_SLOT_NAMES.content)}
-                                  </h-select-options>
-                              `
-            : nothing}
-                        ${!this._selectController.visibleOptionsCount ? html `<p>brak wyników dla ${this._searchValue}</p>` : nothing}
-                        ${this.multiselect && this._selectController.selectedOptionsCount >= 1
-            ? html `
-                                  <section>
-                                      <button @click=${this._clearOptions}>clear</button>
-                                      <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
-                                  </section>
-                              `
-            : nothing}
-                    </h-dropdown-content>
-                </h-dropdown>
-
-                ${observe(this._selectController.selectedOptions$, (selectOptions) => selectOptions.map((option) => html `<input type="hidden" name=${this.controlName} value=${option.value} />`))}
-            </div>
-        `;
-    }
-};
-HSelectControl._components = {
-    search: HSelectSearch,
-    icon: HIcon
-};
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HSelectControl.prototype, "controlName", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HSelectControl.prototype, "multiselect", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], HSelectControl.prototype, "_searchValue", void 0);
-HSelectControl = __decorate([
-    phoenixCustomElement('h-select-control'),
-    __metadata("design:paramtypes", [])
-], HSelectControl);
-
-export { HSelectControl };
-//# sourceMappingURL=select_control.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select_control_constants.d.ts

@@ -1,13 +0,0 @@
-export declare const SELECT_CONTEXTS: {
-    readonly isMultiselect: "isMultiselect";
-    readonly selectedOptions$: "selectedOptions$";
-};
-export declare const SELECT_SLOT_NAMES: {
-    readonly content: "content";
-    readonly input: "input";
-};
-export declare const SELECT_EVENT_NAMES: {
-    readonly selectOption: "selectOption.select";
-    readonly deselectOption: "selectOption.deselect";
-};
-export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;

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

@@ -1,16 +0,0 @@
-const SELECT_CONTEXTS = {
-    isMultiselect: 'isMultiselect',
-    selectedOptions$: 'selectedOptions$'
-};
-const SELECT_SLOT_NAMES = {
-    content: 'content',
-    input: 'input'
-};
-const SELECT_EVENT_NAMES = {
-    selectOption: 'selectOption.select',
-    deselectOption: 'selectOption.deselect'
-};
-const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
-
-export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };
-//# sourceMappingURL=select_control_constants.js.map

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

@@ -1,8 +0,0 @@
-import { HSelect } from "./select";
-import { HSelectControl } from "./control/select_control";
-declare global {
-    interface HTMLElementTagNameMap {
-        'h-select': HSelect;
-        'h-select-control': HSelectControl;
-    }
-}

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

@@ -1,3 +0,0 @@
-import '@phoenixRoot/components/form/select/select';
-import '@phoenixRoot/components/form/select/control/select_control';
-//# sourceMappingURL=select_types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAwB,4CAA4C,CAAC;AACrE,OAA+B,4DAA4D,CAAC"}