@luftborn/custom-elements 2.15.1 → 2.15.3
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.html +2 -3
- package/demo/index.js +63 -47
- package/demo/index.min.js +62 -46
- package/demo/index.min.js.map +1 -1
- package/dist/elements/Address/AddressElement.js +6 -6
- package/dist/elements/Address/AddressElement.js.map +1 -1
- package/dist/elements/BankField/BankFieldElement.js +4 -4
- package/dist/elements/BankField/BankFieldElement.js.map +1 -1
- package/dist/elements/CPRElement/CPRElement.js +1 -1
- package/dist/elements/CVRElement/CVRElement.js +1 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.d.ts +1 -0
- package/dist/elements/CheckBoxElement/CheckBoxElement.js +15 -7
- package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +1 -1
- package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js +1 -1
- package/dist/elements/DateField/DateFieldElement.js +1 -1
- package/dist/elements/DropDownList/DropDownListElement.js +1 -1
- package/dist/elements/EmailField/EmailFieldElement.js +1 -1
- package/dist/elements/FileField/FileFieldElement.js +1 -1
- package/dist/elements/IdentificationElement/IdentificationElement.js +1 -1
- package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js +1 -1
- package/dist/elements/NumericField/NumericFieldElement.js +1 -1
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.d.ts +1 -0
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +15 -7
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
- package/dist/elements/ResidentIdentification/ResidentIdentificationElement.js +6 -6
- package/dist/elements/ResidentIdentification/ResidentIdentificationElement.js.map +1 -1
- package/dist/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.js +1 -1
- package/dist/elements/SEPersonalNumberElement/SEPersonalNumberElement.js +1 -1
- package/dist/elements/TextAreaElement/TextAreaElement.js +1 -1
- package/dist/elements/TextField/TextFieldElement.js +1 -1
- package/dist/elements/TypeAhead/TypeAheadElement.js +1 -1
- package/package.json +1 -1
- package/src/elements/Address/AddressElement.ts +9 -9
- package/src/elements/BankField/BankFieldElement.ts +5 -5
- package/src/elements/CPRElement/CPRElement.ts +1 -1
- package/src/elements/CVRElement/CVRElement.ts +1 -1
- package/src/elements/CheckBoxElement/CheckBoxElement.ts +19 -12
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +1 -1
- package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +1 -1
- package/src/elements/DateField/DateFieldElement.ts +1 -1
- package/src/elements/DropDownList/DropDownListElement.ts +1 -1
- package/src/elements/EmailField/EmailFieldElement.ts +1 -1
- package/src/elements/FileField/FileFieldElement.ts +1 -1
- package/src/elements/IdentificationElement/IdentificationElement.ts +1 -1
- package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts +1 -1
- package/src/elements/NumericField/NumericFieldElement.ts +1 -1
- package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +19 -12
- package/src/elements/ResidentIdentification/ResidentIdentificationElement.ts +9 -9
- package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts +1 -1
- package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts +1 -1
- package/src/elements/TextAreaElement/TextAreaElement.ts +1 -1
- package/src/elements/TextField/TextFieldElement.ts +1 -1
- package/src/elements/TypeAhead/TypeAheadElement.ts +1 -1
package/demo/index.min.js
CHANGED
|
@@ -3534,10 +3534,10 @@ var AddressElement = /** @class */ (function (_super) {
|
|
|
3534
3534
|
});
|
|
3535
3535
|
};
|
|
3536
3536
|
AddressElement.prototype.initChildInputs = function () {
|
|
3537
|
-
this.address = _super.prototype.getChildInput.call(this, '
|
|
3538
|
-
this.city = _super.prototype.getChildInput.call(this, '
|
|
3539
|
-
this.country = _super.prototype.getChildInput.call(this, '
|
|
3540
|
-
this.zip = _super.prototype.getChildInput.call(this, '
|
|
3537
|
+
this.address = _super.prototype.getChildInput.call(this, '.address');
|
|
3538
|
+
this.city = _super.prototype.getChildInput.call(this, '.city');
|
|
3539
|
+
this.country = _super.prototype.getChildInput.call(this, '.country');
|
|
3540
|
+
this.zip = _super.prototype.getChildInput.call(this, '.zip');
|
|
3541
3541
|
var addressChaneDebounce = (0, debouncer_1.default)(this.change.bind(this), 400, false);
|
|
3542
3542
|
this.address.addEventListener('change', function () {
|
|
3543
3543
|
addressChaneDebounce();
|
|
@@ -3656,8 +3656,8 @@ var AddressElement = /** @class */ (function (_super) {
|
|
|
3656
3656
|
AddressElement = __decorate([
|
|
3657
3657
|
(0, custom_element_decorator_1.default)({
|
|
3658
3658
|
selector: 'address-element',
|
|
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' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t\t<input class='address-part' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t\t<input class='address-part' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t\t<input class='address-part' 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 #
|
|
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\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\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
|
})
|
|
@@ -3749,8 +3749,8 @@ var BankFieldElement = /** @class */ (function (_super) {
|
|
|
3749
3749
|
this.regNumber.placeholder = Translator_1.default.Translate('BankElement.RegistrationNumber', language);
|
|
3750
3750
|
};
|
|
3751
3751
|
BankFieldElement.prototype.initChildInputs = function () {
|
|
3752
|
-
this.account = _super.prototype.getChildInput.call(this, '
|
|
3753
|
-
this.regNumber = _super.prototype.getChildInput.call(this, '
|
|
3752
|
+
this.account = _super.prototype.getChildInput.call(this, '.account-field');
|
|
3753
|
+
this.regNumber = _super.prototype.getChildInput.call(this, '.reg-number-field');
|
|
3754
3754
|
this.account.addEventListener('change', this.change.bind(this));
|
|
3755
3755
|
this.regNumber.addEventListener('change', this.change.bind(this));
|
|
3756
3756
|
if (this.required) {
|
|
@@ -3790,8 +3790,8 @@ var BankFieldElement = /** @class */ (function (_super) {
|
|
|
3790
3790
|
BankFieldElement = __decorate([
|
|
3791
3791
|
(0, custom_element_decorator_1.default)({
|
|
3792
3792
|
selector: 'bank-element',
|
|
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\" id='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" 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 #
|
|
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\tmargin: 0.125rem;\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",
|
|
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 #
|
|
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 margin: 0.125rem;\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 #
|
|
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 margin: 0.125rem;\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);
|
|
@@ -4041,8 +4041,7 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4041
4041
|
});
|
|
4042
4042
|
CheckBoxElement.prototype.connectedCallback = function () {
|
|
4043
4043
|
_super.prototype.connectedCallback.call(this);
|
|
4044
|
-
|
|
4045
|
-
_super.prototype.addLabel.call(this, firstCheckbox);
|
|
4044
|
+
this.addLegend();
|
|
4046
4045
|
};
|
|
4047
4046
|
CheckBoxElement.prototype.initChildInputs = function () {
|
|
4048
4047
|
var _this = this;
|
|
@@ -4059,14 +4058,23 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4059
4058
|
if (!fieldset) {
|
|
4060
4059
|
fieldset = document.createElement('fieldset');
|
|
4061
4060
|
wrapper.appendChild(fieldset);
|
|
4062
|
-
if (this.label) {
|
|
4063
|
-
fieldset.setAttribute('aria-label', this.label);
|
|
4064
|
-
}
|
|
4065
4061
|
this.options.forEach(function (element, index) {
|
|
4066
4062
|
fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
|
|
4067
4063
|
});
|
|
4068
4064
|
}
|
|
4069
4065
|
};
|
|
4066
|
+
CheckBoxElement.prototype.addLegend = function () {
|
|
4067
|
+
var fieldset = this.shadowRoot.querySelector('fieldset');
|
|
4068
|
+
if (this.label) {
|
|
4069
|
+
fieldset.setAttribute('aria-label', this.label);
|
|
4070
|
+
if (!this.hideLabel) {
|
|
4071
|
+
var legend = document.createElement('legend');
|
|
4072
|
+
legend.textContent = this.label;
|
|
4073
|
+
legend.classList.add('field-label');
|
|
4074
|
+
fieldset.insertAdjacentElement('afterbegin', legend);
|
|
4075
|
+
}
|
|
4076
|
+
}
|
|
4077
|
+
};
|
|
4070
4078
|
// events
|
|
4071
4079
|
CheckBoxElement.prototype.change = function ($event) {
|
|
4072
4080
|
this.touched = true;
|
|
@@ -4086,8 +4094,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4086
4094
|
CheckBoxElement = __decorate([
|
|
4087
4095
|
(0, custom_element_decorator_1.default)({
|
|
4088
4096
|
selector: 'checkbox-element',
|
|
4089
|
-
template: "\n\t\t<div class=\"
|
|
4090
|
-
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor:
|
|
4097
|
+
template: "\n\t\t<div class=\"wrapper\">\n\t\t</div>",
|
|
4098
|
+
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: #27282D;\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: .1rem solid #5A616D;\n\t\t\t\tborder-radius: .25rem;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\tinput[type='checkbox']::placeholder {\n\t\t\t\tcolor: rgb(117, 117, 117);\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\t.field-label {\n\t\t\t\tcolor: #27282d;\n\t\t\t\tfont-size: .75rem;\n\t\t\t\tfont-weight: 600;\n\t\t\t\tword-wrap: break-word;\n\t\t\t}\n\t\t\t.field-input {\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmin-height: 1.438rem;\n\t\t\t}\n\t\t",
|
|
4091
4099
|
useShadow: true,
|
|
4092
4100
|
})
|
|
4093
4101
|
], CheckBoxElement);
|
|
@@ -5043,7 +5051,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5043
5051
|
(0, custom_element_decorator_1.default)({
|
|
5044
5052
|
selector: 'custom-format-date-element',
|
|
5045
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>",
|
|
5046
|
-
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 #
|
|
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\tmargin: 0.125rem;\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",
|
|
5047
5055
|
useShadow: true,
|
|
5048
5056
|
})
|
|
5049
5057
|
], CustomFormatDateFieldElement);
|
|
@@ -5140,7 +5148,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
|
|
|
5140
5148
|
(0, custom_element_decorator_1.default)({
|
|
5141
5149
|
selector: 'regex-element',
|
|
5142
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>",
|
|
5143
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
5144
5152
|
useShadow: true,
|
|
5145
5153
|
})
|
|
5146
5154
|
], CustomRegularExpressionElement);
|
|
@@ -5234,7 +5242,7 @@ var DateFieldElement = /** @class */ (function (_super) {
|
|
|
5234
5242
|
(0, custom_element_decorator_1.default)({
|
|
5235
5243
|
selector: 'date-element',
|
|
5236
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>",
|
|
5237
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
5238
5246
|
useShadow: true,
|
|
5239
5247
|
})
|
|
5240
5248
|
], DateFieldElement);
|
|
@@ -5345,7 +5353,7 @@ var DropDownListElement = /** @class */ (function (_super) {
|
|
|
5345
5353
|
(0, custom_element_decorator_1.default)({
|
|
5346
5354
|
selector: 'drop-down-element',
|
|
5347
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>",
|
|
5348
|
-
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 #
|
|
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\tmargin: 0.125rem;\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",
|
|
5349
5357
|
useShadow: true,
|
|
5350
5358
|
})
|
|
5351
5359
|
], DropDownListElement);
|
|
@@ -5487,7 +5495,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
|
|
|
5487
5495
|
(0, custom_element_decorator_1.default)({
|
|
5488
5496
|
selector: 'email-element',
|
|
5489
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>",
|
|
5490
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
5491
5499
|
useShadow: true,
|
|
5492
5500
|
})
|
|
5493
5501
|
], EmailFieldElement);
|
|
@@ -5820,7 +5828,7 @@ var FileFieldElement = /** @class */ (function (_super) {
|
|
|
5820
5828
|
(0, custom_element_decorator_1.default)({
|
|
5821
5829
|
selector: 'file-element',
|
|
5822
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>",
|
|
5823
|
-
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 #
|
|
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 border: .1rem solid #5A616D;\n border-radius: .25rem;\n margin: 0.125rem;\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",
|
|
5824
5832
|
useShadow: true,
|
|
5825
5833
|
})
|
|
5826
5834
|
], FileFieldElement);
|
|
@@ -5920,7 +5928,7 @@ var IdentificationElement = /** @class */ (function (_super) {
|
|
|
5920
5928
|
(0, custom_element_decorator_1.default)({
|
|
5921
5929
|
selector: 'id-element',
|
|
5922
5930
|
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='id-type'>\n <option value='cvr'>Danish CVR</option>\n <option value='cpr'>Danish CPR</option>\n <option value='swe'>Sweden Bank Id</option>\n <option value='nor'>Norway Bank Id</option>\n </select>\n\t\t\t\t<input type=\"text\" id='id-field' placeholder=''/>\n\t\t\t</div>\n\t\t</div>",
|
|
5923
|
-
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput, select{\n box-sizing: border-box;\n border: .1rem solid #
|
|
5931
|
+
style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput, select{\n box-sizing: border-box;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n margin: 0.125rem;\n resize: none;\n \t}\n \tinput{\n width: 75% !important;\n \t}\n \tselect{\n width: 25% !important;\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",
|
|
5924
5932
|
useShadow: true,
|
|
5925
5933
|
})
|
|
5926
5934
|
], IdentificationElement);
|
|
@@ -6072,7 +6080,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
|
|
|
6072
6080
|
(0, custom_element_decorator_1.default)({
|
|
6073
6081
|
selector: 'int-phone-element',
|
|
6074
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>",
|
|
6075
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
6076
6084
|
useShadow: true,
|
|
6077
6085
|
})
|
|
6078
6086
|
], IntPhoneFieldElement);
|
|
@@ -6175,7 +6183,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
|
|
|
6175
6183
|
(0, custom_element_decorator_1.default)({
|
|
6176
6184
|
selector: 'numeric-element',
|
|
6177
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>",
|
|
6178
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
6179
6187
|
useShadow: true,
|
|
6180
6188
|
})
|
|
6181
6189
|
], NumericFieldElement);
|
|
@@ -6246,8 +6254,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6246
6254
|
});
|
|
6247
6255
|
RadioButtonGroupElement.prototype.connectedCallback = function () {
|
|
6248
6256
|
_super.prototype.connectedCallback.call(this);
|
|
6249
|
-
|
|
6250
|
-
_super.prototype.addLabel.call(this, firstRadioButton);
|
|
6257
|
+
this.addLegend();
|
|
6251
6258
|
};
|
|
6252
6259
|
RadioButtonGroupElement.prototype.initChildInputs = function () {
|
|
6253
6260
|
var _this = this;
|
|
@@ -6267,14 +6274,23 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6267
6274
|
if (!fieldset) {
|
|
6268
6275
|
fieldset = document.createElement('fieldset');
|
|
6269
6276
|
wrapper.appendChild(fieldset);
|
|
6270
|
-
if (this.label) {
|
|
6271
|
-
fieldset.setAttribute('aria-label', this.label);
|
|
6272
|
-
}
|
|
6273
6277
|
this.options.forEach(function (element, index) {
|
|
6274
6278
|
fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
|
|
6275
6279
|
});
|
|
6276
6280
|
}
|
|
6277
6281
|
};
|
|
6282
|
+
RadioButtonGroupElement.prototype.addLegend = function () {
|
|
6283
|
+
var fieldset = this.shadowRoot.querySelector('fieldset');
|
|
6284
|
+
if (this.label) {
|
|
6285
|
+
fieldset.setAttribute('aria-label', this.label);
|
|
6286
|
+
if (!this.hideLabel) {
|
|
6287
|
+
var legend = document.createElement('legend');
|
|
6288
|
+
legend.textContent = this.label;
|
|
6289
|
+
legend.classList.add('field-label');
|
|
6290
|
+
fieldset.insertAdjacentElement('afterbegin', legend);
|
|
6291
|
+
}
|
|
6292
|
+
}
|
|
6293
|
+
};
|
|
6278
6294
|
// events
|
|
6279
6295
|
RadioButtonGroupElement.prototype.change = function ($event) {
|
|
6280
6296
|
this.touched = true;
|
|
@@ -6287,8 +6303,8 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6287
6303
|
RadioButtonGroupElement = __decorate([
|
|
6288
6304
|
(0, custom_element_decorator_1.default)({
|
|
6289
6305
|
selector: 'radio-group-element',
|
|
6290
|
-
template: "\n\t\t<div class=\"
|
|
6291
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tcolor:
|
|
6306
|
+
template: "\n\t\t<div class=\"wrapper\">\n\t\t</div>",
|
|
6307
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tcolor: #27282D;\n\t\t\tfont-size: 0.813rem;\n\t\t\tmargin-top: 0.25rem;\n\t\t}\n\t\t.radio-button:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: auto !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.2rem;\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\tfieldset {\n\t\t\tborder: none;\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",
|
|
6292
6308
|
useShadow: true,
|
|
6293
6309
|
})
|
|
6294
6310
|
], RadioButtonGroupElement);
|
|
@@ -6373,10 +6389,10 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
|
|
|
6373
6389
|
});
|
|
6374
6390
|
};
|
|
6375
6391
|
ResidentIdentificationElement.prototype.initChildInputs = function () {
|
|
6376
|
-
this.company = _super.prototype.getChildInput.call(this, '
|
|
6377
|
-
this.property = _super.prototype.getChildInput.call(this, '
|
|
6378
|
-
this.tenancy = _super.prototype.getChildInput.call(this, '
|
|
6379
|
-
this.tenant = _super.prototype.getChildInput.call(this, '
|
|
6392
|
+
this.company = _super.prototype.getChildInput.call(this, '.company');
|
|
6393
|
+
this.property = _super.prototype.getChildInput.call(this, '.property');
|
|
6394
|
+
this.tenancy = _super.prototype.getChildInput.call(this, '.tenancy');
|
|
6395
|
+
this.tenant = _super.prototype.getChildInput.call(this, '.tenant');
|
|
6380
6396
|
this.company.addEventListener('change', this.change.bind(this));
|
|
6381
6397
|
this.property.addEventListener('change', this.change.bind(this));
|
|
6382
6398
|
this.tenancy.addEventListener('change', this.change.bind(this));
|
|
@@ -6432,8 +6448,8 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
|
|
|
6432
6448
|
ResidentIdentificationElement = __decorate([
|
|
6433
6449
|
(0, custom_element_decorator_1.default)({
|
|
6434
6450
|
selector: 'resident-identification-element',
|
|
6435
|
-
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' id='company' type=\"text\" placeholder='Company'/>\n\t\t\t\t<input class='field-part' id='property' type=\"text\" placeholder='Property'/>\n\t\t\t\t<input class='field-part' id='tenancy' type=\"text\" placeholder='Tenancy'/>\n\t\t\t\t<input class='field-part' id='tenant' type=\"text\" placeholder='Tenant'/>\n\t\t\t</div>\n\t\t</div>",
|
|
6436
|
-
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 #
|
|
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\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\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",
|
|
6437
6453
|
templatePath: './html.html',
|
|
6438
6454
|
useShadow: true,
|
|
6439
6455
|
})
|
|
@@ -6525,7 +6541,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
|
|
|
6525
6541
|
(0, custom_element_decorator_1.default)({
|
|
6526
6542
|
selector: 'se-company-registration-element',
|
|
6527
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>",
|
|
6528
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
6529
6545
|
useShadow: true,
|
|
6530
6546
|
})
|
|
6531
6547
|
], SECompanyRegistrationElement);
|
|
@@ -6616,7 +6632,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
|
|
|
6616
6632
|
(0, custom_element_decorator_1.default)({
|
|
6617
6633
|
selector: 'se-personal-number-element',
|
|
6618
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>",
|
|
6619
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
6620
6636
|
useShadow: true,
|
|
6621
6637
|
})
|
|
6622
6638
|
], SEPersonalNumberElement);
|
|
@@ -6707,7 +6723,7 @@ var TextAreaElement = /** @class */ (function (_super) {
|
|
|
6707
6723
|
(0, custom_element_decorator_1.default)({
|
|
6708
6724
|
selector: 'text-area-element',
|
|
6709
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>",
|
|
6710
|
-
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 #
|
|
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 margin: 0.125rem;\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",
|
|
6711
6727
|
useShadow: true,
|
|
6712
6728
|
})
|
|
6713
6729
|
], TextAreaElement);
|
|
@@ -6798,7 +6814,7 @@ var TextFieldElement = /** @class */ (function (_super) {
|
|
|
6798
6814
|
(0, custom_element_decorator_1.default)({
|
|
6799
6815
|
selector: 'text-element',
|
|
6800
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",
|
|
6801
|
-
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 #
|
|
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\tmargin: 0.125rem;\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",
|
|
6802
6818
|
useShadow: true,
|
|
6803
6819
|
})
|
|
6804
6820
|
], TextFieldElement);
|
|
@@ -7036,7 +7052,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
7036
7052
|
(0, custom_element_decorator_1.default)({
|
|
7037
7053
|
selector: 'type-ahead-element',
|
|
7038
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>",
|
|
7039
|
-
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 #
|
|
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\tmargin: 0.125rem;\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",
|
|
7040
7056
|
useShadow: true,
|
|
7041
7057
|
})
|
|
7042
7058
|
], TypeAheadElement);
|