@shoper/phoenix_design_system 1.2.21 → 1.2.22-2

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js

@@ -49,6 +49,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         });
         this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
         const mutationObserver = new MutationObserver(() => {
+            this.style.height = '';
             this._setOriginalHeightValue();
             this._expand();
         });

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map

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

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

@@ -0,0 +1,42 @@
+'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 = () => {
+            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);
+    }
+    async 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/{stepper_action_button.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;"}
+{"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;"}

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

@@ -0,0 +1,83 @@
+'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 value = /^[\d]*\.?[\d]*$/.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.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);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        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 isAllowed = /^[\d\b.]$/i.test(ev.key);
+        if (!isAllowed && !['Enter', 'Backspace', 'ArrowRight', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+        }
+    }
+    render() {
+        return lit.html `<input
+            id=${this.controlId}
+            ${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_input.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;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;"}

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

@@ -3,97 +3,131 @@
 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._checkSetup();
+        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.stepperContext, this._stepperState);
     }
     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);
-        }
+    _checkSetup() {
+        if (this.value < this.min)
+            throw new Error('h-input-stepper initialized value cannot be lower than min. Notice that default value = 0.');
+        if (this.value > this.max)
+            throw new Error('h-input-stepper initialized value cannot be greater than max. Notice that default value = 0.');
     }
-    _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 string = String(step);
+        if (string.includes('.'))
+            zerosCount = string.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;"}

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 = {
+    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 = INPUT_STEPPER_CONTEXTS_VARIABLE;
+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/accordion/accordion_content.js

@@ -45,6 +45,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         });
         this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
         const mutationObserver = new MutationObserver(() => {
+            this.style.height = '';
             this._setOriginalHeightValue();
             this._expand();
         });

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/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(): Promise<void>;
+    private _dispatchStepperEvent;
+}

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

@@ -0,0 +1,40 @@
+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 = () => {
+            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);
+    }
+    async 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;"}

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,81 @@
+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, 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 value = /^[\d]*\.?[\d]*$/.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.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);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        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 isAllowed = /^[\d\b.]$/i.test(ev.key);
+        if (!isAllowed && !['Enter', 'Backspace', 'ArrowRight', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+        }
+    }
+    render() {
+        return html `<input
+            id=${this.controlId}
+            ${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;"}

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

@@ -1,19 +1,22 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import { PropertyValues } from 'lit';
 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) => void;
+    private _checkSetup;
+    private _calculateFractionDigitsByStepSize;
+    private _roundToFractionDigits;
+    private _outsideRangeEdges;
+    private _dispatchChangedValue;
+    updated(): void;
 }

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

@@ -1,96 +1,130 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
-import 'lit';
-import { property, state } from 'lit/decorators';
+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 { INPUT_STEPPER_ACTION_TYPES, INPUT_STEPPER_EVENT_NAMES, DISPLAY_INPUT_EVENT_NAMES } from './input_stepper_constants.js';
+import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior_subject.js';
+import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
+import { INPUT_STEPPER_CUSTOM_EVENT_NAMES, INPUT_STEPPER_CONTEXTS_VARIABLE, INPUT_STEPPER_COMPONENT_NAMES } from './input_stepper_constants.js';
 
 let HInputStepper = class HInputStepper extends 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_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_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._checkSetup();
+        this.addEventListener(INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment, this.increment);
+        this.addEventListener(INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement, this.decrement);
+        this.addEventListener(INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, this.changeValue);
+        this._stepperState = new BehaviorSubject(this.value);
+        this._stepperContext = new ContextProviderController(this);
+        this._stepperContext.provide(INPUT_STEPPER_CONTEXTS_VARIABLE.stepperContext, this._stepperState);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+        this.removeEventListener(INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment, this.increment);
+        this.removeEventListener(INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement, this.decrement);
+        this.removeEventListener(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);
-        }
+    _checkSetup() {
+        if (this.value < this.min)
+            throw new Error('h-input-stepper initialized value cannot be lower than min. Notice that default value = 0.');
+        if (this.value > this.max)
+            throw new Error('h-input-stepper initialized value cannot be greater than max. Notice that default value = 0.');
     }
