@luftborn/custom-elements 2.15.3 → 2.15.4
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 +19 -19
- package/demo/index.min.js +18 -18
- 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/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/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/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/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);
|
|
@@ -5051,7 +5051,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5051
5051
|
(0, custom_element_decorator_1.default)({
|
|
5052
5052
|
selector: 'custom-format-date-element',
|
|
5053
5053
|
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\
|
|
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\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
5055
|
useShadow: true,
|
|
5056
5056
|
})
|
|
5057
5057
|
], CustomFormatDateFieldElement);
|
|
@@ -5148,7 +5148,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
|
|
|
5148
5148
|
(0, custom_element_decorator_1.default)({
|
|
5149
5149
|
selector: 'regex-element',
|
|
5150
5150
|
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
|
|
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 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
5152
|
useShadow: true,
|
|
5153
5153
|
})
|
|
5154
5154
|
], CustomRegularExpressionElement);
|
|
@@ -5242,7 +5242,7 @@ var DateFieldElement = /** @class */ (function (_super) {
|
|
|
5242
5242
|
(0, custom_element_decorator_1.default)({
|
|
5243
5243
|
selector: 'date-element',
|
|
5244
5244
|
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
|
|
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 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
5246
|
useShadow: true,
|
|
5247
5247
|
})
|
|
5248
5248
|
], DateFieldElement);
|
|
@@ -5353,7 +5353,7 @@ var DropDownListElement = /** @class */ (function (_super) {
|
|
|
5353
5353
|
(0, custom_element_decorator_1.default)({
|
|
5354
5354
|
selector: 'drop-down-element',
|
|
5355
5355
|
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\
|
|
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\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
5357
|
useShadow: true,
|
|
5358
5358
|
})
|
|
5359
5359
|
], DropDownListElement);
|
|
@@ -5495,7 +5495,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
|
|
|
5495
5495
|
(0, custom_element_decorator_1.default)({
|
|
5496
5496
|
selector: 'email-element',
|
|
5497
5497
|
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
|
|
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 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
5499
|
useShadow: true,
|
|
5500
5500
|
})
|
|
5501
5501
|
], EmailFieldElement);
|
|
@@ -5828,7 +5828,7 @@ var FileFieldElement = /** @class */ (function (_super) {
|
|
|
5828
5828
|
(0, custom_element_decorator_1.default)({
|
|
5829
5829
|
selector: 'file-element',
|
|
5830
5830
|
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
|
|
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 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
5832
|
useShadow: true,
|
|
5833
5833
|
})
|
|
5834
5834
|
], FileFieldElement);
|
|
@@ -6080,7 +6080,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
|
|
|
6080
6080
|
(0, custom_element_decorator_1.default)({
|
|
6081
6081
|
selector: 'int-phone-element',
|
|
6082
6082
|
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
|
|
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 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
6084
|
useShadow: true,
|
|
6085
6085
|
})
|
|
6086
6086
|
], IntPhoneFieldElement);
|
|
@@ -6183,7 +6183,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
|
|
|
6183
6183
|
(0, custom_element_decorator_1.default)({
|
|
6184
6184
|
selector: 'numeric-element',
|
|
6185
6185
|
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
|
|
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\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
6187
|
useShadow: true,
|
|
6188
6188
|
})
|
|
6189
6189
|
], NumericFieldElement);
|
|
@@ -6449,7 +6449,7 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
|
|
|
6449
6449
|
(0, custom_element_decorator_1.default)({
|
|
6450
6450
|
selector: 'resident-identification-element',
|
|
6451
6451
|
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\
|
|
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\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
6453
|
templatePath: './html.html',
|
|
6454
6454
|
useShadow: true,
|
|
6455
6455
|
})
|
|
@@ -6541,7 +6541,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
|
|
|
6541
6541
|
(0, custom_element_decorator_1.default)({
|
|
6542
6542
|
selector: 'se-company-registration-element',
|
|
6543
6543
|
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
|
|
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 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
6545
|
useShadow: true,
|
|
6546
6546
|
})
|
|
6547
6547
|
], SECompanyRegistrationElement);
|
|
@@ -6632,7 +6632,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
|
|
|
6632
6632
|
(0, custom_element_decorator_1.default)({
|
|
6633
6633
|
selector: 'se-personal-number-element',
|
|
6634
6634
|
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
|
|
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 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
6636
|
useShadow: true,
|
|
6637
6637
|
})
|
|
6638
6638
|
], SEPersonalNumberElement);
|
|
@@ -6723,7 +6723,7 @@ var TextAreaElement = /** @class */ (function (_super) {
|
|
|
6723
6723
|
(0, custom_element_decorator_1.default)({
|
|
6724
6724
|
selector: 'text-area-element',
|
|
6725
6725
|
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
|
|
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 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
6727
|
useShadow: true,
|
|
6728
6728
|
})
|
|
6729
6729
|
], TextAreaElement);
|
|
@@ -6814,7 +6814,7 @@ var TextFieldElement = /** @class */ (function (_super) {
|
|
|
6814
6814
|
(0, custom_element_decorator_1.default)({
|
|
6815
6815
|
selector: 'text-element',
|
|
6816
6816
|
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\
|
|
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\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
6818
|
useShadow: true,
|
|
6819
6819
|
})
|
|
6820
6820
|
], TextFieldElement);
|
|
@@ -7052,7 +7052,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
7052
7052
|
(0, custom_element_decorator_1.default)({
|
|
7053
7053
|
selector: 'type-ahead-element',
|
|
7054
7054
|
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\
|
|
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\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
7056
|
useShadow: true,
|
|
7057
7057
|
})
|
|
7058
7058
|
], TypeAheadElement);
|