@shoper/phoenix_design_system 0.22.4 → 0.22.5-1

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller.js');
+var color_item_constants = require('./color_item_constants.js');
+var color_swatches_constants = require('../color_swatches_constants.js');
+
+exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new Event(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this.innerHTML = this.color;
+        this._syncAriaPressed();
+        this.setAttribute('aria-label', this.label ? this.label : this.color);
+        this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE: {
+                this._syncAriaPressed();
+                break;
+            }
+        }
+    }
+    _syncAriaPressed() {
+        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
+    }
+    setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "color", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "label", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "selected", void 0);
+exports.HColorItem = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-color-item'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HColorItem);
+//# sourceMappingURL=color_item.js.map

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const COLOR_ITEM_EVENT_NAMES = {
+    selected: 'colorItemSelected'
+};
+const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
+
+exports.COLOR_ITEM_EVENT_NAMES = COLOR_ITEM_EVENT_NAMES;
+exports.COLOR_ITEM_SELECTED_ATTRIBUTE = COLOR_ITEM_SELECTED_ATTRIBUTE;
+//# sourceMappingURL=color_item_constants.js.map

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

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

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var color_item_constants = require('./color_item/color_item_constants.js');
+var color_swatches_constants = require('./color_swatches_constants.js');
+
+exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.inline = true;
+        this.multiple = false;
+        this.selectedColors = [];
+        this._handleColorClicked = ({ target }) => {
+            const $colorItem = target;
+            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+        };
+        this._dispatchColorSelectEvent = () => {
+            const detail = {
+                colors: this.selectedColors.length > 1 ? this._getColorValuesOnly(this.selectedColors) : this.selectedColors[0].color
+            };
+            this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, {
+                bubbles: true,
+                detail
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this._addCssClasses();
+    }
+    _addCssClasses() {
+        this.querySelectorAll('h-color-item').forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
+        this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
+    }
+    _setupEvents() {
+        this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    }
+    _handleColorClickedForMultipleMode($colorItem) {
+        if (!this._isColorAlreadyAdded($colorItem)) {
+            this.selectedColors = [...this.selectedColors, $colorItem];
+        }
+        $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        this._dispatchColorSelectEvent();
+    }
+    _handleColorClickedForSingleMode($colorItem) {
+        const $previouslySelected = this.selectedColors[0];
+        $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        if ($previouslySelected && $previouslySelected !== $colorItem)
+            $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
+        this.selectedColors = [$colorItem];
+        this._dispatchColorSelectEvent();
+    }
+    _isColorAlreadyAdded($colorItem) {
+        return this.selectedColors.filter((selectedColor) => selectedColor.color === $colorItem.color).length > 0;
+    }
+    _getColorValuesOnly(selectedColors) {
+        return selectedColors.map((selectedColor) => selectedColor.color);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HColorSwatches.prototype, "inline", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HColorSwatches.prototype, "multiple", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HColorSwatches.prototype, "selectedColors", void 0);
+exports.HColorSwatches = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-color-swatches')
+], exports.HColorSwatches);
+//# sourceMappingURL=color_swatches.js.map

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

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

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseCssClass = 'color-swatches';
+const COLOR_SWATCHES_CSS_CLASSES = {
+    colorItem: 'color-item',
+    colorSwatches: baseCssClass,
+    colorSwatchesItem: `${baseCssClass}__color-item`
+};
+const COLOR_SWATCHES_EVENT_NAMES = {
+    selected: 'colorSwatchesSelected'
+};
+
+exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
+exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
+//# sourceMappingURL=color_swatches_constants.js.map

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

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

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

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

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

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

@@ -9,9 +9,9 @@ var relative_position_controller_constants = require('./relative_position_contro
 var relative_position_calculator = require('./relative_position_calculator.js');
 var throttle = require('../../../../../external/lodash/throttle.js');
 
-var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
+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;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [] }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [], offset = 0 }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
         _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);
@@ -27,6 +27,7 @@ class RelativePositionController {
         _RelativePositionController_calculatedDirection.set(this, void 0);
         _RelativePositionController_hasPositioningBeenDisabled.set(this, void 0);
         _RelativePositionController_doesCurrentlyHaveShrinkMode.set(this, void 0);
+        _RelativePositionController_offset.set(this, void 0);
         _RelativePositionController_throttledReposition.set(this, throttle['default'](() => {
             if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
                 this.disableRelativePositioning();
@@ -52,6 +53,7 @@ class RelativePositionController {
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_disablePositioningOnCondition, disablePositioningOnCondition, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
+        tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_offset, offset, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_isInitiallyScrollable, elementToPosition.classList.contains(global_constants.SCROLLABLE_CLASS_NAME), "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_initialMaxHeight, getComputedStyle(elementToPosition).maxHeight, "f");
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
@@ -84,19 +86,21 @@ class RelativePositionController {
             positionElementRect,
             nearestNonStaticElementFromElementToPositionRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f").getBoundingClientRect(),
             container: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_container, "f"),
-            shouldNotReposition
+            shouldNotReposition: shouldNotReposition || !tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getAttribute('style'),
+            offset: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_offset, "f")
         }).calculatePosition();
         this._setElementPosition(position);
         const isRepositioningDisabled = shouldNotReposition && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_doesCurrentlyHaveShrinkMode, "f");
         if (isRepositioningDisabled)
-            return;
+            return position.calculatedSide;
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_calculatedDirection, position.calculatedSide, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_doesCurrentlyHaveShrinkMode, !!position.shrinkMode, "f");
         if (!position.shrinkMode) {
             this._disableShrinkMode();
-            return;
+            return position.calculatedSide;
         }
         this._enableShrinkMode();
+        return position.calculatedSide;
     }
     _dispatchReenabledPositioningEvent() {
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_hasPositioningBeenDisabled, false, "f");
@@ -155,7 +159,7 @@ class RelativePositionController {
         elementStyle.transform = '';
     }
 }
-_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_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
+_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();
 
 exports.RelativePositionController = RelativePositionController;
 //# sourceMappingURL=relative_position_controller.js.map

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

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

package/build/cjs/packages/phoenix/src/index.js

@@ -60,6 +60,8 @@ var toggle_button_group = require('./components/groups/toggle_button_group/toggl
 var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
+var color_item = require('./components/color_swatches/color_item/color_item.js');
+var color_swatches = require('./components/color_swatches/color_swatches.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
 var slider = require('./components/slider/slider.js');
 var tab = require('./components/tabs/tab/tab.js');
@@ -342,6 +344,18 @@ Object.defineProperty(exports, 'HBackdrop', {
 		return backdrop.HBackdrop;
 	}
 });
+Object.defineProperty(exports, 'HColorItem', {
+	enumerable: true,
+	get: function () {
+		return color_item.HColorItem;
+	}
+});
+Object.defineProperty(exports, 'HColorSwatches', {
+	enumerable: true,
+	get: function () {
+		return color_swatches.HColorSwatches;
+	}
+});
 exports.VisibilityController = visibility_controller.VisibilityController;
 Object.defineProperty(exports, 'HSlider', {
 	enumerable: true,

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

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorItem extends PhoenixLightLitElement {
+    color: string;
+    label?: string;
+    disabled: boolean;
+    selected: boolean;
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
+    private _syncAriaPressed;
+    private setupEvents;
+    private _dispatchClickedEvent;
+}