@shoper/phoenix_design_system 1.11.14-7 → 1.11.14-8

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js

@@ -7,40 +7,47 @@ var decorators = require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
 var color_item_constants = require('./color_item_constants.js');
 
 exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.disabled = false;
         this.selected = false;
         this.unclickable = false;
-        this._$colorSwatches = null;
-        this._setupAriaAttributes = () => {
-            var _a;
-            this._$colorSwatches = this.closest('h-color-swatches');
-            this.setAttribute('role', ((_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.multiple) ? 'checkbox' : 'radio');
-            this.setAttribute('aria-label', this.label ? this.label : this.color);
-        };
-        this._setupClasses = () => {
-            this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES.colorItem);
-            if (this.size)
-                this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES[this.size]);
+        this._dispatchClickedEvent = () => {
+            this.emitEvent(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected);
         };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
     }
     connectedCallback() {
         super.connectedCallback();
-        this._setupAriaAttributes();
-        this._setupClasses();
+        this.setupEvents();
         this.style.backgroundColor = this.setBgColor(this.disabled);
-        if (this.unclickable) {
-            this.removeAttribute('tabindex');
-        }
-        else {
-            this.setAttribute('tabindex', '0');
-        }
+        this._syncAriaPressed();
+        this.setAttribute('aria-label', this.label ? this.label : this.color);
+        this.unclickable && this.removeAttribute('tabindex');
+        this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES.colorItem);
         if (!this.value)
             this.value = this.color;
+        if (this.size)
+            this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES[this.size]);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE: {
+                this._syncAriaPressed();
+                break;
+            }
+        }
+    }
+    _syncAriaPressed() {
+        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
+    }
+    setupEvents() {
+        !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
     }
     setBgColor(itemIsDisabled) {
         return itemIsDisabled ? utilities.ColorUtils.hexToRgba(this.color, 0.5) : this.color;
@@ -75,6 +82,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorItem.prototype, "unclickable", void 0);
 exports.HColorItem = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-color-item')
