@shoper/phoenix_design_system 1.2.12 → 1.2.13-10

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 (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_input.js +26 -6
  2. package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_input.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/input_stepper/input_stepper.js +24 -9
  4. package/build/cjs/packages/phoenix/src/components/form/input_stepper/input_stepper.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.d.ts +4 -1
  6. package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js +26 -6
  7. package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper.d.ts +1 -0
  9. package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper.js +24 -9
  10. package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_input.js CHANGED
@@ -13,14 +13,18 @@ var input_stepper_constants = require('./input_stepper_constants.js');
13
13
  exports.HDisplayInput = class HDisplayInput extends phoenix_light_lit_element.PhoenixLightLitElement {
14
14
  constructor() {
15
15
  super(...arguments);
16
+ this.allowFractions = false;
16
17
  this.controlId = '';
18
+ this.step = 1;
17
19
  this.inputRef = ref_js.createRef();
18
- this._testDispatchValueChanged = () => {
19
- var _a;
20
+ this._dispatchValueChanged = () => {
21
+ if (!this.inputRef.value)
22
+ return;
23
+ const inputValue = this.inputValueValidation(this.inputRef.value.value);
20
24
  const valueChangeEvent = new CustomEvent(input_stepper_constants.DISPLAY_INPUT_EVENT_NAMES.change, {
21
25
  bubbles: true,
22
26
  detail: {
23
- value: (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.value
27
+ value: inputValue
24
28
  }
25
29
  });
26
30
  this.dispatchEvent(valueChangeEvent);
@@ -34,14 +38,22 @@ exports.HDisplayInput = class HDisplayInput extends phoenix_light_lit_element.Ph
34
38
  input.focus();
35
39
  input.select();
36
40
  }
41
+ inputValueValidation(value) {
42
+ if (!this.allowFractions)
43
+ return value.replace('.', '');
44
+ const pattern = /^\d+\.?\d*$/;
45
+ if (!pattern.test(value))
46
+ value = '0';
47
+ return value;
48
+ }
37
49
  render() {
38
50
  return lit.html `<input
39
51
  id="${this.controlId}"
40
52
  class="${input_stepper_constants.INPUT_STEPPER_CLASS_NAMES.displayInput}"
41
- type="number"
53
+ type="${this.allowFractions ? 'string' : 'number'}"
42
54
  ${ref_js.ref(this.inputRef)}
43
55
  .value="${this.value}"
44
- @input=${this._testDispatchValueChanged}
56
+ @input=${this._dispatchValueChanged}
45
57
  @click=${this._setInputBehavior}
46
58
  />`;
47
59
  }
@@ -51,9 +63,17 @@ tslib_es6.__decorate([
51
63
  tslib_es6.__metadata("design:type", String)
52
64
  ], exports.HDisplayInput.prototype, "value", void 0);
53
65
  tslib_es6.__decorate([
54
- decorators.property({ type: Number, attribute: 'control-id', reflect: true }),
66
+ decorators.property({ type: Boolean, attribute: 'allow-fractions', reflect: true }),
67
+ tslib_es6.__metadata("design:type", Boolean)
68
+ ], exports.HDisplayInput.prototype, "allowFractions", void 0);
69
+ tslib_es6.__decorate([
70
+ decorators.property({ type: String, attribute: 'control-id', reflect: true }),
55
71
  tslib_es6.__metadata("design:type", String)
56
72
  ], exports.HDisplayInput.prototype, "controlId", void 0);
73
+ tslib_es6.__decorate([
74
+ decorators.property({ type: Number, attribute: 'step', reflect: true }),
75
+ tslib_es6.__metadata("design:type", Number)
76
+ ], exports.HDisplayInput.prototype, "step", void 0);
57
77
  exports.HDisplayInput = tslib_es6.__decorate([
58
78
  phoenix_custom_element.phoenixCustomElement('h-display-input')
59
79
  ], exports.HDisplayInput);
package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_input.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/input_stepper/input_stepper.js CHANGED
@@ -22,10 +22,10 @@ exports.HInputStepper = class HInputStepper extends phoenix_light_lit_element.Ph
22
22
  this._handleDisplayChange = (event) => {
23
23
  if (event.detail.value > this.max)
24
24
  return;
25
- this._value = Number(event.detail.value);
25
+ this._value = event.detail.value;
26
26
  };
27
27
  this._handleUpdateValue = () => {
28
- this._value = Number(this._$inputElement.value) || 0;
28
+ this._value = this._$inputElement.value || '0';
29
29
  };
30
30
  }
31
31
  connectedCallback() {
@@ -35,7 +35,10 @@ exports.HInputStepper = class HInputStepper extends phoenix_light_lit_element.Ph
35
35
  throw new Error();
36
36
  }
37
37
  this._$inputElement = $element;
38
- this._value = Number($element.value) || 0;
38
+ this._value = $element.value || '0';
39
+ if (this.min > 0) {
40
+ this._value = String(this.min);
41
+ }
39
42
  this._setupEvents();
40
43
  }
41
44
  disconnectedCallback() {
@@ -55,24 +58,36 @@ exports.HInputStepper = class HInputStepper extends phoenix_light_lit_element.Ph
55
58
  this._$inputElement.addEventListener('input', this._handleUpdateValue);
56
59
  }
57
60
  _increment() {
58
- if (this._value >= this.max)
61
+ let value = Number(this._value);
62
+ if (value >= this.max)
59
63
  return;
60
- this._value += this.step;
64
+ value += this.step;
65
+ this._value = String(this.roundToStepSize(this.step, value));
61
66
  }
62
67
  _decrement() {
63
- if (this._value <= this.min)
68
+ let value = Number(this._value);
69
+ if (value <= this.min)
64
70
  return;
65
- this._value -= this.step;
71
+ value -= this.step;
72
+ this._value = String(this.roundToStepSize(this.step, value));
66
73
  }
67
74
  _dispatchValueChanged() {
68
75
  const valueChangeEvent = new CustomEvent(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.valueChanged, {
69
76
  bubbles: true,
70
77
  detail: {
71
- value: this._value
78
+ value: Number(this._value)
72
79
  }
73
80
  });
74
81
  this.dispatchEvent(valueChangeEvent);
75
82
  }
83
+ roundToStepSize(step, number) {
84
+ let zerosCount = 0;
85
+ const stepInString = String(step);
86
+ if (stepInString.includes('.'))
87
+ zerosCount = stepInString.split('.')[1].length;
88
+ const multiplier = Math.pow(10, zerosCount);
89
+ return Math.round(Number(number) * multiplier) / multiplier;
90
+ }
76
91
  };
77
92
  tslib_es6.__decorate([
78
93
  decorators.property({ type: Number, attribute: 'step', reflect: true }),
@@ -88,7 +103,7 @@ tslib_es6.__decorate([
88
103
  ], exports.HInputStepper.prototype, "max", void 0);
89
104
  tslib_es6.__decorate([
90
105
  decorators.state(),
91
- tslib_es6.__metadata("design:type", Number)
106
+ tslib_es6.__metadata("design:type", String)
92
107
  ], exports.HInputStepper.prototype, "_value", void 0);
93
108
  exports.HInputStepper = tslib_es6.__decorate([
94
109
  phoenix_custom_element.phoenixCustomElement('h-input-stepper')
package/build/cjs/packages/phoenix/src/components/form/input_stepper/input_stepper.js.map CHANGED
@@ -1 +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;"}
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;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 CHANGED
@@ -2,9 +2,12 @@ import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/
2
2
  import { Ref } from 'lit/directives/ref.js';
3
3
  export declare class HDisplayInput extends PhoenixLightLitElement {
4
4
  value: string;
5
+ allowFractions: boolean;
5
6
  controlId: string;
7
+ step: number;
6
8
  inputRef: Ref<HTMLInputElement>;
7
9
  private _setInputBehavior;
8
- private _testDispatchValueChanged;
10
+ private _dispatchValueChanged;
11
+ private inputValueValidation;
9
12
  render(): import("lit-html").TemplateResult<1>;
10
13
  }
package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js CHANGED
@@ -9,14 +9,18 @@ import { DISPLAY_INPUT_EVENT_NAMES, INPUT_STEPPER_CLASS_NAMES } from './input_st
9
9
  let HDisplayInput = class HDisplayInput extends PhoenixLightLitElement {
10
10
  constructor() {
11
11
  super(...arguments);
12
+ this.allowFractions = false;
12
13
  this.controlId = '';
14
+ this.step = 1;
13
15
  this.inputRef = createRef();
14
- this._testDispatchValueChanged = () => {
15
- var _a;
16
+ this._dispatchValueChanged = () => {
17
+ if (!this.inputRef.value)
18
+ return;
19
+ const inputValue = this.inputValueValidation(this.inputRef.value.value);
16
20
  const valueChangeEvent = new CustomEvent(DISPLAY_INPUT_EVENT_NAMES.change, {
17
21
  bubbles: true,
18
22
  detail: {
19
- value: (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.value
23
+ value: inputValue
20
24
  }
21
25
  });
22
26
  this.dispatchEvent(valueChangeEvent);
@@ -30,14 +34,22 @@ let HDisplayInput = class HDisplayInput extends PhoenixLightLitElement {
30
34
  input.focus();
31
35
  input.select();
32
36
  }
37
+ inputValueValidation(value) {
38
+ if (!this.allowFractions)
39
+ return value.replace('.', '');
40
+ const pattern = /^\d+\.?\d*$/;
41
+ if (!pattern.test(value))
42
+ value = '0';
43
+ return value;
44
+ }
33
45
  render() {
34
46
  return html `<input
35
47
  id="${this.controlId}"
36
48
  class="${INPUT_STEPPER_CLASS_NAMES.displayInput}"
37
- type="number"
49
+ type="${this.allowFractions ? 'string' : 'number'}"
38
50
  ${ref(this.inputRef)}
39
51
  .value="${this.value}"
40
- @input=${this._testDispatchValueChanged}
52
+ @input=${this._dispatchValueChanged}
41
53
  @click=${this._setInputBehavior}
42
54
  />`;
43
55
  }
@@ -47,9 +59,17 @@ __decorate([
47
59
  __metadata("design:type", String)
48
60
  ], HDisplayInput.prototype, "value", void 0);
49
61
  __decorate([
50
- property({ type: Number, attribute: 'control-id', reflect: true }),
62
+ property({ type: Boolean, attribute: 'allow-fractions', reflect: true }),
63
+ __metadata("design:type", Boolean)
64
+ ], HDisplayInput.prototype, "allowFractions", void 0);
65
+ __decorate([
66
+ property({ type: String, attribute: 'control-id', reflect: true }),
51
67
  __metadata("design:type", String)
52
68
  ], HDisplayInput.prototype, "controlId", void 0);
69
+ __decorate([
70
+ property({ type: Number, attribute: 'step', reflect: true }),
71
+ __metadata("design:type", Number)
72
+ ], HDisplayInput.prototype, "step", void 0);
53
73
  HDisplayInput = __decorate([
54
74
  phoenixCustomElement('h-display-input')
55
75
  ], HDisplayInput);
package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper.d.ts CHANGED
@@ -16,4 +16,5 @@ export declare class HInputStepper extends PhoenixLightLitElement {
16
16
  private _increment;
17
17
  private _decrement;
18
18
  private _dispatchValueChanged;
19
+ private roundToStepSize;
19
20
  }
package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper.js CHANGED
@@ -18,10 +18,10 @@ let HInputStepper = class HInputStepper extends PhoenixLightLitElement {
18
18
  this._handleDisplayChange = (event) => {
19
19
  if (event.detail.value > this.max)
20
20
  return;
21
- this._value = Number(event.detail.value);
21
+ this._value = event.detail.value;
22
22
  };
23
23
  this._handleUpdateValue = () => {
24
- this._value = Number(this._$inputElement.value) || 0;
24
+ this._value = this._$inputElement.value || '0';
25
25
  };
26
26
  }
27
27
  connectedCallback() {
@@ -31,7 +31,10 @@ let HInputStepper = class HInputStepper extends PhoenixLightLitElement {
31
31
  throw new Error();
32
32
  }
33
33
  this._$inputElement = $element;
34
- this._value = Number($element.value) || 0;
34
+ this._value = $element.value || '0';
35
+ if (this.min > 0) {
36
+ this._value = String(this.min);
37
+ }
35
38
  this._setupEvents();
36
39
  }
37
40
  disconnectedCallback() {
@@ -51,24 +54,36 @@ let HInputStepper = class HInputStepper extends PhoenixLightLitElement {
51
54
  this._$inputElement.addEventListener('input', this._handleUpdateValue);
52
55
  }
53
56
  _increment() {
54
- if (this._value >= this.max)
57
+ let value = Number(this._value);
58
+ if (value >= this.max)
55
59
  return;
56
- this._value += this.step;
60
+ value += this.step;
61
+ this._value = String(this.roundToStepSize(this.step, value));
57
62
  }
58
63
  _decrement() {
59
- if (this._value <= this.min)
64
+ let value = Number(this._value);
65
+ if (value <= this.min)
60
66
  return;
61
- this._value -= this.step;
67
+ value -= this.step;
68
+ this._value = String(this.roundToStepSize(this.step, value));
62
69
  }
63
70
  _dispatchValueChanged() {
64
71
  const valueChangeEvent = new CustomEvent(INPUT_STEPPER_EVENT_NAMES.valueChanged, {
65
72
  bubbles: true,
66
73
  detail: {
67
- value: this._value
74
+ value: Number(this._value)
68
75
  }
69
76
  });
70
77
  this.dispatchEvent(valueChangeEvent);
71
78
  }
79
+ roundToStepSize(step, number) {
80
+ let zerosCount = 0;
81
+ const stepInString = String(step);
82
+ if (stepInString.includes('.'))
83
+ zerosCount = stepInString.split('.')[1].length;
84
+ const multiplier = Math.pow(10, zerosCount);
85
+ return Math.round(Number(number) * multiplier) / multiplier;
86
+ }
72
87
  };
73
88
  __decorate([
74
89
  property({ type: Number, attribute: 'step', reflect: true }),
@@ -84,7 +99,7 @@ __decorate([
84
99
  ], HInputStepper.prototype, "max", void 0);
85
100
  __decorate([
86
101
  state(),
87
- __metadata("design:type", Number)
102
+ __metadata("design:type", String)
88
103
  ], HInputStepper.prototype, "_value", void 0);
89
104
  HInputStepper = __decorate([
90
105
  phoenixCustomElement('h-input-stepper')
package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper.js.map CHANGED
@@ -1 +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;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.2.12",
5
+ "version": "1.2.13-10",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",