@shoper/phoenix_design_system 0.22.2 → 0.22.4-0

package/build/cjs/{external → packages/phoenix/external}/classnames/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _commonjsHelpers = require('../../_virtual/_commonjsHelpers.js');
+var _commonjsHelpers = require('../../../../_virtual/_commonjsHelpers.js');
 
 /*!
-  Copyright (c) 2017 Jed Watson.
+  Copyright (c) 2018 Jed Watson.
   Licensed under the MIT License (MIT), see
   http://jedwatson.github.io/classnames
 */
@@ -17,7 +17,7 @@ var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames () {
+	function classNames() {
 		var classes = [];
 
 		for (var i = 0; i < arguments.length; i++) {
@@ -28,16 +28,22 @@ var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
 
 			if (argType === 'string' || argType === 'number') {
 				classes.push(arg);
-			} else if (Array.isArray(arg) && arg.length) {
-				var inner = classNames.apply(null, arg);
-				if (inner) {
-					classes.push(inner);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
 				}
 			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
 					}
+				} else {
+					classes.push(arg.toString());
 				}
 			}
 		}

package/build/{esm → cjs/packages/phoenix}/external/classnames/index.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;"}
+{"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;"}

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

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+require('lit');
 var decorators = require('lit/decorators');
-var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_constants = require('../portal/portal_constants.js');
 var litHtml = require('lit-html');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
+var ref_js = require('lit-html/directives/ref.js');
 var global_constants = require('../../global_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
@@ -29,7 +30,10 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.transition = 'direction';
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         this._backdropController = new backdrop_controller.BackdropController();
+        this._firstFocusableElement = undefined;
         this._lastFocusableElement = undefined;
+        this._focusSentinelStart = ref_js.createRef();
+        this._focusSentinelEnd = ref_js.createRef();
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -55,13 +59,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b, _c;
+                        var _a, _b;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
-                        if (!this._lastFocusableElement)
-                            this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
-                        this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
+                        (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
                         resolve();
                     }, transitionDuration);
                 });
@@ -135,16 +137,18 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this._handleFocusWithinDropdown = async (ev) => {
             var _a;
             const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
-                ev.preventDefault();
-                this._focusOnNextSibling(this.nextElementSibling || this);
-                await this._hideDropdownsSequentially();
-            }
-            const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
-            if (hasTabBeenPressed && ev.shiftKey && document.activeElement === $firstFocusableElement) {
-                ev.preventDefault();
-                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-                await this._hideDropdownsSequentially();
+            if (hasTabBeenPressed) {
+                if (ev.shiftKey) {
+                    if (document.activeElement === this._firstFocusableElement) {
+                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        ev.preventDefault();
+                    }
+                }
+                else if (document.activeElement === this._lastFocusableElement) {
+                    ev.preventDefault();
+                    await this._rootDropdown._hideDropdownsSequentially();
+                    this._focusOnNextSibling(this._rootDropdown);
+                }
             }
         };
         this._hoverToggle = async (ev) => {
@@ -203,6 +207,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this._setupListeners();
         this._setupInitialDropdownProperties();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._firstFocusableElement = this._focusSentinelStart.value;
+        this._lastFocusableElement = this._focusSentinelEnd.value;
+    }
     static _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -249,12 +258,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         el.focus();
         if (el === document.activeElement)
             return;
-        if (el.firstElementChild) {
-            this._focusOnNextSibling(el.firstElementChild);
-            return;
-        }
-        if (el.nextElementSibling)
-            this._focusOnNextSibling(el.nextElementSibling);
+        this._focusOnNextSibling(el.nextElementSibling);
     }
     _isHoveredWithinDropdown(element) {
         var _a;
@@ -300,7 +304,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         return litHtml.html `
             ${this.getSlot('toggler')}
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
+                <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
                 ${this.getSlot('content')}
+                <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
             </h-portal>
         `;
     }