+    phoenix_custom_element.phoenixCustomElement('h-color-item'),
+    tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HColorItem);
 //# sourceMappingURL=color_item.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;"}

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colorItemBaseCssClass = 'color-item';
+const COLOR_ITEM_EVENT_NAMES = {
+    selected: 'colorItemSelected'
+};
 const COLOR_ITEM_SIZES = {
     s: 's',
     xs: 'xs'
@@ -15,6 +18,7 @@ const COLOR_ITEM_CSS_CLASSES = {
 const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
 
 exports.COLOR_ITEM_CSS_CLASSES = COLOR_ITEM_CSS_CLASSES;
+exports.COLOR_ITEM_EVENT_NAMES = COLOR_ITEM_EVENT_NAMES;
 exports.COLOR_ITEM_SELECTED_ATTRIBUTE = COLOR_ITEM_SELECTED_ATTRIBUTE;
 exports.COLOR_ITEM_SIZES = COLOR_ITEM_SIZES;
 //# sourceMappingURL=color_item_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_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;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js

@@ -8,7 +8,6 @@ var decorators = require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
-var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 require('lit-html');
 var color_swatches_constants = require('./color_swatches_constants.js');
 var color_item_constants = require('./color_item/color_item_constants.js');
@@ -19,87 +18,8 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this.multiple = false;
         this.selectedColors = [];
         this.showMoreBtnText = 'Pokaż wszystkie kolory';
-        this._setupEvents = () => {
-            if (this.getAttribute('role') === 'group') {
-                this._setupCheckboxGroupEvents();
-            }
-            else {
-                this._setupRadioGroupEvents();
-            }
-        };
-        this._setupCheckboxGroupEvents = () => {
-            this._setupColorClickEvents();
-        };
-        this._setupRadioGroupEvents = () => {
-            document.body.addEventListener('keydown', this._focusOnSelectedColor);
-            this.addEventListener('keydown', this._handleTabNavigation);
-            this.addEventListener('keyup', this._handleRadioNavigation);
-            this._setupColorClickEvents();
-        };
-        this._setupColorClickEvents = () => {
-            if (!this._$colorSwatchesChildren)
-                return;
-            this._$colorSwatchesChildren.forEach(($colorItem) => {
-                $colorItem.addEventListener('click', this._handleColorClicked);
-                new keystrokes_controller.KeystrokesController({
-                    host: this,
-                    keys: [' '],
-                    callback: this._handleColorClicked,
-                    target: $colorItem
-                });
-            });
-        };
-        this._handleColorClicked = (ev) => {
-            ev.preventDefault();
-            const $colorItem = ev.target;
-            if ($colorItem.unclickable)
-                return;
-            this._toggleColorItem($colorItem);
-            this._dispatchColorChangeEvent($colorItem);
-        };
-        this._handleTabNavigation = (ev) => {
-            if (ev.key !== 'Tab')
-                return;
-            ev.preventDefault();
-            if (ev.shiftKey) {
-                const $firstFocusableColor = utilities.UiDomUtils.getFocusableElement(this);
-                utilities.UiDomUtils.getPreviousFocusableElement($firstFocusableColor).focus();
-                return;
-            }
-            const $LastFocusableColor = utilities.UiDomUtils.getLastFocusableElement(this);
-            utilities.UiDomUtils.getNextFocusableElement($LastFocusableColor).focus();
-        };
-        this._handleRadioNavigation = (ev) => {
-            const changeToNextKeys = ['ArrowDown', 'ArrowRight'];
-            const changeToPreviousKeys = ['ArrowUp', 'ArrowLeft'];
-            if (!changeToNextKeys.includes(ev.key) && !changeToPreviousKeys.includes(ev.key))
-                return;
-            ev.preventDefault();
-            if (changeToNextKeys.includes(ev.key)) {
-                this._handleChangeToNextColorItem(ev);
-            }
-            if (changeToPreviousKeys.includes(ev.key)) {
-                this._handleChangeToPreviousColorItem(ev);
-            }
-        };
-        this._focusOnSelectedColor = (ev) => {
-            if (ev.key !== 'Tab' || this.multiple)
-                return;
-            if (ev.shiftKey) {
-                const $previousFocusableElement = utilities.UiDomUtils.getPreviousFocusableElement(document.activeElement);
-                if (this.contains($previousFocusableElement) && this.selectedColors.length > 0) {
-                    ev.preventDefault();
-                    this.selectedColors[0].focus();
-                }
-                return;
-            }
-            const $nextFocusableElement = utilities.UiDomUtils.getNextFocusableElement(document.activeElement);
-            if (this.contains($nextFocusableElement) && this.selectedColors.length > 0) {
-                ev.preventDefault();
-                this.selectedColors[0].focus();
-            }
-        };
-        this._handleColorChange = ($colorItem) => {
+        this._handleColorClicked = ({ target }) => {
+            const $colorItem = target;
             this._toggleColorItem($colorItem);
             this._dispatchColorChangeEvent($colorItem);
         };
@@ -136,8 +56,6 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
-        this._$colorSwatchesChildren = [...this.children];
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
@@ -150,9 +68,11 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
     _hideItems(numberOfVisibleColors) {
+        var _a;
+        this._$colorSwatchesChildren = (_a = document.querySelector(color_swatches_constants.COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
         if (!this._$colorSwatchesChildren)
             return;
-        this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
+        Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
                 $colorSwatchesChild.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
             }
@@ -163,40 +83,17 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             var _a;
             if (!this._$colorSwatchesChildren)
                 return;
-            this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
+            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
                 $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
             });
             (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
         });
     }
-    _handleChangeToNextColorItem({ target }) {
-        const $colorItem = target;
-        const $nextFocusableElement = utilities.UiDomUtils.getNextFocusableElement($colorItem);
-        let $nextColorItem;
-        if (!this.contains($nextFocusableElement)) {
-            $nextColorItem = utilities.UiDomUtils.getFocusableElement(this);
-        }
-        else {
-            $nextColorItem = $nextFocusableElement;
-        }
-        $nextColorItem.focus();
-        this._handleColorChange($nextColorItem);
-    }
-    _handleChangeToPreviousColorItem({ target }) {
-        const $colorItem = target;
-        const $previousFocusableElement = utilities.UiDomUtils.getPreviousFocusableElement($colorItem);
-        let $previousColorItem;
-        if (!this.contains($previousFocusableElement)) {
-            $previousColorItem = utilities.UiDomUtils.getLastFocusableElement(this);
-        }
-        else {
-            $previousColorItem = $previousFocusableElement;
-        }
-        $previousColorItem.focus();
-        this._handleColorChange($previousColorItem);
+    _setupEvents() {
+        this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
     }
     _toggleColorItem($colorItem) {
-        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
     }
     _handleColorClickedForMultipleMode($colorItem) {
         !this._isColorAlreadyExistInArray($colorItem)
@@ -204,20 +101,17 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
     }
-    _handleColorChangeForSingleMode($colorItem) {
+    _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
         this._toggleSelectedAttribute($colorItem);
-        if ($previouslySelected && $previouslySelected !== $colorItem) {
+        if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
-            $previouslySelected.setAttribute('aria-checked', 'false');
-        }
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
             ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
             : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
-        $colorItem.setAttribute('aria-checked', 'true');
     }
     _isColorAlreadyExistInArray($colorItem) {
         return this.selectedColors.includes($colorItem);
@@ -226,10 +120,6 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.body.removeEventListener('keydown', this._focusOnSelectedColor);
-    }
     render() {
         return lit.html `
             ${this.getSlot('default')}

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;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;"}

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colorSwatchesBaseCssClass = 'color-swatches';
+const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
 const COLOR_ITEM_TAG_NAME = 'h-color-item';
 const COLOR_SWATCHES_CSS_CLASSES = {
     colorSwatches: colorSwatchesBaseCssClass,
@@ -19,4 +20,5 @@ exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
 exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
 exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
 exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
+exports.COLOR_SWATCHES_TAG_NAME = COLOR_SWATCHES_TAG_NAME;
 //# sourceMappingURL=color_swatches_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_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;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js

@@ -12,7 +12,6 @@ var litHtml = require('lit-html');
 var global_constants = require('../../global_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
-var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 var portal_constants = require('../portal/portal_constants.js');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
@@ -30,8 +29,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.transition = 'direction';
         this.offset = 0;
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
-        this.id = v4['default']();
-        this.preventFocusTrap = false;
         this._backdropController = new backdrop_controller.BackdropController();
         this._handleClickOutside = async (target) => {
             var _a, _b;
@@ -48,7 +45,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             }
             await this.show();
-            this._focusOnFirstContentElement();
+            utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
         };
         this.show = async () => {
             if (this.opened)
@@ -139,32 +136,44 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 return;
             await this.hide();
         };
-        this._keepFocusWithinDropdownForwards = (ev) => {
-            var _a, _b;
-            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
-                return;
-            const $target = ev.target;
-            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
-                this._handleFocusOnNextElementAfterDropdown(ev);
+        this._handleForwardFocus = async (ev) => {
+            // if (!this.opened) this._handleFocusOnNextElement(ev);
+            if (!this.opened || ev.shiftKey)
                 return;
-            }
-            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
-                this._handleFocusFromTogglerForwards(ev);
+            const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
+            const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._handleFocusOnNextElement(ev);
+        };
+        this._handleFocusOnNextElement = async (ev) => {
+            var _a;
+            ev.preventDefault();
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
+            await this._hideDropdownsSequentially();
+            await this.hide();
+            this._focusOnNextElementAfterToggler($nextElementToFocus);
+        };
+        this._focusOnNextElementAfterToggler = ($elementToFocus) => {
+            var _a;
+            const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
+            if (isTogglerLastChildOfPreviousDropdown) {
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
-            this._handleFocusFromSentinelEndForwards(ev, $target);
+            $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
         };
-        this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
+        this._handleBackwardFocus = async (ev) => {
+            var _a;
+            const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
+            if (document.activeElement !== $firstFocusableElement)
                 return;
-            const $target = ev.target;
-            if (this.preventFocusTrap) {
-                this._handleDefaultFocusFromDropdownBackwards(ev);
-            }
-            else {
-                this._handleFocusFromTogglerBackwards(ev, $target);
-                this._handleFocusFromSentinelStartBackwards(ev, $target);
-            }
+            ev.preventDefault();
+            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+            await this._hideDropdownsSequentially();
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < global_constants.BREAKPOINTS.xs)
@@ -176,19 +185,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
-                this._focusOnFirstContentElement();
+                utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
                 return;
             }
             if (!isHoveredWithinDropdown && this.opened)
                 await this._hideDropdownsSequentially();
         };
-        this._focusOnFirstContentElement = () => {
-            if (!this.$dropdownContent)
-                return;
-            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-            if ($firstFocusableElement)
-                $firstFocusableElement.focus();
-        };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
             if (this.contentWidth === dropdown_constants.DROPDOWN_CONTENT_WIDTH.full)
@@ -214,14 +216,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             host: this,
             target: document.body,
             keys: ['tab'],
-            callback: this._keepFocusWithinDropdownForwards
+            callback: this._handleForwardFocus
         });
         new keystrokes_controller.KeystrokesController({
             host: this,
             target: document.body,
             keys: [['shift', 'tab']],
-            callback: this._keepFocusWithinDropdownBackwards,
-            containerSelectors: ['h-dropdown', 'h-dropdown-content']
+            callback: this._handleBackwardFocus
         });
     }
     async connectedCallback() {
@@ -297,74 +298,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
         }
     }
-    _handleFocusOnNextElementAfterDropdown(ev) {
-        ev.preventDefault();
-        this.hide();
-        utilities.UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
-        return;
-    }
-    _handleFocusFromTogglerForwards(ev) {
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        ev.preventDefault();
-        trulyFocusableElements[0].focus();
-    }
-    _handleFocusFromSentinelEndForwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        if ($target !== $lastFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _handleDefaultFocusFromDropdownBackwards(ev) {
-        ev.preventDefault();
-        this.hide();
-        utilities.UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
-    }
-    _handleFocusFromTogglerBackwards(ev, $target) {
-        var _a;
-        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        $lastFocusableElement.focus();
-    }
-    _handleFocusFromSentinelStartBackwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-        if ($target !== $firstFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _getTrulyFocusableElements($container) {
-        const focusableElements = utilities.UiDomUtils.getFocusableElements($container);
-        return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
-    }
-    _isElementTrulyFocusable($el) {
-        const style = window.getComputedStyle($el);
-        if (style.display === 'none' || style.visibility === 'hidden') {
-            return false;
-        }
-        if ($el.nodeName === 'H-PORTAL')
-            return true;
-        const $parent = $el.parentElement;
-        if (!$parent)
-            return true;
-        return this._isElementTrulyFocusable($parent);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)
@@ -388,8 +321,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             return;
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
-        if (!this.preventFocusTrap)
-            this.$dropdownContent.setAttribute('aria-modal', 'true');
     }
     _getDropdownContentWidth() {
         const isMobileResolution = document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs;
@@ -458,14 +389,6 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String, attribute: 'mobile-position' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HDropdown.prototype, "mobilePosition", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: 'id', reflect: true }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HDropdown.prototype, "id", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: 'prevent-focus-trap' }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HDropdown.prototype, "preventFocusTrap", void 0);
 exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-dropdown'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
 var decorators = require('lit/decorators');
-var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var dropdown_constants = require('./dropdown_constants.js');
@@ -13,22 +13,19 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
     constructor() {
         super();
         this.name = '';
-        this._setupRole = () => {
-            const $focusableElements = utilities.UiDomUtils.getFocusableElements(this);
-            const role = $focusableElements.length < 2 ? 'dialog' : 'menu';
-            this.setAttribute('role', role);
-            if (role === 'menu') {
-                Array.from(this.children).forEach((element) => {
-                    element.setAttribute('role', 'menuitem');
-                });
-            }
-        };
         this.slot = this.hasAttribute('slot') ? this.slot : 'content';
     }
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(dropdown_constants.DROPDOWN_CSS_CLASSES.content);
-        this._setupRole();
+        this.setAttribute('role', 'menu');
+        Array.from(this.children).forEach((element) => {
+            element.setAttribute('role', 'menuitem');
+        });
+    }
+    render() {
+        super.render();
+        return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
     }
 };
 tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;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;"}