@shoper/phoenix_design_system 1.4.3 → 1.5.0

package/build/esm/packages/phoenix/src/components/form/search/storefront_search_mock.js

@@ -0,0 +1,208 @@
+import { __decorate, __metadata } from "tslib";
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { BehaviorSubject } from '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
+import { state } from 'lit/decorators';
+import { ContextProviderController } from '@phoenixRoot/core/context/context_provider_controller';
+import '@phoenixRoot/components/form/search/search_types';
+import { SEARCH_CUSTOM_EVENT_NAMES } from '@phoenixRoot/components/form/search/search_constants';
+let HStorefrontSearchMock = class HStorefrontSearchMock extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._searchState = new BehaviorSubject({
+            results: {
+                suggestions: [],
+                products: { list: [] },
+                producers: { list: [] },
+                categories: { list: [] }
+            },
+            history: [],
+            searchPhrase: ''
+        });
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._searchContextProvider = new ContextProviderController(this);
+        this._searchContextProvider.provide('searchContext', this._searchState);
+        this._setupListeners();
+        this._serverMock();
+    }
+    _serverMock() {
+        const data = [
+            {
+                results: {
+                    suggestions: ['ksiazka', 'ksiezniczka', 'ksiadz'],
+                    products: {
+                        list: [
+                            {
+                                id: '91',
+                                name: 'Sukienka chłopięca',
+                                price: '0,80 zł',
+                                img: '/userdata/public/gfx/59f3d75ba10d9a1f34174890b6d27bef.jpg',
+                                url: '/pl/p/T-shirt-chlopiecy/91'
+                            }
+                        ]
+                    },
+                    producers: {
+                        list: [
+                            {
+                                id: '36',
+                                name: 'uKasi',
+                                score: 33344.273,
+                                url: '/pl/producer/uKasi/37',
+                                img: null
+                            }
+                        ]
+                    },
+                    categories: []
+                },
+                history: [
+                    {
+                        id: 1,
+                        label: 'jana'
+                    },
+                    {
+                        id: 2,
+                        label: 'gitara'
+                    },
+                    {
+                        id: 3,
+                        label: 'test'
+                    }
+                ],
+                searchPhrase: ''
+            },
+            {
+                results: {
+                    suggestions: ['wodny', 'wolnostojacy', 'wolontariusz'],
+                    products: {
+                        list: [
+                            {
+                                id: '89',
+                                name: 'Kurtka Rabbit Band',
+                                price: '79,00 zł',
+                                img: '/userdata/public/gfx/9383e88a28a593d02d56afa729c7212c.jpg',
+                                url: '/pl/p/Kurtka-Rabbit-Band/89'
+                            },
+                            {
+                                id: '90',
+                                name: 'Bluza Machine',
+                                price: '35,90 zł',
+                                img: '/userdata/public/gfx/cc160a1197791fe37eafaaaa42355bde.jpg',
+                                url: '/pl/p/Bluza-Machine/90'
+                            },
+                            {
+                                id: '91',
+                                name: 'T-shirt chłopięcy',
+                                price: '29,90 zł',
+                                img: '/userdata/public/gfx/59f3d75ba10d9a1f34174890b6d27bef.jpg',
+                                url: '/pl/p/T-shirt-chlopiecy/91'
+                            }
+                        ]
+                    },
+                    producers: {
+                        list: [
+                            {
+                                id: '37',
+                                name: 'uAsi',
+                                score: 33344.273,
+                                url: '/pl/producer/uAsi/37',
+                                img: null
+                            }
+                        ]
+                    },
+                    categories: {
+                        list: [
+                            {
+                                id: '26',
+                                url: '/pl/c/Ubranka/26',
+                                name: 'Dziecko > Ubranka',
+                                score: 40568.305
+                            },
+                            {
+                                id: '181',
+                                name: 'Wody > Chilled - woda z CBD',
+                                score: 60336.562,
+                                url: '/Chilled-woda-z-CBD'
+                            }
+                        ]
+                    }
+                },
+                history: [
+                    {
+                        id: 1,
+                        label: 'katalizator'
+                    },
+                    {
+                        id: 2,
+                        label: 'rura'
+                    },
+                    {
+                        id: 3,
+                        label: 'kogut'
+                    },
+                    {
+                        id: 4,
+                        label: 'rower'
+                    }
+                ],
+                searchPhrase: ''
+            }
+        ];
+        const intervalID = setInterval(myCallback, 1000, this, data);
+        let counter = 0;
+        function myCallback(object, data) {
+            console.log(data[counter], 'NEW DATA COMING FROM MOCK SERVER');
+            object._searchState.notify(data[counter]);
+            counter = counter + 1;
+            if (counter === 2)
+                clearInterval(intervalID);
+        }
+    }
+    _setupListeners() {
+        // Handle Update searchPhrase from Package Component
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, (ev) => {
+            console.log(ev.detail.searchPhrase, 'ev.detail.searchPhrase');
+            const data = this._searchState.getValue();
+            if ((data === null || data === void 0 ? void 0 : data.searchPhrase) === ev.detail.searchPhrase)
+                return;
+            this._searchState.notify({
+                ...data,
+                searchPhrase: ev.detail.searchPhrase
+            });
+            console.log(this._searchState.getValue(), 'UPDATE MOCK DATA SERVER');
+        });
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, (ev) => {
+            const data = this._searchState.getValue();
+            if ((data === null || data === void 0 ? void 0 : data.searchPhrase) === ev.detail.searchPhrase)
+                return;
+            const history = data === null || data === void 0 ? void 0 : data.history.filter((item) => item.label === ev.detail.searchPhrase);
+            // update history if not on the list
+            if (data && !history) {
+                data.history.push({
+                    id: data.history.length,
+                    label: ev.detail.searchPhrase
+                });
+            }
+            // redirect
+        });
+        // TODO move this handler to shoper controllers: we need to change to JSON and rebuild object to make new hierarchy
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.removeHistoryItem, (ev) => {
+            const data = this._searchState.getValue();
+            const history = data === null || data === void 0 ? void 0 : data.history.filter((item) => item.id !== ev.detail.id);
+            this._searchState.notify({
+                ...data,
+                history
+            });
+        });
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", BehaviorSubject)
+], HStorefrontSearchMock.prototype, "_searchState", void 0);
+HStorefrontSearchMock = __decorate([
+    phoenixCustomElement('h-storefront-search')
+], HStorefrontSearchMock);
+export { HStorefrontSearchMock };
+//# sourceMappingURL=storefront_search_mock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"storefront_search_mock.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/search/storefront_search_mock.ts"],"names":[],"mappings":"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"}

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