@@ -329,6 +335,10 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "portalTarget", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "_firstFocusableElement", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)

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

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

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

@@ -22,10 +22,7 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
     }
     render() {
         super.render();
-        return lit.html `
-            <div role="dialog">${this.getSlot('content')}</div>
-            <div tabindex="0" aria-hidden="true"></div>
-        `;
+        return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
     }
 };
 tslib_es6.__decorate([

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

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

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

@@ -18,7 +18,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
         this._dispatchToggleDropdownEvent = (ev) => {
             ev.preventDefault();
             ev.stopImmediatePropagation();
-            const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
+            const toggleDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.toggle, {
                 bubbles: true
             });
             this.dispatchEvent(toggleDropdownEvent);

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

@@ -8,7 +8,7 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../../../external/classnames/index.js');
+var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('./checkbox_constants.js');
 
 exports.HCheckbox = class HCheckbox extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.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,oBAAoB,gDAAoD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;"}

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js

@@ -8,7 +8,7 @@ var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_el
 var litHtml = require('lit-html');
 var decorators_js = require('@lit/reactive-element/decorators.js');
 var ref_js = require('lit-html/directives/ref.js');
-var index = require('../../../../../../external/classnames/index.js');
+var index = require('../../../../external/classnames/index.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
 var checkbox_constants = require('./checkbox_constants.js');

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.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,oBAAoB,gDAAoD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -9,7 +9,7 @@ var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_el
 var input_constants = require('./input_constants.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../../../external/classnames/index.js');
+var index = require('../../../../external/classnames/index.js');
 
 exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/form/input/input.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,oBAAoB,gDAAoD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;AACA;AACA;"}

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

@@ -8,7 +8,7 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../../../external/classnames/index.js');
+var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
 var radio_constants = require('./radio_constants.js');
 

package/build/cjs/packages/phoenix/src/components/form/radio/radio.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,oBAAoB,gDAAoD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;"}

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

@@ -8,7 +8,7 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../../../external/classnames/index.js');
+var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
 var switch_constants = require('./switch_constants.js');
 

package/build/cjs/packages/phoenix/src/components/form/switch/switch.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,oBAAoB,gDAAoD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;"}

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

@@ -8,7 +8,7 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../../../external/classnames/index.js');
+var index = require('../../../../external/classnames/index.js');
 var textarea_constants = require('./textarea_constants.js');
 
 exports.HTextarea = class HTextarea extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/form/textarea/textarea.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,oBAAoB,gDAAoD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;"}

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

@@ -66,7 +66,7 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
     _setupEvents() {
         this.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
     }
-    allChildrenRendered() {
+    allChildrenConnected() {
         const $selectedTab = this.querySelector('h-tab[selected]');
         this._hideNotSelectedAndVisiblePanels();
         if (!$selectedTab)

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

@@ -5,9 +5,9 @@ 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;
+var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_shouldNotReposition, _PositionCalculator_offset;
 class PositionCalculator {
-    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, shouldNotReposition }) {
+    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, offset = 0, shouldNotReposition }) {
         _PositionCalculator_direction.set(this, void 0);
         _PositionCalculator_relativeElementRect.set(this, void 0);
         _PositionCalculator_positionElementRect.set(this, void 0);
@@ -15,20 +15,22 @@ class PositionCalculator {
         _PositionCalculator_containerRect.set(this, void 0);
         _PositionCalculator_documentHeight.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");
     }
     calculatePosition() {
         const [side, alignment = relative_position_controller_constants.CALCULATOR_DIRECTIONS.center] = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
-        const sidePosition = this._calculateSidePosition(side);
-        const alignmentPosition = this.calculateAlignmentPosition(alignment);
+        const sidePosition = this._calculateSidePosition(side, alignment);
+        const alignmentPosition = this.calculateAlignmentPosition(alignment, side);
         return {
             ...sidePosition,
             ...alignmentPosition,
@@ -46,66 +48,188 @@ class PositionCalculator {
     _canFitCenter(centerPosition) {
         return centerPosition + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - window.scrollY < window.innerHeight && centerPosition - window.scrollY > 0;
     }
-    _calculateSidePosition(side) {
-        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;
-        const bottomSideOfRelativeElement = tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top;
-        const centerOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
+    _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;
+    }
+    _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;
+    }
+    _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 verticalCenterOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
+        const horizontalCenterOfRelativeElement = (leftSideOfRelativeElement + rightSideOfRelativeElement) / 2;
         switch (side) {
             case relative_position_controller_constants.CALCULATOR_DIRECTIONS.top:
-                if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
-                    return { top: topSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
-                if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
-                    return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
-                if (!this._canFitTopSide() && !this._canFitBottomSide())
-                    return { top: centerOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
-                if (!this._canFitTopSide())
-                    return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
-                return { top: topSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
+                return this._calculateTopSide({
+                    topSide: topSideOfRelativeElement,
+                    bottomSide: bottomSideOfRelativeElement,
+                    verticalCenter: verticalCenterOfRelativeElement
+                });
             case relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom:
-                if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
-                    return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
-                if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
-                    return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
-                if (!this._canFitTopSide() && !this._canFitBottomSide())
-                    return { top: centerOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
-                if (!this._canFitBottomSide())
-                    return { top: topSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
-                return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
+                return this._calculateBottomSide({
+                    topSide: topSideOfRelativeElement,
+                    bottomSide: bottomSideOfRelativeElement,
+                    verticalCenter: verticalCenterOfRelativeElement
+                });
             case relative_position_controller_constants.CALCULATOR_DIRECTIONS.center:
-                return { top: centerOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+                return this._calculateCenterSide({
+                    verticalCenter: verticalCenterOfRelativeElement,
+                    horizontalCenter: horizontalCenterOfRelativeElement,
+                    alignment
+                });
             case relative_position_controller_constants.CALCULATOR_DIRECTIONS.left:
-                // do zaimplementowania
-                return { top: 0 };
+                return this._calculateLeftSide({
+                    leftSide: leftSideOfRelativeElement,
+                    rightSide: rightSideOfRelativeElement
+                });
             case relative_position_controller_constants.CALCULATOR_DIRECTIONS.right:
-                // do zaimplementowania
-                return { top: 0 };
+                return this._calculateRightSide({
+                    leftSide: leftSideOfRelativeElement,
+                    rightSide: rightSideOfRelativeElement
+                });
             default:
                 return { top: 0 };
         }
     }
-    calculateAlignmentPosition(side) {
+    _calculateTopSide({ topSide, bottomSide, verticalCenter }) {
+        if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
+            return { top: topSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
+        if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(verticalCenter))
+            return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
+        if (!this._canFitTopSide() && !this._canFitBottomSide())
+            return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+        if (!this._canFitTopSide())
+            return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
+        return { top: topSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
+    }
+    _calculateBottomSide({ topSide, bottomSide, verticalCenter }) {
+        if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
+            return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
+        if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(verticalCenter))
+            return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
+        if (!this._canFitTopSide() && !this._canFitBottomSide())
+            return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+        if (!this._canFitBottomSide())
+            return { top: topSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
+        return { top: bottomSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
+    }
+    _calculateCenterSide({ verticalCenter, horizontalCenter, alignment }) {
+        if (alignment === relative_position_controller_constants.CALCULATOR_DIRECTIONS.left || alignment === relative_position_controller_constants.CALCULATOR_DIRECTIONS.right)
+            return { top: verticalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+        return { left: horizontalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+    }
+    _calculateLeftSide({ leftSide, rightSide }) {
+        if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
+            return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        if (!this._canFitLeftSide() && !this._canFitRightSide())
+            return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        if (!this._canFitLeftSide())
+            return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+    }
+    _calculateRightSide({ leftSide, rightSide }) {
+        if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
+            return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        if (!this._canFitRightSide() && !this._canFitLeftSide())
+            return { left: rightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        if (!this._canFitRightSide())
+            return { left: leftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        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 alignmentToCenter = (alignmentToLeftSide + alignmentToRightSide) / 2;
-        switch (side) {
-            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.top:
-                // do zaimplementowania
-                return { left: 0 };
-            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom:
-                // do zaimplementowania
-                return { left: 0 };
-            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.left:
-                return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
-            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.right:
-                return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        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 verticalCenterOfRelativeElement = (alignmentToTopSide + alignmentToBottomSide) / 2;
+        const horizontalCenterOfRelativeElement = (alignmentToLeftSide + alignmentToRightSide) / 2;
+        const isSideCenter = side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.center;
+        switch (alignment) {
+            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.top: {
+                return this._calculateTopAlignment({ topAlignment: alignmentToTopSide, isSideCenter });
+            }
+            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom: {
+                return this._calculateBottomAlignment({ bottomAlignment: alignmentToBottomSide, isSideCenter });
+            }
+            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.left: {
+                return this._calculateLeftAlignment({
+                    leftAlignment: alignmentToLeftSide,
+                    rightAlignment: alignmentToRightSide,
+                    isSideCenter
+                });
+            }
+            case relative_position_controller_constants.CALCULATOR_DIRECTIONS.right: {
+                return this._calculateRightAlignment({
+                    leftAlignment: alignmentToLeftSide,
+                    rightAlignment: alignmentToRightSide,
+                    isSideCenter
+                });
+            }
             case relative_position_controller_constants.CALCULATOR_DIRECTIONS.center:
-                return { left: alignmentToCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+                return this._calculateCenterAlignment({
+                    horizontalCenter: horizontalCenterOfRelativeElement,
+                    verticalCenter: verticalCenterOfRelativeElement,
+                    side
+                });
             default:
                 return { left: 0 };
         }
     }
+    _calculateTopAlignment({ topAlignment, isSideCenter }) {
+        const alignmentToTop = isSideCenter ? topAlignment - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f") : topAlignment;
+        return {
+            top: alignmentToTop,
+            calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top
+        };
+    }
+    _calculateBottomAlignment({ bottomAlignment, isSideCenter }) {
+        const alignmentToBottom = isSideCenter ? bottomAlignment + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f") : bottomAlignment;
+        return { top: alignmentToBottom, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
+    }
+    _calculateLeftAlignment({ leftAlignment, rightAlignment, isSideCenter }) {
+        const alignmentToLeftSide = isSideCenter ? leftAlignment - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width : leftAlignment;
+        const alignmentToRightSide = rightAlignment + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        if (!isSideCenter)
+            return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
+            return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        if (!this._canFitLeftSide() && !this._canFitRightSide())
+            return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        if (!this._canFitLeftSide())
+            return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        return { left: alignmentToLeftSide - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f"), calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+    }
+    _calculateRightAlignment({ leftAlignment, rightAlignment, isSideCenter }) {
+        const alignmentToRightSide = isSideCenter ? rightAlignment + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width : rightAlignment;
+        const alignmentToLeftSide = leftAlignment - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width - tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f");
+        if (!isSideCenter)
+            return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
+            return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        if (!this._canFitLeftSide() && !this._canFitRightSide())
+            return { left: alignmentToRightSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+        if (!this._canFitRightSide())
+            return { left: alignmentToLeftSide, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.left };
+        return { left: alignmentToRightSide + tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_offset, "f"), calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.right };
+    }
+    _calculateCenterAlignment({ horizontalCenter, verticalCenter, side }) {
+        if (side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.top || side === relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom)
+            return { left: horizontalCenter, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.center };
+        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_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();
 
 exports.PositionCalculator = PositionCalculator;
 //# sourceMappingURL=relative_position_calculator.js.map