npm - @shoper/phoenix_design_system - Versions diffs - 1.2.6 → 1.2.8 - Mend

@shoper/phoenix_design_system 1.2.6 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

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

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

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

@@ -0,0 +1 @@

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

@@ -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 ADDED Viewed

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

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

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

package/build/cjs/packages/phoenix/src/index.js.map CHANGED Viewed

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

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

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

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

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

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

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

@@ -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 ADDED Viewed

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

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

@@ -0,0 +1 @@

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

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

@@ -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 ADDED Viewed

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

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

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

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

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

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

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

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

package/build/esm/packages/phoenix/src/index.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

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