@@ -5,15 +5,18 @@ class SelectOptionMapper {
     static toModel($option) {
         var _a;
         const optionContent = (_a = $option.querySelector(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 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/esm/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;"}
+{"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;"}

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

@@ -162,11 +162,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._optionsObserver = new 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(SelectOptionMapper.toModel);
@@ -255,7 +258,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 ${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/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,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;"}
+{"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,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;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/icon/icon.d.ts

@@ -9,6 +9,7 @@ export declare class HIcon extends PhoenixLightLitElement {
     filled: boolean;
     clickable: boolean;
     noStroke: boolean;
+    cssClasses: string;
     private _cssClasses;
     private _srcObserver;
     constructor();

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

@@ -16,6 +16,7 @@ let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
         this.filled = false;
         this.clickable = false;
         this.noStroke = false;
+        this.cssClasses = '';
         this._srcObserverCallback = (src) => {
             if (src)
                 this.requestUpdate();
@@ -41,7 +42,7 @@ let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
         if (!HIcon_1.src.getValue())
             return null;
         return html `
-            <svg class="${this._cssClasses}">
+            <svg class="${this._cssClasses} ${this.cssClasses}">
                 <use xlink:href="${namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src.getValue()}#${this.iconName}`)}"></use>
             </svg>
         `;
@@ -68,6 +69,10 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], HIcon.prototype, "noStroke", void 0);
+__decorate([
+    property({ type: String, attribute: 'css-classes' }),
+    __metadata("design:type", String)
+], HIcon.prototype, "cssClasses", void 0);
 HIcon = HIcon_1 = __decorate([
     phoenixCustomElement('h-icon'),
     __metadata("design:paramtypes", [])

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

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

@@ -121,6 +121,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     async open() {
         return new Promise((resolve) => {
             var _a;
+            this[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(() => {
@@ -130,7 +131,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                 const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
                 setTimeout(() => {
                     var _a;
-                    this[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/esm/packages/phoenix/src/components/scroll_to/scroll_to.d.ts

@@ -2,7 +2,7 @@ import { IHScrollTo } from './scroll_to_types';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HScrollTo extends PhoenixLightLitElement implements IHScrollTo {
     to: string;
-    behaviour: ScrollBehavior;
+    behavior: ScrollBehavior;
     private _btnController;
     constructor();
     connectedCallback(): void;

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

@@ -8,13 +8,13 @@ let HScrollTo = class HScrollTo extends PhoenixLightLitElement {
     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 });
                 });
             }
         };
@@ -32,7 +32,7 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], HScrollTo.prototype, "behaviour", void 0);
+], HScrollTo.prototype, "behavior", void 0);
 HScrollTo = __decorate([
     phoenixCustomElement('h-scroll-to'),
     __metadata("design:paramtypes", [])

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.d.ts

@@ -2,7 +2,7 @@ import { TRelativePositionCalculatorConstructorOptions } from './relative_positi
 import { TRelativePositionControllerPositionData } from "./relative_position_controller_types";
 export declare class PositionCalculator {
     #private;
-    constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect, offset, shouldNotReposition }: TRelativePositionCalculatorConstructorOptions);
+    constructor({ direction, relativeElementRect, positionElementRect, container, offset, shouldNotReposition }: TRelativePositionCalculatorConstructorOptions);
     calculatePosition(): TRelativePositionControllerPositionData;
     private _canFitTopSide;
     private _canFitBottomSide;

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

@@ -1,27 +1,27 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import { CALCULATOR_DIRECTIONS } from './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);
         __classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
         __classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
         __classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
-        __classPrivateFieldSet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, nearestNonStaticElementFromElementToPositionRect, "f");
         __classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
         __classPrivateFieldSet(this, _PositionCalculator_shouldNotReposition, !!shouldNotReposition, "f");
         __classPrivateFieldSet(this, _PositionCalculator_offset, offset, "f");
         const body = document.body;
         const documentElement = document.documentElement;
         __classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
+        __classPrivateFieldSet(this, _PositionCalculator_documentWidth, Math.max(body.scrollWidth, body.offsetWidth, documentElement.clientWidth, documentElement.scrollWidth, documentElement.offsetWidth), "f");
     }
     calculatePosition() {
         const [side, alignment = CALCULATOR_DIRECTIONS.center] = __classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
@@ -34,35 +34,29 @@ class PositionCalculator {
         };
     }
     _canFitTopSide() {
-        const elementPositionTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementPositionTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
         return elementPositionTop > __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementPositionTop > 0;
     }
     _canFitBottomSide() {
-        const elementPositionBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementPositionBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
         return elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_documentHeight, "f");
     }
     _canFitCenter(centerPosition) {
         return centerPosition + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - window.scrollY < window.innerHeight && centerPosition - window.scrollY > 0;
     }
     _canFitLeftSide() {
-        const positionElementLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
-        return positionElementLeftSide >= __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").left;
+        const positionElementLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        return positionElementLeftSide >= __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").left && positionElementLeftSide > 0;
     }
     _canFitRightSide() {
-        const positionElementRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left;
-        return positionElementRightSide + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width <= __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").width;
+        const positionElementRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        return positionElementRightSide <= __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").width && positionElementRightSide < __classPrivateFieldGet(this, _PositionCalculator_documentWidth, "f");
     }
     _calculateSidePosition(side, alignment) {
-        const topSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top -
-            __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top -
-            __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height -
-            __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
-        const bottomSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
-        const leftSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left -
-            __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left -
-            __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width -
-            __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
-        const rightSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const topSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const bottomSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const leftSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        const rightSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX + __classPrivateFieldGet(this, _PositionCalculator_offset, "f");
         const verticalCenterOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
         const horizontalCenterOfRelativeElement = (leftSideOfRelativeElement + rightSideOfRelativeElement) / 2;
         switch (side) {
@@ -144,10 +138,10 @@ class PositionCalculator {
         return { left: rightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
     }
     calculateAlignmentPosition(alignment, side) {
-        const alignmentToLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left;
-        const alignmentToRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
-        const alignmentToTopSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top;
-        const alignmentToBottomSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const alignmentToLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left + window.scrollX;
+        const alignmentToRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right + window.scrollX - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
+        const alignmentToTopSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top + window.scrollY;
+        const alignmentToBottomSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + window.scrollY - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
         const verticalCenterOfRelativeElement = (alignmentToTopSide + alignmentToBottomSide) / 2;
         const horizontalCenterOfRelativeElement = (alignmentToLeftSide + alignmentToRightSide) / 2;
         const isSideCenter = side === CALCULATOR_DIRECTIONS.center;
@@ -225,7 +219,7 @@ class PositionCalculator {
         return { top: verticalCenter, calculatedSide: 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();
 
 export { PositionCalculator };
 //# sourceMappingURL=relative_position_calculator.js.map

package/build/esm/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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator_types.d.ts

@@ -6,7 +6,6 @@ export declare type TRelativePositionCalculatorConstructorOptions = {
     direction: TDirection;
     relativeElementRect: DOMRect;
     positionElementRect: DOMRect;
-    nearestNonStaticElementFromElementToPositionRect: DOMRect;
     offset?: number;
     container?: HTMLElement;
     shouldNotReposition?: boolean;

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.d.ts

@@ -1,7 +1,7 @@
 import { IRelativePositionController, TDirection, TRelativePositionControllerConstructorOptions } from "./relative_position_controller_types";
 export declare class RelativePositionController implements IRelativePositionController {
     #private;
-    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition, portalElementsNames, offset }: TRelativePositionControllerConstructorOptions);
+    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition, portalElementsNames, offset, mobileElementPosition }: TRelativePositionControllerConstructorOptions);
     hostConnected(): void;
     hostDisconnected(): void;
     position(shouldNotReposition?: boolean): TDirection;

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

@@ -1,16 +1,15 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { RELATIVE_POSITION_CONTROLLER_EVENTS, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT, DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME } from './relative_position_controller_constants.js';
+import { MOBILE_ELEMENT_POSITIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT, DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME } from './relative_position_controller_constants.js';
 import { PositionCalculator } from './relative_position_calculator.js';
 import throttle_1 from '../../../../../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 = 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);
@@ -24,6 +23,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_1(() => {
             if (__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
                 this.disableRelativePositioning();
@@ -46,6 +46,7 @@ class RelativePositionController {
         __classPrivateFieldSet(this, _RelativePositionController_disablePositioningOnCondition, disablePositioningOnCondition, "f");
         __classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
         __classPrivateFieldSet(this, _RelativePositionController_offset, offset, "f");
+        __classPrivateFieldSet(this, _RelativePositionController_mobileElementPosition, mobileElementPosition, "f");
         __classPrivateFieldSet(this, _RelativePositionController_isInitiallyScrollable, elementToPosition.classList.contains(SCROLLABLE_CLASS_NAME), "f");
         __classPrivateFieldSet(this, _RelativePositionController_initialMaxHeight, getComputedStyle(elementToPosition).maxHeight, "f");
         __classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
@@ -65,10 +66,8 @@ class RelativePositionController {
     position(shouldNotReposition = false) {
         if (__classPrivateFieldGet(this, _RelativePositionController_hasPositioningBeenDisabled, "f"))
             this._dispatchReenabledPositioningEvent();
-        if (!__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"))
-            __classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
         if (!__classPrivateFieldGet(this, _RelativePositionController_container, "f"))
-            __classPrivateFieldSet(this, _RelativePositionController_container, __classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"), "f");
+            __classPrivateFieldSet(this, _RelativePositionController_container, this._findContainer(__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
         const positionElementRect = __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
             ? { ...__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
             : __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
@@ -76,7 +75,6 @@ class RelativePositionController {
             direction: shouldNotReposition && __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : __classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
             relativeElementRect: __classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
             positionElementRect,
-            nearestNonStaticElementFromElementToPositionRect: __classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f").getBoundingClientRect(),
             container: __classPrivateFieldGet(this, _RelativePositionController_container, "f"),
             shouldNotReposition: shouldNotReposition || !__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getAttribute('style'),
             offset: __classPrivateFieldGet(this, _RelativePositionController_offset, "f")
@@ -125,6 +123,9 @@ class RelativePositionController {
         __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.top = '0';
         __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.left = '0';
         __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
+        if (__classPrivateFieldGet(this, _RelativePositionController_mobileElementPosition, "f") !== MOBILE_ELEMENT_POSITIONS.right)
+            return;
+        __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.right = '';
     }
     _disableShrinkMode() {
         if (!__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
@@ -149,9 +150,13 @@ class RelativePositionController {
         const { style: elementStyle } = __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
         elementStyle.position = '';
         elementStyle.transform = '';
+        if (__classPrivateFieldGet(this, _RelativePositionController_mobileElementPosition, "f") !== 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();
 
 export { RelativePositionController };
 //# sourceMappingURL=relative_position_controller.js.map