@shoper/phoenix_design_system 1.2.13-12 → 1.2.13-15

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

@@ -33,8 +33,6 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
         this.setAttribute('aria-label', this.label ? this.label : this.color);
         this.unclickable && this.removeAttribute('tabindex');
         this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
-        if (!this.value)
-            this.value = this.color;
         this.small && this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
     }
     attributeChangedCallback(name, value, newValue) {
@@ -60,10 +58,6 @@ 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, "value", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)

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

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

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 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 color_swatches_constants = require('./color_swatches_constants.js');
@@ -18,49 +17,24 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this.selectedColors = [];
         this._handleColorClicked = ({ target }) => {
             const $colorItem = target;
-            this._toggleColorItem($colorItem);
-            this._dispatchColorChangeEvent($colorItem);
+            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
         };
-        this._dispatchColorChangeEvent = ($colorItem) => {
-            const colorsDetails = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
-                return {
-                    colors: [...colorsSoFar, color.color],
-                    values: [...colorsSoFar, color.value]
-                };
-            }, {
-                colors: [],
-                values: []
-            });
-            this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.change, {
+        this._dispatchColorSelectEvent = () => {
+            const detail = {
+                colors: this._setColorsDispatchValue(this.selectedColors)
+            };
+            this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, {
                 bubbles: true,
-                detail: {
-                    ...colorsDetails,
-                    $colorItem
-                }
+                detail
             }));
         };
     }
