@shoper/phoenix_design_system 1.2.22 → 1.3.1

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

@@ -0,0 +1,45 @@
+'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.HButtonStepper = class HButtonStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._allowedEvents = {
+            increment: input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment,
+            decrement: input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement
+        };
+        this.type = '';
+        this._dispatchStepperEvent = (ev) => {
+            ev.stopImmediatePropagation();
+            if (!this.type)
+                throw new Error(`The type ${this.type} cannot be empty. Allowed values: 'increment', 'decrement'`);
+            if (!this._allowedEvents[this.type])
+                throw new Error(`The type ${this.type} is not allowed. Allowed values: 'increment', 'decrement'`);
+            this.dispatchEvent(new CustomEvent(this._allowedEvents[this.type], {
+                bubbles: true
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchStepperEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.click, this._dispatchStepperEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HButtonStepper.prototype, "type", void 0);
+exports.HButtonStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.button),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HButtonStepper);
+//# sourceMappingURL=button_stepper.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/{display_input.js.map → button_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;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;"}

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

@@ -0,0 +1,86 @@
+'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 observer = require('../../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../../core/context/context_consumer_controller.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._dispatchToggleEvent = (ev) => {
+            const $input = ev.target;
+            const digitalNumberRegExp = /^[\d]*\.?[\d]*$/;
+            const value = digitalNumberRegExp.test($input.value) ? $input.value : '0';
+            this.dispatchEvent(new CustomEvent(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, {
+                bubbles: true,
+                detail: {
+                    value: Number(value)
+                }
+            }));
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._setupProperties();
+        this._stepperContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._value$ = await this._stepperContextConsumer.consumeAsync(input_stepper_constants.INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES.stepperContext);
+        this._valueObserver = new observer.Observer((value) => {
+            if (this._inputRef.value)
+                this._inputRef.value.value = String(value);
+        });
+        this._value$.subscribe(this._valueObserver);
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, this._dispatchToggleEvent);
+        this._controlId && this._inputRef.value.setAttribute('id', this._controlId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._value$.unsubscribe(this._valueObserver);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, this._dispatchToggleEvent);
+    }
+    _setupProperties() {
+        const $closestInputStepper = this.closest(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.control);
+        if (!$closestInputStepper)
+            return;
+        this._controlId = $closestInputStepper.controlId;
+    }
+    _wholeTextSelection(ev) {
+        const $input = ev.target;
+        $input.select();
+    }
+    _preventLettersAndCommaSeparatorToBeAdded(ev) {
+        const digitsDotAndBackspaceAllowedRegExp = /^[\d\b.]$/i;
+        const isAllowed = digitsDotAndBackspaceAllowedRegExp.test(ev.key);
+        if (!isAllowed && !['Enter', 'Backspace', 'ArrowRight', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+        }
+    }
+    render() {
+        return lit.html `<input
+            ${ref_js.ref(this._inputRef)}
+            class="${input_stepper_constants.INPUT_STEPPER_CLASS_NAMES.displayInput}"
+            type="text"
+            @keydown=${this._preventLettersAndCommaSeparatorToBeAdded}
+            @focus="${this._wholeTextSelection}"
+            @change="${this._dispatchToggleEvent}"
+            inputmode="numeric"
+        />`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDisplayStepper.prototype, "_controlId", void 0);
+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/display_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;"}

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

@@ -3,97 +3,132 @@
 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 behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../../core/context/context_provider_controller.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.controlId = '';
+        this.allowedFractionDigits = null;
+        this.value = 0;
         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.step = 1;
+        this.increment = () => {
+            if (this.value === this.max) {
+                this.value = this.max;
+                return;
+            }
+            this.value += this.step;
+            this._dispatchChangedValue(this.value);
         };
-        this._handleDisplayChange = (event) => {
-            if (event.detail.value > this.max)
+        this.decrement = () => {
+            if (this.value === this.min) {
+                this.value = this.min;
                 return;
-            this._value = Number(event.detail.value);
+            }
+            this.value -= this.step;
+            this._dispatchChangedValue(this.value);
+        };
+        this.changeValue = (ev) => {
+            const value = ev.detail.value;
+            if (value >= this.max) {
+                this.value = this.max;
+            }
+            else if (value <= this.min) {
+                this.value = this.min;
+            }
+            else {
+                this.value = value;
+            }
+            this._stepperState.notify(this.value);
+            this._dispatchChangedValue(this.value);
         };
-        this._handleUpdateValue = () => {
-            this._value = Number(this._$inputElement.value) || 0;
+        this._dispatchChangedValue = (value) => {
+            this.dispatchEvent(new CustomEvent(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.valueChanged, {
+                bubbles: true,
+                detail: {
+                    value
+                }
+            }));
         };
     }
     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.addEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment, this.increment);
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement, this.decrement);
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, this.changeValue);
+        this._stepperState = new behavior_subject.BehaviorSubject(this.value);
+        this._stepperContext = new context_provider_controller.ContextProviderController(this);
+        this._stepperContext.provide(input_stepper_constants.INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES.stepperContext, this._stepperState);
+        this._checkSetupAndSetEdges();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment, this.increment);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement, this.decrement);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, this.changeValue);
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('_value')) {
-            this._dispatchValueChanged();
-            this._$inputElement.value = String(this._value);
-        }
+    _checkSetupAndSetEdges() {
+        if (this.value < this.min)
+            this.value = this.min;
+        if (this.value > this.max)
+            this.value = this.max;
+        this._stepperState.notify(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);
+    _calculateFractionDigitsByStepSize(step) {
+        let zerosCount = 0;
+        const stepString = String(step);
+        if (stepString.includes('.'))
+            zerosCount = stepString.split('.')[1].length;
+        return zerosCount;
     }
-    _increment() {
-        if (this._value >= this.max)
-            return;
-        this._value += this.step;
+    _roundToFractionDigits(fractionsDigits, number) {
+        const multiplier = Math.pow(10, fractionsDigits);
+        return Math.round(Number(number) * multiplier) / multiplier;
     }
-    _decrement() {
-        if (this._value <= this.min)
-            return;
-        this._value -= this.step;
+    _outsideRangeEdges(number) {
+        return number > this.max || number < this.min;
     }
-    _dispatchValueChanged() {
-        const valueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.valueChanged, {
-            bubbles: true,
-            detail: {
-                value: this._value
-            }
-        });
-        this.dispatchEvent(valueChangeEvent);
+    updated() {
+        var _a;
+        if (this._outsideRangeEdges(this.value))
+            return;
+        const digits = (_a = this.allowedFractionDigits) !== null && _a !== void 0 ? _a : this._calculateFractionDigitsByStepSize(this.step);
+        this.value = this._roundToFractionDigits(digits, this.value);
+        this._stepperState.notify(this.value);
     }
 };
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'step', reflect: true }),
+    decorators.property({ type: String, attribute: 'control-id' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputStepper.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'allowed-number-of-fraction-digits' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HInputStepper.prototype, "allowedFractionDigits", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, reflect: true }),
     tslib_es6.__metadata("design:type", Number)
