@shoper/phoenix_design_system 1.2.7 → 1.2.9

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var checkbox_constants = require('./checkbox_constants.js');
 var label_constants = require('../label/label_constants.js');
 

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

@@ -9,8 +9,8 @@ var decorators_js = require('@lit/reactive-element/decorators.js');
 var index = require('../../../../external/classnames/index.js');
 var litHtml = require('lit-html');
 var ref_js = require('lit-html/directives/ref.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var checkbox_constants = require('./checkbox_constants.js');
 
 exports.HCheckboxControl = class HCheckboxControl extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -35,7 +35,6 @@ exports.HFile = class HFile extends phoenix_light_lit_element.PhoenixLightLitEle
                 class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
                 @click="${this._handleClick}"
                 aria-label="${this.removeButtonText} ${this.name}"
-                type="button"
             >
                 ${this.removeButtonIconName
             ? lit.html `<h-icon

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/file_picker/file_picker.js

@@ -12,8 +12,8 @@ var ref_js = require('lit-html/directives/ref.js');
 var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
 var file_picker_constants = require('./file_picker_constants.js');
 var file_model = require('./file/file_model.js');
+var ifDefined_js = require('lit-html/directives/if-defined.js');
 var input_constants = require('../input/input_constants.js');
-var ifDefined = require('lit/directives/if-defined');
 
 exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -78,11 +78,11 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                 ${ref_js.ref(this._$fileInputRef)}
                 type="file"
                 class="${file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerInput}"
-                id="${ifDefined.ifDefined(this.controlId)}"
-                name="${ifDefined.ifDefined(this.controlName)}"
+                id="${ifDefined_js.ifDefined(this.controlId)}"
+                name="${ifDefined_js.ifDefined(this.controlName)}"
                 ?disabled="${this.disabled}"
                 ?required="${this.required}"
-                accept="${ifDefined.ifDefined(this.accept)}"
+                accept="${ifDefined_js.ifDefined(this.accept)}"
                 @change="${this._handleChangeEvent}"
                 hidden
             />
@@ -91,7 +91,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
             ? lit.html ` <h-file-picker-label
                       control-id="${this.controlId}"
                       label-text="${this.labelText}"
-                      label-icon-name="${ifDefined.ifDefined(this.labelIconName)}"
+                      label-icon-name="${ifDefined_js.ifDefined(this.labelIconName)}"
                   />`
             : lit.nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
@@ -99,7 +99,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                       name="${this._file.name}"
                       id="${this._file.id}"
                       remove-button-text="${this.removeButtonText}"
-                      remove-button-icon-name="${ifDefined.ifDefined(this.removeButtonIconName)}"
+                      remove-button-icon-name="${ifDefined_js.ifDefined(this.removeButtonIconName)}"
                   />`
             : lit.nothing}
         `;

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

@@ -7,9 +7,9 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var ifDefined_js = require('lit-html/directives/if-defined.js');
 var input_constants = require('./input_constants.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
-var ifDefined_js = require('lit-html/directives/if-defined.js');
 
 exports.HInputControl = class HInputControl extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

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

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var ref_js = require('lit-html/directives/ref.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HDisplayInput = class HDisplayInput extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.controlId = '';
+        this.inputRef = ref_js.createRef();
+        this._testDispatchValueChanged = () => {
+            var _a;
+            const valueChangeEvent = new CustomEvent(input_stepper_constants.DISPLAY_INPUT_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    value: (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.value
+                }
+            });
+            this.dispatchEvent(valueChangeEvent);
+            if (this.inputRef.value) {
+                this.inputRef.value.value = this.value;
+            }
+        };
+    }
+    _setInputBehavior(event) {
+        const input = event.target;
+        input.focus();
+        input.select();
+    }
+    render() {
+        return lit.html `<input
+            id="${this.controlId}"
+            class="${input_stepper_constants.INPUT_STEPPER_CLASS_NAMES.displayInput}"
+            type="number"
+            ${ref_js.ref(this.inputRef)}
+            .value="${this.value}"
+            @input=${this._testDispatchValueChanged}
+            @click=${this._setInputBehavior}
+        />`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'value', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDisplayInput.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'control-id', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDisplayInput.prototype, "controlId", void 0);
+exports.HDisplayInput = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-display-input')
+], exports.HDisplayInput);
+//# sourceMappingURL=display_input.js.map

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

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

@@ -0,0 +1,96 @@
+'use strict';
+
+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');
+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;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $element = this.querySelector('h-display-input');
+        if (!$element) {
+            throw new Error();
+        }
+        this._$inputElement = $element;
+        this._value = Number($element.value) || 0;
+        this._setupEvents();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('_value')) {
+            this._dispatchValueChanged();
+            this._$inputElement.value = String(this._value);
+        }
+    }
+    _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);
+    }
+    _increment() {
+        if (this._value >= this.max)
+            return;
+        this._value += this.step;
+    }
+    _decrement() {
+        if (this._value <= this.min)
+            return;
+        this._value -= this.step;
+    }
+    _dispatchValueChanged() {
+        const valueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.valueChanged, {
+            bubbles: true,
+            detail: {
+                value: this._value
+            }
+        });
+        this.dispatchEvent(valueChangeEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'step', reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "step", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'min', reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "min", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'max', reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "max", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "_value", void 0);
+exports.HInputStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-input-stepper')
+], exports.HInputStepper);
+//# sourceMappingURL=input_stepper.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/input_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const INPUT_STEPPER_EVENT_NAMES = {
+    change: 'inputStepper.change',
+    valueChanged: 'inputStepper.valueChanged'
+};
+const DISPLAY_INPUT_EVENT_NAMES = {
+    change: 'displayInput.change'
+};
+const INPUT_STEPPER_ACTION_TYPES = {
+    increment: 'increment',
+    decrement: 'decrement'
+};
+const INPUT_STEPPER_CLASS_NAMES = {
+    displayInput: 'input-stepper__value_input'
+};
+
+exports.DISPLAY_INPUT_EVENT_NAMES = DISPLAY_INPUT_EVENT_NAMES;
+exports.INPUT_STEPPER_ACTION_TYPES = INPUT_STEPPER_ACTION_TYPES;
+exports.INPUT_STEPPER_CLASS_NAMES = INPUT_STEPPER_CLASS_NAMES;
+exports.INPUT_STEPPER_EVENT_NAMES = INPUT_STEPPER_EVENT_NAMES;
+//# sourceMappingURL=input_stepper_constants.js.map

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

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

@@ -0,0 +1,39 @@
+'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/btn_controller.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HStepperActionButton = class HStepperActionButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchChangeEvent = () => {
+            const unitaryValueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    action: this.action
+                }
+            });
+            this.dispatchEvent(unitaryValueChangeEvent);
+        };
+        new btn_controller.BtnController(this, this._dispatchChangeEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchChangeEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'action', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HStepperActionButton.prototype, "action", void 0);
+exports.HStepperActionButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-stepper-action-button'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HStepperActionButton);
+//# sourceMappingURL=stepper_action_button.js.map

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

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var label_constants = require('../label/label_constants.js');
 var radio_constants = require('./radio_constants.js');
 

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var radio_constants = require('./radio_constants.js');
 
 exports.HRadioControl = class HRadioControl extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var label_constants = require('../label/label_constants.js');
 var switch_constants = require('./switch_constants.js');
 

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var switch_constants = require('./switch_constants.js');
 
 exports.HSwitchControl = class HSwitchControl extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
-var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var textarea_constants = require('./textarea_constants.js');
 
 exports.HTextareaControl = class HTextareaControl extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -86,6 +86,9 @@ var tooltip = require('./components/messages/tooltips/tooltip.js');
 var tooltip_content = require('./components/messages/tooltips/tooltip_content.js');
 var tag = require('./components/tag/tag.js');
 var tag_remove_button = require('./components/tag/tag_remove_button.js');
+var stepper_action_button = require('./components/form/input_stepper/stepper_action_button.js');
+var input_stepper = require('./components/form/input_stepper/input_stepper.js');
+var display_input = require('./components/form/input_stepper/display_input.js');
 var toggle_constants = require('./components/toggle/toggle_constants.js');
 var toggle = require('./components/toggle/toggle.js');
 var toggle_button$1 = require('./components/toggle/toggle_button.js');
@@ -510,6 +513,24 @@ Object.defineProperty(exports, 'HTagRemoveButton', {
 		return tag_remove_button.HTagRemoveButton;
 	}
 });
+Object.defineProperty(exports, 'HStepperActionButton', {
+	enumerable: true,
+	get: function () {
+		return stepper_action_button.HStepperActionButton;
+	}
+});
+Object.defineProperty(exports, 'HInputStepper', {
+	enumerable: true,
+	get: function () {
+		return input_stepper.HInputStepper;
+	}
+});
+Object.defineProperty(exports, 'HDisplayInput', {
+	enumerable: true,
+	get: function () {
+		return display_input.HDisplayInput;
+	}
+});
 exports.TOGGLE_ACTIONS = toggle_constants.TOGGLE_ACTIONS;
 exports.TOGGLE_CONTEXT_NAME = toggle_constants.TOGGLE_CONTEXT_NAME;
 exports.TOGGLE_EVENT_NAME = toggle_constants.TOGGLE_EVENT_NAME;

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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/checkbox/checkbox_content.js

@@ -3,8 +3,8 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_SLOTS } from './checkbox_constants.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 

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

@@ -5,8 +5,8 @@ import { property } from '@lit/reactive-element/decorators.js';
 import classnames from '../../../../external/classnames/index.js';
 import { html } from 'lit-html';
 import { createRef, ref } from 'lit-html/directives/ref.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { CHECKBOX_CONTROL_EVENTS, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
 
 let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js

@@ -31,7 +31,6 @@ let HFile = class HFile extends PhoenixLightLitElement {
                 class="${FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
                 @click="${this._handleClick}"
                 aria-label="${this.removeButtonText} ${this.name}"
-                type="button"
             >
                 ${this.removeButtonIconName
             ? html `<h-icon

package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/file_picker/file_picker.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TInputControlType } from "../input/input_types";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HFilePicker extends PhoenixLightLitElement {
     controlId: string;
     controlName: string;

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

@@ -8,8 +8,8 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
 import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_LABEL_EVENT_NAMES } from './file_picker_constants.js';
 import { FileItem } from './file/file_model.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