-    selectColors($colors) {
-        const colorsArr = utilities.ArrayUtils.makeAsArray($colors);
-        if (!colorsArr.length) {
-            this.clearAllColors();
-            return;
-        }
-        colorsArr.forEach(($color) => this._toggleColorItem($color));
-    }
-    clearAllColors() {
-        [...this.selectedColors].forEach(($color) => {
-            this._toggleColorItem($color);
-        });
-    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
         this._showAllItemsEvent();
-        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
-        this._$colors = [...this.querySelectorAll('h-color-item')];
     }
     _addCssClasses() {
         this.querySelectorAll(color_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -85,14 +59,12 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
     _setupEvents() {
         this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
     }
-    _toggleColorItem($colorItem) {
-        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
-    }
     _handleColorClickedForMultipleMode($colorItem) {
         !this._isColorAlreadyExistInArray($colorItem)
             ? (this.selectedColors = [...this.selectedColors, $colorItem])
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
+        this._dispatchColorSelectEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -100,6 +72,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
+        this._dispatchColorSelectEvent();
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
@@ -113,6 +86,16 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
+    _setColorsDispatchValue(selectedColors) {
+        if (this.selectedColors.length > 1)
+            return this._getOnlyColorValues(selectedColors);
+        if (this.selectedColors.length === 1)
+            return selectedColors[0].color;
+        return '';
+    }
+    _getOnlyColorValues(selectedColors) {
+        return selectedColors.map((selectedColor) => selectedColor.color);
+    }
 };
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
@@ -123,7 +106,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Number)
 ], exports.HColorSwatches.prototype, "numberOfVisibleColors", void 0);
 tslib_es6.__decorate([
-    decorators.property(),
+    decorators.state(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatches.prototype, "selectedColors", void 0);
 exports.HColorSwatches = tslib_es6.__decorate([

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

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

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

@@ -12,7 +12,7 @@ const COLOR_SWATCHES_CSS_CLASSES = {
     colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
-    change: 'change',
+    selected: 'colorSwatchesSelected',
     markDisabledItems: 'markDisabledItems'
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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');
@@ -196,25 +197,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
-            if (this.contentWidth === dropdown_constants.DROPDOWN_CONTENT_WIDTH.full)
-                this._setDropdownContentWidth(this._getDropdownContentWidth());
             requestAnimationFrame(() => {
                 this.opened && window.innerWidth < global_constants.BREAKPOINTS.xs
                     ? this._positionController.disableRelativePositioning()
                     : this._positionController.position();
             });
         };
-        this._setDropdownContentWidth = (width) => {
-            const $dropdown = this.$dropdownContent;
-            if (!$dropdown)
-                return;
-            if (!width) {
-                $dropdown.style.removeProperty('width');
-                return;
-            }
-            if (width)
-                $dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
-        };
         new keystrokes_controller.KeystrokesController({
             host: this,
             target: document.body,
@@ -324,9 +312,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
     }
-    _getDropdownContentWidth() {
-        return document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
-    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -375,10 +360,6 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Number }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "offset", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: 'content-width' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HDropdown.prototype, "contentWidth", void 0);
 tslib_es6.__decorate([
     decorators_js.property({ type: String }),
     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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;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_constants.js

@@ -21,10 +21,7 @@ const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
 const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
 const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
 const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
-const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
-const DROPDOWN_CONTENT_WIDTH = {
-    full: 'full'
-};
+const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
 
 exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
 exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
@@ -33,7 +30,6 @@ exports.DROPDOWN_CONTENT_HIDE = DROPDOWN_CONTENT_HIDE;
 exports.DROPDOWN_CONTENT_NAME = DROPDOWN_CONTENT_NAME;
 exports.DROPDOWN_CONTENT_SHOW = DROPDOWN_CONTENT_SHOW;
 exports.DROPDOWN_CONTENT_VISIBLE_CLASS = DROPDOWN_CONTENT_VISIBLE_CLASS;
-exports.DROPDOWN_CONTENT_WIDTH = DROPDOWN_CONTENT_WIDTH;
 exports.DROPDOWN_CSS_CLASS = DROPDOWN_CSS_CLASS;
 exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
 exports.DROPDOWN_NAME = DROPDOWN_NAME;

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var index = require('../../../../external/classnames/index.js');
@@ -17,18 +18,6 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
         super(...arguments);
         this.selectedColors = [];
     }
-    selectColors(values) {
-        if (!this._$colorSwatches)
-            return;
-        const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
-        this._$colorSwatches.selectColors($colors);
-        this.requestUpdate();
-    }
-    clearAllColors() {
-        var _a;
-        (_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
-        this.requestUpdate();
-    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
@@ -37,28 +26,13 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
             [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
             [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
         });
-        this._$colorSwatches = this.querySelector('h-color-swatches');
         if (cssClasses)
             this.classList.add(cssClasses);
-        this._getSelectedColors();
-    }
-    _getSelectedColors() {
-        this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
-    }
-    _getAllColorItems() {
-        return [...this.querySelectorAll('h-color-item[selected]')];
-    }
-    _getSelectedColorItems() {
-        return this._getAllColorItems().filter(($color) => $color.selected);
     }
     _setupEvents() {
-        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
-            event.preventDefault();
-            this.selectedColors = event.detail.values;
-            this.dispatchEvent(new CustomEvent(color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
-                bubbles: true,
-                detail: event.detail
-            }));
+        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
+            const eventValue = event.detail.colors;
+            this.selectedColors = eventValue ? utilities.ArrayUtils.makeAsArray(eventValue) : [];
         });
     }
     render() {
@@ -74,7 +48,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorSwatchesControl.prototype, "controlId", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String, attribute: 'control-name' }),
+    decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorSwatchesControl.prototype, "controlName", void 0);
 tslib_es6.__decorate([
@@ -90,7 +64,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorSwatchesControl.prototype, "error", void 0);
 tslib_es6.__decorate([
-    decorators.property(),
+    decorators.state(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
 exports.HColorSwatchesControl = tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_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,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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js

@@ -7,11 +7,7 @@ const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
     colorSwatchesControl: baseColorSwatchesControlClass,
     colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
     colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
-};
-const COLOR_SWATCHES_CONTROL_EVENT_NAMES = {
-    change: 'colorSwatchesControl.change'
 };
 
 exports.COLOR_SWATCHES_CONTROL_CSS_CLASSES = COLOR_SWATCHES_CONTROL_CSS_CLASSES;
-exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = COLOR_SWATCHES_CONTROL_EVENT_NAMES;
 //# sourceMappingURL=color_swatches_control_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js.map

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

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

@@ -19,10 +19,6 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
     constructor() {
         super(...arguments);
         this.type = input_constants.INPUT_CONTROL_TYPES.file;
-        this.labelText = 'Wgraj plik';
-        this.labelIconName = 'icon-upload';
-        this.removeButtonText = 'Usuń plik';
-        this.removeButtonIconName = 'icon-x';
         this._$fileInputRef = ref_js.createRef();
         this._handleChangeEvent = (event) => {
             const filesList = this._getFiles(event);
@@ -67,7 +63,6 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
         super.connectedCallback();
         this._addEventListeners();
         const cssClasses = index['default']({
-            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
@@ -100,7 +95,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                   />`
             : lit.nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
-            ? lit.html ` <h-file
+            ? lit.html `<h-file
                       name="${this._file.name}"
                       id="${this._file.id}"
                       remove-button-text="${this.removeButtonText}"

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_stepper/button_stepper.js

@@ -0,0 +1,20 @@
+'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 input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HButtonStepper = class HButtonStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'step', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HButtonStepper.prototype, "step", void 0);
+exports.HButtonStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.button)
+], exports.HButtonStepper);
+//# sourceMappingURL=button_stepper.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/button_stepper.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;"}

package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_stepper.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 ref_js = require('lit-html/directives/ref.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HDisplayStepper = class HDisplayStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.controlId = '';
+        this.inputRef = ref_js.createRef();
+        this.step = 1;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const htmlElement = this.closest(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.control);
+        if (!htmlElement)
+            return;
+        this.step = Number(htmlElement.getAttribute('step'));
+        this.controlId = htmlElement.getAttribute('control-id');
+    }
+    render() {
+        return lit.html `<input
+            onfocus="this.select();"
+            class="${input_stepper_constants.INPUT_STEPPER_CLASS_NAMES.displayInput}"
+            step="${this.step}"
+            id=${this.controlId}
+            type="number"
+            ${ref_js.ref(this.inputRef)}
+        /> `;
+    }
+};
+exports.HDisplayStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.input)
+], exports.HDisplayStepper);
+//# sourceMappingURL=display_stepper.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/{stepper_action_button.js.map → display_stepper.js.map}

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

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
-require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
@@ -12,75 +11,99 @@ var input_stepper_constants = require('./input_stepper_constants.js');
 exports.HInputStepper = class HInputStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
-        this.step = 1;
         this.min = -Infinity;
         this.max = Infinity;
-        this._handleInputChange = (event) => {
-            var _a;
-            ((_a = event.target) === null || _a === void 0 ? void 0 : _a.action) === input_stepper_constants.INPUT_STEPPER_ACTION_TYPES.increment ? this._increment() : this._decrement();
-        };
-        this._handleDisplayChange = (event) => {
-            if (event.detail.value > this.max)
-                return;
-            this._value = Number(event.detail.value);
-        };
-        this._handleUpdateValue = () => {
-            this._value = Number(this._$inputElement.value) || 0;
-        };
+        this.controlId = '';
+        this.allowFractions = false;
+        this.step = 1;
+        this.stepperValue = '0';
+        this.inputReference = null;
     }
     connectedCallback() {
         super.connectedCallback();
-        const $element = this.querySelector('h-display-input');
-        if (!$element) {
-            throw new Error();
-        }
-        this._$inputElement = $element;
-        this._value = Number($element.value) || 0;
-        if (this.min > 0) {
-            this._value = this.min;
-        }
-        this._setupEvents();
+        this._registerInputRef();
+        this._subscribeToButtons();
+        this._subscribeToInput();
+        this._attemptSetInputValue();
+    }
+    _registerInputRef() {
+        this.inputReference = this.querySelector(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.input);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+    _subscribeToButtons() {
+        const stepperButtons = Array.from(this.querySelectorAll(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.button));
+        if (stepperButtons.length) {
+            stepperButtons.forEach((button) => {
+                button.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.click, () => this._buttonClick(button));
+            });
+        }
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('_value')) {
-            this._dispatchValueChanged();
-            this._$inputElement.value = String(this._value);
+    _subscribeToInput() {
+        if (this.inputReference) {
+            this.inputReference.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, () => this.inputReference && this._inputChange(this.inputReference));
         }
     }
-    _setupEvents() {
-        this.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, this._handleInputChange);
-        this.addEventListener(input_stepper_constants.DISPLAY_INPUT_EVENT_NAMES.change, this._handleDisplayChange);
-        this._$inputElement.addEventListener('input', this._handleUpdateValue);
+    _inputChange(input) {
+        var _a, _b;
+        const { value: inputValue } = (_b = (_a = input === null || input === void 0 ? void 0 : input.inputRef) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : {};
+        if (inputValue == null)
+            return;
+        this._setValue(`${this._roundToStepSize(this.step, Number(inputValue))}`);
     }
-    _increment() {
-        if (this._value >= this.max)
+    _buttonClick(buttonElement) {
+        const step = Number(buttonElement.getAttribute('step'));
+        if (isNaN(step))
             return;
-        this._value += this.step;
+        this._setValueByButton(step);
+    }
+    _setValueByButton(value) {
+        const sum = Number(this.stepperValue) + value;
+        this._setValue(`${this._roundToStepSize(value, sum)}`);
     }
-    _decrement() {
-        if (this._value <= this.min)
+    _setValue(newValue) {
+        const newValueNumber = Number(newValue);
+        if (!this.inputReference || isNaN(newValueNumber))
+            return;
+        if (newValueNumber > this.max || newValueNumber < this.min) {
+            this.inputReference.inputRef.value.value = this.stepperValue;
             return;
-        this._value -= this.step;
+        }
+        this.stepperValue = newValue;
+        this.inputReference.inputRef.value.value = this.stepperValue;
+        this._dispatchValueChangeEvent(this.stepperValue);
     }
-    _dispatchValueChanged() {
-        const valueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.valueChanged, {
+    _dispatchValueChangeEvent(value) {
+        const valueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.valueChanged, {
             bubbles: true,
             detail: {
-                value: this._value
+                value: Number(value)
             }
         });
         this.dispatchEvent(valueChangeEvent);
     }
+    _attemptSetInputValue() {
+        if (!(this.min || this.value))
+            return;
+        const id = setInterval(() => {
+            var _a, _b;
+            if ((_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.inputRef) {
+                this._setValue(`${(_b = this.value) !== null && _b !== void 0 ? _b : this.min}`);
+                clearInterval(id);
+            }
+        }, 200);
+    }
+    _roundToStepSize(step, number) {
+        let zerosCount = 0;
+        const stepInString = String(step);
+        if (stepInString.includes('.'))
+            zerosCount = stepInString.split('.')[1].length;
+        const multiplier = Math.pow(10, zerosCount);
+        return Math.round(Number(number) * multiplier) / multiplier;
+    }
 };
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'step', reflect: true }),
-    tslib_es6.__metadata("design:type", Number)
-], exports.HInputStepper.prototype, "step", void 0);
+    decorators.property({ type: String, attribute: 'value', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputStepper.prototype, "value", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Number, attribute: 'min', reflect: true }),
     tslib_es6.__metadata("design:type", Number)
@@ -90,10 +113,22 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Number)
 ], exports.HInputStepper.prototype, "max", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    decorators.property({ type: String, attribute: 'control-id', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputStepper.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'allow-fractions', reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HInputStepper.prototype, "allowFractions", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'step', reflect: true }),
     tslib_es6.__metadata("design:type", Number)
-], exports.HInputStepper.prototype, "_value", void 0);
+], exports.HInputStepper.prototype, "step", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputStepper.prototype, "stepperValue", void 0);
 exports.HInputStepper = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-input-stepper')
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.control)
 ], exports.HInputStepper);
 //# sourceMappingURL=input_stepper.js.map