-    _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);
+    _calculateFractionDigitsByStepSize(step) {
+        let zerosCount = 0;
+        const string = String(step);
+        if (string.includes('.'))
+            zerosCount = string.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_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);
     }
 };
 __decorate([
-    property({ type: Number, attribute: 'step', reflect: true }),
+    property({ type: String, attribute: 'control-id' }),
+    __metadata("design:type", String)
+], HInputStepper.prototype, "controlId", void 0);
+__decorate([
+    property({ type: Number, attribute: 'allowed-number-of-fraction-digits' }),
+    __metadata("design:type", Object)
+], HInputStepper.prototype, "allowedFractionDigits", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
-], HInputStepper.prototype, "step", void 0);
+], HInputStepper.prototype, "value", void 0);
 __decorate([
-    property({ type: Number, attribute: 'min', reflect: true }),
+    property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], HInputStepper.prototype, "min", void 0);
 __decorate([
-    property({ type: Number, attribute: 'max', reflect: true }),
+    property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], HInputStepper.prototype, "max", void 0);
 __decorate([
-    state(),
+    property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
-], HInputStepper.prototype, "_value", void 0);
+], HInputStepper.prototype, "step", void 0);
 HInputStepper = __decorate([
-    phoenixCustomElement('h-input-stepper')
+    phoenixCustomElement(INPUT_STEPPER_COMPONENT_NAMES.control)
 ], HInputStepper);
 
 export { HInputStepper };

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

@@ -1,14 +1,21 @@
 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";
+    readonly click: "click";
+    readonly change: "change";
 };
-export declare const INPUT_STEPPER_ACTION_TYPES: {
-    readonly increment: "increment";
-    readonly decrement: "decrement";
+export declare const INPUT_STEPPER_CUSTOM_EVENT_NAMES: {
+    readonly valueChanged: "inputStepper.valueChanged";
+    readonly changeValue: "inputStepper.changeValue";
+    readonly increment: "inputStepper.increment";
+    readonly decrement: "inputStepper.decrement";
 };
 export declare const INPUT_STEPPER_CLASS_NAMES: {
     readonly displayInput: "input-stepper__value_input";
 };
+export declare const INPUT_STEPPER_COMPONENT_NAMES: {
+    readonly control: "h-input-stepper";
+    readonly input: "h-display-stepper";
+    readonly button: "h-button-stepper";
+};
+export declare const INPUT_STEPPER_CONTEXTS_VARIABLE: {
+    readonly stepperContext: "stepperContext";
+};

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

@@ -1,17 +1,24 @@
 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 = {
+    stepperContext: 'stepperContext'
 };
 
-export { DISPLAY_INPUT_EVENT_NAMES, INPUT_STEPPER_ACTION_TYPES, INPUT_STEPPER_CLASS_NAMES, INPUT_STEPPER_EVENT_NAMES };
+export { INPUT_STEPPER_CLASS_NAMES, INPUT_STEPPER_COMPONENT_NAMES, INPUT_STEPPER_CONTEXTS_VARIABLE, INPUT_STEPPER_CUSTOM_EVENT_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

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

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

@@ -99,8 +99,8 @@ 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 { HDisplayStepper } from './components/form/input_stepper/display_stepper';
+export { HButtonStepper } from './components/form/input_stepper/button_stepper';
 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

@@ -83,9 +83,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 { HDisplayStepper } from './components/form/input_stepper/display_stepper.js';
+export { HButtonStepper } from './components/form/input_stepper/button_stepper.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/package.json

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

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

@@ -1,60 +0,0 @@
-'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/stepper_action_button.js

@@ -1,39 +0,0 @@
-'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/esm/packages/phoenix/src/components/form/input_stepper/display_input.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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/input_stepper_types.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,8 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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