@everymatrix/general-input 1.59.1 → 1.59.3
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.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +5452 -37168
- package/dist/cjs/general-input.cjs.entry.js +4548 -1
- package/dist/collection/components/checkbox-group-input/checkbox-group-input.js +2 -4
- package/dist/collection/components/date-input/date-input.js +2 -3
- package/dist/collection/components/general-input/general-input.js +2 -1
- package/dist/collection/components/password-input/password-input.css +14 -1
- package/dist/collection/components/password-input/password-input.js +2 -3
- package/dist/collection/components/select-input/select-input.js +2 -3
- package/dist/collection/components/tel-input/tel-input.js +2 -3
- package/dist/esm/checkbox-group-input_10.entry.js +5451 -37167
- package/dist/esm/general-input.entry.js +4548 -1
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/p-35d1eebe.entry.js +1 -0
- package/dist/general-input/p-b3723638.entry.js +4510 -0
- package/dist/types/components/checkbox-group-input/checkbox-group-input.d.ts +0 -2
- package/dist/types/components/date-input/date-input.d.ts +1 -2
- package/dist/types/components/general-input/general-input.d.ts +1 -0
- package/dist/types/components/password-input/password-input.d.ts +0 -1
- package/dist/types/components/select-input/select-input.d.ts +0 -1
- package/dist/types/components/tel-input/tel-input.d.ts +0 -1
- package/package.json +1 -1
- package/dist/general-input/p-3ed4412a.entry.js +0 -4463
- package/dist/general-input/p-dc77c96f.entry.js +0 -1
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
-
import "@vaadin/checkbox";
|
|
5
|
-
import "@vaadin/checkbox-group";
|
|
6
4
|
export class CheckboxGroupInput {
|
|
7
5
|
constructor() {
|
|
8
6
|
this.value = null;
|
|
@@ -105,8 +103,8 @@ export class CheckboxGroupInput {
|
|
|
105
103
|
return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
106
104
|
}
|
|
107
105
|
render() {
|
|
108
|
-
return h("div", { key: '
|
|
109
|
-
h("img", { key: '
|
|
106
|
+
return h("div", { key: '4b966adce4d35ccfc4141acea9c8f26a46590b5d', class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '82f139c6bacc6b29ffd47005546b47c33bb135eb', class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { key: 'bf99c267f52fa57bd0af94d2465ad18b11079be5', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
|
|
107
|
+
h("img", { key: '84ec417513f4d22534c7106bbef7be0797e42214', class: 'checkboxgroup__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { key: '526a1dc20a7c7d0322f959402ba359f0b6ef52e0', class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { key: 'ac70eaa0923af84472b35b90f4127a173166a7ce', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
|
|
110
108
|
this.selectedValues = event.detail.value;
|
|
111
109
|
} }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
112
110
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/date-picker";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
import dateFnsFormat from "date-fns/format";
|
|
6
5
|
import dateFnsParse from "date-fns/parse";
|
|
@@ -144,8 +143,8 @@ export class DateInput {
|
|
|
144
143
|
if (this.touched) {
|
|
145
144
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
146
145
|
}
|
|
147
|
-
return h("div", { key: '
|
|
148
|
-
h("img", { key: '
|
|
146
|
+
return h("div", { key: 'e20d8db3b90253a7719c4b25a33a201a72ec2cc9', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: '08847fd59e35a6690bf5e6b0882745c8f904388b', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: 'aaf1d2d8c53c993fd13e4701e5dd7e0ad9fcf442', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { key: '34f1dcfba1bbe0939d4b1de450cb9d19f99266dd', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
147
|
+
h("img", { key: '3de20db5b37aa321ab0ef71b7a758ee615613053', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
149
148
|
}
|
|
150
149
|
static get is() { return "date-input"; }
|
|
151
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { getTranslations } from "../../utils/locale.utils";
|
|
3
|
+
import "../../../../../../../libs/vaadin-facade/index";
|
|
3
4
|
export class GeneralInput {
|
|
4
5
|
constructor() {
|
|
5
6
|
this.handleClick = (event) => {
|
|
@@ -61,7 +62,7 @@ export class GeneralInput {
|
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
65
|
+
return (h(Host, { key: 'e89747da2e458906e8f634c285044e95d5e92f73', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
|
|
65
66
|
}
|
|
66
67
|
static get is() { return "general-input"; }
|
|
67
68
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
gap: 5px;
|
|
19
|
+
container-type: inline-size;
|
|
19
20
|
}
|
|
20
21
|
.password__wrapper--autofilled {
|
|
21
22
|
pointer-events: none;
|
|
@@ -94,6 +95,7 @@
|
|
|
94
95
|
color: var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
95
96
|
}
|
|
96
97
|
.password__complexity {
|
|
98
|
+
height: 150px;
|
|
97
99
|
position: relative;
|
|
98
100
|
padding: 10px;
|
|
99
101
|
display: flex;
|
|
@@ -106,8 +108,8 @@
|
|
|
106
108
|
-webkit-border-radius: 5px;
|
|
107
109
|
-moz-border-radius: 5px;
|
|
108
110
|
border-radius: 5px;
|
|
109
|
-
height: 150px;
|
|
110
111
|
border: 1px solid #B0B0B0;
|
|
112
|
+
box-sizing: content-box;
|
|
111
113
|
/* works only in this order */
|
|
112
114
|
}
|
|
113
115
|
.password__complexity meter {
|
|
@@ -158,6 +160,17 @@
|
|
|
158
160
|
margin-top: -25px;
|
|
159
161
|
background-color: var(--emw--color-white, #FFFFFF);
|
|
160
162
|
}
|
|
163
|
+
@container (max-width: 300px) {
|
|
164
|
+
.password__complexity {
|
|
165
|
+
height: 190px;
|
|
166
|
+
}
|
|
167
|
+
.password__complexity:after {
|
|
168
|
+
width: 14px;
|
|
169
|
+
height: 14px;
|
|
170
|
+
bottom: 96%;
|
|
171
|
+
left: 57%;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
161
174
|
.password__tooltip-icon {
|
|
162
175
|
width: 16px;
|
|
163
176
|
height: auto;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/password-field";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
export class PasswordInput {
|
|
6
5
|
constructor() {
|
|
@@ -223,8 +222,8 @@ export class PasswordInput {
|
|
|
223
222
|
if (this.touched) {
|
|
224
223
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
225
224
|
}
|
|
226
|
-
return h("div", { key: '
|
|
227
|
-
h("img", { key: '
|
|
225
|
+
return h("div", { key: 'be707a0330de2fa306f4326a5b374d613e6633f5', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '47a7b4a114f9ccf3c8e759f2c8e933b492053a18', class: 'password__wrapper--flex' }, h("label", { key: 'b51e602d00798e381eea83258812e70a6fe816a0', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '585a9dd0a701429b18d767dd19392ad2373e8ce3', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
226
|
+
h("img", { key: '637040e9773662b80b36b2d787511778ea12daf8', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '1626a68548b795aeb709e5a3a7950f7a5017c787', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h("small", { key: '791e90e36bf2d67b2a2e68649dcf3052851f2769', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
228
227
|
}
|
|
229
228
|
static get is() { return "password-input"; }
|
|
230
229
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/combo-box";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
export class SelectInput {
|
|
6
5
|
constructor() {
|
|
@@ -144,8 +143,8 @@ export class SelectInput {
|
|
|
144
143
|
if (this.touched) {
|
|
145
144
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
146
145
|
}
|
|
147
|
-
return h("div", { key: '
|
|
148
|
-
h("img", { key: '
|
|
146
|
+
return h("div", { key: '46061c64a7cb7dad5b2ca1cd38e27b2ea12e88ce', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'cebc0fad817eff49669c4df47d47a4d97c5db317', class: 'select__wrapper--flex' }, h("label", { key: 'a5360d9342ca9c446bdff6b84a717aa47fa71a4f', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '78d699e2a57122dd74f4d414211b586d19f030e7', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
147
|
+
h("img", { key: 'e6fb14604b078a0b0f284d9234262c76e4c581f8', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: '91c86ee20ee639ba0e4338ba5501621486c94fa4', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), h("small", { key: '18a6172cb9566f000d5f397d759eb95a06fbc7b4', class: 'select__error-message' }, this.errorMessage));
|
|
149
148
|
}
|
|
150
149
|
static get is() { return "select-input"; }
|
|
151
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/combo-box";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
export class TelInput {
|
|
6
5
|
constructor() {
|
|
@@ -162,8 +161,8 @@ export class TelInput {
|
|
|
162
161
|
if (this.touched) {
|
|
163
162
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
164
163
|
}
|
|
165
|
-
return h("div", { key: '
|
|
166
|
-
h("img", { key: '
|
|
164
|
+
return h("div", { key: 'a5804fccd849a4e8f2deb346479fa782113ee4d8', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '403490057cb5a5ae95b850ee7e1350d354668566', class: 'tel__wrapper--flex-label' }, h("label", { key: '64c14d728022fdf959c7710fa1c35c8e340be0cc', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '14be3f2d3fd1352f4b69fee63399b03b99dd3338', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
165
|
+
h("img", { key: 'b7e3f1d243877bc0c8911894bf4a624fc647050e', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '43e55c0e386b59b3c86d59ca5919f95c387a2049', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '9c7ba7049f325eeba05b6bfac98d10093a2342fc', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '24b4723063ce7724c2599979457986f315e7a687', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: 'd95f2dc869e4ba7ecfc7ff6b0122f5dad3c34f27', class: 'tel__error-message' }, this.errorMessage));
|
|
167
166
|
}
|
|
168
167
|
static get is() { return "tel-input"; }
|
|
169
168
|
static get encapsulation() { return "shadow"; }
|