@luftborn/custom-elements 2.15.3 → 2.15.5
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/demo/index.js +25 -23
- package/demo/index.min.js +24 -22
- package/demo/index.min.js.map +1 -1
- package/dist/elements/Address/AddressElement.js +1 -1
- package/dist/elements/Address/AddressElement.js.map +1 -1
- package/dist/elements/BankField/BankFieldElement.js +1 -1
- package/dist/elements/BankField/BankFieldElement.js.map +1 -1
- package/dist/elements/CPRElement/CPRElement.js +1 -1
- package/dist/elements/CPRElement/CPRElement.js.map +1 -1
- package/dist/elements/CVRElement/CVRElement.js +1 -1
- package/dist/elements/CVRElement/CVRElement.js.map +1 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.js +3 -2
- package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
- package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js +1 -1
- package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js.map +1 -1
- package/dist/elements/DateField/DateFieldElement.js +1 -1
- package/dist/elements/DateField/DateFieldElement.js.map +1 -1
- package/dist/elements/DropDownList/DropDownListElement.js +1 -1
- package/dist/elements/DropDownList/DropDownListElement.js.map +1 -1
- package/dist/elements/EmailField/EmailFieldElement.js +1 -1
- package/dist/elements/EmailField/EmailFieldElement.js.map +1 -1
- package/dist/elements/FileField/FileFieldElement.js +1 -1
- package/dist/elements/FileField/FileFieldElement.js.map +1 -1
- package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js +1 -1
- package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js.map +1 -1
- package/dist/elements/NumericField/NumericFieldElement.js +1 -1
- package/dist/elements/NumericField/NumericFieldElement.js.map +1 -1
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +3 -2
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
- package/dist/elements/ResidentIdentification/ResidentIdentificationElement.js +1 -1
- package/dist/elements/ResidentIdentification/ResidentIdentificationElement.js.map +1 -1
- package/dist/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.js +1 -1
- package/dist/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.js.map +1 -1
- package/dist/elements/SEPersonalNumberElement/SEPersonalNumberElement.js +1 -1
- package/dist/elements/SEPersonalNumberElement/SEPersonalNumberElement.js.map +1 -1
- package/dist/elements/TextAreaElement/TextAreaElement.js +1 -1
- package/dist/elements/TextAreaElement/TextAreaElement.js.map +1 -1
- package/dist/elements/TextField/TextFieldElement.js +1 -1
- package/dist/elements/TextField/TextFieldElement.js.map +1 -1
- package/dist/elements/TypeAhead/TypeAheadElement.js +1 -1
- package/dist/elements/TypeAhead/TypeAheadElement.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/Address/AddressElement.ts +8 -1
- package/src/elements/BankField/BankFieldElement.ts +8 -1
- package/src/elements/CPRElement/CPRElement.ts +2 -1
- package/src/elements/CVRElement/CVRElement.ts +2 -1
- package/src/elements/CheckBoxElement/CheckBoxElement.ts +3 -2
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +2 -1
- package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +2 -1
- package/src/elements/DateField/DateFieldElement.ts +2 -1
- package/src/elements/DropDownList/DropDownListElement.ts +2 -1
- package/src/elements/EmailField/EmailFieldElement.ts +2 -1
- package/src/elements/FileField/FileFieldElement.ts +1 -3
- package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts +2 -1
- package/src/elements/NumericField/NumericFieldElement.ts +2 -1
- package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +3 -2
- package/src/elements/ResidentIdentification/ResidentIdentificationElement.ts +8 -1
- package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts +2 -1
- package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts +2 -1
- package/src/elements/TextAreaElement/TextAreaElement.ts +2 -1
- package/src/elements/TextField/TextFieldElement.ts +2 -1
- package/src/elements/TypeAhead/TypeAheadElement.ts +2 -1
package/demo/index.min.js
CHANGED
|
@@ -3657,7 +3657,7 @@ var AddressElement = /** @class */ (function (_super) {
|
|
|
3657
3657
|
(0, custom_element_decorator_1.default)({
|
|
3658
3658
|
selector: 'address-element',
|
|
3659
3659
|
template: "\n\t\t\t<div class=\"field-label\">\n\t\t\t</div>\n\t\t\t<div class=\"field-input\">\n\t\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t\t<input class='address-part address' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t\t<input class='address-part zip' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t\t<input class='address-part city' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t\t<input class='address-part country' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t\t</div>\n\t\t\t</div>",
|
|
3660
|
-
style: "\n\t\t.address-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.address-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
3660
|
+
style: "\n\t\t.address-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.address-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\n\t\t}\n\t\tinput.address-part:not(:last-child) {\n\t\t\tmargin-right: 0.125rem;\n\t\t}\n\t\tinput.address-part:last-child {\n\t\t\tmargin-right: 0;\n\t\t}\n\t\tinput.address-part::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
3661
3661
|
templatePath: './html.html',
|
|
3662
3662
|
useShadow: true,
|
|
3663
3663
|
})
|
|
@@ -3791,7 +3791,7 @@ var BankFieldElement = /** @class */ (function (_super) {
|
|
|
3791
3791
|
(0, custom_element_decorator_1.default)({
|
|
3792
3792
|
selector: 'bank-element',
|
|
3793
3793
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='reg-number-field' id='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" class='account-field' id='account-field' placeholder='Bank Account'/>\n\t\t\t</div>\n\t\t</div>",
|
|
3794
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
3794
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\tinput:not(:last-child) {\n\t\t\tmargin-right: 0.125rem;\n\t\t}\n\t\tinput:last-child {\n\t\t\tmargin-right: 0;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
3795
3795
|
useShadow: true,
|
|
3796
3796
|
})
|
|
3797
3797
|
], BankFieldElement);
|
|
@@ -3882,7 +3882,7 @@ var CPRElement = /** @class */ (function (_super) {
|
|
|
3882
3882
|
(0, custom_element_decorator_1.default)({
|
|
3883
3883
|
selector: 'cpr-element',
|
|
3884
3884
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='cpr-field' placeholder='DDMMYY-SSSS'/>\n\t\t\t</div>\n\t\t</div>",
|
|
3885
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
3885
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
3886
3886
|
useShadow: true,
|
|
3887
3887
|
})
|
|
3888
3888
|
], CPRElement);
|
|
@@ -3973,7 +3973,7 @@ var CVRElement = /** @class */ (function (_super) {
|
|
|
3973
3973
|
(0, custom_element_decorator_1.default)({
|
|
3974
3974
|
selector: 'cvr-element',
|
|
3975
3975
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='cvr-field' placeholder='SSSSSSSS'/>\n\t\t\t</div>\n\t\t</div>",
|
|
3976
|
-
style: "\n\t :host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
3976
|
+
style: "\n\t :host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\t\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
3977
3977
|
useShadow: true,
|
|
3978
3978
|
})
|
|
3979
3979
|
], CVRElement);
|
|
@@ -4067,8 +4067,9 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4067
4067
|
var fieldset = this.shadowRoot.querySelector('fieldset');
|
|
4068
4068
|
if (this.label) {
|
|
4069
4069
|
fieldset.setAttribute('aria-label', this.label);
|
|
4070
|
-
|
|
4071
|
-
|
|
4070
|
+
var legend = fieldset.querySelector('legend');
|
|
4071
|
+
if (!this.hideLabel && !legend) {
|
|
4072
|
+
legend = document.createElement('legend');
|
|
4072
4073
|
legend.textContent = this.label;
|
|
4073
4074
|
legend.classList.add('field-label');
|
|
4074
4075
|
fieldset.insertAdjacentElement('afterbegin', legend);
|
|
@@ -5051,7 +5052,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5051
5052
|
(0, custom_element_decorator_1.default)({
|
|
5052
5053
|
selector: 'custom-format-date-element',
|
|
5053
5054
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id=\"date-field\">\n\t\t\t\t<button id=\"picker-trigger\" aria-label=\"Open date picker\">\n\t\t\t\t\t<svg class=\"svg-picker\" data-toggle viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"18\" rx=\"1\" fill=\"#000\"/><rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" fill=\"white\"/><path d=\"M4 10H20\" stroke=\"#000\" stroke-width=\"1\"/><circle cx=\"16\" cy=\"14\" r=\"2\" fill=\"#F44336\"/><rect x=\"6\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/><rect x=\"15\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>",
|
|
5054
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tposition: relative;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
5055
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tposition: relative;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t#date-field::after {\n\t\t\tcontent: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */\n\t\t\tcursor: pointer;\n\t\t\tright: 0.625rem;\n\t\t}\n\t\t.svg-picker {\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\twidth: 1.5rem;\n\t\t\theight: 1.5rem;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t\tpadding: 0;\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
5055
5056
|
useShadow: true,
|
|
5056
5057
|
})
|
|
5057
5058
|
], CustomFormatDateFieldElement);
|
|
@@ -5148,7 +5149,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
|
|
|
5148
5149
|
(0, custom_element_decorator_1.default)({
|
|
5149
5150
|
selector: 'regex-element',
|
|
5150
5151
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='regex-field'/>\n\t\t\t</div>\n\t\t</div>",
|
|
5151
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
5152
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
5152
5153
|
useShadow: true,
|
|
5153
5154
|
})
|
|
5154
5155
|
], CustomRegularExpressionElement);
|
|
@@ -5242,7 +5243,7 @@ var DateFieldElement = /** @class */ (function (_super) {
|
|
|
5242
5243
|
(0, custom_element_decorator_1.default)({
|
|
5243
5244
|
selector: 'date-element',
|
|
5244
5245
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"date\" id='date-field'/>\n\t\t\t</div>\n\t\t</div>",
|
|
5245
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
5246
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
5246
5247
|
useShadow: true,
|
|
5247
5248
|
})
|
|
5248
5249
|
], DateFieldElement);
|
|
@@ -5353,7 +5354,7 @@ var DropDownListElement = /** @class */ (function (_super) {
|
|
|
5353
5354
|
(0, custom_element_decorator_1.default)({
|
|
5354
5355
|
selector: 'drop-down-element',
|
|
5355
5356
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n <select id='select-list'>\n\t\t\t <option selected disabled>-</option>\n </select>\n\t\t\t</div>\n\t\t</div>",
|
|
5356
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tjustify-content: center;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tdisplay: flex;\n\t\t\tflex-grow: 0.1;\n\t\t\tjustify-content: space-around;\n\t\t}\n\t\tselect{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
5357
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tjustify-content: center;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tdisplay: flex;\n\t\t\tflex-grow: 0.1;\n\t\t\tjustify-content: space-around;\n\t\t}\n\t\tselect{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\tselect::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
5357
5358
|
useShadow: true,
|
|
5358
5359
|
})
|
|
5359
5360
|
], DropDownListElement);
|
|
@@ -5495,7 +5496,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
|
|
|
5495
5496
|
(0, custom_element_decorator_1.default)({
|
|
5496
5497
|
selector: 'email-element',
|
|
5497
5498
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='email-field'/>\n\t\t\t</div>\n\t\t</div>",
|
|
5498
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
5499
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
5499
5500
|
useShadow: true,
|
|
5500
5501
|
})
|
|
5501
5502
|
], EmailFieldElement);
|
|
@@ -5828,7 +5829,7 @@ var FileFieldElement = /** @class */ (function (_super) {
|
|
|
5828
5829
|
(0, custom_element_decorator_1.default)({
|
|
5829
5830
|
selector: 'file-element',
|
|
5830
5831
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"file\" id='file-field' accept=\"image/*,application/pdf\"/>\n\t\t\t</div>\n\t\t</div>",
|
|
5831
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n
|
|
5832
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n input::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n .field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
5832
5833
|
useShadow: true,
|
|
5833
5834
|
})
|
|
5834
5835
|
], FileFieldElement);
|
|
@@ -6080,7 +6081,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
|
|
|
6080
6081
|
(0, custom_element_decorator_1.default)({
|
|
6081
6082
|
selector: 'int-phone-element',
|
|
6082
6083
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/css/intlTelInput.css\" >\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"tel\" id=\"phone-field\" />\n\t\t\t</div>\n\t\t</div>",
|
|
6083
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \t.iti {\n \twidth: 100% !important;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
6084
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \t.iti {\n \twidth: 100% !important;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t\t@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n\t\t\t.iti__flag {\n\t\t\tbackground-image: url('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/img/flags@2x.png'), url(" + (0, Flags2x_1.default)() + ");\n\t\t\t}\n\t\t}\n\t",
|
|
6084
6085
|
useShadow: true,
|
|
6085
6086
|
})
|
|
6086
6087
|
], IntPhoneFieldElement);
|
|
@@ -6183,7 +6184,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
|
|
|
6183
6184
|
(0, custom_element_decorator_1.default)({
|
|
6184
6185
|
selector: 'numeric-element',
|
|
6185
6186
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"number\" id=\"numeric-field\" step=\"any\" />\n\t\t\t</div>\n\t\t</div>",
|
|
6186
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n\t\tinput{\n box-sizing: border-box;\n width: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n
|
|
6187
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n\t\tinput{\n box-sizing: border-box;\n width: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
6187
6188
|
useShadow: true,
|
|
6188
6189
|
})
|
|
6189
6190
|
], NumericFieldElement);
|
|
@@ -6283,8 +6284,9 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6283
6284
|
var fieldset = this.shadowRoot.querySelector('fieldset');
|
|
6284
6285
|
if (this.label) {
|
|
6285
6286
|
fieldset.setAttribute('aria-label', this.label);
|
|
6286
|
-
|
|
6287
|
-
|
|
6287
|
+
var legend = fieldset.querySelector('legend');
|
|
6288
|
+
if (!this.hideLabel && !legend) {
|
|
6289
|
+
legend = document.createElement('legend');
|
|
6288
6290
|
legend.textContent = this.label;
|
|
6289
6291
|
legend.classList.add('field-label');
|
|
6290
6292
|
fieldset.insertAdjacentElement('afterbegin', legend);
|
|
@@ -6449,7 +6451,7 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
|
|
|
6449
6451
|
(0, custom_element_decorator_1.default)({
|
|
6450
6452
|
selector: 'resident-identification-element',
|
|
6451
6453
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<input class='field-part company' id='company' type=\"text\" placeholder='Company'/>\n\t\t\t\t<input class='field-part property' id='property' type=\"text\" placeholder='Property'/>\n\t\t\t\t<input class='field-part tenancy' id='tenancy' type=\"text\" placeholder='Tenancy'/>\n\t\t\t\t<input class='field-part tenant' id='tenant' type=\"text\" placeholder='Tenant'/>\n\t\t\t</div>\n\t\t</div>",
|
|
6452
|
-
style: "\n\t\t.field-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.field-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
6454
|
+
style: "\n\t\t.field-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.field-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\n\t\t}\n\t\tinput.field-part:not(:last-child) {\n\t\t\tmargin-right: 0.125rem;\n\t\t}\n\t\tinput.field-part:last-child {\n\t\t\tmargin-right: 0;\n\t\t}\n\t\tinput.field-part::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
6453
6455
|
templatePath: './html.html',
|
|
6454
6456
|
useShadow: true,
|
|
6455
6457
|
})
|
|
@@ -6541,7 +6543,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
|
|
|
6541
6543
|
(0, custom_element_decorator_1.default)({
|
|
6542
6544
|
selector: 'se-company-registration-element',
|
|
6543
6545
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='se-company-registration-field' placeholder='SSSSSSSSSS'/>\n\t\t\t</div>\t\n </div>",
|
|
6544
|
-
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
6546
|
+
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n }\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
6545
6547
|
useShadow: true,
|
|
6546
6548
|
})
|
|
6547
6549
|
], SECompanyRegistrationElement);
|
|
@@ -6632,7 +6634,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
|
|
|
6632
6634
|
(0, custom_element_decorator_1.default)({
|
|
6633
6635
|
selector: 'se-personal-number-element',
|
|
6634
6636
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>\n\t\t\t</div>\n </div>",
|
|
6635
|
-
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
6637
|
+
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n }\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
6636
6638
|
useShadow: true,
|
|
6637
6639
|
})
|
|
6638
6640
|
], SEPersonalNumberElement);
|
|
@@ -6723,7 +6725,7 @@ var TextAreaElement = /** @class */ (function (_super) {
|
|
|
6723
6725
|
(0, custom_element_decorator_1.default)({
|
|
6724
6726
|
selector: 'text-area-element',
|
|
6725
6727
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<textarea rows=5 id='text-area-field'></textarea>\n\t\t\t</div>\n\t\t</div>",
|
|
6726
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \ttextarea{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n
|
|
6728
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \ttextarea{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\ttextarea::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
6727
6729
|
useShadow: true,
|
|
6728
6730
|
})
|
|
6729
6731
|
], TextAreaElement);
|
|
@@ -6814,7 +6816,7 @@ var TextFieldElement = /** @class */ (function (_super) {
|
|
|
6814
6816
|
(0, custom_element_decorator_1.default)({
|
|
6815
6817
|
selector: 'text-element',
|
|
6816
6818
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field' />\n\t\t\t</div>\n\t\t</div>\n\t",
|
|
6817
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
6819
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
6818
6820
|
useShadow: true,
|
|
6819
6821
|
})
|
|
6820
6822
|
], TextFieldElement);
|
|
@@ -7052,7 +7054,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
7052
7054
|
(0, custom_element_decorator_1.default)({
|
|
7053
7055
|
selector: 'type-ahead-element',
|
|
7054
7056
|
template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\" role=\"combobox\" aria-expanded=\"false\" aria-owns=\"options-list\" aria-haspopup=\"listbox\">\n\t\t\t\t<input type=\"text\" class=\"text-input\" id=\"text-input\" aria-autocomplete=\"list\" aria-controls=\"options-list\" aria-activedescendant=\"\" role=\"textbox\">\n\t\t\t\t<div id=\"description\" aria-live=\"polite\"></div>\n\t\t\t\t<div id=\"options-list\" role=\"listbox\" class=\"options-list\" hidden>\n\t\t\t\t\t<!-- Options will be dynamically added here -->\n\t\t\t\t</div>\n\t\t\t</div>\t\n\t\t</div>",
|
|
7055
|
-
style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t.text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\
|
|
7057
|
+
style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t.text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\t.text-input::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 0.125rem;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 0.063rem solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 12.5rem;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 0.625rem;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 0.063rem solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 1rem;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 0.625rem;\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
|
|
7056
7058
|
useShadow: true,
|
|
7057
7059
|
})
|
|
7058
7060
|
], TypeAheadElement);
|