@shoper/phoenix_design_system 1.4.3 → 1.5.0

package/build/cjs/packages/phoenix/src/components/form/search/search_input.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+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 observer = require('../../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
+var search_constants = require('./search_constants.js');
+
+exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this._input = this.querySelector('input[type="search"]');
+        if (!this._input) {
+            throw new Error('Search input not found');
+        }
+        this._searchContextSetup();
+    }
+    async _searchContextSetup() {
+        try {
+            this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+            this._searchContext$ = await this._searchContextConsumer.consumeAsync('searchContext');
+            this._searchContextObserver = new observer.Observer((searchData) => {
+                if (searchData.searchPhrase === '') {
+                    this._input.value = '';
+                }
+            });
+            this._searchContext$.subscribe(this._searchContextObserver);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+    }
+};
+exports.HSearchInput = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchInput)
+], exports.HSearchInput);
+//# sourceMappingURL=search_input.js.map

package/build/cjs/packages/phoenix/src/components/form/search/search_input.js.map

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

package/build/cjs/packages/phoenix/src/components/form/search/search_results.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var search_constants = require('./search_constants.js');
+
+exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.PhoenixLightLitElement {
+    render() {
+        if (this.results)
+            return lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.resultsListContainer}">
+                <h-portal to="${search_constants.SEARCH_PORTAL_DESTINATIONS.resultsContent}">
+                    <div>
+                        <h3 class="search__section-head search__section-head_sticky search__section-head_line">Results</h3>
+
+                        <h-search-suggestion-content .suggestions="${this.results.suggestions}" .categories="${this.results.categories.list}">
+                        </h-search-suggestion-content>
+
+                        <h-search-product-content .products="${this.results.products.list}"></h-search-product-content>
+
+                        <h-search-producer-content .producers="${this.results.producers.list}"></h-search-producer-content>
+                    </div>
+                </h-portal>
+
+                <h-portal-target
+                    name="${search_constants.SEARCH_PORTAL_DESTINATIONS.resultsContent}"
+                    class="${search_constants.SEARCH_CLASS_NAMES.resultsPortalContainer}"
+                    style="position: absolute; right: 0; bottom: 0"
+                ></h-portal-target>
+            </div> `;
+        return lit.nothing;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Object, attribute: 'result-data' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearchResults.prototype, "results", void 0);
+exports.HSearchResults = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchResults)
+], exports.HSearchResults);
+//# sourceMappingURL=search_results.js.map

package/build/cjs/packages/phoenix/src/components/form/search/search_results.js.map

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

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js

@@ -9,15 +9,18 @@ class SelectOptionMapper {
     static toModel($option) {
         var _a;
         const optionContent = (_a = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent)) === null || _a === void 0 ? void 0 : _a.textContent;
+        const value = $option.getAttribute('value');
+        if (!value)
+            throw new Error('h-option must contain a unique value');
         if (!optionContent)
             throw new Error('h-options must contains a h-option-content element inside');
         return select_option.SelectOption.create({
-            value: $option.value,
-            disabled: $option.disabled,
-            hidden: $option.hidden,
-            inactive: $option.inactive,
+            value,
+            disabled: $option.hasAttribute('disabled'),
+            hidden: $option.hasAttribute('hidden'),
+            inactive: $option.hasAttribute('inactive'),
             content: optionContent,
-            selected: $option.selected
+            selected: $option.hasAttribute('selected')
         });
     }
 }

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map

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

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

@@ -166,11 +166,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
         this._$options = $options.reduce((acc, $option) => {
-            if (acc[$option.value] !== undefined)
+            const value = $option.getAttribute('value');
+            if (!value)
+                throw Error('Select option must hava a value');
+            if (acc[value] !== undefined)
                 throw Error('Select options must hava a unique values.');
             return {
                 ...acc,
-                [$option.value]: $option
+                [value]: $option
             };
         }, {});
         const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
@@ -259,7 +262,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 ${ref_js.ref(this._$dropdown)}
                 @dropdown.showed=${() => (this.opened = true)}
                 @dropdown.hidden=${this._handleDropdownHidden}
-                name="${this.controlName}$"
+                name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
             >

package/build/cjs/packages/phoenix/src/components/form/select/select.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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/icon/icon.js

@@ -20,6 +20,7 @@ exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixL
         this.filled = false;
         this.clickable = false;
         this.noStroke = false;
+        this.cssClasses = '';
         this._srcObserverCallback = (src) => {
             if (src)
                 this.requestUpdate();
@@ -45,7 +46,7 @@ exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixL
         if (!HIcon_1.src.getValue())
             return null;
         return lit.html `
-            <svg class="${this._cssClasses}">
+            <svg class="${this._cssClasses} ${this.cssClasses}">
                 <use xlink:href="${namespaced_attribure_directive.namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src.getValue()}#${this.iconName}`)}"></use>
             </svg>
         `;
@@ -72,6 +73,10 @@ tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HIcon.prototype, "noStroke", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'css-classes' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HIcon.prototype, "cssClasses", void 0);
 exports.HIcon = HIcon_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-icon'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/icon/icon.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,oBAAoB,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal.js

@@ -125,6 +125,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     async open() {
         return new Promise((resolve) => {
             var _a;
+            this[modal_constants.MODAL_OPENED_PROP] = true;
             (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
             window.requestAnimationFrame(() => {
                 setTimeout(() => {
@@ -134,7 +135,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
                 const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
                 setTimeout(() => {
                     var _a;
-                    this[modal_constants.MODAL_OPENED_PROP] = true;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
                     resolve();
                 }, transitionDuration);

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

@@ -12,13 +12,13 @@ exports.HScrollTo = class HScrollTo extends phoenix_light_lit_element.PhoenixLig
     constructor() {
         super();
         this.to = '';
-        this.behaviour = 'smooth';
+        this.behavior = 'smooth';
         this.scrollToElement = () => {
             const $scrollTo = document.querySelector(`[data-scroll="${this.to}"]`);
             if ($scrollTo) {
                 const elTopPosition = $scrollTo.getBoundingClientRect().top;
                 requestAnimationFrame(() => {
-                    window.scrollTo({ top: elTopPosition + window.scrollY, behavior: this.behaviour });
+                    window.scrollTo({ top: elTopPosition + window.scrollY, behavior: this.behavior });
                 });
             }
         };
@@ -36,7 +36,7 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
-], exports.HScrollTo.prototype, "behaviour", void 0);
+], exports.HScrollTo.prototype, "behavior", void 0);
 exports.HScrollTo = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-scroll-to'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js

@@ -5,27 +5,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var relative_position_controller_constants = require('./relative_position_controller_constants.js');
 
-var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_shouldNotReposition, _PositionCalculator_offset;
+var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_documentWidth, _PositionCalculator_shouldNotReposition, _PositionCalculator_offset;
 class PositionCalculator {
-    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, offset = 0, shouldNotReposition }) {
+    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, offset = 0, shouldNotReposition }) {
         _PositionCalculator_direction.set(this, void 0);
         _PositionCalculator_relativeElementRect.set(this, void 0);
         _PositionCalculator_positionElementRect.set(this, void 0);
-        _PositionCalculator_nearestNonStaticElementFromElementToPositionRect.set(this, void 0);
         _PositionCalculator_containerRect.set(this, void 0);
         _PositionCalculator_documentHeight.set(this, void 0);
+        _PositionCalculator_documentWidth.set(this, void 0);
         _PositionCalculator_shouldNotReposition.set(this, void 0);
         _PositionCalculator_offset.set(this, void 0);
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
-        tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, nearestNonStaticElementFromElementToPositionRect, "f");
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_shouldNotReposition, !!shouldNotReposition, "f");
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_offset, offset, "f");
         const body = document.body;
         const documentElement = document.documentElement;
         tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
+        tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_documentWidth, Math.max(body.scrollWidth, body.offsetWidth, documentElement.clientWidth, documentElement.scrollWidth, documentElement.offsetWidth), "f");
     }
     calculatePosition() {
         const [side, alignment = relative_position_controller_constants.CALCULATOR_DIRECTIONS.center] = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
@@ -38,35 +38,29 @@ class PositionCalculator {
         };
     }
     _canFitTopSide() {
-        const elementPositionTop = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementPositionTop = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
         return elementPositionTop > tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementPositionTop > 0;
     }
     _canFitBottomSide() {
-        const elementPositionBottom = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementPositionBottom = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
         return elementPositionBottom < tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementPositionBottom < tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_documentHeight, "f");
     }
     _canFitCenter(centerPosition) {
         return centerPosition + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - window.scrollY < window.innerHeight && centerPosition - window.scrollY > 0;
     }
     _canFitLeftSide() {
-        const positionElementLeftSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
-        return positionElementLeftSide >= tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").left;
+        const positionElementLeftSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        return positionElementLeftSide >= tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").left && positionElementLeftSide > 0;
     }
     _canFitRightSide() {
-        const positionElementRightSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left;
-        return positionElementRightSide + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width <= tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").width;
+        const positionElementRightSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        return positionElementRightSide <= tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").width && positionElementRightSide < tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_documentWidth, "f");
     }
     _calculateSidePosition(side, alignment) {
-        const topSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top -
-            tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top -
-            tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height -
-            tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
-        const bottomSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
-        const leftSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left -
-            tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left -
-            tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width -
-            tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
-        const rightSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const topSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const bottomSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const leftSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const rightSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
         const verticalCenterOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
         const horizontalCenterOfRelativeElement = (leftSideOfRelativeElement + rightSideOfRelativeElement) / 2;
         switch (side) {
@@ -148,10 +142,10 @@ class PositionCalculator {
         return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
     }
     calculateAlignmentPosition(alignment, side) {
-        const alignmentToLeftSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left;
-        const alignmentToRightSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
-        const alignmentToTopSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top;
-        const alignmentToBottomSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const alignmentToLeftSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX;
+        const alignmentToRightSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
+        const alignmentToTopSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY;
+        const alignmentToBottomSide = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
         const verticalCenterOfRelativeElement = (alignmentToTopSide + alignmentToBottomSide) / 2;
         const horizontalCenterOfRelativeElement = (alignmentToLeftSide + alignmentToRightSide) / 2;
         const isSideCenter = side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.center;
@@ -229,7 +223,7 @@ class PositionCalculator {
         return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
     }
 }
-_PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_shouldNotReposition = new WeakMap(), _PositionCalculator_offset = new WeakMap();
+_PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_documentWidth = new WeakMap(), _PositionCalculator_shouldNotReposition = new WeakMap(), _PositionCalculator_offset = new WeakMap();
 
 exports.PositionCalculator = PositionCalculator;
 //# sourceMappingURL=relative_position_calculator.js.map

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

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js

@@ -9,12 +9,11 @@ var relative_position_controller_constants = require('./relative_position_contro
 var relative_position_calculator = require('./relative_position_calculator.js');
 var throttle = require('../../../../../external/lodash/throttle.js');
 
-var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
+var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_mobileElementPosition, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => false, portalElementsNames = [], offset = 0 }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => false, portalElementsNames = [], offset = 0, mobileElementPosition = relative_position_controller_constants.MOBILE_ELEMENT_POSITIONS.left }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
-        _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);
         _RelativePositionController_direction.set(this, void 0);
         _RelativePositionController_nearestScrollableElement.set(this, void 0);
         _RelativePositionController_relativeElement.set(this, void 0);
@@ -28,6 +27,7 @@ class RelativePositionController {
         _RelativePositionController_hasPositioningBeenDisabled.set(this, void 0);
         _RelativePositionController_doesCurrentlyHaveShrinkMode.set(this, void 0);
         _RelativePositionController_offset.set(this, void 0);
+        _RelativePositionController_mobileElementPosition.set(this, void 0);
         _RelativePositionController_throttledReposition.set(this, throttle['default'](() => {
             if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
                 this.disableRelativePositioning();
@@ -50,6 +50,7 @@ class RelativePositionController {
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_disablePositioningOnCondition, disablePositioningOnCondition, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_offset, offset, "f");
+        tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_mobileElementPosition, mobileElementPosition, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_isInitiallyScrollable, elementToPosition.classList.contains(global_constants.SCROLLABLE_CLASS_NAME), "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_initialMaxHeight, getComputedStyle(elementToPosition).maxHeight, "f");
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
@@ -69,10 +70,8 @@ class RelativePositionController {
     position(shouldNotReposition = false) {
         if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_hasPositioningBeenDisabled, "f"))
             this._dispatchReenabledPositioningEvent();
-        if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"))
-            tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
         if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_container, "f"))
-            tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_container, tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"), "f");
+            tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_container, this._findContainer(tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
         const positionElementRect = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
             ? { ...tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
             : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
@@ -80,7 +79,6 @@ class RelativePositionController {
             direction: shouldNotReposition && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
             relativeElementRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
             positionElementRect,
-            nearestNonStaticElementFromElementToPositionRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f").getBoundingClientRect(),
             container: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_container, "f"),
             shouldNotReposition: shouldNotReposition || !tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getAttribute('style'),
             offset: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_offset, "f")
@@ -129,6 +127,9 @@ class RelativePositionController {
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.top = '0';
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.left = '0';
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
+        if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_mobileElementPosition, "f") !== relative_position_controller_constants.MOBILE_ELEMENT_POSITIONS.right)
+            return;
+        tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.right = '';
     }
     _disableShrinkMode() {
         if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
@@ -153,9 +154,13 @@ class RelativePositionController {
         const { style: elementStyle } = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
         elementStyle.position = '';
         elementStyle.transform = '';
+        if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_mobileElementPosition, "f") !== relative_position_controller_constants.MOBILE_ELEMENT_POSITIONS.right)
+            return;
+        elementStyle.right = '0';
+        elementStyle.left = '';
     }
 }
-_RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_disablePositioningOnCondition = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_isInitiallyScrollable = new WeakMap(), _RelativePositionController_initialMaxHeight = new WeakMap(), _RelativePositionController_initialHeight = new WeakMap(), _RelativePositionController_calculatedDirection = new WeakMap(), _RelativePositionController_hasPositioningBeenDisabled = new WeakMap(), _RelativePositionController_doesCurrentlyHaveShrinkMode = new WeakMap(), _RelativePositionController_offset = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
+_RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_disablePositioningOnCondition = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_isInitiallyScrollable = new WeakMap(), _RelativePositionController_initialMaxHeight = new WeakMap(), _RelativePositionController_initialHeight = new WeakMap(), _RelativePositionController_calculatedDirection = new WeakMap(), _RelativePositionController_hasPositioningBeenDisabled = new WeakMap(), _RelativePositionController_doesCurrentlyHaveShrinkMode = new WeakMap(), _RelativePositionController_offset = new WeakMap(), _RelativePositionController_mobileElementPosition = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
 
 exports.RelativePositionController = RelativePositionController;
 //# sourceMappingURL=relative_position_controller.js.map

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.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,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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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;"}

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -51,6 +51,10 @@ const RELATIVE_POSITION_CONTROLLER_EVENT_NAME = 'relative_position_controller';
 const RELATIVE_POSITION_CONTROLLER_EVENTS = {
     enabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.enabledPositioning`,
     disabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.disabledPositioning`
+};
+const MOBILE_ELEMENT_POSITIONS = {
+    left: 'left',
+    right: 'right'
 };
 
 exports.CALCULATOR_DIRECTIONS = CALCULATOR_DIRECTIONS;
@@ -59,6 +63,7 @@ exports.DEFAULT_SCROLL_THROTTLE_WAIT_TIME = DEFAULT_SCROLL_THROTTLE_WAIT_TIME;
 exports.DEFAULT_THROTTLE_WAIT_TIME = DEFAULT_THROTTLE_WAIT_TIME;
 exports.DIRECTIONS = DIRECTIONS;
 exports.HORIZONTAL_DIRECTIONS = HORIZONTAL_DIRECTIONS;
+exports.MOBILE_ELEMENT_POSITIONS = MOBILE_ELEMENT_POSITIONS;
 exports.NON_STATIC_POSITIONS = NON_STATIC_POSITIONS;
 exports.OVERFLOW_AUTO = OVERFLOW_AUTO;
 exports.OVERFLOW_SCROLL = OVERFLOW_SCROLL;

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