@shoper/phoenix_design_system 1.15.11-36 → 1.15.11-37

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

@@ -0,0 +1,14 @@
+import { TSelectTogglerKeyboardControllerConstructorOptions } from './select_toggler_keyboard_controller_types';
+export declare class SelectTogglerKeyboardController {
+    #private;
+    constructor({ host, $toggler, $list, listItemSelector, }: TSelectTogglerKeyboardControllerConstructorOptions);
+    hostConnected(): void;
+    private _handleKeyboardNavigation;
+    private _openSelect;
+    private _openSelectAndGoToFirstElement;
+    private _openSelectAndGoToLastElement;
+    private _openSelectAndGoToMatchedElement;
+    private _getAvailableOptions;
+    private _navigate;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,86 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import '@dreamcommerce/utilities';
+
+var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
+class SelectTogglerKeyboardController {
+    constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
+        _SelectTogglerKeyboardController_host.set(this, void 0);
+        _SelectTogglerKeyboardController__$toggler.set(this, void 0);
+        _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
+        _SelectTogglerKeyboardController__$options.set(this, void 0);
+        this._handleKeyboardNavigation = (ev) => {
+            const arrowKeys = ['ArrowUp', 'ArrowDown'];
+            if (arrowKeys.includes(ev.key)) {
+                this._openSelect(ev);
+                return;
+            }
+            if (ev.key === 'Home') {
+                this._openSelectAndGoToFirstElement(ev);
+                return;
+            }
+            if (ev.key === 'End') {
+                this._openSelectAndGoToLastElement(ev);
+                return;
+            }
+            if (ev.altKey || ev.shiftKey)
+                return;
+            const isAWriteableCharacter = ev.key.length === 1;
+            if (isAWriteableCharacter)
+                this._openSelectAndGoToMatchedElement(ev);
+        };
+        this._openSelect = (event) => {
+            var _a;
+            event.preventDefault();
+            (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
+        };
+        this._openSelectAndGoToFirstElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            this._navigate(0);
+        };
+        this._openSelectAndGoToLastElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $availableOptions = this._getAvailableOptions();
+            this._navigate($availableOptions.length - 1);
+        };
+        this._openSelectAndGoToMatchedElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const matchedOptionIndex = this._getAvailableOptions().findIndex(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
+            if (matchedOptionIndex)
+                this._navigate(matchedOptionIndex);
+        };
+        this._getAvailableOptions = () => {
+            return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+        };
+        this._navigate = (newOptionIndex) => {
+            var _a;
+            const $newOption = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").options[newOptionIndex];
+            if (!$newOption)
+                return;
+            (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
+            __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
+        };
+        __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
+        __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
+        __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
+        __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
+    }
+}
+_SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
+
+export { SelectTogglerKeyboardController };
+//# sourceMappingURL=select_toggler_keyboard_controller.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { ReactiveControllerHost } from 'lit';
+import { HSelect } from "../../select";
+export declare type TSelectTogglerKeyboardControllerConstructorOptions = {
+    host: ReactiveControllerHost & HSelect;
+    $toggler: HTMLElement;
+    $list: HTMLElement;
+    listItemSelector?: string;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select_toggler_keyboard_controller_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAAwB,4CAA4C,CAAC"}

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

@@ -1,5 +1,9 @@
 import { PropertyValues, TemplateResult } from 'lit';
+import { HDropdown } from "../../dropdown/dropdown";
+import { HDropdownToggler } from "../../dropdown/dropdown_toggler";
 import { HOption } from "./components/option/select_option";
+import { HSelectSearch } from "./components/search/select_search";
+import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { SelectOption } from "./model/select_option";
 import type { TSelectType } from "./select_types";
@@ -18,7 +22,8 @@ export declare class HSelect extends PhoenixLightLitElement {
     required: boolean;
     optionsList?: TSelectOption[];
     noDeselect: boolean;
-    ariaLabelledby: string;
+    assistiveTitleId: string;
+    private _selectOptionsId;
     get selectedIndex(): number;
     set selectedIndex(index: number);
     get selectedOptions(): (HOption | undefined)[];
@@ -28,15 +33,18 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _searchValue;
     private _selectController;
     private _$options;
-    private _$dropdown;
-    private _$search;
+    $dropdown: import("lit-html/directives/ref.js").Ref<HDropdown>;
+    $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
     private _$optionsList;
     private _$dropdownContent;
-    private _$dropdownToggler;
+    $dropdownToggler: import("lit-html/directives/ref.js").Ref<HDropdownToggler>;
     private _selectContext;
-    private _listBoxController;
+    listBoxController: ListBoxKeyboardController;
+    private _selectTogglerKeyboardController;
     private _optionsObserver;
+    private _selectedOptionsAriaObserver;
     private $placeholder;
+    private $searchLabel;
     constructor();
     updated(changedProperties: PropertyValues): void;
     private _focusElementAfterSelectOpened;
@@ -47,6 +55,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _setupEvents;
     private _handleOptionDeselect;
     private _updateOptionsView;
+    private _updateLabelAria;
     private _appendNewHTMLOption;
     updateOptionAriaAttribute($option: HOption): void;
     private _removeHTMLOptions;
@@ -55,6 +64,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _selectOption;
     private _handleSearch;
     private _handleDropdownHidden;
+    private _handleDropdownShowed;
     private _manageSelectFocusAria;
     private _closeSelect;
     private _clearOptions;

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

@@ -14,6 +14,7 @@ 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';
@@ -25,6 +26,7 @@ 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() {
@@ -36,14 +38,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.searchDisabled = false;
         this.type = SELECT_TYPES.select;
         this.noDeselect = false;
-        this.ariaLabelledby = '';
+        this.assistiveTitleId = '';
+        this._selectOptionsId = v4();
         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();
@@ -101,6 +104,18 @@ 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;
@@ -116,10 +131,22 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             });
         };
         this._handleDropdownHidden = () => {
-            var _a;
+            var _a, _b, _c;
             this._searchValue = '';
             this.opened = false;
-            (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
+            (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.removeAttribute('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();
+            }
+        };
+        this._handleDropdownShowed = () => {
+            var _a;
+            this.opened = true;
+            const $activeDescendant = this.options.find((option) => option.selected);
+            if ($activeDescendant)
+                (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $activeDescendant.id);
         };
         this._manageSelectFocusAria = (ev) => {
             var _a;
@@ -128,14 +155,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();
@@ -179,6 +206,7 @@ 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) {
@@ -192,28 +220,52 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
         }
-        if (this._$optionsList.value && !this._listBoxController)
-            this._listBoxController = new ListBoxKeyboardController({
+        if (this._$optionsList.value) {
+            (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
+            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, _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();
+        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();
     }
     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();
     }
@@ -243,6 +295,10 @@ 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) {
@@ -252,6 +308,12 @@ 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();
@@ -302,23 +364,24 @@ 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)}
-                @showed=${() => (this.opened = true)}
+                ${ref(this.$dropdown)}
+                @showed=${this._handleDropdownShowed}
                 @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
-                    aria-labelledby="${this.ariaLabelledby}"
+                    role="combobox"
+                    aria-controls="${this._selectOptionsId}"
                 >
                     ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -336,7 +399,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>`
@@ -344,6 +407,8 @@ 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}
@@ -435,9 +500,9 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "noDeselect", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-labelledby' }),
+    property({ type: String, attribute: 'assistive-title-id' }),
     __metadata("design:type", String)
-], HSelect.prototype, "ariaLabelledby", void 0);
+], HSelect.prototype, "assistiveTitleId", 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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts

@@ -1,7 +1,6 @@
 import { IBaseMessage } from './base_message_types';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TDirection } from '@dreamcommerce/utilities';
-import { PropertyValues, TemplateResult } from 'lit';
 export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
     opened: boolean;
     portalTarget: string;
@@ -9,7 +8,6 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     offset: number;
     mouseonly: boolean;
     tabindex: string;
-    private _messageId;
     private _positionController;
     private _clickOutsideController;
     private _$messageContent;
@@ -18,18 +16,11 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     private _shouldDelayClosing;
     private _closeTimeout;
     private _messageComponentName;
-    private _$baseMessageContent?;
-    private _tooltipRef;
     constructor();
     connectedCallback(messageComponentName?: string): void;
-    firstUpdated(props: PropertyValues): void;
-    private _handleChildrenAriaAttributes;
     private static _appendMessagePortal;
     private _setupEventListeners;
     protected _positionMessage: () => void;
     open: () => void;
-    private _closeFromKeyboard;
     close: () => void;
-    disconnectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -1,14 +1,11 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { html } from 'lit';
 import { property } from 'lit/decorators';
-import { DIRECTIONS, DomUtils } from '@dreamcommerce/utilities';
+import { DIRECTIONS } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import v4 from '../../../../../external/uuid/dist/esm-browser/v4.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, LIST_OF_MESSAGE_CHILDREN, 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_CONTENT_SLOT_NAME } from './base_message_constants.js';
-import { createRef, ref } from 'lit/directives/ref';
+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 } from './base_message_constants.js';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -19,22 +16,9 @@ class BaseMessage extends PhoenixLightLitElement {
         this.offset = DEFAULT_MESSAGE_OFFSET;
         this.mouseonly = false;
         this.tabindex = '-1';
-        this._messageId = v4();
-        this._tooltipRef = createRef();
-        this._handleChildrenAriaAttributes = () => {
-            [...this.children].forEach((child) => {
-                if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
-                    return;
-                child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
-            });
-        };
         this._setupEventListeners = () => {
-            var _a, _b;
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
-            this.addEventListener('keydown', this._closeFromKeyboard);
-            (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
-            (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
             if (!this.mouseonly) {
                 this.addEventListener('focusin', this.open);
                 this.addEventListener('focusout', this.close);
@@ -55,13 +39,6 @@ class BaseMessage extends PhoenixLightLitElement {
                 this.opened = true;
             }, MESSAGE_SHOW_DELAY_IN_MS);
         };
-        this._closeFromKeyboard = (ev) => {
-            if (ev.key !== 'Escape' || !this.opened)
-                return;
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.close();
-        };
         this.close = () => {
             this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
@@ -102,14 +79,8 @@ class BaseMessage extends PhoenixLightLitElement {
                 offset: this.offset
             });
         this.setAttribute('tabindex', this.tabindex);
-        if (!this._$baseMessageContent)
-            this._$baseMessageContent = [...this.children].find((child) => MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
         this._setupEventListeners();
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._handleChildrenAriaAttributes();
-    }
     static _appendMessagePortal() {
         const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
         if ($messagePortalTarget)
@@ -118,24 +89,6 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
-    disconnectedCallback() {
-        var _a, _b;
-        super.disconnectedCallback();
-        (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
-        (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
-    }
-    render() {
-        var _a;
-        super.render();
-        return html `
-            <span ${ref(this._tooltipRef)} id="${this._messageId}" class="sr-only" role="tooltip">
-                ${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
-            </span>
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),

package/build/esm/packages/phoenix/src/components/messages/base_message.js.map

@@ -1 +1 @@
-{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.d.ts

@@ -4,7 +4,6 @@ export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
 export declare const DEFAULT_MESSAGE_OFFSET = 10;
 export declare const MESSAGE_ELEMENTS: string[];
 export declare const MESSAGE_CONTENT_ELEMENTS: string[];
-export declare const LIST_OF_MESSAGE_CHILDREN: string[];
 export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
 export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js

@@ -1,4 +1,3 @@
-import { PORTAL_COMPONENT_NAME } from '../portal/portal_constants.js';
 import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
 import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
 
@@ -7,10 +6,9 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
 const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
-const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 const MESSAGE_CLOSE_DELAY_IN_MS = 500;
 
-export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
 //# sourceMappingURL=base_message_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map

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

package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts

@@ -1,5 +1,7 @@
+import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HHint extends BaseMessage {
     constructor();
     connectedCallback(): void;
+    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/hints/hint.js

@@ -1,6 +1,8 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { html } from 'lit-html';
 import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
+import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HHint = class HHint extends BaseMessage {
@@ -12,6 +14,14 @@ let HHint = class HHint extends BaseMessage {
         super.connectedCallback(HINT_CLASS_NAME);
         this.classList.add(HINT_CLASS_NAME);
     }
+    render() {
+        super.render();
+        return html `
+            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+        `;
+    }
 };
 HHint = __decorate([
     phoenixCustomElement(HINT_ELEMENT_NAME),