-import { ifDefined } from 'lit/directives/if-defined';
 
 let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
     constructor() {

package/build/esm/packages/phoenix/src/components/form/input/input_control.js

@@ -3,9 +3,9 @@ import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { INPUT_CONTROL_TYPES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 let HInputControl = class HInputControl extends PhoenixLightLitElement {
     constructor() {

package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.d.ts

@@ -0,0 +1,10 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { Ref } from 'lit/directives/ref.js';
+export declare class HDisplayInput extends PhoenixLightLitElement {
+    value: string;
+    controlId: string;
+    inputRef: Ref<HTMLInputElement>;
+    private _setInputBehavior;
+    private _testDispatchValueChanged;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js

@@ -0,0 +1,58 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import { DISPLAY_INPUT_EVENT_NAMES, INPUT_STEPPER_CLASS_NAMES } from './input_stepper_constants.js';
+
+let HDisplayInput = class HDisplayInput extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.controlId = '';
+        this.inputRef = createRef();
+        this._testDispatchValueChanged = () => {
+            var _a;
+            const valueChangeEvent = new CustomEvent(DISPLAY_INPUT_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    value: (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.value
+                }
+            });
+            this.dispatchEvent(valueChangeEvent);
+            if (this.inputRef.value) {
+                this.inputRef.value.value = this.value;
+            }
+        };
+    }
+    _setInputBehavior(event) {
+        const input = event.target;
+        input.focus();
+        input.select();
+    }
+    render() {
+        return html `<input
+            id="${this.controlId}"
+            class="${INPUT_STEPPER_CLASS_NAMES.displayInput}"
+            type="number"
+            ${ref(this.inputRef)}
+            .value="${this.value}"
+            @input=${this._testDispatchValueChanged}
+            @click=${this._setInputBehavior}
+        />`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'value', reflect: true }),
+    __metadata("design:type", String)
+], HDisplayInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'control-id', reflect: true }),
+    __metadata("design:type", String)
+], HDisplayInput.prototype, "controlId", void 0);
+HDisplayInput = __decorate([
+    phoenixCustomElement('h-display-input')
+], HDisplayInput);
+
+export { HDisplayInput };
+//# sourceMappingURL=display_input.js.map