-], exports.HInputStepper.prototype, "step", void 0);
+], exports.HInputStepper.prototype, "value", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'min', reflect: true }),
+    decorators.property({ type: Number, 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 }),
+    decorators.property({ type: Number, reflect: true }),
     tslib_es6.__metadata("design:type", Number)
 ], exports.HInputStepper.prototype, "max", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    decorators.property({ type: Number, reflect: true }),
     tslib_es6.__metadata("design:type", Number)
-], exports.HInputStepper.prototype, "_value", void 0);
+], exports.HInputStepper.prototype, "step", 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

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

@@ -3,22 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const INPUT_STEPPER_EVENT_NAMES = {
-    change: 'inputStepper.change',
-    valueChanged: 'inputStepper.valueChanged'
+    click: 'click',
+    change: 'change'
 };
-const DISPLAY_INPUT_EVENT_NAMES = {
-    change: 'displayInput.change'
-};
-const INPUT_STEPPER_ACTION_TYPES = {
-    increment: 'increment',
-    decrement: 'decrement'
+const INPUT_STEPPER_CUSTOM_EVENT_NAMES = {
+    valueChanged: 'inputStepper.valueChanged',
+    changeValue: 'inputStepper.changeValue',
+    increment: 'inputStepper.increment',
+    decrement: 'inputStepper.decrement'
 };
 const INPUT_STEPPER_CLASS_NAMES = {
     displayInput: 'input-stepper__value_input'
+};
+const INPUT_STEPPER_COMPONENT_NAMES = {
+    control: 'h-input-stepper',
+    input: 'h-display-stepper',
+    button: 'h-button-stepper'
+};
+const INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES = {
+    stepperContext: 'stepperContext'
 };
 
-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_COMPONENT_NAMES = INPUT_STEPPER_COMPONENT_NAMES;
+exports.INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES = INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES;
+exports.INPUT_STEPPER_CUSTOM_EVENT_NAMES = INPUT_STEPPER_CUSTOM_EVENT_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

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

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

@@ -87,9 +87,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 display_stepper = require('./components/form/input_stepper/display_stepper.js');
+var button_stepper = require('./components/form/input_stepper/button_stepper.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');
@@ -516,22 +516,22 @@ Object.defineProperty(exports, 'HTagRemoveButton', {
 		return tag_remove_button.HTagRemoveButton;
 	}
 });
