@shoper/phoenix_design_system 1.0.3 → 1.1.0-1

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

@@ -0,0 +1,223 @@
+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_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_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/search/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_utils.js';
+
+let HSelect = class HSelect extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.multiselect = false;
+        this.opened = false;
+        this._searchValue = '';
+        this._$options = {};
+        this._$dropdown = createRef();
+        this._$search = createRef();
+        this._$optionsList = createRef();
+        this._$dropdownContent = 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: SelectOption) => 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 = '';
+            this.opened = false;
+        };
+        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+        $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened'))
+            this.opened ? this.classList.add(SELECT_CSS_CLASSES.selectOpened) : this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new ListBoxKeyboardController({
+                host: this,
+                $list: this._$optionsList.value
+            });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SELECT_CSS_CLASSES.select);
+        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();
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this._$dropdownContent.value)
+            this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+    }
+    _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.removeHTMLOptions(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 `
+            <h-dropdown
+                ${ref(this._$dropdown)}
+                @dropdown.showed=${() => (this.opened = true)}
+                @dropdown.hidden=${this._handleDropdownHidden}
+                name=${this.controlName}
+            >
+                <h-dropdown-toggler name=${this.controlName} class="${SELECT_CSS_CLASSES.selectControl}">
+                    ${this.getSlot(SELECT_SLOT_NAMES.input)}
+                    <h-icon icon-name="icon-chevron-down"></h-icon>
+                </h-dropdown-toggler>
+
+                <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} 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
+                              class=${SELECT_CSS_CLASSES.selectSearch}
+                              ${ref(this._$search)}
+                              .value=${this._searchValue}
+                              @selectSearch.search=${this._handleSearch}
+                          ></h-select-search>`
+            : nothing}
+                    ${this.hasSlot(SELECT_SLOT_NAMES.content)
+            ? html `
+                              <h-select-options
+                                  class=${SELECT_CSS_CLASSES.selectOptions}
+                                  ${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 class=${SELECT_CSS_CLASSES.selectFooter}>
+                                  <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} />`))}
+        `;
+    }
+};
+HSelect._components = {
+    search: HSelectSearch,
+    icon: HIcon
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSelect.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "multiselect", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSelect.prototype, "_searchValue", void 0);
+HSelect = __decorate([
+    phoenixCustomElement('h-select'),
+    __metadata("design:paramtypes", [])
+], HSelect);
+
+export { HSelect };
+//# sourceMappingURL=select.js.map

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

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

@@ -0,0 +1,23 @@
+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;
+export declare const SELECT_CSS_CLASSES: {
+    readonly select: "select";
+    readonly selectOpened: "select_opened";
+    readonly selectControl: "select__control";
+    readonly selectInput: "select__value";
+    readonly selectSearch: "select__search";
+    readonly selectOptions: "select__options";
+    readonly selectContent: "select__content";
+    readonly selectFooter: "select__footer";
+};

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

@@ -0,0 +1,27 @@
+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;
+const baseSelectClass = 'select';
+const SELECT_CSS_CLASSES = {
+    select: baseSelectClass,
+    selectOpened: `${baseSelectClass}_opened`,
+    selectControl: `${baseSelectClass}__control`,
+    selectInput: `${baseSelectClass}__value`,
+    selectSearch: `${baseSelectClass}__search`,
+    selectOptions: `${baseSelectClass}__options`,
+    selectContent: `${baseSelectClass}__content`,
+    selectFooter: `${baseSelectClass}__footer`
+};
+
+export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };
+//# sourceMappingURL=select_constants.js.map

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

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

@@ -0,0 +1,9 @@
+import { SelectOption } from "./model/select_option";
+import { HOption } from "./components/option/select_option";
+import { HSelectOptions } from "./components/select_options";
+export declare class SelectControlUtils {
+    static createHTMLOption(option: SelectOption): HOption;
+    static syncHTMLOptionWithModel(option: SelectOption, $option: HOption): void;
+    static removeHTMLOptions($options: HOption[], optionsValuesThatExists: string[]): Record<string, HOption>;
+    static appendHTMLOption($option: HOption, $list: HSelectOptions, position?: number): void;
+}

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

@@ -0,0 +1,48 @@
+import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_constatns.js';
+
+class SelectControlUtils {
+    static createHTMLOption(option) {
+        const { selected, value, disabled, hidden, content } = option;
+        const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
+        $option.setAttribute('value', String(value));
+        const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        $optionContent.innerText = content;
+        $option.append($optionContent);
+        if (selected)
+            $option.setAttribute('selected', '');
+        if (disabled)
+            $option.setAttribute('disabled', '');
+        if (hidden)
+            $option.setAttribute('hidden', '');
+        return $option;
+    }
+    static syncHTMLOptionWithModel(option, $option) {
+        const { selected, value, disabled, hidden } = option;
+        $option.selected = selected;
+        $option.value = value;
+        $option.disabled = disabled;
+        $option.hidden = hidden;
+    }
+    static removeHTMLOptions($options, optionsValuesThatExists) {
+        return $options.reduce((acc, $option) => {
+            if (optionsValuesThatExists.includes($option.value))
+                return {
+                    ...acc,
+                    [$option.value]: $option
+                };
+            $option.remove();
+            return acc;
+        }, {});
+    }
+    static appendHTMLOption($option, $list, position) {
+        if (position !== undefined) {
+            const $nextOption = $list.querySelector(`${SELECT_RELATED_COMPONENTS_NAMES.option}:nth-child(${position})`);
+            $nextOption ? $nextOption.insertAdjacentElement('beforebegin', $option) : $list.append($option);
+            return;
+        }
+        $list.append($option);
+    }
+}
+
+export { SelectControlUtils };
+//# sourceMappingURL=select_utils.js.map

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

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

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

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

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

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

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

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

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

@@ -3,8 +3,8 @@ import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import classnames from '../../../external/classnames/index.js';
 import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
+import classnames from '../../../../../external/classnames/index.js';
 import { namespacedAttribute } from '../../directives/namespaced_attribure_directive.js';
 
 var HIcon_1;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,uCAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,uBAAuB,6CAAiD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { property } from 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_ELEMENTS } from './base_message_constants.js';

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

@@ -1,13 +1,13 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
-import { html } from 'lit-html';
-import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { property, state } from '@lit/reactive-element/decorators.js';
+import { html } from 'lit-html';
 import { createRef, ref } from 'lit-html/directives/ref.js';
+import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
+import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import '@lit/reactive-element';
+import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 
 var HModal_1;
 let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {

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

@@ -3,8 +3,8 @@ import 'lit';
 import { state, property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { PORTAL_EVENTS } from './portal_constants.js';
 import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
+import { PORTAL_EVENTS } from './portal_constants.js';
 
 let HPortal = class HPortal extends PhoenixLightLitElement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_target.js

@@ -1,8 +1,8 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { PortalTargetError } from './portal_target_error.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { PortalTargetError } from './portal_target_error.js';
 import { PORTAL_EVENTS, PORTAL_TARGET_NAME_PROP } from './portal_constants.js';
 
 var HPortalTarget_1;

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { BtnController } from '../../controllers/btn_controller.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 
 let HScrollTo = class HScrollTo extends PhoenixLightLitElement {
     constructor() {

package/build/esm/packages/phoenix/src/components/tabs/tab/tab.js

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { BtnController } from '../../../controllers/btn_controller.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
 import { TAB_EVENT_NAMES, TAB_SELECTED_ATTRIBUTE_NAME } from './tab_constants.js';
 
 let HTab = class HTab extends PhoenixLightLitElement {

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 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 { BtnController } from '../../controllers/btn_controller.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 import { TAG_EVENT_NAMES, TAG_CSS_CLASSES } from './tag_constants.js';
 
 let HTag = class HTag extends PhoenixLightLitElement {
@@ -10,7 +10,8 @@ let HTag = class HTag extends PhoenixLightLitElement {
         super(...arguments);
         this.clickable = false;
         this.removable = false;
-        this._handleClick = () => {
+        this._handleClick = (event) => {
+            event.stopPropagation();
             /**
              * TODO do zrobienia in fiuczer, jak jest tag klikalny i mamy remove, to klik remove działa na button remove
              * a nie na cały tag

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

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

package/build/esm/packages/phoenix/src/controllers/{btn_controller.d.ts → btn_controller/btn_controller.d.ts}

@@ -1,8 +1,9 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { TBtnControllerOption } from "./btn_controller_types";
 export declare class BtnController implements ReactiveController {
     host: ReactiveControllerHost & HTMLElement;
     private _keystrokesController;
-    constructor(host: ReactiveControllerHost & HTMLElement, callback: (ev: Event) => void);
+    constructor(host: ReactiveControllerHost & HTMLElement, callback: (ev: Event) => void, { isNavigable }?: TBtnControllerOption);
     hostConnected(): void;
     hostDisconnected(): void;
 }

package/build/esm/packages/phoenix/src/controllers/{btn_controller.js → btn_controller/btn_controller.js}

@@ -1,10 +1,11 @@
 import 'lit';
-import { KeystrokesController } from './keystrokes_controller/keystrokes_controller.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
 
 class BtnController {
-    constructor(host, callback) {
+    constructor(host, callback, { isNavigable = true } = {}) {
         (this.host = host).addController(this);
-        this.host.tabIndex = 0;
+        isNavigable ? UiDomUtils.makeNavigable(this.host) : UiDomUtils.makeUnnavigable(this.host);
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new KeystrokesController({
             host,

package/build/{cjs/packages/phoenix/src/controllers → esm/packages/phoenix/src/controllers/btn_controller}/btn_controller.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/controllers/btn_controller/btn_controller_types.d.ts

@@ -0,0 +1,3 @@
+export declare type TBtnControllerOption = {
+    isNavigable?: boolean;
+};

package/build/esm/packages/phoenix/src/controllers/btn_controller/btn_controller_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=btn_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/btn_controller/btn_controller_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"btn_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/btn_controller/btn_controller_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js

@@ -72,16 +72,16 @@ class KeystrokesController {
         this._keys = keys;
         this._callback = callback;
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
-        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
-        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
     hostConnected() {
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('focusout', this._clearBuffer);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
     hostDisconnected() {
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('focusout', this._clearBuffer);
-        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
-        __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").removeEventListener('keydown', this._saveKey);
+        __classPrivateFieldGet(this, _KeystrokesController_target, "f").removeEventListener('keyup', this._removeKey);
     }
 }
 _KeystrokesController_host = new WeakMap(), _KeystrokesController_target = new WeakMap();

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_constants.js

@@ -0,0 +1,7 @@
+const LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS = {
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+};
+
+export { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS };
+//# sourceMappingURL=list_box_controller_constants.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_constants.js.map

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

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts

@@ -0,0 +1,10 @@
+import { Any } from 'ts-toolbelt';
+import { ReactiveControllerHost } from 'lit';
+import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
+export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
+export declare type TListBoxKeyboardControllerConstructorOptions = {
+    host: ReactiveControllerHost & HTMLElement;
+    $list: HTMLElement;
+    listItemSelector?: string;
+    orientation?: TListBoxKeyboardNavigationDirection;
+};

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js

@@ -0,0 +1,4 @@
+import 'ts-toolbelt';
+import 'lit';
+import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
+//# sourceMappingURL=list_box_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}