@shoper/phoenix_design_system 1.2.3-11 → 1.2.3-13

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

@@ -18,8 +18,7 @@ const INPUT_CONTROL_TYPES = {
     hidden: 'hidden',
     email: 'email',
     tel: 'tel',
-    password: 'password',
-    file: 'file'
+    password: 'password'
 };
 const INPUT_CONTROL_CSS_CLASSES = {
     input: baseInputControlClass,

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

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

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

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var ref_js = require('lit-html/directives/ref.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HDisplayInput = class HDisplayInput extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.controlId = 1;
+        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="text"
+            ${ref_js.ref(this.inputRef)}
+            .value="${this.value}"
+            @input=${this._testDispatchValueChanged}
+            @click=${(event) => this._setInputBehavior(event)}
+        />`;
+    }
+};
+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", Number)
+], 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/{file_picker/file_picker_label.js.map → input_stepper/display_input.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HInputStepper = class HInputStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.step = 1;
+        this.min = -Infinity;
+        this.max = Infinity;
+        this._handleInputChange = (event) => {
+            var _a;
+            ((_a = event.target) === null || _a === void 0 ? void 0 : _a.action) === input_stepper_constants.INPUT_STEPPER_ACTION_TYPES.increment ? this._increment() : this._decrement();
+        };
+        this._handleDisplayChange = (event) => {
+            if (event.detail.value > this.max)
+                return;
+            this._value = Number(event.detail.value);
+        };
+        this._handleUpdateValue = () => {
+            this._value = Number(this._$inputElement.value) || 0;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $element = this.querySelector('h-display-input');
+        if (!$element) {
+            throw new Error();
+        }
+        this._$inputElement = $element;
+        this._value = Number($element.value) || 0;
+        this._setupEvents();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('_value')) {
+            this._dispatchValueChanged();
+            this._$inputElement.value = String(this._value);
+        }
+    }
+    _setupEvents() {
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, this._handleInputChange);
+        this.addEventListener(input_stepper_constants.DISPLAY_INPUT_EVENT_NAMES.change, this._handleDisplayChange);
+        this._$inputElement.addEventListener('input', this._handleUpdateValue);
+    }
+    _increment() {
+        if (this._value >= this.max)
+            return;
+        this._value += this.step;
+    }
+    _decrement() {
+        if (this._value <= this.min)
+            return;
+        this._value -= this.step;
+    }
+    _dispatchValueChanged() {
+        const valueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.valueChanged, {
+            bubbles: true,
+            detail: {
+                value: this._value
+            }
+        });
+        this.dispatchEvent(valueChangeEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'step', reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "step", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'min', reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "min", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'max', reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "max", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "_value", void 0);
+exports.HInputStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-input-stepper')
+], exports.HInputStepper);
+//# sourceMappingURL=input_stepper.js.map

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

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

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

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

package/build/{esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.js.map → 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;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/cjs/packages/phoenix/src/components/form/input_stepper/stepper_action_button.js

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

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

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

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

@@ -23,10 +23,6 @@ var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
 var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
 var dropdown = require('./components/dropdown/dropdown.js');
 var select = require('./components/form/select/select.js');
-var file = require('./components/form/file_picker/file/file.js');
-var input_constants = require('./components/form/input/input_constants.js');
-var file_picker = require('./components/form/file_picker/file_picker.js');
-var file_picker_label = require('./components/form/file_picker/file_picker_label.js');
 var modal = require('./components/modal/modal.js');
 var modal_opener = require('./components/modal/modal_opener.js');
 var modal_body = require('./components/modal/modal_body.js');
@@ -40,6 +36,7 @@ var control_content = require('./components/form/control/control_content.js');
 var control_element = require('./components/form/control/control_element.js');
 var control_label = require('./components/form/control/control_label.js');
 var control_additional_content = require('./components/form/control/control_additional_content.js');
+var input_constants = require('./components/form/input/input_constants.js');
 var input = require('./components/form/input/input.js');
 var input_control = require('./components/form/input/input_control.js');
 var input_icon = require('./components/form/input/input_icon.js');
@@ -86,6 +83,9 @@ var tooltip = require('./components/messages/tooltips/tooltip.js');
 var tooltip_content = require('./components/messages/tooltips/tooltip_content.js');
 var tag = require('./components/tag/tag.js');
 var tag_remove_button = require('./components/tag/tag_remove_button.js');
+var stepper_action_button = require('./components/form/input_stepper/stepper_action_button.js');
+var input_stepper = require('./components/form/input_stepper/input_stepper.js');
+var display_input = require('./components/form/input_stepper/display_input.js');
 var toggle_constants = require('./components/toggle/toggle_constants.js');
 var toggle = require('./components/toggle/toggle.js');
 var toggle_button$1 = require('./components/toggle/toggle_button.js');
@@ -168,29 +168,6 @@ Object.defineProperty(exports, 'HSelect', {
 		return select.HSelect;
 	}
 });
-Object.defineProperty(exports, 'HFile', {
-	enumerable: true,
-	get: function () {
-		return file.HFile;
-	}
-});
-exports.INPUT_CONTROL_CSS_CLASSES = input_constants.INPUT_CONTROL_CSS_CLASSES;
-exports.INPUT_CONTROL_EVENTS = input_constants.INPUT_CONTROL_EVENTS;
-exports.INPUT_CONTROL_SIZES = input_constants.INPUT_CONTROL_SIZES;
-exports.INPUT_CONTROL_TYPES = input_constants.INPUT_CONTROL_TYPES;
-exports.INPUT_PROPS_TO_SYNC = input_constants.INPUT_PROPS_TO_SYNC;
-Object.defineProperty(exports, 'HFilePicker', {
-	enumerable: true,
-	get: function () {
-		return file_picker.HFilePicker;
-	}
-});
-Object.defineProperty(exports, 'HFilePickerLabel', {
-	enumerable: true,
-	get: function () {
-		return file_picker_label.HFilePickerLabel;
-	}
-});
 Object.defineProperty(exports, 'HModal', {
 	enumerable: true,
 	get: function () {
@@ -267,6 +244,11 @@ Object.defineProperty(exports, 'HControlAdditionalContent', {
 		return control_additional_content.HControlAdditionalContent;
 	}
 });
+exports.INPUT_CONTROL_CSS_CLASSES = input_constants.INPUT_CONTROL_CSS_CLASSES;
+exports.INPUT_CONTROL_EVENTS = input_constants.INPUT_CONTROL_EVENTS;
+exports.INPUT_CONTROL_SIZES = input_constants.INPUT_CONTROL_SIZES;
+exports.INPUT_CONTROL_TYPES = input_constants.INPUT_CONTROL_TYPES;
+exports.INPUT_PROPS_TO_SYNC = input_constants.INPUT_PROPS_TO_SYNC;
 Object.defineProperty(exports, 'HInput', {
 	enumerable: true,
 	get: function () {
@@ -510,6 +492,24 @@ Object.defineProperty(exports, 'HTagRemoveButton', {
 		return tag_remove_button.HTagRemoveButton;
 	}
 });
+Object.defineProperty(exports, 'HStepperActionButton', {
+	enumerable: true,
+	get: function () {
+		return stepper_action_button.HStepperActionButton;
+	}
+});
+Object.defineProperty(exports, 'HInputStepper', {
+	enumerable: true,
+	get: function () {
+		return input_stepper.HInputStepper;
+	}
+});
+Object.defineProperty(exports, 'HDisplayInput', {
+	enumerable: true,
+	get: function () {
+		return display_input.HDisplayInput;
+	}
+});
 exports.TOGGLE_ACTIONS = toggle_constants.TOGGLE_ACTIONS;
 exports.TOGGLE_CONTEXT_NAME = toggle_constants.TOGGLE_CONTEXT_NAME;
 exports.TOGGLE_EVENT_NAME = toggle_constants.TOGGLE_EVENT_NAME;

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

@@ -14,7 +14,6 @@ export declare const INPUT_CONTROL_TYPES: {
     readonly email: "email";
     readonly tel: "tel";
     readonly password: "password";
-    readonly file: "file";
 };
 export declare const INPUT_CONTROL_CSS_CLASSES: {
     readonly input: "input";

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

@@ -14,8 +14,7 @@ const INPUT_CONTROL_TYPES = {
     hidden: 'hidden',
     email: 'email',
     tel: 'tel',
-    password: 'password',
-    file: 'file'
+    password: 'password'
 };
 const INPUT_CONTROL_CSS_CLASSES = {
     input: baseInputControlClass,

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

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

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

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

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

@@ -0,0 +1,58 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import { DISPLAY_INPUT_EVENT_NAMES, INPUT_STEPPER_CLASS_NAMES } from './input_stepper_constants.js';
+
+let HDisplayInput = class HDisplayInput extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.controlId = 1;
+        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="text"
+            ${ref(this.inputRef)}
+            .value="${this.value}"
+            @input=${this._testDispatchValueChanged}
+            @click=${(event) => this._setInputBehavior(event)}
+        />`;
+    }
+};
+__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", Number)
+], 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/{file_picker/file_picker_label.js.map → input_stepper/display_input.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

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

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

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

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

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

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

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

package/build/esm/packages/phoenix/src/components/form/{file_picker/file/file_model.js.map → 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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

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

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

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

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

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