package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/input_stepper/input_stepper.d.ts

@@ -0,0 +1,19 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
+export declare class HInputStepper extends PhoenixLightLitElement {
+    step: number;
+    min: number;
+    max: number;
+    private _value;
+    private _$inputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private _setupEvents;
+    private _handleInputChange;
+    private _handleDisplayChange;
+    private _handleUpdateValue;
+    private _increment;
+    private _decrement;
+    private _dispatchValueChanged;
+}

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

@@ -0,0 +1,94 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { INPUT_STEPPER_ACTION_TYPES, INPUT_STEPPER_EVENT_NAMES, DISPLAY_INPUT_EVENT_NAMES } from './input_stepper_constants.js';
+
+let HInputStepper = class HInputStepper extends 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_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;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $element = this.querySelector('h-display-input');
+        if (!$element) {
+            throw new Error();
+        }
+        this._$inputElement = $element;
+        this._value = Number($element.value) || 0;
+        this._setupEvents();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('_value')) {
+            this._dispatchValueChanged();
+            this._$inputElement.value = String(this._value);
+        }
+    }
+    _setupEvents() {
+        this.addEventListener(INPUT_STEPPER_EVENT_NAMES.change, this._handleInputChange);
+        this.addEventListener(DISPLAY_INPUT_EVENT_NAMES.change, this._handleDisplayChange);
+        this._$inputElement.addEventListener('input', this._handleUpdateValue);
+    }
+    _increment() {
+        if (this._value >= this.max)
+            return;
+        this._value += this.step;
+    }
+    _decrement() {
+        if (this._value <= this.min)
+            return;
+        this._value -= this.step;
+    }
+    _dispatchValueChanged() {
+        const valueChangeEvent = new CustomEvent(INPUT_STEPPER_EVENT_NAMES.valueChanged, {
+            bubbles: true,
+            detail: {
+                value: this._value
+            }
+        });
+        this.dispatchEvent(valueChangeEvent);
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'step', reflect: true }),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min', reflect: true }),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max', reflect: true }),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "max", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "_value", void 0);
+HInputStepper = __decorate([
+    phoenixCustomElement('h-input-stepper')
+], HInputStepper);
+
+export { HInputStepper };
+//# sourceMappingURL=input_stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/input_stepper/input_stepper_constants.d.ts

