@shoper/phoenix_design_system 1.15.11-16 → 1.15.11-18

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

@@ -14,7 +14,6 @@ import { observe } from '../../../directives/observable_directive.js';
 import { HSelectToggler } from './components/toggler/select_toggler.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
-import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { HDropdownContent } from '../../dropdown/dropdown_content.js';
 import { HDropdownToggler } from '../../dropdown/dropdown_toggler.js';
 import { HDropdown } from '../../dropdown/dropdown.js';
@@ -26,7 +25,6 @@ import { SelectControlUtils } from './select_utils.js';
 import { SelectController } from './controllers/select_controller.js';
 import { SelectOptionMapper } from './model/select_option_mapper.js';
 import { repeat } from 'lit/directives/repeat';
-import { SelectTogglerKeyboardController } from './controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js';
 
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
@@ -38,15 +36,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.searchDisabled = false;
         this.type = SELECT_TYPES.select;
         this.noDeselect = false;
-        this.assistiveTitleId = '';
-        this._selectOptionsId = v4();
+        this.ariaLabelledby = '';
         this._searchValue = '';
         this._$options = new Map();
-        this.$dropdown = createRef();
-        this.$search = createRef();
+        this._$dropdown = createRef();
+        this._$search = createRef();
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
-        this.$dropdownToggler = createRef();
+        this._$dropdownToggler = createRef();
         this._selectContext = new ContextProviderController(this);
         this._updateOptions = () => {
             const $options = this._getOptions();
@@ -104,18 +101,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this.updateOptionAriaAttribute($option);
             });
         };
