@everymatrix/general-input 1.65.3 → 1.66.1
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 +41 -18
- package/dist/cjs/general-input.cjs.entry.js +258 -258
- package/dist/cjs/toggle-checkbox-input.cjs.entry.js +2 -2
- package/dist/collection/components/select-input/select-input.css +3 -4
- package/dist/collection/components/select-input/select-input.js +30 -9
- package/dist/collection/components/tel-input/tel-input.js +2 -2
- package/dist/collection/components/text-input/text-input.css +0 -1
- package/dist/collection/components/text-input/text-input.js +7 -5
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +2 -2
- package/dist/esm/checkbox-group-input_10.entry.js +41 -18
- package/dist/esm/general-input.entry.js +258 -258
- package/dist/esm/toggle-checkbox-input.entry.js +2 -2
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-eab6dd39.entry.js → p-8174f03d.entry.js} +1 -1
- package/dist/general-input/{p-e6ce8179.entry.js → p-a0e75840.entry.js} +1 -1
- package/dist/general-input/{p-d60ab9f7.entry.js → p-b78847ce.entry.js} +217 -217
- package/dist/types/components/select-input/select-input.d.ts +3 -1
- package/dist/types/utils/types.d.ts +19 -0
- package/package.json +1 -1
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/storybook/main.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/storybook/preview.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -6090,7 +6090,7 @@ const RadioInput = class {
|
|
|
6090
6090
|
};
|
|
6091
6091
|
RadioInput.style = RadioInputStyle0;
|
|
6092
6092
|
|
|
6093
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
6093
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}";
|
|
6094
6094
|
const SelectInputStyle0 = selectInputCss;
|
|
6095
6095
|
|
|
6096
6096
|
const SelectInput = class {
|
|
@@ -6099,7 +6099,7 @@ const SelectInput = class {
|
|
|
6099
6099
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
6100
6100
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
6101
6101
|
this.touched = false;
|
|
6102
|
-
this.
|
|
6102
|
+
this.handleComboChange = (event) => {
|
|
6103
6103
|
this.touched = true;
|
|
6104
6104
|
const selectedValue = event.target.value;
|
|
6105
6105
|
// Find the original option based on case-insensitive comparison
|
|
@@ -6115,12 +6115,23 @@ const SelectInput = class {
|
|
|
6115
6115
|
this.emitValueHandler(true);
|
|
6116
6116
|
};
|
|
6117
6117
|
this.handleBlur = (event) => {
|
|
6118
|
-
|
|
6118
|
+
const field = event.currentTarget;
|
|
6119
|
+
if (field.opened)
|
|
6120
|
+
return;
|
|
6119
6121
|
this.touched = true;
|
|
6122
|
+
this.value = field.value;
|
|
6120
6123
|
this.isValid = this.setValidity();
|
|
6121
6124
|
this.errorMessage = this.setErrorMessage();
|
|
6122
6125
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6123
6126
|
};
|
|
6127
|
+
this.handleSelectChange = (event) => {
|
|
6128
|
+
this.touched = true;
|
|
6129
|
+
this.value = event.target.value;
|
|
6130
|
+
this.isValid = this.setValidity();
|
|
6131
|
+
this.errorMessage = this.setErrorMessage();
|
|
6132
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6133
|
+
this.emitValueHandler(true);
|
|
6134
|
+
};
|
|
6124
6135
|
this.setClientStyling = () => {
|
|
6125
6136
|
let sheet = document.createElement('style');
|
|
6126
6137
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -6165,29 +6176,32 @@ const SelectInput = class {
|
|
|
6165
6176
|
this.sendInputValue.emit(inputValueEvent);
|
|
6166
6177
|
}
|
|
6167
6178
|
handleClickOutside(event) {
|
|
6168
|
-
//Check for empty field when closing the dropdown
|
|
6169
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
6170
|
-
this.errorMessage = this.setErrorMessage();
|
|
6171
6179
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
6172
6180
|
return;
|
|
6173
6181
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6174
6182
|
this.showTooltip = false;
|
|
6175
6183
|
}
|
|
6176
6184
|
connectedCallback() {
|
|
6185
|
+
var _a;
|
|
6177
6186
|
this.displayedOptions = this.options.map(option => ({
|
|
6178
6187
|
label: option.label,
|
|
6179
6188
|
value: option.value
|
|
6180
6189
|
}));
|
|
6190
|
+
// Use the searchable select if there are more then 6 values
|
|
6191
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
6181
6192
|
}
|
|
6182
6193
|
componentWillLoad() {
|
|
6183
6194
|
if (this.action && !this.options.length) {
|
|
6184
6195
|
if (this.action.split(" ")[0] == 'GET') {
|
|
6185
6196
|
const endpoint = this.action.split(" ")[1];
|
|
6186
6197
|
return this.getOptions(endpoint).then((options) => {
|
|
6198
|
+
var _a;
|
|
6187
6199
|
const firstKey = Object.keys(options)[0];
|
|
6188
6200
|
this.displayedOptions = options[firstKey].map(option => {
|
|
6189
6201
|
return { label: option.Name, value: option.Alpha2Code };
|
|
6190
6202
|
});
|
|
6203
|
+
// Use the searchable select if there are more then 6 values
|
|
6204
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
6191
6205
|
});
|
|
6192
6206
|
}
|
|
6193
6207
|
}
|
|
@@ -6225,10 +6239,14 @@ const SelectInput = class {
|
|
|
6225
6239
|
});
|
|
6226
6240
|
}
|
|
6227
6241
|
setValidity() {
|
|
6228
|
-
|
|
6242
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
6243
|
+
return this.vaadinCombo.validate();
|
|
6244
|
+
}
|
|
6245
|
+
return false;
|
|
6229
6246
|
}
|
|
6230
6247
|
setErrorMessage() {
|
|
6231
|
-
|
|
6248
|
+
var _a, _b, _c;
|
|
6249
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
6232
6250
|
return locale_utils.translate('requiredError', this.language);
|
|
6233
6251
|
}
|
|
6234
6252
|
}
|
|
@@ -6239,12 +6257,15 @@ const SelectInput = class {
|
|
|
6239
6257
|
return null;
|
|
6240
6258
|
}
|
|
6241
6259
|
render() {
|
|
6260
|
+
var _a, _b;
|
|
6242
6261
|
let invalidClass = '';
|
|
6243
6262
|
if (this.touched) {
|
|
6244
6263
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6245
6264
|
}
|
|
6246
|
-
return index.h("div", { key: '
|
|
6247
|
-
index.h("img", { key: '
|
|
6265
|
+
return index.h("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, index.h("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
6266
|
+
index.h("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', class: 'select__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
|
|
6267
|
+
:
|
|
6268
|
+
index.h("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, onBlur: this.handleBlur }), index.h("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
6248
6269
|
}
|
|
6249
6270
|
static get watchers() { return {
|
|
6250
6271
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6422,8 +6443,8 @@ const TelInput = class {
|
|
|
6422
6443
|
if (this.touched) {
|
|
6423
6444
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6424
6445
|
}
|
|
6425
|
-
return index.h("div", { key: '
|
|
6426
|
-
index.h("img", { key: '
|
|
6446
|
+
return index.h("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
6447
|
+
index.h("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', 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 })), index.h("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
6427
6448
|
}
|
|
6428
6449
|
static get watchers() { return {
|
|
6429
6450
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6433,7 +6454,7 @@ const TelInput = class {
|
|
|
6433
6454
|
};
|
|
6434
6455
|
TelInput.style = TelInputStyle0;
|
|
6435
6456
|
|
|
6436
|
-
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px
|
|
6457
|
+
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emw--color-black, #000000)}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__input::placeholder{color:var(--emw--color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
|
|
6437
6458
|
const TextInputStyle0 = textInputCss;
|
|
6438
6459
|
|
|
6439
6460
|
const TextInput = class {
|
|
@@ -6563,13 +6584,15 @@ const TextInput = class {
|
|
|
6563
6584
|
this.isValid = this.setValidity();
|
|
6564
6585
|
}
|
|
6565
6586
|
setValidity() {
|
|
6566
|
-
var _a;
|
|
6567
6587
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
6568
6588
|
return false;
|
|
6569
6589
|
}
|
|
6570
|
-
|
|
6571
|
-
return
|
|
6590
|
+
if (!this.inputReference) {
|
|
6591
|
+
return false;
|
|
6572
6592
|
}
|
|
6593
|
+
const inputIsValid = this.inputReference.validity.valid;
|
|
6594
|
+
const inputMatchValidation = !this.inputReference.value || this.inputReference.value.match(this.validationPattern) !== null;
|
|
6595
|
+
return inputIsValid && inputMatchValidation;
|
|
6573
6596
|
}
|
|
6574
6597
|
setPattern() {
|
|
6575
6598
|
var _a, _b;
|
|
@@ -6607,8 +6630,8 @@ const TextInput = class {
|
|
|
6607
6630
|
if (this.touched) {
|
|
6608
6631
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6609
6632
|
}
|
|
6610
|
-
return index.h("div", { key: '
|
|
6611
|
-
index.h("img", { key: '
|
|
6633
|
+
return index.h("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, index.h("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
6634
|
+
index.h("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
6612
6635
|
}
|
|
6613
6636
|
static get watchers() { return {
|
|
6614
6637
|
"clientStyling": ["handleStylingChange"],
|