-Object.defineProperty(exports, 'HStepperActionButton', {
+Object.defineProperty(exports, 'HInputStepper', {
 	enumerable: true,
 	get: function () {
-		return stepper_action_button.HStepperActionButton;
+		return input_stepper.HInputStepper;
 	}
 });
-Object.defineProperty(exports, 'HInputStepper', {
+Object.defineProperty(exports, 'HDisplayStepper', {
 	enumerable: true,
 	get: function () {
-		return input_stepper.HInputStepper;
+		return display_stepper.HDisplayStepper;
 	}
 });
-Object.defineProperty(exports, 'HDisplayInput', {
+Object.defineProperty(exports, 'HButtonStepper', {
 	enumerable: true,
 	get: function () {
-		return display_input.HDisplayInput;
+		return button_stepper.HButtonStepper;
 	}
 });
 exports.TOGGLE_ACTIONS = toggle_constants.TOGGLE_ACTIONS;

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

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HButtonStepper extends PhoenixLightLitElement {
+    private _btnController;
+    private _allowedEvents;
+    type: string;
+    constructor();
+    connectedCallback(): void;
+    private _dispatchStepperEvent;
+}

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

@@ -0,0 +1,43 @@
+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_CUSTOM_EVENT_NAMES, INPUT_STEPPER_EVENT_NAMES, INPUT_STEPPER_COMPONENT_NAMES } from './input_stepper_constants.js';
+
+let HButtonStepper = class HButtonStepper extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._allowedEvents = {
+            increment: INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment,
+            decrement: INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement
+        };
+        this.type = '';
+        this._dispatchStepperEvent = (ev) => {
+            ev.stopImmediatePropagation();
+            if (!this.type)
+                throw new Error(`The type ${this.type} cannot be empty. Allowed values: 'increment', 'decrement'`);
+            if (!this._allowedEvents[this.type])
+                throw new Error(`The type ${this.type} is not allowed. Allowed values: 'increment', 'decrement'`);
+            this.dispatchEvent(new CustomEvent(this._allowedEvents[this.type], {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchStepperEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(INPUT_STEPPER_EVENT_NAMES.click, this._dispatchStepperEvent);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HButtonStepper.prototype, "type", void 0);
+HButtonStepper = __decorate([
+    phoenixCustomElement(INPUT_STEPPER_COMPONENT_NAMES.button),
+    __metadata("design:paramtypes", [])
+], HButtonStepper);
+
+export { HButtonStepper };
+//# sourceMappingURL=button_stepper.js.map

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

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

@@ -0,0 +1,15 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HDisplayStepper extends PhoenixLightLitElement {
+    private _controlId;
+    private _stepperContextConsumer;
+    private _value$;
+    private _valueObserver;
+    private _inputRef;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private _dispatchToggleEvent;
+    private _setupProperties;
+    private _wholeTextSelection;
+    private _preventLettersAndCommaSeparatorToBeAdded;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,84 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { 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 { Observer } from '../../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import { INPUT_STEPPER_CUSTOM_EVENT_NAMES, INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES, INPUT_STEPPER_EVENT_NAMES, INPUT_STEPPER_COMPONENT_NAMES, INPUT_STEPPER_CLASS_NAMES } from './input_stepper_constants.js';
+
+let HDisplayStepper = class HDisplayStepper extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._controlId = '';
+        this._inputRef = createRef();
+        this._dispatchToggleEvent = (ev) => {
+            const $input = ev.target;
+            const digitalNumberRegExp = /^[\d]*\.?[\d]*$/;
+            const value = digitalNumberRegExp.test($input.value) ? $input.value : '0';
+            this.dispatchEvent(new CustomEvent(INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, {
+                bubbles: true,
+                detail: {
+                    value: Number(value)
+                }
+            }));
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._setupProperties();
+        this._stepperContextConsumer = new ContextConsumerController(this);
+        this._value$ = await this._stepperContextConsumer.consumeAsync(INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES.stepperContext);
+        this._valueObserver = new Observer((value) => {
+            if (this._inputRef.value)
+                this._inputRef.value.value = String(value);
+        });
+        this._value$.subscribe(this._valueObserver);
+        this.addEventListener(INPUT_STEPPER_EVENT_NAMES.change, this._dispatchToggleEvent);
+        this._controlId && this._inputRef.value.setAttribute('id', this._controlId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._value$.unsubscribe(this._valueObserver);
+        this.removeEventListener(INPUT_STEPPER_EVENT_NAMES.change, this._dispatchToggleEvent);
+    }
+    _setupProperties() {
+        const $closestInputStepper = this.closest(INPUT_STEPPER_COMPONENT_NAMES.control);
+        if (!$closestInputStepper)
+            return;
+        this._controlId = $closestInputStepper.controlId;
+    }
+    _wholeTextSelection(ev) {
+        const $input = ev.target;
+        $input.select();
+    }
+    _preventLettersAndCommaSeparatorToBeAdded(ev) {
+        const digitsDotAndBackspaceAllowedRegExp = /^[\d\b.]$/i;
+        const isAllowed = digitsDotAndBackspaceAllowedRegExp.test(ev.key);
+        if (!isAllowed && !['Enter', 'Backspace', 'ArrowRight', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+        }
+    }
+    render() {
+        return html `<input
+            ${ref(this._inputRef)}
+            class="${INPUT_STEPPER_CLASS_NAMES.displayInput}"
+            type="text"
+            @keydown=${this._preventLettersAndCommaSeparatorToBeAdded}
+            @focus="${this._wholeTextSelection}"
+            @change="${this._dispatchToggleEvent}"
+            inputmode="numeric"
+        />`;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HDisplayStepper.prototype, "_controlId", void 0);
+HDisplayStepper = __decorate([
+    phoenixCustomElement(INPUT_STEPPER_COMPONENT_NAMES.input)
+], HDisplayStepper);
+
+export { HDisplayStepper };
+//# sourceMappingURL=display_stepper.js.map

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

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

@@ -1,19 +1,23 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import { PropertyValues } from 'lit';
+import { TInputStepperChangeEvent } from './input_stepper_types';
 export declare class HInputStepper extends PhoenixLightLitElement {
-    step: number;
+    private _stepperState;
+    private _stepperContext;
+    controlId: string;
+    allowedFractionDigits: number | null;
+    value: number;
     min: number;
     max: number;
-    private _value;
-    private _$inputElement;
+    step: number;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
-    private _setupEvents;
-    private _handleInputChange;
-    private _handleDisplayChange;
-    private _handleUpdateValue;
-    private _increment;
-    private _decrement;
-    private _dispatchValueChanged;
+    increment: () => void;
+    decrement: () => void;
+    changeValue: (ev: CustomEvent<TInputStepperChangeEvent>) => void;
+    private _checkSetupAndSetEdges;
+    private _calculateFractionDigitsByStepSize;
+    private _roundToFractionDigits;
+    private _outsideRangeEdges;
+    private _dispatchChangedValue;
+    updated(): void;
 }