-        this._updateLabelAria = (options) => {
-            var _a, _b;
-            if (!this.$searchLabel)
-                return;
-            (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
-            this.$searchLabel.innerHTML = `
-            ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
-            <span id="value-label" class="sr-only">
-                ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
-            </span>
-        `;
-        };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
                 return;
@@ -131,15 +116,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             });
         };
         this._handleDropdownHidden = () => {
-            var _a, _b, _c;
+            var _a;
             this._searchValue = '';
             this.opened = false;
-            (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
-            const isBodyActive = document.activeElement === document.body;
-            const isInnerElementActive = (_b = this._$dropdownContent.value) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
-            if (isInnerElementActive || isBodyActive) {
-                (_c = this.$dropdownToggler.value) === null || _c === void 0 ? void 0 : _c.focus();
-            }
+            (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
         };
         this._manageSelectFocusAria = (ev) => {
             var _a;
@@ -148,14 +128,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 return;
             const optionId = $target.id;
             if (optionId) {
-                (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
+                (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
             }
         };
         this._closeSelect = () => {
             var _a;
             if (!this.opened)
                 return;
-            (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._clearOptions = () => {
             this._selectController.deselectAll();
@@ -199,7 +179,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         return Array.from(this._$options.values());
     }
     updated(changedProperties) {
-        var _a, _b;
         super.updated(changedProperties);
         if (changedProperties.has('opened')) {
             if (this.opened) {
@@ -213,52 +192,28 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
         }
-        if (this._$optionsList.value) {
-            (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
-            this.listBoxController = new ListBoxKeyboardController({
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new ListBoxKeyboardController({
                 host: this,
                 $list: this._$optionsList.value
             });
-        }
-        if (this.listBoxController) {
-            this.listBoxController.calculateSelectedOptionIndex();
-        }
-        if (this._$optionsList.value && this.$dropdownToggler.value) {
-            (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
-            this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
-                host: this,
-                $toggler: this.$dropdownToggler.value,
-                $list: this._$optionsList.value
-            });
-        }
     }
     _focusElementAfterSelectOpened() {
-        var _a;
-        const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
-        const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
-        const $firstOption = $options.find(($option) => {
-            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
-        });
-        const $selectedOption = this.selectedOptions[0];
-        const $optionToFocus = $selectedOption || $firstOption;
-        $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
+        var _a, _b;
+        const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+        $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
     }
     connectedCallback() {
-        var _a;
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
         if (!this.searchDisabled) {
             this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
         }
-        this.$searchLabel = document.querySelector(`[id="${this.assistiveTitleId}"]`);
-        (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
         this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
         this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
-        this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
-        this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
         this._setupEvents();
     }
@@ -288,10 +243,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
-        if (!this.multiple) {
-            const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
-            $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
-        }
         $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
     }
     _removeHTMLOptions(optionsValues) {
@@ -301,12 +252,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const option = this._selectController.getOption(value);
         if (!option)
             return;
-        const $selectedOption = this._$options.get(option.value);
-        const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
-        if ($selectedOptionLink) {
-            $selectedOptionLink.click();
-            return;
-        }
         this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
         if (!this.multiple)
             this._closeSelect();
@@ -357,25 +302,23 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
         return html `
             <h-dropdown
-                ${ref(this.$dropdown)}
+                ${ref(this._$dropdown)}
                 @showed=${() => (this.opened = true)}
                 @hidden=${this._handleDropdownHidden}
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
                 prevent-focus-trap
-                no-autofocus
             >
                 <h-dropdown-toggler
-                    ${ref(this.$dropdownToggler)}
+                    ${ref(this._$dropdownToggler)}
                     name="${this.controlName}"
                     validation-container
                     aria-haspopup="listbox"
                     role="combobox"
                     aria-required="${this.required ? 'true' : 'false'}"
                     aria-activedescendant
-                    role="combobox"
-                    aria-controls="${this._selectOptionsId}"
+                    aria-labelledby="${this.ariaLabelledby}"
                 >
                     ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -393,7 +336,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${isSearchEnabled
             ? html ` <h-select-search
                               class=${SELECT_CSS_CLASSES.selectSearch}
-                              ${ref(this.$search)}
+                              ${ref(this._$search)}
                               .value=${this._searchValue}
                               @search=${this._handleSearch}
                           ></h-select-search>`
@@ -401,8 +344,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
 
                     <h-options
                         class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
-                        aria-labelledby="${this.assistiveTitleId}"
-                        id="${this._selectOptionsId}"
                         ${ref(this._$optionsList)}
                         @optionClicked=${this._handleOptionClicked}
                         @optionUpdated=${this._handleOptionUpdated}
@@ -494,9 +435,9 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "noDeselect", void 0);
 __decorate([
-    property({ type: String, attribute: 'assistive-title-id' }),
+    property({ type: String, attribute: 'aria-labelledby' }),
     __metadata("design:type", String)
-], HSelect.prototype, "assistiveTitleId", void 0);
+], HSelect.prototype, "ariaLabelledby", 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;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider.d.ts

@@ -8,5 +8,8 @@ export declare class HSlider extends PhoenixLightLitElement {
     private _settings;
     private _slider;
     connectedCallback(): void;
+    private _showFocusableNodes;
+    private _hideFocusableNodes;
+    private _handleFocusableNodes;
     getSlider(): ISlider | null;
 }

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

@@ -4,6 +4,7 @@ import { JsonUtils } 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 { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
+import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants.js';
 
 let HSlider = class HSlider extends PhoenixLightLitElement {
     constructor() {
@@ -17,6 +18,20 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
             focus: 'center'
         };
         this._slider = null;
+        this._showFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
+        };
+        this._hideFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
+        };
+        this._handleFocusableNodes = ({ slide }, action) => {
+            const { focusableNodes } = this._settings;
+            if (!focusableNodes)
+                return;
+            const newTabindex = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
+            const $focusableElements = slide.querySelectorAll(focusableNodes);
+            $focusableElements.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
+        };
     }
     get sliderSettings() {
         return this._settings;
@@ -36,6 +51,8 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
         if (this._settings.mountOnConnectedCallback) {
             this._slider.mount();
         }
+        this._slider.on('visible', this._showFocusableNodes);
+        this._slider.on('hidden', this._hideFocusableNodes);
     }
     getSlider() {
         return this._slider;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS: {
+    readonly show: "show";
+    readonly hide: "hide";
+};

package/build/esm/packages/phoenix/src/components/slider/slider_constants.js

@@ -0,0 +1,7 @@
+const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
+    show: 'show',
+    hide: 'hide'
+};
+
+export { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS };
+//# sourceMappingURL=slider_constants.js.map

package/build/esm/packages/phoenix/src/components/slider/slider_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/components/slider/slider_types.d.ts

@@ -1,6 +1,9 @@
 import { Options, Splide } from '@splidejs/splide';
+import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants';
+import { Any } from 'ts-toolbelt';
 export interface ISlider extends Splide {
 }
 export interface ISliderOptions extends Options {
     mountOnConnectedCallback: boolean;
 }
+export declare type THandleNodesOption = typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS[Any.Keys<typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS>];

package/build/esm/packages/phoenix/src/components/slider/slider_types.js

@@ -1,2 +1,4 @@
 import '@splidejs/splide';
+import './slider_constants';
+import 'ts-toolbelt';
 //# sourceMappingURL=slider_types.js.map

package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
+{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC;AACnD,OAAsD,oBAAoB,CAAC;AAC3E,OAAoB,aAAa,CAAC"}

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

@@ -1,14 +1,10 @@
 import { Any } from 'ts-toolbelt';
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { ReactiveControllerHost } from 'lit';
 import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
-import { HSelect } from "../../components/form/select/select";
 export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
 export declare type TListBoxKeyboardControllerConstructorOptions = {
-    host: ReactiveControllerHost & HSelect;
+    host: ReactiveControllerHost & HTMLElement;
     $list: HTMLElement;
     listItemSelector?: string;
     orientation?: TListBoxKeyboardNavigationDirection;
 };
-export interface IListboxController extends ReactiveController {
-    calculateSelectedOptionIndex(): void;
-}

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

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

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

@@ -1 +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,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}
+{"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"}

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

@@ -1,15 +1,10 @@
-import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
-export declare class ListBoxKeyboardController implements IListboxController {
+import { ReactiveController } from 'lit';
+import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
+export declare class ListBoxKeyboardController implements ReactiveController {
     #private;
-    currentOptionIndex: number | undefined;
     constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
     hostConnected(): void;
-    private _handleKeyboardNavigation;
     private _handleArrowNavigation;
-    private _findCurrentIndex;
-    private _handleWriteableCharacter;
-    calculateSelectedOptionIndex: () => void;
     private _getPrevOptionIndex;
     private _getNextOptionIndex;
-    hostDisconnected(): void;
 }

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

@@ -1,64 +1,37 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { UiDomUtils } from '@dreamcommerce/utilities';
+import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
 import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
 
-var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
+var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
 class ListBoxKeyboardController {
     constructor({ host, $list, listItemSelector = '[role="option"]', orientation = LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
         _ListBoxKeyboardController_host.set(this, void 0);
         _ListBoxKeyboardController__$list.set(this, void 0);
+        _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
         _ListBoxKeyboardController__$options.set(this, void 0);
         _ListBoxKeyboardController_listItemSelector.set(this, void 0);
         _ListBoxKeyboardController_keys.set(this, void 0);
-        this._handleKeyboardNavigation = (ev) => {
-            if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
-                this._handleArrowNavigation(ev);
-                return;
-            }
-            this._handleWriteableCharacter(ev);
-        };
         this._handleArrowNavigation = (event) => {
             event.preventDefault();
             const { key } = event;
-            const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-            });
-            const prevOptionIndex = this._findCurrentIndex();
+            const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
             let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
             if (newOptionIndex === undefined) {
-                newOptionIndex = this._findCurrentIndex();
+                const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
+                newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
             }
-            if (newOptionIndex === this.currentOptionIndex)
+            if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
                 return;
             if (prevOptionIndex !== undefined) {
                 const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
-                $prevOption && UiDomUtils.makeUnnavigable($prevOption);
+                UiDomUtils.makeUnnavigable($prevOption);
             }
-            this.currentOptionIndex = newOptionIndex;
-            const $focusedOption = $availableOptions[newOptionIndex];
-            if ($focusedOption) {
-                UiDomUtils.makeNavigable($focusedOption);
-                $focusedOption.focus();
-            }
-        };
-        this._findCurrentIndex = () => {
-            const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-            });
-            const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
-            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
-        };
-        this._handleWriteableCharacter = (ev) => {
-            var _a;
-            const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
-            if (!$searchInput)
-                return;
-            $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
-        };
-        this.calculateSelectedOptionIndex = () => {
-            const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-            this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
+            const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
+            UiDomUtils.makeNavigable($focusedOption);
+            $focusedOption.focus();
         };
         __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
         __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -68,59 +41,40 @@ class ListBoxKeyboardController {
         __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
     }
     hostConnected() {
-        __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
+        new KeystrokesController({
+            host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
+            keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
+            callback: this._handleArrowNavigation,
+            target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
+        });
         UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
             if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
                 return;
-            if (this.currentOptionIndex === undefined)
+            if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
                 return;
-            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
+            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
             UiDomUtils.makeUnnavigable($prevOption);
-            this.currentOptionIndex = undefined;
+            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
         });
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => UiDomUtils.makeUnnavigable($option));
     }
     _getPrevOptionIndex() {
-        if (this.currentOptionIndex === undefined)
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
             return undefined;
-        if (this.currentOptionIndex <= 0)
-            return this.currentOptionIndex;
-        if (this.currentOptionIndex <= 0)
-            return this.currentOptionIndex;
-        const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-        });
-        if (!!$availableOptions[this.currentOptionIndex - 1])
-            return this.currentOptionIndex - 1;
-        // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
-        const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
-        if (newIndexOfCurrentlySelectedOption)
-            return newIndexOfCurrentlySelectedOption - 1;
-        return this.currentOptionIndex - 1;
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
+            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
     }
     _getNextOptionIndex() {
-        if (this.currentOptionIndex === undefined)
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
             return undefined;
-        const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-        });
-        if (this.currentOptionIndex === $availableOptions.length - 1)
-            return this.currentOptionIndex;
-        if (this.currentOptionIndex > $availableOptions.length - 1) {
-            // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
-            const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
-            if (newIndexOfCurrentlySelectedOption)
-                return newIndexOfCurrentlySelectedOption + 1;
-            return 0;
-        }
-        return this.currentOptionIndex + 1;
-    }
-    hostDisconnected() {
-        __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
+            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
     }
 }
-_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
+_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
 
 export { ListBoxKeyboardController };
 //# sourceMappingURL=list_box_keyboard_controller.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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": "1.15.11-16",
+  "version": "1.15.11-18",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.20.1-0",
+    "@dreamcommerce/utilities": "^1.20.1",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",