@@ -0,0 +1,14 @@
+export declare const INPUT_STEPPER_EVENT_NAMES: {
+    readonly change: "inputStepper.change";
+    readonly valueChanged: "inputStepper.valueChanged";
+};
+export declare const DISPLAY_INPUT_EVENT_NAMES: {
+    readonly change: "displayInput.change";
+};
+export declare const INPUT_STEPPER_ACTION_TYPES: {
+    readonly increment: "increment";
+    readonly decrement: "decrement";
+};
+export declare const INPUT_STEPPER_CLASS_NAMES: {
+    readonly displayInput: "input-stepper__value_input";
+};

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_constants.js

@@ -0,0 +1,17 @@
+const INPUT_STEPPER_EVENT_NAMES = {
+    change: 'inputStepper.change',
+    valueChanged: 'inputStepper.valueChanged'
+};
+const DISPLAY_INPUT_EVENT_NAMES = {
+    change: 'displayInput.change'
+};
+const INPUT_STEPPER_ACTION_TYPES = {
+    increment: 'increment',
+    decrement: 'decrement'
+};
+const INPUT_STEPPER_CLASS_NAMES = {
+    displayInput: 'input-stepper__value_input'
+};
+
+export { DISPLAY_INPUT_EVENT_NAMES, INPUT_STEPPER_ACTION_TYPES, INPUT_STEPPER_CLASS_NAMES, INPUT_STEPPER_EVENT_NAMES };
+//# sourceMappingURL=input_stepper_constants.js.map

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_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/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_types.d.ts

@@ -0,0 +1,6 @@
+import { Any } from 'ts-toolbelt';
+import { INPUT_STEPPER_ACTION_TYPES } from './input_stepper_constants';
+export declare type TInputStepperAction = Any.Keys<typeof INPUT_STEPPER_ACTION_TYPES>;
+export declare type TDispatchStepperValue = {
+    value: number;
+};

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_types.js

@@ -0,0 +1,3 @@
+import 'ts-toolbelt';
+import './input_stepper_constants';
+//# sourceMappingURL=input_stepper_types.js.map

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_stepper_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/input_stepper/input_stepper_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2C,2BAA2B,CAAC"}

