@everymatrix/general-input 1.87.21 → 1.87.23
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_14.cjs.entry.js +14 -5
- package/dist/collection/components/checkbox-input/checkbox-input.css +8 -1
- package/dist/collection/components/checkbox-input/checkbox-input.js +6 -2
- package/dist/collection/components/general-input/general-input.js +7 -2
- package/dist/esm/checkbox-group-input_14.entry.js +14 -5
- package/dist/general-input/checkbox-group-input_14.entry.js +2 -2
- package/package.json +1 -1
|
@@ -435,7 +435,7 @@ const CheckboxGroupInput = class {
|
|
|
435
435
|
};
|
|
436
436
|
CheckboxGroupInput.style = CheckboxGroupInputStyle0;
|
|
437
437
|
|
|
438
|
-
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input[indeterminate]::part(checkbox)::after,.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding:0px;vertical-align:baseline}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input::part(required-indicator)::after{
|
|
438
|
+
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input[indeterminate]::part(checkbox)::after,.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding:0px;vertical-align:baseline}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input::part(required-indicator)::after{display:none}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));box-shadow:none}.checkbox__label-text.mandatory::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}";
|
|
439
439
|
const CheckboxInputStyle0 = checkboxInputCss;
|
|
440
440
|
|
|
441
441
|
const CheckboxInput = class {
|
|
@@ -521,7 +521,11 @@ const CheckboxInput = class {
|
|
|
521
521
|
}
|
|
522
522
|
}
|
|
523
523
|
renderLabel() {
|
|
524
|
-
|
|
524
|
+
var _a;
|
|
525
|
+
return (index.h("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, index.h("div", { class: {
|
|
526
|
+
'checkbox__label-text': true,
|
|
527
|
+
'mandatory': (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory,
|
|
528
|
+
}, innerHTML: this.displayName })));
|
|
525
529
|
}
|
|
526
530
|
renderTooltip() {
|
|
527
531
|
if (this.showTooltip) {
|
|
@@ -530,7 +534,7 @@ const CheckboxInput = class {
|
|
|
530
534
|
return null;
|
|
531
535
|
}
|
|
532
536
|
render() {
|
|
533
|
-
return (index.h("div", { key: '
|
|
537
|
+
return (index.h("div", { key: '80ed581cec5bb009ea5ea009f11c6453fe24ef7b', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.h("vaadin-checkbox", { key: '42d793f607af77435f629218f9bdac7736522bc3', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (index.h("img", { key: 'ce3870810ede8f3905fd8c07c0892ab0d909bab5', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
534
538
|
}
|
|
535
539
|
static get watchers() { return {
|
|
536
540
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -13062,11 +13066,16 @@ const GeneralInput = class {
|
|
|
13062
13066
|
case 'twofa':
|
|
13063
13067
|
return index.h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "enable-south-african-mode": this.enableSouthAfricanMode, "pin-attempts-exceeded": this.pinAttemptsExceeded, "mb-source": this.mbSource });
|
|
13064
13068
|
default:
|
|
13065
|
-
|
|
13069
|
+
if (this.displayName && this.displayName.trim() !== '') {
|
|
13070
|
+
return index.h("div", { class: "general-non-input", innerHTML: this.displayName });
|
|
13071
|
+
}
|
|
13072
|
+
else {
|
|
13073
|
+
return null;
|
|
13074
|
+
}
|
|
13066
13075
|
}
|
|
13067
13076
|
}
|
|
13068
13077
|
render() {
|
|
13069
|
-
return (index.h(index.Host, { key: '
|
|
13078
|
+
return (index.h(index.Host, { key: '0474aad44033fe0c48473af7938e9ddb77b684e8', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
|
|
13070
13079
|
}
|
|
13071
13080
|
get host() { return index.getElement(this); }
|
|
13072
13081
|
static get watchers() { return {
|
|
@@ -70,9 +70,16 @@
|
|
|
70
70
|
box-shadow: 0 0px 0px 2px var(--emw--color-gray, #7a7a7a);
|
|
71
71
|
}
|
|
72
72
|
.checkbox__input::part(required-indicator)::after {
|
|
73
|
-
|
|
73
|
+
display: none;
|
|
74
74
|
}
|
|
75
75
|
.checkbox__input[indeterminate]::part(checkbox), .checkbox__input[checked]::part(checkbox) {
|
|
76
76
|
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
77
77
|
box-shadow: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.checkbox__label-text.mandatory::after {
|
|
81
|
+
content: "*";
|
|
82
|
+
font-family: inherit;
|
|
83
|
+
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
84
|
+
margin-left: 2px;
|
|
78
85
|
}
|
|
@@ -81,7 +81,11 @@ export class CheckboxInput {
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
renderLabel() {
|
|
84
|
-
|
|
84
|
+
var _a;
|
|
85
|
+
return (h("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, h("div", { class: {
|
|
86
|
+
'checkbox__label-text': true,
|
|
87
|
+
'mandatory': (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory,
|
|
88
|
+
}, innerHTML: this.displayName })));
|
|
85
89
|
}
|
|
86
90
|
renderTooltip() {
|
|
87
91
|
if (this.showTooltip) {
|
|
@@ -90,7 +94,7 @@ export class CheckboxInput {
|
|
|
90
94
|
return null;
|
|
91
95
|
}
|
|
92
96
|
render() {
|
|
93
|
-
return (h("div", { key: '
|
|
97
|
+
return (h("div", { key: '80ed581cec5bb009ea5ea009f11c6453fe24ef7b', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, h("vaadin-checkbox", { key: '42d793f607af77435f629218f9bdac7736522bc3', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (h("img", { key: 'ce3870810ede8f3905fd8c07c0892ab0d909bab5', class: "checkboxgroup__tooltip-icon", src: tooltipIcon, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
94
98
|
}
|
|
95
99
|
static get is() { return "checkbox-input"; }
|
|
96
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -131,11 +131,16 @@ export class GeneralInput {
|
|
|
131
131
|
case 'twofa':
|
|
132
132
|
return h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "enable-south-african-mode": this.enableSouthAfricanMode, "pin-attempts-exceeded": this.pinAttemptsExceeded, "mb-source": this.mbSource });
|
|
133
133
|
default:
|
|
134
|
-
|
|
134
|
+
if (this.displayName && this.displayName.trim() !== '') {
|
|
135
|
+
return h("div", { class: "general-non-input", innerHTML: this.displayName });
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
135
140
|
}
|
|
136
141
|
}
|
|
137
142
|
render() {
|
|
138
|
-
return (h(Host, { key: '
|
|
143
|
+
return (h(Host, { key: '0474aad44033fe0c48473af7938e9ddb77b684e8', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
|
|
139
144
|
}
|
|
140
145
|
static get is() { return "general-input"; }
|
|
141
146
|
static get encapsulation() { return "shadow"; }
|
|
@@ -431,7 +431,7 @@ const CheckboxGroupInput = class {
|
|
|
431
431
|
};
|
|
432
432
|
CheckboxGroupInput.style = CheckboxGroupInputStyle0;
|
|
433
433
|
|
|
434
|
-
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input[indeterminate]::part(checkbox)::after,.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding:0px;vertical-align:baseline}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input::part(required-indicator)::after{
|
|
434
|
+
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input[indeterminate]::part(checkbox)::after,.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding:0px;vertical-align:baseline}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input::part(required-indicator)::after{display:none}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));box-shadow:none}.checkbox__label-text.mandatory::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}";
|
|
435
435
|
const CheckboxInputStyle0 = checkboxInputCss;
|
|
436
436
|
|
|
437
437
|
const CheckboxInput = class {
|
|
@@ -517,7 +517,11 @@ const CheckboxInput = class {
|
|
|
517
517
|
}
|
|
518
518
|
}
|
|
519
519
|
renderLabel() {
|
|
520
|
-
|
|
520
|
+
var _a;
|
|
521
|
+
return (h("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, h("div", { class: {
|
|
522
|
+
'checkbox__label-text': true,
|
|
523
|
+
'mandatory': (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory,
|
|
524
|
+
}, innerHTML: this.displayName })));
|
|
521
525
|
}
|
|
522
526
|
renderTooltip() {
|
|
523
527
|
if (this.showTooltip) {
|
|
@@ -526,7 +530,7 @@ const CheckboxInput = class {
|
|
|
526
530
|
return null;
|
|
527
531
|
}
|
|
528
532
|
render() {
|
|
529
|
-
return (h("div", { key: '
|
|
533
|
+
return (h("div", { key: '80ed581cec5bb009ea5ea009f11c6453fe24ef7b', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, h("vaadin-checkbox", { key: '42d793f607af77435f629218f9bdac7736522bc3', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (h("img", { key: 'ce3870810ede8f3905fd8c07c0892ab0d909bab5', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
530
534
|
}
|
|
531
535
|
static get watchers() { return {
|
|
532
536
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -13058,11 +13062,16 @@ const GeneralInput = class {
|
|
|
13058
13062
|
case 'twofa':
|
|
13059
13063
|
return h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "enable-south-african-mode": this.enableSouthAfricanMode, "pin-attempts-exceeded": this.pinAttemptsExceeded, "mb-source": this.mbSource });
|
|
13060
13064
|
default:
|
|
13061
|
-
|
|
13065
|
+
if (this.displayName && this.displayName.trim() !== '') {
|
|
13066
|
+
return h("div", { class: "general-non-input", innerHTML: this.displayName });
|
|
13067
|
+
}
|
|
13068
|
+
else {
|
|
13069
|
+
return null;
|
|
13070
|
+
}
|
|
13062
13071
|
}
|
|
13063
13072
|
}
|
|
13064
13073
|
render() {
|
|
13065
|
-
return (h(Host, { key: '
|
|
13074
|
+
return (h(Host, { key: '0474aad44033fe0c48473af7938e9ddb77b684e8', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
|
|
13066
13075
|
}
|
|
13067
13076
|
get host() { return getElement(this); }
|
|
13068
13077
|
static get watchers() { return {
|