@everymatrix/general-input 1.67.3 → 1.69.0
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 +38 -15
- package/dist/cjs/general-input.cjs.entry.js +258 -258
- package/dist/collection/components/date-input/date-input.css +1 -1
- package/dist/collection/components/date-input/date-input.js +13 -7
- package/dist/collection/components/select-input/select-input.css +6 -6
- package/dist/collection/components/select-input/select-input.js +23 -6
- package/dist/esm/checkbox-group-input_10.entry.js +38 -15
- package/dist/esm/general-input.entry.js +258 -258
- package/dist/general-input/checkbox-group-input_10.entry.js +1 -1
- package/dist/general-input/general-input.entry.js +217 -217
- package/dist/types/components/date-input/date-input.d.ts +0 -1
- package/package.json +1 -1
- /package/dist/types/Users/{sebastian.strulea/Documents/work → 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/{sebastian.strulea/Documents/work → 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/{sebastian.strulea/Documents/work → 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/{sebastian.strulea/Documents/work → 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/{sebastian.strulea/Documents/work → 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/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → 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/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -5306,7 +5306,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5306
5306
|
return date.getTime() < dateToCompare.getTime();
|
|
5307
5307
|
}
|
|
5308
5308
|
|
|
5309
|
-
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__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))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.date__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.date__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--registration-typography, var(--emw--color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:
|
|
5309
|
+
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__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))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.date__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.date__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--registration-typography, var(--emw--color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;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}.date__tooltip.visible{opacity:1}";
|
|
5310
5310
|
const DateInputStyle0 = dateInputCss;
|
|
5311
5311
|
|
|
5312
5312
|
const DateInput = class {
|
|
@@ -5324,11 +5324,6 @@ const DateInput = class {
|
|
|
5324
5324
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
5325
5325
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5326
5326
|
};
|
|
5327
|
-
this.handleBlur = () => {
|
|
5328
|
-
this.isValid = this.setValidity();
|
|
5329
|
-
this.errorMessage = this.setErrorMessage();
|
|
5330
|
-
this.touched = true;
|
|
5331
|
-
};
|
|
5332
5327
|
this.setClientStyling = () => {
|
|
5333
5328
|
let sheet = document.createElement('style');
|
|
5334
5329
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5400,6 +5395,17 @@ const DateInput = class {
|
|
|
5400
5395
|
if (calendarButton) {
|
|
5401
5396
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
5402
5397
|
}
|
|
5398
|
+
// Add listener for dropdown close
|
|
5399
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
5400
|
+
if (event.detail.value === true) {
|
|
5401
|
+
this.errorMessage = '';
|
|
5402
|
+
}
|
|
5403
|
+
else {
|
|
5404
|
+
this.isValid = this.setValidity();
|
|
5405
|
+
this.errorMessage = this.setErrorMessage();
|
|
5406
|
+
this.touched = true;
|
|
5407
|
+
}
|
|
5408
|
+
});
|
|
5403
5409
|
}
|
|
5404
5410
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
5405
5411
|
this.isValid = this.setValidity();
|
|
@@ -5451,8 +5457,8 @@ const DateInput = class {
|
|
|
5451
5457
|
if (this.touched) {
|
|
5452
5458
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5453
5459
|
}
|
|
5454
|
-
return index.h("div", { key: '
|
|
5455
|
-
index.h("img", { key: '
|
|
5460
|
+
return index.h("div", { key: '1c0ed976aca2d63d169982ac1d8487ce241b4c10', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'ce1bb7d51436a80828fc5a9d35446748b3fc7d2d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: '47ec4983e14a234e7f7a88606bfc11a7605c3e70', 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) }), index.h("small", { key: 'e5fd362ece5e04e731feac87bb6b73e567b576aa', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5461
|
+
index.h("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5456
5462
|
}
|
|
5457
5463
|
get element() { return index.getElement(this); }
|
|
5458
5464
|
static get watchers() { return {
|
|
@@ -6091,7 +6097,7 @@ const RadioInput = class {
|
|
|
6091
6097
|
};
|
|
6092
6098
|
RadioInput.style = RadioInputStyle0;
|
|
6093
6099
|
|
|
6094
|
-
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}
|
|
6100
|
+
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]:not(.text__input--invalid)::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.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}";
|
|
6095
6101
|
const SelectInputStyle0 = selectInputCss;
|
|
6096
6102
|
|
|
6097
6103
|
const SelectInput = class {
|
|
@@ -6225,6 +6231,22 @@ const SelectInput = class {
|
|
|
6225
6231
|
this.inputReference.value = this.value;
|
|
6226
6232
|
}
|
|
6227
6233
|
this.isValid = this.setValidity();
|
|
6234
|
+
// Add listener for dropdown close
|
|
6235
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
6236
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
6237
|
+
if (event.detail.value === true) {
|
|
6238
|
+
this.errorMessage = '';
|
|
6239
|
+
}
|
|
6240
|
+
else {
|
|
6241
|
+
const field = event.currentTarget;
|
|
6242
|
+
this.touched = true;
|
|
6243
|
+
this.value = field.value;
|
|
6244
|
+
this.isValid = this.setValidity();
|
|
6245
|
+
this.errorMessage = this.setErrorMessage();
|
|
6246
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6247
|
+
}
|
|
6248
|
+
});
|
|
6249
|
+
}
|
|
6228
6250
|
}
|
|
6229
6251
|
getOptions(endpoint) {
|
|
6230
6252
|
const url = new URL(endpoint);
|
|
@@ -6240,10 +6262,11 @@ const SelectInput = class {
|
|
|
6240
6262
|
});
|
|
6241
6263
|
}
|
|
6242
6264
|
setValidity() {
|
|
6243
|
-
|
|
6244
|
-
|
|
6265
|
+
var _a;
|
|
6266
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
6267
|
+
return !!this.value;
|
|
6245
6268
|
}
|
|
6246
|
-
return
|
|
6269
|
+
return true;
|
|
6247
6270
|
}
|
|
6248
6271
|
setErrorMessage() {
|
|
6249
6272
|
var _a, _b, _c;
|
|
@@ -6263,10 +6286,10 @@ const SelectInput = class {
|
|
|
6263
6286
|
if (this.touched) {
|
|
6264
6287
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6265
6288
|
}
|
|
6266
|
-
return index.h("div", { key: '
|
|
6267
|
-
index.h("img", { key: '
|
|
6289
|
+
return index.h("div", { key: '3afb8c4c104469a78ca982d3815aa4241364674a', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '447c4ad85d8a1b47e0485c0f1fecaea998790008', class: 'select__wrapper--flex' }, index.h("label", { key: 'f2e7923d0f0d260608ae61bd6d4a56929c57fdad', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '22b8e5868a411944ecd49397d17aa2f99aa5c660', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
6290
|
+
index.h("img", { key: 'dd1a0150c672ed991266dcce2808f8b6b6c0e954', 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 })
|
|
6268
6291
|
:
|
|
6269
|
-
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
|
|
6292
|
+
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 }), index.h("small", { key: '77ed680bd30fdc9193b502136387e828fd88e162', class: 'select__error-message' }, this.errorMessage));
|
|
6270
6293
|
}
|
|
6271
6294
|
static get watchers() { return {
|
|
6272
6295
|
"clientStyling": ["handleStylingChange"],
|