package/build/esm/packages/phoenix/src/components/form/input_stepper/stepper_action_button.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import type { TInputStepperAction } from './input_stepper_types';
+export declare class HStepperActionButton extends PhoenixLightLitElement {
+    action: TInputStepperAction;
+    constructor();
+    connectedCallback(): void;
+    private _dispatchChangeEvent;
+}

package/build/esm/packages/phoenix/src/components/form/input_stepper/stepper_action_button.js

@@ -0,0 +1,37 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
+import { INPUT_STEPPER_EVENT_NAMES } from './input_stepper_constants.js';
+
+let HStepperActionButton = class HStepperActionButton extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchChangeEvent = () => {
+            const unitaryValueChangeEvent = new CustomEvent(INPUT_STEPPER_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    action: this.action
+                }
+            });
+            this.dispatchEvent(unitaryValueChangeEvent);
+        };
+        new BtnController(this, this._dispatchChangeEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchChangeEvent);
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'action', reflect: true }),
+    __metadata("design:type", String)
+], HStepperActionButton.prototype, "action", void 0);
+HStepperActionButton = __decorate([
+    phoenixCustomElement('h-stepper-action-button'),
+    __metadata("design:paramtypes", [])
+], HStepperActionButton);
+
+export { HStepperActionButton };
+//# sourceMappingURL=stepper_action_button.js.map

package/build/esm/packages/phoenix/src/components/form/input_stepper/stepper_action_button.js.map

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

package/build/esm/packages/phoenix/src/components/form/radio/radio_content.js

@@ -3,8 +3,8 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 import { RADIO_CONTROL_CSS_CLASSES, RADIO_SLOTS } from './radio_constants.js';
 

package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js

@@ -3,8 +3,8 @@ import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { RADIO_CONTROL_EVENTS, RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
 
 let HRadioControl = class HRadioControl extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/form/switch/switch_content.js

@@ -3,8 +3,8 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 import { SWITCH_CONTROL_CSS_CLASSES, SWITCH_SLOTS } from './switch_constants.js';
 

package/build/esm/packages/phoenix/src/components/form/switch/switch_control.js

@@ -3,8 +3,8 @@ import { html } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { SWITCH_CONTROL_EVENTS, SWITCH_CONTROL_CSS_CLASSES } from './switch_constants.js';
 
 let HSwitchControl = class HSwitchControl extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/form/textarea/textarea_control.js

@@ -3,8 +3,8 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { TEXTAREA_CONTROL_EVENTS, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';
 
 let HTextareaControl = class HTextareaControl extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/index.d.ts

@@ -94,6 +94,9 @@ export { HTooltipContent } from "./components/messages/tooltips/tooltip_content"
 export { HIcon } from "./components/icon/icon";
 export { HTag } from "./components/tag/tag";
 export { HTagRemoveButton } from "./components/tag/tag_remove_button";
+export { HInputStepper } from './components/form/input_stepper/input_stepper';
+export { HDisplayInput } from './components/form/input_stepper/display_input';
+export { HStepperActionButton } from './components/form/input_stepper/stepper_action_button';
 export { HToggle } from './components/toggle/toggle';
 export { HToggleBtn } from './components/toggle/toggle_button';
 export * from './components/toggle/toggle_types';

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

@@ -82,6 +82,9 @@ export { HTooltip } from './components/messages/tooltips/tooltip.js';
 export { HTooltipContent } from './components/messages/tooltips/tooltip_content.js';
 export { HTag } from './components/tag/tag.js';
 export { HTagRemoveButton } from './components/tag/tag_remove_button.js';
+export { HStepperActionButton } from './components/form/input_stepper/stepper_action_button.js';
+export { HInputStepper } from './components/form/input_stepper/input_stepper.js';
+export { HDisplayInput } from './components/form/input_stepper/display_input.js';
 export { TOGGLE_ACTIONS, TOGGLE_CONTEXT_NAME, TOGGLE_EVENT_NAME } from './components/toggle/toggle_constants.js';
 export { HToggle } from './components/toggle/toggle.js';
 export { HToggleBtn } from './components/toggle/toggle_button.js';

package/build/esm/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;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",