@everymatrix/general-registration 1.10.23 → 1.10.24
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_12.cjs.entry.js → checkbox-group-input_13.cjs.entry.js} +168 -40
- package/dist/cjs/general-registration.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/general-registration/general-registration.css +11 -23
- package/dist/collection/components/general-registration/general-registration.js +63 -29
- package/dist/components/checkbox-group-input2.js +2 -2
- package/dist/components/checkbox-input2.js +2 -2
- package/dist/components/date-input2.js +1 -1
- package/dist/components/email-input2.js +1 -1
- package/dist/components/general-input2.js +218 -22
- package/dist/components/general-registration.js +90 -51
- package/dist/components/number-input2.js +1 -1
- package/dist/components/password-input2.js +1 -1
- package/dist/components/select-input2.js +1 -1
- package/dist/components/tel-input2.js +2 -2
- package/dist/components/text-input2.js +1 -1
- package/dist/components/toggle-checkbox-input.js +6 -0
- package/dist/esm/{checkbox-group-input_12.entry.js → checkbox-group-input_13.entry.js} +168 -41
- package/dist/esm/general-registration.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/general-registration/general-registration.esm.js +1 -1
- package/dist/general-registration/{p-482c4c1e.entry.js → p-7852ad99.entry.js} +96 -96
- package/dist/types/components/general-registration/general-registration.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$
|
|
3
|
-
import { d as defineCustomElement$
|
|
4
|
-
import { d as defineCustomElement$
|
|
5
|
-
import { d as defineCustomElement$
|
|
6
|
-
import { d as defineCustomElement$
|
|
7
|
-
import { d as defineCustomElement$
|
|
8
|
-
import { d as defineCustomElement$
|
|
9
|
-
import { d as defineCustomElement$
|
|
10
|
-
import { d as defineCustomElement$
|
|
11
|
-
import { d as defineCustomElement$
|
|
12
|
-
import { d as defineCustomElement$
|
|
2
|
+
import { d as defineCustomElement$d } from './checkbox-group-input2.js';
|
|
3
|
+
import { d as defineCustomElement$c } from './checkbox-input2.js';
|
|
4
|
+
import { d as defineCustomElement$b } from './date-input2.js';
|
|
5
|
+
import { d as defineCustomElement$a } from './email-input2.js';
|
|
6
|
+
import { a as defineCustomElement$2, d as defineCustomElement$9 } from './general-input2.js';
|
|
7
|
+
import { d as defineCustomElement$8 } from './number-input2.js';
|
|
8
|
+
import { d as defineCustomElement$7 } from './password-input2.js';
|
|
9
|
+
import { d as defineCustomElement$6 } from './radio-input2.js';
|
|
10
|
+
import { d as defineCustomElement$5 } from './select-input2.js';
|
|
11
|
+
import { d as defineCustomElement$4 } from './tel-input2.js';
|
|
12
|
+
import { d as defineCustomElement$3 } from './text-input2.js';
|
|
13
13
|
|
|
14
14
|
const DEFAULT_LANGUAGE = 'en';
|
|
15
15
|
const TRANSLATIONS = {
|
|
@@ -63,7 +63,7 @@ const translate = (key, customLang, values) => {
|
|
|
63
63
|
return translation;
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
-
const generalRegistrationCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.registration__form.hidden {\n display: none;\n}\n\n.registration {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n container-type: inline-size;\n}\n.registration__error-message {\n color: #cc0000b3;\n}\n.registration__form {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n justify-items: stretch;\n align-content: flex-start;\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.registration__buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.registration__button {\n
|
|
66
|
+
const generalRegistrationCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.registration__form.hidden {\n display: none;\n}\n\n.registration {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n container-type: inline-size;\n}\n.registration__error-message {\n color: #cc0000b3;\n}\n.registration__form {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n justify-items: stretch;\n align-content: flex-start;\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.registration__buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.registration__button {\n border: none;\n border-radius: 20px;\n box-shadow: 0px 2px 1px rgba(11, 16, 19, 0.6);\n color: #0B1013;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n width: 150px;\n height: 45px;\n}\n.registration__button--disabled {\n color: #647480;\n background-color: #CFCFCF;\n box-shadow: none;\n}\n.registration__button--first-step {\n display: none;\n}\n\n@container (min-width: 450px) {\n .registration__form {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}";
|
|
67
67
|
|
|
68
68
|
const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
69
69
|
constructor() {
|
|
@@ -90,6 +90,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
90
90
|
this.translationUrl = '';
|
|
91
91
|
this.isLoading = true;
|
|
92
92
|
this.forms = [];
|
|
93
|
+
this.limitStylingAppends = false;
|
|
93
94
|
this.listOfInputValues = [];
|
|
94
95
|
this.listOfInputValidity = [];
|
|
95
96
|
this.listOfActions = [];
|
|
@@ -102,7 +103,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
102
103
|
this.setClientStyling = () => {
|
|
103
104
|
let sheet = document.createElement('style');
|
|
104
105
|
sheet.innerHTML = this.clientStyling;
|
|
105
|
-
this.
|
|
106
|
+
this.host.shadowRoot.prepend(sheet);
|
|
106
107
|
};
|
|
107
108
|
this.setClientStylingURL = () => {
|
|
108
109
|
let url = new URL(this.clientStylingUrl);
|
|
@@ -112,7 +113,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
112
113
|
.then((data) => {
|
|
113
114
|
cssFile.innerHTML = data;
|
|
114
115
|
this.clientStyling = data;
|
|
115
|
-
setTimeout(() => { this.
|
|
116
|
+
setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
|
|
116
117
|
});
|
|
117
118
|
};
|
|
118
119
|
}
|
|
@@ -169,18 +170,17 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
169
170
|
}
|
|
170
171
|
});
|
|
171
172
|
}
|
|
172
|
-
|
|
173
|
-
|
|
173
|
+
componentDidLoad() {
|
|
174
|
+
this.registrationWidgetLoaded.emit();
|
|
175
|
+
window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
|
|
176
|
+
if (!this.limitStylingAppends && this.host) {
|
|
174
177
|
if (this.clientStyling)
|
|
175
178
|
this.setClientStyling();
|
|
176
179
|
if (this.clientStylingUrl)
|
|
177
180
|
this.setClientStylingURL();
|
|
181
|
+
this.limitStylingAppends = true;
|
|
178
182
|
}
|
|
179
183
|
}
|
|
180
|
-
componentDidLoad() {
|
|
181
|
-
this.registrationWidgetLoaded.emit();
|
|
182
|
-
window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
|
|
183
|
-
}
|
|
184
184
|
nextHandler(e) {
|
|
185
185
|
e.preventDefault();
|
|
186
186
|
// Trigger events in subwidgets.
|
|
@@ -394,22 +394,51 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
394
394
|
return [inputElement];
|
|
395
395
|
}
|
|
396
396
|
});
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
397
|
+
this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
|
|
398
|
+
var _a;
|
|
399
|
+
// If the field is a togglecheckbox, add its subfields
|
|
400
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
|
|
401
|
+
field.data.subFields.forEach(subfield => {
|
|
402
|
+
acc.push({
|
|
403
|
+
name: subfield.name,
|
|
404
|
+
isValid: this.setInitialValidStatus(subfield)
|
|
405
|
+
});
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
else {
|
|
409
|
+
acc.push({
|
|
410
|
+
name: field.name,
|
|
411
|
+
isValid: this.setInitialValidStatus(field)
|
|
412
|
+
});
|
|
413
|
+
}
|
|
414
|
+
return acc;
|
|
415
|
+
}, []);
|
|
416
|
+
this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
|
|
417
|
+
var _a, _b, _c;
|
|
418
|
+
// If the field type is a 'togglecheckbox', add its subfields
|
|
419
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
|
|
420
|
+
field.data.subFields.forEach(subfield => {
|
|
421
|
+
var _a, _b;
|
|
422
|
+
acc.push({
|
|
423
|
+
name: subfield.name,
|
|
424
|
+
value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
|
|
425
|
+
isDuplicate: subfield.isDuplicateInput || false,
|
|
426
|
+
type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'togglecheckbox'
|
|
427
|
+
? 'togglecheckbox'
|
|
428
|
+
: null
|
|
429
|
+
});
|
|
430
|
+
});
|
|
431
|
+
}
|
|
432
|
+
else {
|
|
433
|
+
acc.push({
|
|
434
|
+
name: field.name,
|
|
435
|
+
value: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkbox' ? 'false' : null,
|
|
436
|
+
isDuplicate: field.isDuplicateInput || false,
|
|
437
|
+
type: ((_c = field.inputType) === null || _c === void 0 ? void 0 : _c.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
|
|
438
|
+
});
|
|
439
|
+
}
|
|
440
|
+
return acc;
|
|
441
|
+
}, []);
|
|
413
442
|
// Set the list of actions
|
|
414
443
|
this.listOfActions = config.content.actions.map(action => action);
|
|
415
444
|
this.registrationID = config.content.registrationID;
|
|
@@ -417,7 +446,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
417
446
|
if (this.listOfActions.some(action => action == '/register')) {
|
|
418
447
|
this.lastStep = this.registrationStep;
|
|
419
448
|
}
|
|
420
|
-
// this.forms.push({ [this.registrationStep] : this.listOfInputs});
|
|
421
449
|
this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
|
|
422
450
|
// Add the step to the registrationStepsData
|
|
423
451
|
this.registrationStepsState.regId = this.registrationID;
|
|
@@ -456,7 +484,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
456
484
|
}
|
|
457
485
|
renderForm() {
|
|
458
486
|
return this.forms.map((form, index) => {
|
|
459
|
-
return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
487
|
+
return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
488
|
+
? (input.inputType.toLowerCase() == 'checkboxgroup' || input.inputType.toLowerCase() == 'togglecheckbox')
|
|
489
|
+
? input.data.subFields
|
|
490
|
+
: input.data.values
|
|
491
|
+
: [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })), this.buttonInsideForm && this.renderButtons());
|
|
460
492
|
});
|
|
461
493
|
}
|
|
462
494
|
;
|
|
@@ -467,8 +499,9 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
467
499
|
if (this.isLoading) {
|
|
468
500
|
return h("p", null, "Please wait, loading ...");
|
|
469
501
|
}
|
|
470
|
-
return (h("div", { class: `registration registration__${this.registrationStep}
|
|
502
|
+
return (h("div", { class: `registration registration__${this.registrationStep}` }, this.renderForm(), h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
|
|
471
503
|
}
|
|
504
|
+
get host() { return this; }
|
|
472
505
|
static get watchers() { return {
|
|
473
506
|
"registrationStep": ["sendStep"],
|
|
474
507
|
"forms": ["setFormValidity"]
|
|
@@ -486,13 +519,14 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
486
519
|
"isFormValid": [32],
|
|
487
520
|
"isLoading": [32],
|
|
488
521
|
"registrationStep": [32],
|
|
489
|
-
"forms": [32]
|
|
522
|
+
"forms": [32],
|
|
523
|
+
"limitStylingAppends": [32]
|
|
490
524
|
}, [[0, "sendValidityState", "checkInputsValidityHandler"], [0, "sendInputValue", "getInputsValueHandler"]]]);
|
|
491
525
|
function defineCustomElement$1() {
|
|
492
526
|
if (typeof customElements === "undefined") {
|
|
493
527
|
return;
|
|
494
528
|
}
|
|
495
|
-
const components = ["general-registration", "checkbox-group-input", "checkbox-input", "date-input", "email-input", "general-input", "number-input", "password-input", "radio-input", "select-input", "tel-input", "text-input"];
|
|
529
|
+
const components = ["general-registration", "checkbox-group-input", "checkbox-input", "date-input", "email-input", "general-input", "number-input", "password-input", "radio-input", "select-input", "tel-input", "text-input", "toggle-checkbox-input"];
|
|
496
530
|
components.forEach(tagName => { switch (tagName) {
|
|
497
531
|
case "general-registration":
|
|
498
532
|
if (!customElements.get(tagName)) {
|
|
@@ -501,55 +535,60 @@ function defineCustomElement$1() {
|
|
|
501
535
|
break;
|
|
502
536
|
case "checkbox-group-input":
|
|
503
537
|
if (!customElements.get(tagName)) {
|
|
504
|
-
defineCustomElement$
|
|
538
|
+
defineCustomElement$d();
|
|
505
539
|
}
|
|
506
540
|
break;
|
|
507
541
|
case "checkbox-input":
|
|
508
542
|
if (!customElements.get(tagName)) {
|
|
509
|
-
defineCustomElement$
|
|
543
|
+
defineCustomElement$c();
|
|
510
544
|
}
|
|
511
545
|
break;
|
|
512
546
|
case "date-input":
|
|
513
547
|
if (!customElements.get(tagName)) {
|
|
514
|
-
defineCustomElement$
|
|
548
|
+
defineCustomElement$b();
|
|
515
549
|
}
|
|
516
550
|
break;
|
|
517
551
|
case "email-input":
|
|
518
552
|
if (!customElements.get(tagName)) {
|
|
519
|
-
defineCustomElement$
|
|
553
|
+
defineCustomElement$a();
|
|
520
554
|
}
|
|
521
555
|
break;
|
|
522
556
|
case "general-input":
|
|
523
557
|
if (!customElements.get(tagName)) {
|
|
524
|
-
defineCustomElement$
|
|
558
|
+
defineCustomElement$9();
|
|
525
559
|
}
|
|
526
560
|
break;
|
|
527
561
|
case "number-input":
|
|
528
562
|
if (!customElements.get(tagName)) {
|
|
529
|
-
defineCustomElement$
|
|
563
|
+
defineCustomElement$8();
|
|
530
564
|
}
|
|
531
565
|
break;
|
|
532
566
|
case "password-input":
|
|
533
567
|
if (!customElements.get(tagName)) {
|
|
534
|
-
defineCustomElement$
|
|
568
|
+
defineCustomElement$7();
|
|
535
569
|
}
|
|
536
570
|
break;
|
|
537
571
|
case "radio-input":
|
|
538
572
|
if (!customElements.get(tagName)) {
|
|
539
|
-
defineCustomElement$
|
|
573
|
+
defineCustomElement$6();
|
|
540
574
|
}
|
|
541
575
|
break;
|
|
542
576
|
case "select-input":
|
|
543
577
|
if (!customElements.get(tagName)) {
|
|
544
|
-
defineCustomElement$
|
|
578
|
+
defineCustomElement$5();
|
|
545
579
|
}
|
|
546
580
|
break;
|
|
547
581
|
case "tel-input":
|
|
548
582
|
if (!customElements.get(tagName)) {
|
|
549
|
-
defineCustomElement$
|
|
583
|
+
defineCustomElement$4();
|
|
550
584
|
}
|
|
551
585
|
break;
|
|
552
586
|
case "text-input":
|
|
587
|
+
if (!customElements.get(tagName)) {
|
|
588
|
+
defineCustomElement$3();
|
|
589
|
+
}
|
|
590
|
+
break;
|
|
591
|
+
case "toggle-checkbox-input":
|
|
553
592
|
if (!customElements.get(tagName)) {
|
|
554
593
|
defineCustomElement$2();
|
|
555
594
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
|
|
3
3
|
|
|
4
|
-
const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
4
|
+
const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.number__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.number__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.number__tooltip.visible{opacity:1}";
|
|
5
5
|
|
|
6
6
|
const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -719,7 +719,7 @@ class PasswordField extends TextField {
|
|
|
719
719
|
|
|
720
720
|
customElements.define(PasswordField.is, PasswordField);
|
|
721
721
|
|
|
722
|
-
const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
722
|
+
const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.password__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__input>input:placeholder-shown{color:#979797}.password__error-message{color:#cc0000b3}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:#FFFFFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:#1F1F1F}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid #B0B0B0;border-right:0 solid #B0B0B0;border-left:1px solid #B0B0B0;border-bottom:0 solid #B0B0B0;bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:#FFFFFF}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
|
|
723
723
|
|
|
724
724
|
const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
725
725
|
constructor() {
|
|
@@ -3,7 +3,7 @@ import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
|
|
|
3
3
|
import './input-field-shared-styles.js';
|
|
4
4
|
import './vaadin-combo-box.js';
|
|
5
5
|
|
|
6
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.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:#
|
|
6
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.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:#2A3841}.select__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
|
|
7
7
|
|
|
8
8
|
const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
@@ -3,7 +3,7 @@ import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
|
|
|
3
3
|
import './input-field-shared-styles.js';
|
|
4
4
|
import './vaadin-combo-box.js';
|
|
5
5
|
|
|
6
|
-
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
6
|
+
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:10px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.tel__tooltip.visible{opacity:1}";
|
|
7
7
|
|
|
8
8
|
const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
@@ -99,7 +99,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
99
99
|
this.isValid = this.setValidity();
|
|
100
100
|
if (this.defaultValue) {
|
|
101
101
|
this.value = this.defaultValue;
|
|
102
|
-
this.valueHandler({ name: this.name, value: this.value });
|
|
102
|
+
this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
getPhoneCodes(endpoint) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
|
|
3
3
|
|
|
4
|
-
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%}.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:#
|
|
4
|
+
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%}.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:#2A3841}.text__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__input::placeholder{color:#979797}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
|
|
5
5
|
|
|
6
6
|
const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|